同步一期代码

.gitignore

@@ -14,3 +14,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 /unpackage/
+/node_modules
+/package-lock.json

common/apiurl.js

@@ -110,7 +110,9 @@ const apiurl = {
 	// 出场聚合支付
 	polyPayExportUrl: '/client/payment/parking/gzbank/poly',
 	// 获取数据字典接口
-	getDictUrl: '/admin/dict/data/type/'
+	getDictUrl: '/admin/dict/data/type/',
+  // 微信支付
+	wechatPayUrl: '/client/pay/wechat'
 }
 
 export {

common/http.api.js

@@ -100,7 +100,8 @@ const install = (Vue, vm) => {
 	let getOrderStateExportApi = (params = {}) => vm.$u.post(apiurl.getOrderStateExportUrl, params)
 	let quickPayExportApi = (params = {}) => vm.$u.post(apiurl.quickPayExportUrl, params)
 	let polyPayExportApi = (params = {}) => vm.$u.post(apiurl.polyPayExportUrl, params)
-	let getDictApi = (params = {}) => vm.$u.get(apiurl.getDictUrl + params.type)
+	let getDictApi = (params = {}) => vm.$u.get(apiurl.getDictUrl + params.type);
+  let wechatPayApi = (params = {}) => vm.$u.post(apiurl.wechatPayUrl, params);
 
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
@@ -155,7 +156,8 @@ const install = (Vue, vm) => {
 		polyPayExportApi,
 		getRoomParkingApi,
 		getRoomOrderDetail,
-		getDictApi
+		getDictApi,
+    wechatPayApi
 	};
 }
 

pages/payPage/payPage.scss

@@ -0,0 +1,98 @@
+.order-info{
+	margin-top: 50rpx;
+	margin-bottom: 75rpx;
+	.order-info-top{
+		position: relative;
+		border-top-left-radius: 20rpx;
+		border-top-right-radius: 20rpx;
+		color: #fff;
+		padding: 35rpx 40rpx;
+		background: linear-gradient(135deg, #00BFFF 0%, #008DFF 100%);
+		.addr{
+			margin-bottom: 16rpx;
+			.addr-text{
+				margin-left: 17rpx;
+				font-size: 24rpx;
+				font-weight: 400;
+			}
+		}
+		.car{
+			.car-no{
+				font-size: 40rpx;
+				font-weight: 500;
+				color: #FFFFFF;
+				letter-spacing: 1px;
+				line-height: 56rpx;
+				margin-right: 13rpx;
+			}
+			.car-type{
+				font-size: 24rpx;
+			}
+		}
+		.time{
+			font-size: 22rpx;
+			font-weight: 400;
+			color: #CDECFF;
+			line-height: 30rpx;
+			margin-bottom: 3rpx;
+		}
+		.duration{
+			margin-top: 17rpx;
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #FFFFFF;
+			line-height: 42rpx;
+			letter-spacing: 1px;
+		}
+		.total-amount{
+			position: absolute;
+			right: 40rpx;
+			bottom: 25rpx;
+			font-size: 60rpx;
+			font-weight: 500;
+			color: #FFFFFF;
+			letter-spacing: 2rpx;
+		}
+	}
+	.order-info-bottom{
+		padding-top: 44rpx;
+		padding-bottom: 56rpx;
+		background: #FFFFFF;
+		border-bottom-left-radius: 20rpx;
+		border-bottom-right-radius: 20rpx;
+		box-shadow: 0px 6rpx 14rpx 0px rgba(200, 200, 200, 0.5);
+		.u-cell{padding-left: 40rpx;padding-right: 40rpx;}
+		/deep/ .u-iconfont{color: #D8D8D8;}
+		.pay-amount{
+			border-top: 1px solid #CACACA;
+			padding-top: 33rpx;
+			padding: 33rpx 40rpx 9rpx;
+			color: #FF751D;
+			.title{
+				font-size: 30rpx;
+				font-weight: 600;
+				color: #FF751D;
+				line-height: 42rpx;
+				letter-spacing: 1px;
+			}
+			.amount{
+				font-size: 36rpx;
+				font-weight: 600;
+				color: #FF8233;
+				line-height: 33rpx;
+				letter-spacing: 1px;
+				.rmb{
+					font-size: 24rpx;
+					margin-right: 5rpx;
+				}
+			}
+		}
+		.tip{
+			font-size: 22rpx;
+			font-weight: 400;
+			color: #999999;
+			line-height: 30rpx;
+			padding: 0 40rpx;
+		}
+	}
+}

pages/payPage/payPage.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="wrap">
+		<view class="order-info">
+			<view class="order-info-top">
+				<view class="addr u-flex">
+					<u-icon name="map-fill" color="#fff" size="28"></u-icon>
+					<view class="addr-text">{{orderInfo.roadName}}</view>
+				</view>
+				<view class="car u-flex">
+					<view class="car-no">{{orderInfo.vehicleNo}}</view>
+					<view class="car-type">临时车</view>
+				</view>
+				<view class="time in-time">进场时间：{{orderInfo.inTime}}</view>
+				<view class="time out-time">进场时间：{{orderInfo.outTime}}</view>
+				<view class="duration">已停放 {{orderInfo.duration}}</view>
+				<view class="total-amount">¥{{orderInfo.totalAmount}}</view>
+			</view>
+			<view class="order-info-bottom">
+				<u-cell-item 
+				center 
+				:border-bottom="false" 
+				:value="orderInfo.preferentialAmount" 
+				:title-style="{color:'#8A8A8A'}"
+				:icon-style="{color:'#D8D8D8'}"
+				title="已优惠"></u-cell-item>
+				<view class="pay-amount u-flex u-row-between">
+					<view class="title">应付金额</view>
+					<view class="amount"><span class="rmb">¥</span>{{orderInfo.payAmount}}</view>
+				</view>
+				<view class="tip">停车费不超过30元，可先离场后在付费</view>
+			</view>
+		</view>
+		<view class="bottom-btn static" @click="handlewxpay">去支付</view>
+		
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import getUrlParams from "../../utils/getUrlParams.js";
+	export default{
+		data(){
+			return{
+				orderId:null,
+				orderInfo:[],
+				
+			}
+		},
+		onLoad(){
+			let locationLocaturl = window.location.hash;
+			this.orderId = getUrlParams(locationLocaturl,"orderId"); // 截取orderId
+			console.log('this.orderId',this.orderId);
+			this.handleGetOrderinfo(this.orderId);
+			
+		},
+		methods:{
+			handleGetOrderinfo(orderId){
+				this.$u.api.getOrderinfo({id:orderId})
+				.then(res=>{
+					// this.$refs.uToast.show({
+					// 	title: res.msg,
+					// 	type: 'success',
+					// });
+					this.orderInfo = res.data;
+					console.log('handleGetOrderinfo',JSON.parse(JSON.stringify(res)));
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+					console.log('handleGetOrderinfo ',err)
+				});
+				
+			},
+			getCode () {
+				var local = window.location.href // 获取页面url
+				let locationLocaturl = window.location.search;
+				this.code = getUrlParams(locationLocaturl,"code"); // 截取code
+				if (this.code == null || this.code === '') { // 如果没有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 {
+					this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
+				}
+			},
+			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
+				let _this = this
+				this.$u.api.getWXInfo(code).then((res) => {
+					if (res.code === 200 ) {
+						this.$u.vuex('vuex_wxinfo',res.data);
+						// 继续支付
+					}
+				}).catch((err) => {
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				})
+			},			
+			handlewxpay(){;
+				if(!this.$store.state.vuex_wxinfo.openId){ // 如果微信openId，则需用code去后台获取
+					this.$refs.uToast.show({
+						title: '请登录后重试!',
+						type: 'info',
+						// url: '/pages/user/index'
+					});
+					this.getCode();
+				} else {
+					// 别的业务逻辑
+					this.getWXPay();
+				}
+			},
+			async getWXPay(id){
+				let params = {
+					orderId:this.orderId,
+					openid:this.$store.state.vuex_wxinfo.openId,
+					tradeType:"test"
+				};
+				await this.$wxApi.config();
+				this.$pay.wxPay(params).then(res =>{
+					console.log('wxPay',res.code);
+					if(res.code == 0){
+						// 成功
+						this.$u.route({
+							url:'pages/index/index',
+							// params: {
+							// 	keyword: this.keyword
+							// }
+						});
+					}else if(res.code == 1){
+						// 取消
+						// uni.redirectTo({
+						// 	url: '/pages/userCenter/myOrder/myOrder'
+						// })
+					}else if(res.code == 2){
+						this.$refs.uToast.show({
+							title: '支付失败，请检查!',
+							type: 'error',
+							// url: '/pages/user/index'
+						});
+					}
+				});
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "./payPage.scss";
+</style>

pages/paymentMethod/paymentMethod.vue

@@ -7,7 +7,7 @@
 			:show-cancel-button="false">
 			<view class="slot-content">
 				<view class="pay-way-new">
-					<view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
+					<!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
 						<image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
 						<view class="title">贵州银行</view>
 						<view class="subtitle">前三个月每天首次一分钱<br />长期八折优惠</view>
@@ -15,8 +15,31 @@
 					<view class="pay-way-item pay-way-item-jh" @click="wechatPay">
 						<image src="../../static/img/juhe-icon.png" mode=""></image>
 						<view class="title">微信/支付宝</view>
+					</view> -->
+					<view class="pay-way-item pay-way-item-hy"
+						@click="$u.debounce(gyBankPay, 1000, (immediate = true))">
+						<image src="/static/img/gyyh-icon.svg" mode=""></image>
+						<view class="title">贵州银行</view>
+					</view>
+					<!-- #ifdef H5 || MP-WEIXIN -->
+					<view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))"
+						v-if="wxEnv">
+						<image src="/static/img/weixin-icon.svg" mode=""></image>
+						<view class="title">微信支付</view>
+					</view>
+					<!-- #endif -->
+					<view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
+						<image src="/static/img/juhe-icon.svg" mode=""></image>
+						<view class="title">聚合支付</view>
 					</view>
 				</view>
+				<view class="pay-way-subtitle">
+					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
+					<!-- #ifdef H5 || MP-WEIXIN -->
+					<view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view>
+					<!-- #endif -->
+					<view class="pay-way-subtitle-item">&nbsp;</view>
+				</view>
 				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
 			</view>
 		</u-modal>
@@ -25,6 +48,10 @@
 </template>
 
 <script>
+	import {
+		getEnvIsWx
+	} from '@/utils/judgEnvironment.js';
+	import $wxPay from '@/utils/wxPay.js';
 	export default {
 		props: {
 			// 弹框显示
@@ -74,7 +101,12 @@
 			}
 		},
 		data() {
-			return {}
+			return {
+				wxEnv: true
+			};
+		},
+		created() {
+			this.wxEnv = getEnvIsWx();
 		},
 		methods: {
 			/**
@@ -83,76 +115,85 @@
 			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
 			 * */
 			gyBankPay() {
-				uni.showLoading({
-					title: '加载中'
-				});
 				const params = {
 					orderList: this.curOrderList,
 					deviceNo: this.deviceNo,
 					jumpUrl: this.jumpUrl,
 					payeeId: this.payeeId,
-					payeeName: this.payeeName,
-					pursueType: this.pursueType,
-					sanPay: this.sanPay
+					payeeName: this.payeeName
 				};
-				console.log(params)
-				if (this.exportFlag == true) {
-					this.$u.api.quickPayExportApi(params).then(res => {
-						if (res.data.needPay) {
-							let payUrl = res.data.url;
-							location.href = payUrl;
-						} else {
-							this.$refs.uToast.show({
-								title: '无需支付',
-								type: 'info',
-							});
-							setTimeout(() => {
-								uni.hideLoading();
-								location.reload()
-							}, 1000)
-						}
-					}).catch(err => {
-						this.$refs.uToast.show({
-							title: err.msg,
-							type: 'error',
-						});
-					});
-				} else {
-					this.$u.api.payGzbank(params).then(res => {
+				this.$u.api
+					.payGzbank(params)
+					.then((res) => {
 						if (res.data.needPay) {
 							let payUrl = res.data.url;
 							location.href = payUrl;
 						} else {
 							this.$refs.uToast.show({
 								title: '无需支付',
-								type: 'info',
+								type: 'info'
 							});
 							setTimeout(() => {
 								uni.hideLoading();
-								location.reload()
-							}, 1000)
+								location.reload();
+							}, 1000);
 						}
-					}).catch(err => {
+					})
+					.catch((err) => {
 						this.$refs.uToast.show({
 							title: err.msg,
-							type: 'error',
+							type: 'error'
 						});
 					});
-				}
 			},
 			/**
-			 * 微信支付
+			 * 聚合支付
 			 * 判断vuex中是否存在openId
 			 * 存在直接调起微信支付
 			 * 不存在则通过微信登录去获取用户的code
 			 * 完成后通过code去获取用户的openId等信息
 			 * 最后再调起微信支付
 			 * */
+			juhePay() {
+				this.getWXPayByJava(this.curOrderList, this.deviceNo);
+			},
+			/**
+			 * 微信支付
+			 */
 			wechatPay() {
-				uni.showLoading({
-					title: '加载中'
-				});
-				this.getWXPayByJava(this.curOrderList, this.deviceNo)
+				this.$u.api
+					.wechatPayApi({
+						orderList: this.curOrderList,
+						openid: this.vuex_wxinfo.openId,
+						deviceNo: this.deviceNo || undefined,
+						payeeId: this.payeeId || undefined,
+						payeeName: this.payeeName || undefined
+					})
+					.then((res) => {
+						if (res.code === 200) {
+							$wxPay.wexinPay(res.data.wx).then((res1) => {
+								switch (Number(res1.code)) {
+									case 0: // 成功
+										//#ifdef H5
+										window.location.reload();
+										//#endif
+										break;
+									case 1: // 取消
+										this.$refs.uToast.show({
+											title: '已取消支付',
+											type: 'info'
+										});
+										break;
+									case 2: // 支付失败
+										this.$refs.uToast.show({
+											title: '支付失败，请检查!',
+											type: 'error'
+										});
+										break;
+								}
+							});
+						}
+					});
 			},
 			/**
 			 * 直接通过后台获取贵阳银行微信支付地址
@@ -166,52 +207,38 @@
 					jumpUrl: this.jumpUrl,
 					deviceNo: deviceNo ? deviceNo : null,
 					payeeId: this.payeeId,
-					payeeName: this.payeeName,
-					pursueType: this.pursueType,
-					sanPay: this.sanPay
+					payeeName: this.payeeName
 				};
-				if (this.exportFlag) {
-					this.$u.api.polyPayExportApi(params)
-						.then(res => {
-							if (res.code === 200) {
-								localStorage.setItem('jumpUrl', this.jumpUrl)
-								location.href = res.data.qrCodeUrl
-							} else {
-								uni.hideLoading();
-							}
-						})
-						.catch(err => {
-							this.$refs.uToast.show({
-								title: '无法调起微信支付!',
-								type: 'error',
-							});
-						})
-				} else {
-					this.$u.api.ordinaryWxPay(params)
-						.then(res => {
-							if (res.code === 200) {
-								localStorage.setItem('jumpUrl', this.jumpUrl)
-								location.href = res.data.qrCodeUrl
-							} else {
-								uni.hideLoading();
-							}
-						})
-						.catch(err => {
-							this.$refs.uToast.show({
-								title: '无法调起微信支付!',
-								type: 'error',
-							});
-						})
-				}
+				this.$u.api
+					.ordinaryWxPay(params)
+					.then((res) => {
+						if (res.code === 200) {
+							// if (getEnvIsWx()) {
+							// 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
+							// } else {
+							// 	location.href = res.data.qrCodeUrl
+							// }
+							localStorage.setItem('jumpUrl', this.jumpUrl);
+							location.href = res.data.qrCodeUrl;
+						} else {
+							uni.hideLoading();
+						}
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: '无法调起微信支付!',
+							type: 'error'
+						});
+					});
 			},
 			/**
 			 * 关闭弹框
 			 * */
 			closePaymentMethod() {
-				this.$emit('closePaymentMethod')
+				this.$emit('closePaymentMethod');
 			}
 		}
-	}
+	};
 </script>
 
 <style lang="scss" scoped>

pages/roadGateSystem/roadGateSystem.scss

@@ -0,0 +1,301 @@
+
+.parking-lock {
+	height: calc(100vh - 88rpx);
+	background-color: #F6F6FF;
+	padding-top: 133rpx;
+	.parking-lock-title {
+		font-size: 46rpx;
+		color: #292929;
+		text-align: center;
+		padding-top: 31rpx;
+		line-height: 65rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+	}
+	.parking-lock-tips {
+		width: calc(100% - 72rpx);
+		font-size: 30rpx;
+		color: #777777;
+		text-align: center;
+		margin: 10rpx auto;
+		line-height: 47rpx;
+	}
+	.parking-lock-info {
+		width: calc(100% - 72rpx);
+		margin: 31rpx auto 54rpx;
+		background-color: #fff;
+		border-radius: 15rpx;
+		padding: 39rpx 41rpx;
+		.parking-lock-info-item {
+			display: flex;
+			margin-bottom: 16rpx;
+			view {
+				font-size: 28rpx;
+				&:first-child {
+					width: 30%;
+					color: #2A2A2A;
+					font-weight: 500;
+				}
+				&:last-child {
+					color: #6E6E6E;
+				}
+			}
+			.weight {
+				color: #2A2A2A!important;
+				font-weight: 500;
+			}
+			.really-money {
+				color: #FA7319!important;
+			}
+		}
+	}
+	.parking-lock-pay-btn {
+		width: calc(100% - 72rpx);
+		margin: 0 auto;
+		button {
+			width: 100%;
+			height: 100rpx;
+			line-height: 100rpx;
+			background-color: #008CFF;
+			border: none;
+			color: #fff;
+			box-shadow: 0px 7px 13px 0px rgba(16, 153, 250, 0.31);
+			font-size: 28rpx;
+			font-weight: 500;
+		}
+	}
+	.parking-lock-begin-box {
+		width: 441rpx;
+		height: 441rpx;
+		line-height: 441rpx;
+		background: #31A2FF;
+		background: linear-gradient(270deg, rgba(49,162,255,0.1) 20%, rgba(49,162,255,1) 100%);
+		border-radius: 50%;
+		text-align: center;
+		margin: 0 auto;
+		// animation: spin 3s linear infinite;
+		.parking-lock-begin-bg {
+			display: inline-block;
+			width: 420rpx;
+			height: 420rpx;
+			line-height: 420rpx;
+			vertical-align: middle;
+			border: solid 12rpx #fff;
+			background: linear-gradient(346deg, #008CFF 0%, #95CFFF 100%);
+			border-radius: 50%;
+			image {
+				width: 194rpx;
+				height: 239rpx;
+				vertical-align: middle;
+			}
+		}
+	}
+	.parking-lock-begin-info {
+		text-align: center;
+		font-size: 50rpx;
+		color: #008CFF;
+		margin-top: 57rpx;
+	}
+	.parking-lock-loading-box {
+		width: 441rpx;
+		height: 441rpx;
+		line-height: 441rpx;
+		background: #31A2FF;
+		background: linear-gradient(0deg, rgba(49,162,255,0.1) 20%, rgba(49,162,255,1) 100%);
+		border-radius: 50%;
+		text-align: center;
+		margin: 0 auto;
+		animation: spin 3s linear infinite;
+		.parking-lock-loading-bg {
+			display: inline-block;
+			width: 420rpx;
+			height: 420rpx;
+			line-height: 420rpx;
+			vertical-align: middle;
+			border: solid 12rpx #fff;
+			background: linear-gradient(346deg, #008CFF 0%, #95CFFF 100%);
+			border-radius: 50%;
+			image {
+				width: 194rpx;
+				height: 239rpx;
+				vertical-align: middle;
+			}
+		}
+	}
+	.parking-lock-loading-info {
+		text-align: center;
+		font-size: 50rpx;
+		color: #008CFF;
+		margin-top: 57rpx;
+	}
+	.parking-lock-success {
+		.parking-lock-success-box {
+			width: 441rpx;
+			height: 441rpx;
+			margin: 0 auto;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.parking-lock-success-info {
+			color: #4CCD8A;
+			font-size: 50rpx;
+			text-align: center;
+			margin: 56rpx 0 202rpx;
+		}
+		.parking-lock-success-button {
+			width: calc(100% - 80rpx);
+			margin: 0 auto;
+			button {
+				width: 100%;
+				height: 100rpx;
+				line-height: 100rpx;
+				background-color: #008CFF;
+				font-size: 28rpx;
+				color: #fff;
+			}
+		}
+	}
+}
+.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;
+}
+@keyframes rotate {
+    0%{
+        transform: rotate(0);
+    }
+    50% {
+    	transform:rotate(200deg);
+    }
+    100% {
+        transform: rotate(0);
+	}
+}
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+  to{
+    transform: rotate(359deg);
+  }
+}
+.loadingSelect{
+	    text-align: center;
+	    margin-top: 20rpx;
+}
+.spinner {
+  margin: auto;
+  width: 50px;
+  height: 60px;
+  text-align: center;
+  font-size: 10px;
+}
+ 
+.spinner > view {
+  background-color: #6495ED;
+  height: 100%;
+  width: 10rpx;
+  margin-right: 2rpx;
+  display: inline-block;
+   
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+ 
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+ 
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+ 
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+ 
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+ 
+@-webkit-keyframes stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
+  20% { -webkit-transform: scaleY(1.0) }
+}
+ 
+@keyframes stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+.new-plate-number{	
+	margin-bottom: 70rpx;
+}
+.message-input-wrap{
+	margin: 0 -40rpx;
+}
+.message-input-wrap /deep/ .u-input ~ uni-view:last-of-type .u-char-item{
+	background-color: #E8FFE8;
+}
+.really-license-txt{
+	color: #008CFF;
+}
+.really-license-txt1{
+	color: #008CFF;
+	margin: 20rpx;
+}
+.popup-vehicleNo-title{
+	font-size: 48rpx;
+	text-align: center;
+	padding-top: 20rpx;
+}
+.popup-vehicleNo-center{
+	width: 95%;
+	height: 2rpx;
+	border-top: solid rgb(146, 146, 146) 2rpx;
+	margin: 30rpx 20rpx 50rpx 20rpx;
+}
+.popup-vehicleNo-select{
+	text-align: center;
+	color: #777777;
+}
+.vehicleNo-btn{
+	display: flex;
+	margin: 40rpx 0;
+}
+.parking-lock-pay-attention{
+	margin: 50rpx;
+	line-height: 48rpx;
+	color: #777777;
+}

pages/roadGateSystem/roadGateSystem.vue

@@ -0,0 +1,264 @@
+<template>
+	<!-- 道闸 -->
+	<view class="parking-lock">
+		<!-- 道闸支付 -->
+		<template v-if="parkingLockStatus === 1">
+			<view class="parking-lock-pay">
+				<view class="parking-lock-title">支付停车费</view>
+				<view class="parking-lock-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view>
+				<view class="parking-lock-info">
+					<view class="parking-lock-info-item">
+						<view>车牌号</view>
+						<view class="weight">{{ orderInfo.vehicleNo }}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>停车场名称</view>
+						<view>{{orderInfo.roadName }}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>入场车道</view>
+						<view>{{'入口1'}}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>入场时间</view>
+						<view>{{orderInfo.inTime}}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>出场车道</view>
+						<view>{{'出口1'}}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>出场时间</view>
+						<view>{{orderInfo.outTime}}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>免费时长</view>
+						<!-- <view>{{ orderInfo.freeDuration || '0天0时30分0秒' }}</view> -->
+						<view>{{ '0天0时30分0秒' }}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>计费时长</view>
+						<view>{{orderInfo.calcDuration || 0}}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>累计停车时长</view>
+						<view>{{ orderInfo.duration || 0 }}</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>应缴金额</view>
+						<view class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
+					</view>
+					<view class="parking-lock-info-item">
+						<view>订单编号</view>
+						<view>{{ orderInfo.orderId }}</view>
+					</view>
+				</view>
+				<view class="parking-lock-pay-btn" v-if="is_pay">
+					<button type="default" @click="payMoney">立即支付</button>
+				</view>
+			</view>
+		</template>
+		<template v-else-if="parkingLockStatus === 2">
+			<view class="parking-lock-pay">
+				<view class="parking-lock-tips">{{ tipsMsg }}</view>
+			</view>
+		</template>
+		<!-- 支付方式 -->
+		<PaymentMethod :payWayPop="payWayPop" :curOrderList="[orderId]" :jumpUrl="jumpUrl" :payeeId="payeeId"
+			:payeeName="payeeName" @closePaymentMethod="closePaymentMethod"></PaymentMethod>
+		<u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
+			<view class="loadingSelect">订单查询中...</view>
+			<view class="spinner">
+				<view class="rect1"></view>
+				<view class="rect2"></view>
+				<view class="rect3"></view>
+				<view class="rect4"></view>
+				<view class="rect5"></view>
+			</view>
+		</u-popup>
+		<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 {
+				// 车位锁状态 1:需支付 2:查询失败返回提醒
+				parkingLockStatus: 0,
+				// 支付方式选择弹框
+				payWayPop: false,
+				// 订单编号
+				orderList: [],
+				// 提示信息
+				tipsMsg: null,
+				// 轮询
+				timer: null,
+				// 订单信息
+				orderInfo: {},
+				// 订单id
+				orderId: null,
+				// 重定向地址
+				jumpUrl: location.href + '&isBack=1',
+				show: true,
+				isBack: '',
+				polyOrderId: '',
+				// 地磁
+				spaceId: '',
+				payeeId: '',
+				payeeName: '',
+				is_pay: false
+			}
+		},
+		onLoad(page) {
+			if (page.orderId) {
+				this.orderId = page?.orderId
+				this.spaceId = page?.orderId
+				this.payeeId = page?.payeeId
+				this.polyOrderId = page?.polyOrderId
+				this.isBack = page?.isBack
+			} else {
+				this.tipsMsg = page.msg || '参数丢失!';
+				// this.parkingLockStatus = 2
+				uni.showModal({
+					title: '提示',
+					content: (page.msg || '参数丢失') + ',返回首页',
+					showCancel: false,
+					success: (res) => {
+						if (res.confirm) {
+							uni.switchTab({
+								url: '/pages/index/index'
+							})
+						}
+					}
+				});
+			}
+		},
+		onShow() {
+			if (this.orderId) {
+				this.getOrderDetails(this.spaceId, this.orderId, this.payeeId)
+				if (this.polyOrderId && this.isBack == 1) {
+					this.timer = setInterval(() => {
+						this.show = true
+						this.handlePayStatus(this.polyOrderId)
+					}, 1000)
+				}
+			} else {
+				this.show = false
+			}
+		},
+		onUnload() {
+			if (this.timer) {
+				clearInterval(this.timer)
+			}
+		},
+		methods: {
+			/**
+			 * 反复查询支付状态
+			 * @param { String } orderId
+			 */
+			handlePayStatus(orderId) {
+				this.$u.api.getOrderInfo({
+					orderId
+				}).then(res => {
+					if (res.code === 200) {
+						if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+							this.show = false
+							clearInterval(this.timer);
+							this.is_pay = false
+							uni.showModal({
+								title: '提示',
+								content: '支付成功，返回首页',
+								showCancel: false,
+								success: (res) => {
+									if (res.confirm) {
+										uni.switchTab({
+											url: '/pages/index/index'
+										})
+									}
+								}
+							});
+						} else if (res.data.payStatus === 2) {
+							this.is_pay = true
+						}
+					} else {
+						this.show = false
+						clearInterval(this.timer);
+						this.$refs.uToast.show({
+							title: res.msg,
+							type: 'error',
+						});
+					}
+				}).catch(() => {
+					this.show = false
+					clearInterval(this.timer);
+				})
+			},
+			/**
+			 * 立即支付
+			 */
+			payMoney() {
+				this.payWayPop = true
+			},
+			/**
+			 * 查询订单信息
+			 * @param { String } spaceId 车位ID
+			 * @param { String } orderId 订单id
+			 * @param { String } payeeId 收费员ID
+			 */
+			getOrderDetails(spaceId, orderId, payeeId) {
+				this.$u.api.geomaLockDetailsApi({
+					spaceId,
+					orderId,
+					payeeId
+				}).then(res => {
+					if (res.code === 200 && res.data.id) {
+						this.payeeName = res.data.payeeName
+						this.parkingLockStatus = 1
+						this.orderInfo = res.data
+						this.show = false
+						if (res.data.payStatus == 0 || res.data.payStatus == 2) {
+							this.is_pay = true
+						} else if (res.data.payStatus == 1) {
+							this.is_pay = false
+							uni.showModal({
+								title: '提示',
+								content: '订单已支付，返回首页',
+								showCancel: false,
+								success: function(res) {
+									if (res.confirm) {
+										uni.switchTab({
+											url: '/pages/index/index'
+										})
+									}
+								}
+							});
+						}
+					} else {
+						this.$refs.uToast.show({
+							title: res.msg || '订单无数据',
+							type: 'error',
+						});
+					}
+				}).catch(err => {
+					this.show = false
+				})
+			},
+			/**
+			 * 关闭支付弹框
+			 */
+			closePaymentMethod() {
+				this.payWayPop = false
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './roadGateSystem.scss';
+</style>

static/img/weixin-icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" class="design-iconfont">
+  <defs>
+    <filter id="povwgb59f__yjzzw2ry2a">
+      <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.200000 0 0 0 0 0.729412 0 0 0 0 0.768627 0 0 0 1.000000 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#FFF" opacity=".2" d="M55 0A55 55 0 1 0 55 110A55 55 0 1 0 55 0Z"/>
+    <path fill="#FFF" d="M55 10A45 45 0 1 0 55 100A45 45 0 1 0 55 10Z"/>
+    <g filter="url(#povwgb59f__yjzzw2ry2a)">
+      <path d="M35.1975,13.0072114 C35.7955,13.0072114 36.38375,13.0533947 36.97525,13.1193709 C35.38275,5.59148446 27.456,0 18.40475,0 C8.2875,0 0,6.99677791 0,15.8870733 C0,21.0167242 2.756,25.2293057 7.3645,28.5017261 L5.525,34.1196011 L11.96,30.8471807 C14.261,31.3057154 16.107,31.7807442 18.40475,31.7807442 C18.98325,31.7807442 19.55525,31.7543537 20.12075,31.7114691 C19.76325,30.4612198 19.552,29.1548907 19.552,27.7924818 C19.55525,19.6312236 26.45825,13.0072114 35.1975,13.0072114 Z M25.3045,7.94353663 C26.6955,7.94353663 27.60875,8.87050249 27.60875,10.2757959 C27.60875,11.6744918 26.6955,12.611354 25.3045,12.611354 C23.92975,12.611354 22.54525,11.6744918 22.54525,10.2757959 C22.54525,8.86720368 23.9265,7.94353663 25.3045,7.94353663 Z M12.42475,12.611354 C11.0435,12.611354 9.6525,11.6744918 9.6525,10.2757959 C9.6525,8.87050249 11.0435,7.94353663 12.42475,7.94353663 C13.806,7.94353663 14.7225,8.86720368 14.7225,10.2757959 C14.7225,11.6744918 13.806,12.611354 12.42475,12.611354 Z M52,27.5681626 C52,20.0996548 44.6355,14.0133487 36.36425,14.0133487 C27.6055,14.0133487 20.71225,20.1029536 20.71225,27.5681626 C20.71225,35.0564634 27.60875,41.1229766 36.36425,41.1229766 C38.19725,41.1229766 40.0465,40.6578443 41.886,40.1894131 L46.93325,43 L45.54875,38.3288838 C49.244,35.5116993 52,31.7807442 52,27.5681626 Z M31.28775,25.2293057 C30.3745,25.2293057 29.44825,24.3056387 29.44825,23.3621787 C29.44825,22.4319141 30.3745,21.4950518 31.28775,21.4950518 C32.68525,21.4950518 33.592,22.4319141 33.592,23.3621787 C33.592,24.3056387 32.68525,25.2293057 31.28775,25.2293057 Z M41.4115,25.2293057 C40.50475,25.2293057 39.58175,24.3056387 39.58175,23.3621787 C39.58175,22.4319141 40.5015,21.4950518 41.4115,21.4950518 C42.796,21.4950518 43.71575,22.4319141 43.71575,23.3621787 C43.71575,24.3056387 42.796,25.2293057 41.4115,25.2293057 Z" fill="#000" fill-rule="nonzero" transform="translate(29 34)"/>
+    </g>
+  </g>
+</svg>

utils/wxPay.js

@@ -0,0 +1,59 @@
+const wx = require('weixin-js-sdk');
+export default {
+	wexinPay(data, jumpUrl) {
+		return new Promise(r => {
+			wx.config({
+				debug: false,
+				appId: data.appId,
+				timestamp: data.timeStamp,
+				nonceStr: data.nonceStr,
+				signature: data.paySign,
+				jsApiList: ['chooseWXPay']
+			});
+			wx.ready(() => {
+				wx.chooseWXPay({
+					timestamp: data.timeStamp, //这个字段是为字符串后端返回时需检查
+					nonceStr: data.nonceStr,
+					package: data.packageValue,
+					signType: data.signType,
+					paySign: data.paySign,
+					success(res) {
+						r({
+							code: 0,
+							msg: "成功"
+						});
+					},
+					cancel() {
+						r({
+							code: 1,
+							msg: "取消"
+						});
+					},
+					fail(err) {
+						r({
+							code: 2,
+							msg: err.errMsg.split(':')[1] || '支付失败!'
+						});
+					},
+					// 无论失败成功都会执行
+					complete(e) {
+						// e.errMsg三种状态 1.chooseWXPay:ok 支付成功 2: chooseWXPay:cancel 支付取消 3:chooseWXPay:fail 支付失败
+						if (e.errMsg === 'chooseWXPay:ok') {
+							if (jumpUrl) {
+								window.location.href = jumpUrl
+							} else {
+								window.location.reload()
+							}
+						}
+					}
+				});
+			});
+			wx.error(function(err) {
+				r({
+					code: 2,
+					msg: '支付失败!'
+				});
+			});
+		})
+	}
+}