停车列表支付方式

pages/center/order/orderDetails/orderDetails.vue

@@ -21,19 +21,30 @@
 		<view class="bottom-btn-wrap" v-if="orderInfo.payStatus!=1">
 			<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
 		</view>
-		
+		<!-- 支付方式 -->
+		<PaymentMethod
+			:payWayPop="payWayPop"
+			:curOrderList="orderList"
+			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
 		<u-toast ref="uToast" />
 	</view>
 </template>
 
 <script>
 	import getUrlParams from "../../../../utils/getUrlParams.js";
+	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
 	export default{
+		components: {
+			PaymentMethod
+		},
 		data(){
 			return{
-				orderId:null,
-				orderInfo:[],
-				
+				orderId: null,
+				orderInfo: [],
+				// 立即支付弹框
+				payWayPop: false,
+				// 订单列表,一般长度为1的数组
+				orderList: []
 			}
 		},
 		onLoad(){
@@ -63,25 +74,33 @@
 				
 			},
 			goPay(orderId){
-				let orderList=[];
-				orderList.push(orderId);
-				this.$u.api.payGzbank({orderList: orderList}).then(res=>{
-					let payUrl = res.data.url;
-					window.open(payUrl);
-				}).catch(err=>{
-					this.$refs.uToast.show({
-						title: err.msg,
-						type: 'error',
-					});
-				});
+				this.orderList = []
+				this.orderList.push(orderId)
+				this.payWayPop = true
+				// let orderList=[];
+				// orderList.push(orderId);
+				// this.$u.api.payGzbank({orderList: orderList}).then(res=>{
+				// 	let payUrl = res.data.url;
+				// 	window.open(payUrl);
+				// }).catch(err=>{
+				// 	this.$refs.uToast.show({
+				// 		title: err.msg,
+				// 		type: 'error',
+				// 	});
+				// });
 				// this.$u.route({
 				// 	url: 'pages/payPage/payPage',
 				// 	params: {
 				// 		orderId: orderId
 				// 	}
 				// });
-			},	
-			
+			},
+			/**
+			 * 关闭支付方式弹框
+			 * */
+			closePaymentMethod() {
+				this.payWayPop = false
+			}
 			
 		},
 		filters:{

pages/handleMonthly/handleMonthly.vue

@@ -68,12 +68,10 @@
 			}
 		},
 		onLoad (page) {
-			let locationLocaturl = window.location.hash;
-			// this.roadNo = this.$u.queryParams(page).slice();
-			this.roadNo = getUrlParams(locationLocaturl,"roadNo");
-			this.getMonthInfo(this.roadNo);
-			// this.form.dateRange=this.getMonthRange(this.lastActiveDate,1)
-			// this.getCarsLicenseList();
+			if (page.roadNo) {
+				this.roadNo = page.roadNo;
+				this.getMonthInfo(this.roadNo);
+			}
 			
 		},
 		mounted(){

pages/index/index.vue

@@ -211,7 +211,7 @@
 		// },
 		data() {
 			return {
-				city: '贵阳市',
+				city: '普定县',
 				keyword:'',
 				bannerList:[
 					{image: '/static/img/index-banner01.png',title: ''}
@@ -250,7 +250,8 @@
 		},
 		onShow() {
 			this.handleGetIndexData();
-			this.getLocation();
+			// this.getLocation();
+			// this.getCityNameByLonLat({latitude: 26.301447, longitude: 105.743197})
 			let locationLocaturl = window.location.search;
 			this.code = getUrlParams(locationLocaturl,"code");
 			if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
@@ -265,14 +266,15 @@
 						that.latLongItude = {latitude: res.latitude,longitude:res.longitude};
 						that.latitude = res.latitude;
 						that.longitude = res.longitude;
-						that.loAcquire(that.latLongItude)
+						// that.getCityNameByLonLat(that.latLongItude)
 					},
 					fail: () => {
 						console.log("获取经纬度失败");
 					}
 				})
 			},
-			loAcquire({longitude,latitude} = {}){
+			// 通过经纬度获取地区详细信息
+			getCityNameByLonLat({longitude,latitude} = {}){
 				let that = this;
 				uni.showLoading({
 				    title: '加载中',
@@ -308,12 +310,8 @@
 			},
 			handleSearch(){
 				console.log('this.keyword',this.keyword);
-				this.$u.route({
-					url:'pages/parkingLists/parkingLists',
-					type:'tab',
-					params: {
-						keyword: this.keyword
-					}
+				uni.reLaunch({
+				    url: `/pages/parkingLists/parkingLists?keyword=${this.keyword}`
 				})
 			},
 			handleCitySelect(){
@@ -351,37 +349,12 @@
 					console.log('getIndexData err',err)
 				});
 			},
+			// 去支付,选择支付方式
 			goPay(orderId){
 				this.payWayPop = true
 				this.curOrderList = []
 				this.curOrderList.push(orderId)
-				// let orderList=[];
-				// orderList.push(orderId);
-				// this.$u.api.payGzbank({orderList: orderList}).then(res=>{
-				// 	let payUrl = res.data.url;
-				// 	this.currentPayUrl=encodeURIComponent(res.data.url);
-				// 	// return;
-				// 	this.$u.route({
-				// 		url: 'pages/payLists/pay',
-				// 		params: {
-				// 			currentPayUrl:this.currentPayUrl
-				// 		}
-				// 	});
-				// }).catch(err=>{
-				// 	this.$refs.uToast.show({
-				// 		title: err.msg,
-				// 		type: 'error',
-				// 	});
-				// });
-				
-				// // this.$u.route({
-				// // 	url: 'pages/payPage/payPage',
-				// // 	params: {
-				// // 		orderId: orderId
-				// // 	}
-				// // });
 			},			
-			//
 			onRoadInfo(item){
 				this.$u.api.roadInfoById({id:item.roadId})
 				.then(res=>{

pages/parkingInformation/parkingInformation.vue

@@ -73,10 +73,13 @@
 			  * 导航 
 			  * */
 			navigation (lat, lon) {
-				uni.openLocation({
-					latitude: parseFloat(lat),
-					longitude: parseFloat(lon),
-					scale: 18
+				// uni.openLocation({
+				// 	latitude: parseFloat(lat),
+				// 	longitude: parseFloat(lon),
+				// 	scale: 18
+				// })
+				uni.navigateTo({
+				  url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+lat+','+lon+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
 				})
 			},
 			

pages/parkingLists/parkingLists.vue

@@ -1,15 +1,32 @@
 <template>
 	<view class="parking">
 		<view class="loading" v-show="loading">
-			<!-- <u-loading size="36" mode="flower"></u-loading> -->
 			<u-loadmore status="loading" icon-type="flower" :load-text="{loading: '正在定位中...',}" />
 		</view>
 		<view class="parking-header">
-			<u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"></u-search>
-			<u-icon v-if="!searchContent&&isShowSearchParking==false" class="icon" name="list" size="44" color="#ffffff"
-			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="listIconClick"></u-icon>
-			<u-icon v-if="searchContent||isShowSearchParking==true" class="icon" name="close" size="36" color="#ffffff"
-			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput"></u-icon>
+			<u-search
+			placeholder="搜索停车场"
+			v-model="searchContent"
+			:show-action="false"
+			@change="searchInputChange"></u-search>
+			<u-icon
+			v-if="!searchContent&&isShowSearchParking==false"
+			class="icon"
+			name="list"
+			size="44"
+			color="#ffffff"
+			placeholder-color="#B5B5B5"
+			search-icon-color="#B3B3B3"
+			@click="listIconClick"></u-icon>
+			<u-icon
+			v-if="searchContent||isShowSearchParking==true"
+			class="icon"
+			name="close"
+			size="36"
+			color="#ffffff"
+			placeholder-color="#B5B5B5"
+			search-icon-color="#B3B3B3"
+			@click="clearSearchInput"></u-icon>
 		</view>
 		<view class="parking-map">
 			<map
@@ -24,9 +41,14 @@
 				:scale="scale"
 				:markers="covers"></map>
 		</view>
-		<!-- <u-empty src="/static/img/empty.png" icon-size="335" text="正在建设中" color="#878787" mode="search"></u-empty> -->
 		<view class="parking-current-address" v-if="nearParkingFlag">
-			<swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :autoplay="false" previous-margin="30rpx" next-margin="30rpx" @change="swiperChange">
+			<swiper class="swiper"
+			:current="swiperCurrent"
+			:indicator-dots="false"
+			:autoplay="false"
+			previous-margin="30rpx"
+			next-margin="30rpx"
+			@change="swiperChange">
 				<swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
 					<view class="swiper-item">
 						<view @click="clickSearchParking(item)">{{item.roadName}}</view>
@@ -47,7 +69,11 @@
 						</view>
 						<view class="swiper-item-button">
 							<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
-							<button type="default" :disabled="!item.monthAmount" :class="{'disabled': !item.monthAmount}" @click="createMonth(item)">办理包月</button>
+							<button
+							type="default"
+							:disabled="!item.monthAmount"
+							:class="{'disabled': !item.monthAmount}"
+							@click="createMonth(item)">办理包月</button>
 						</view>
 						<view @click="lookParkingRule(item)">
 							<text>点击查看停车规则</text>
@@ -58,50 +84,24 @@
 			</swiper>
 		</view>
 		<view class="parking-address-list" v-if="isShowSearchParking">
-			<view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'" @click="clickSearchParking(item)">
+			<view
+			class="parking-address-list-item"
+			v-for="(item, index) in searchParkingList"
+			:key="index + 's'"
+			@click="clickSearchParking(item)">
 				<view class="pali-left">
 					<view>{{item.roadName}}</view>
 					<view>{{item.areaName}}</view>
 				</view>
 				<view class="pali-right">
-					<image src="../../static/img/distance-icon.png" mode=""  @click.stop="navigation(item.latitude, item.longitude)"></image>
+					<image
+					src="../../static/img/distance-icon.png"
+					mode="" 
+					@click.stop="navigation(item.latitude, item.longitude)"></image>
 					<view>路线</view>
 				</view>
 			</view>
 		</view>
-		<!-- <view class="parking-address-details" v-if="isShowParkingDetail">
-			<view class="parking-address-details-title">
-				<view class="padt-header">
-					<view class="padt-header-title">
-						<view>{{parkingDetailData.roadName}}</view>
-						<view>{{parkingDetailData.areaName}}</view>
-					</view>
-					<view class="padt-header-icon">
-						<image src="../../static/img/distance-icon.png" mode=""></image>
-						<view>{{parkingDetailData.distance}}m</view>
-					</view>
-				</view>
-				<view class="padt-timeline">服务时间<text>{{parkingDetailData.workBeginTime.substring(0, 5)}}-{{parkingDetailData.workEndTime.substring(0, 5)}}</text></view>
-			</view>
-			<view class="parking-address-details-numer">
-				<view>
-					<view></view>
-					<view>共有车位</view>
-				</view>
-				<view>
-					<view>{{parkingDetailData.spaceIdle}}</view>
-					<view>空闲车位</view>
-				</view>
-			</view>
-			<view class="parking-address-details-price">
-				<view>
-					<text></text>
-					<text>元/小时  包月费用：300元</text>
-				</view>
-				<view @click="lookParkingRule(parkingDetailData)">点击查看停车规则</view>
-			</view>
-			<view class="parking-address-details-button">办理包月</view>
-		</view> -->
 		<u-toast ref="uToast" />
 	</view>
 </template>
@@ -137,13 +137,18 @@
 				parkingDetailData: {}
 			}
 		},
-		onLoad(){
+		onLoad(page){
+			console.log(page)
 			this.getLocation()
+			if (page.keyword) {
+				this.searchContent = page.keyword
+				this.searchInputChange(page.keyword)
+			}
 		},
-		onShow() {
-			this.isShowSearchParking = false
-			this.isShowParkingDetail = false
-		},
+		// onShow() {
+		// 	this.isShowSearchParking = false
+		// 	this.isShowParkingDetail = false
+		// },
 		methods:{
 			/* 
 			 * 查询输入框发生变化

pages/payLists/payLists.vue

@@ -266,7 +266,7 @@
 				this.currentItem = []
 				this.payList.forEach(item => {
 					console.log(item)
-					if (item.orderStatus !== 2 && item.payStatus !== 1 ) {
+					if (item.orderStatus !== 4 && item.payStatus !== 1 ) {
 						price += item.payAmount
 						orderNum ++
 						this.currentItem.push(item.orderId)

pages/paymentMethod/paymentMethod.scss

@@ -0,0 +1,25 @@
+.pay-way {
+	display: flex;
+	justify-content: space-between;
+	width: calc(100% - 34rpx);
+	border-top: solid 1px #979797;
+	margin: 23rpx auto;
+	padding: 38rpx 86rpx;
+	.pay-way-item {
+		text-align: center;
+		font-size: 30rpx;
+		color: #5F5F5F;
+		image {
+			width: 143rpx;
+			height: 143rpx;
+		}
+	}
+}
+.pay-way-close-btn {
+	width: calc(100% - 34rpx);
+	margin: 0 auto 68rpx;
+	border: none;
+	background-color: #3397FA;
+	color: #fff;
+	border-radius: 10rpx;
+}

pages/paymentMethod/paymentMethod.vue

@@ -0,0 +1,179 @@
+<template>
+	<!-- 
+		支付方式选择  微信or支付宝
+	 -->
+	<view>
+		<!-- 缴费方式-->
+		<u-modal
+		v-model="payWayPop"
+		:title-style="{color: '#404040'}"
+		title="缴费方式"
+		:show-confirm-button="false"
+		:show-cancel-button="false">
+			<view class="slot-content">
+				<view class="pay-way">
+					<view class="pay-way-item" @click="gyBankPay">
+						<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
+						<view>贵州银行</view>
+					</view>
+					<view class="pay-way-item" @click="wechatPay">
+						<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
+						<view>微信支付</view>
+					</view>
+				</view>
+				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
+			</view>
+		</u-modal>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import getUrlParams from "@/utils/getUrlParams.js";
+	export default {
+		props: {
+			// 弹框显示
+			payWayPop: {
+				type: Boolean,
+				default: false
+			},
+			// 订单数组
+			curOrderList: {
+				type: Array,
+				default: null
+			},
+			// 设备编号
+			deviceNo: {
+				type: String,
+				default: null
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			/**
+			 * 贵阳银行支付
+			 * @param {Array} orderList 需要支付的订单号组成的数组
+			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
+			 * */
+			gyBankPay() {
+				const params = {
+					orderList: this.curOrderList,
+					deviceNo: this.deviceNo
+				};
+				this.$u.api.payGzbank(params).then(res=>{
+					let payUrl = res.data.url;
+					const currentPayUrl = encodeURIComponent(res.data.url);
+					this.$u.route({
+						url: 'pages/payLists/pay',
+						params: {
+							currentPayUrl: currentPayUrl
+						}
+					});
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				});
+			},
+			/**
+			 * 微信支付
+			 * 判断vuex中是否存在openId
+			 * 存在直接调起微信支付
+			 * 不存在则通过微信登录去获取用户的code
+			 * 完成后通过code去获取用户的openId等信息
+			 * 最后再调起微信支付
+			 * */
+			wechatPay() {
+				const openId = this.$store.state.vuex_wxinfo.openId
+				if (openId) {
+					this.getWXPay(this.curOrderList, this.deviceNo)
+				} else {
+					this.getCode()
+				}
+			},
+			/**
+			 * 调起微信支付接口
+			 * @param {Array} list 需要支付的订单组合数组
+			 * */
+			async getWXPay(orderList, deviceNo){
+				let params = {
+					orderList: orderList,
+					openid: this.$store.state.vuex_wxinfo.openId,
+					deviceNo: deviceNo ? deviceNo : null
+				};
+				await this.$wxApi.config();
+				this.$pay.wechatPay(params).then(res =>{
+					if(res.code == 0){
+						// 成功
+						this.$u.route({
+							url:'/',
+						});
+					}else if (res.code == 1){
+						// 取消
+						// uni.redirectTo({
+						// 	url: '/pages/userCenter/myOrder/myOrder'
+						// })
+					}else if (res.code == 2){
+						this.$refs.uToast.show({
+							title: '支付失败，请检查!',
+							type: 'error',
+						});
+					}
+				});
+			},
+			/**
+			 * 获取code
+			 * 1 微信登录获取code
+			 * 2 url中截取
+			 * */
+			getCode () {
+				// 获取页面完整url
+				const local = window.location.href
+				// 获取url后面的参数
+				const locationLocaturl = window.location.search;
+				// 截取url中的code
+				this.code = getUrlParams(locationLocaturl, "code");
+				// 如果没有code，则去请求
+				if (this.code == null || this.code === '') {
+					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
+				} else {
+					// 把code传给后台获取用户信息
+					this.handleGetWXInfo(this.code)
+				}
+			},
+			/**
+			 * 通过code获取openId等用户信息
+			 * 拿到用户信息后再调起微信支付
+			 * */
+			handleGetWXInfo (code) {
+				let _this = this
+				this.$u.api.getWXInfo(code).then((res) => {
+					if (res.code === 200 ) {
+						this.$u.vuex('vuex_wxinfo', res.data);
+						this.getWXPay(this.currentItem)
+					}
+				}).catch((err) => {
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				})
+			},
+			/**
+			 * 关闭弹框
+			 * */
+			closePaymentMethod() {
+				this.$emit('closePaymentMethod')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './paymentMethod.scss'
+</style>

pay.js

@@ -37,7 +37,7 @@ export default {
 		return new Promise(r => {
 			$http.post("/pay/wechat",obj)
 				.then(res=>{
-					if (res.needPay) {
+					if (res.data.needPay) {
 						//#ifdef H5
 						$wxApi.JSAPI(res.data.wx).then(r);
 						//#endif