同步一二期代码

.gitignore

@@ -13,4 +13,6 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-/unpackage/
+/package-lock.json
+/.history/
+/node_modules/

README.md

@@ -1,13 +1,17 @@
 ## 城市智慧停车(二期)
-### 打包注意
-- 发行 => 自定义发行 => build:dev(测试环境) / build:pro (正式环境)
-- 如果api地址有变动   修改package.json 中的环境变量配置
-- common/config.js  本地运行地址修改
-- 新项目中的点金计划页面修改static/html/wxPayCallback.html中(jumpOutUrl)修改为需要跳转的页面
-
-#### iconfont
-- [iconfont 自定义图标](https://www.uviewui.com/guide/customIcon.html)
-- [字体默认不再生成 .eot、.svg 和 Base64](https://github.com/thx/iconfont-plus/issues/1948)
-
-#### 安装vue-jsonp
-`npm install vue-jsonp --save` 用作通过经纬度获取所在城市跨域处理
+### 修改访问地址
+- 如果api地址有变动 修改package.json 中的环境变量配置
+- common/config.js 本地运行地址修改
+- 项目中的点金计划页面修改static/html/wxPayCallback.html中(jumpOutUrl)修改为需要跳转的页面
+
+### 打包
+- 打包测试环境: 发行 => 自定义发行 => build:test
+- 打包正式环境: 发行 => 自定义发行 => build:pro
+
+### 执行 `npm install`
+
+#### 安装vue-jsonp 获取地址数据跨域处理
+`npm install vue-jsonp --save`
+
+#### 安装weixin-js-sdk 微信支付
+`npm install weixin-js-sdk --save`

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/config.js

@@ -4,12 +4,15 @@
  * 只有在打包环境下才会有H_NODE_ENV
  */
 const node_dev = process.env.H_NODE_ENV
-let baseUrl = 'https://wx.hw.hongweisoft.com/parking'
+let baseUrl = 'https://wx.hw.hongweisoft.com/parking',
+wxAppid = 'wx6e9cdf7a0ee8a51b'
+console.log(process.env.H_BASE_URL);
 if (node_dev) {
-	baseUrl = process.env.H_BASE_URL
+	baseUrl = process.env.H_BASE_URL,
+	wxAppid = process.env.H_WXAPPID
 }
 const config = {
-	wxAppid: 'wx45c3cf2b632f5fd5',
+	wxAppid,
 	baseUrl
 }
 

common/http.api.js

@@ -101,6 +101,7 @@ const install = (Vue, vm) => {
 	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 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
 	};
 }
 

package-lock.json

@@ -1,11 +1,35 @@
 {
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "vue-jsonp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-2.0.0.tgz",
-      "integrity": "sha512-Mzd9GNeuKP5hHFDWZNMWOsCuMILSkA6jo2l4A02wheFz3qqBzH7aSEFTey1BRCZCLizlaf1EqJ5YUtF392KspA=="
-    }
-  }
+	"name": "parking_h5",
+	"lockfileVersion": 2,
+	"requires": true,
+	"packages": {
+		"": {
+			"dependencies": {
+				"vue-jsonp": "^2.0.0",
+				"weixin-js-sdk": "^1.6.0"
+			}
+		},
+		"node_modules/vue-jsonp": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-2.0.0.tgz",
+			"integrity": "sha512-Mzd9GNeuKP5hHFDWZNMWOsCuMILSkA6jo2l4A02wheFz3qqBzH7aSEFTey1BRCZCLizlaf1EqJ5YUtF392KspA=="
+		},
+		"node_modules/weixin-js-sdk": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.0.tgz",
+			"integrity": "sha512-3IYQH7aalJGFJrwdT3epvTdR1MboMiH7vIZ5BRL2eYOJ12BNah7csoMkmSZzkq1+l92sSq29XdTCVjCJoK2sBQ=="
+		}
+	},
+	"dependencies": {
+		"vue-jsonp": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-2.0.0.tgz",
+			"integrity": "sha512-Mzd9GNeuKP5hHFDWZNMWOsCuMILSkA6jo2l4A02wheFz3qqBzH7aSEFTey1BRCZCLizlaf1EqJ5YUtF392KspA=="
+		},
+		"weixin-js-sdk": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.0.tgz",
+			"integrity": "sha512-3IYQH7aalJGFJrwdT3epvTdR1MboMiH7vIZ5BRL2eYOJ12BNah7csoMkmSZzkq1+l92sSq29XdTCVjCJoK2sBQ=="
+		}
+	}
 }

package.json

@@ -7,6 +7,7 @@
 					"UNI_PLATFORM": "h5",
 					"H_NODE_ENV": "development",
 					"H_BASE_URL": "https://wx.hw.hongweisoft.com/parking",
+					"H_WXAPPID": "wx6e9cdf7a0ee8a51b",
 					"DESCRIBE": "测试环境"
 				}
 			},
@@ -16,9 +17,14 @@
 					"UNI_PLATFORM": "h5",
 					"H_NODE_ENV": "production",
 					"H_BASE_URL": "https://parking.pdzhtc.com",
+					"H_WXAPPID": "wx45c3cf2b632f5fd5",
 					"DESCRIBE": "正式环境"
 				}
 			}
 		}
+	},
+	"dependencies": {
+		"vue-jsonp": "^2.0.0",
+		"weixin-js-sdk": "^1.6.0"
 	}
 }

pages.json

@@ -279,22 +279,30 @@
 				"navigationBarTextStyle": "white"
 			}
 
-		}
-        ,{
-            "path" : "pages/parkroadgate/parkroadgate",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "道闸",
-                "enablePullDownRefresh": false,
+		}, {
+			"path": "pages/parkroadgate/parkroadgate",
+			"style": {
+				"navigationBarTitleText": "道闸",
+				"enablePullDownRefresh": false,
 				"navigationBarBackgroundColor": "#008CFF",
 				"navigationBarTextStyle": "white"
-            }
-            
-        }
-    ],
+			}
+
+		},
+		{
+			"path": "pages/roadGateSystem/roadGateSystem",
+			"style": {
+				"navigationBarTitleText": "道闸系统",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#008CFF",
+				"navigationBarTextStyle": "white"
+			}
+
+		}
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uView",
+		"navigationBarTitleText": "普定智慧停车",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
 		"backgroundColorTop": "#FFFFFF"

pages/favourableActivity/favourableActivity.vue

@@ -7,7 +7,7 @@
 				<view>使用贵州银行支付可一分钱停车</view>
 				<view>从客户启用贵州银行行卡支付的第四个月开始，使用我行卡支付永久享受八折优惠（单日不限次数）。时间计算同上。三个月最后一天，假如车主跨天的话，拆分账单计算：三个月内一分钱或八折，三个月外时段八折。
 				</view>
-				<view>如果停车场、路边停车位有15分钟内等免费政策的，我行客户自然享受后再按“一分钱停车”、“八折停车”执行。</view>
+				<view>如果停车场、路边停车位有30分钟内等免费政策的，我行客户自然享受后再按“一分钱停车”、“八折停车”执行。</view>
 				<view>
 					<button type="default" class="btn1" @click="openAcount">银行卡开户</button>
 				</view>
@@ -19,7 +19,7 @@
 				<view>使用贵州银行支付可享永久八折优惠</view>
 				<view>从客户启用贵州银行行卡支付的第四个月开始，使用我行卡支付永久享受八折优惠（单日不限次数）。时间计算同上。三个月最后一天，假如车主跨天的话，拆分账单计算：三个月内一分钱或八折，三个月外时段八折。
 				</view>
-				<view>如果停车场、路边停车位有15分钟内等免费政策的，我行客户自然享受后再按“一分钱停车”、“八折停车”执行。</view>
+				<view>如果停车场、路边停车位有30分钟内等免费政策的，我行客户自然享受后再按“一分钱停车”、“八折停车”执行。</view>
 				<view>
 					<button type="default" class="btn2" @click="openAcount">银行卡开户</button>
 				</view>

pages/paymentMethod/paymentMethod.scss

@@ -17,26 +17,26 @@
 }
 .pay-way-new {
 	display: flex;
-	justify-content: space-between;
-	width: calc(100% - 80rpx);
+	justify-content: space-around;
+	width: calc(100% - 60rpx);
 	border-top: solid 1px #979797;
-	margin: 23rpx auto;
-	padding: 36rpx 0;
+	margin: 23rpx auto 0;
+	padding: 36rpx 0 10rpx;
 	.pay-way-item {
-		width: calc(50% - 9rpx);
+		width: calc(33% - 9rpx);
 		border-radius: 20rpx;
 		text-align: center;
 		padding: 30rpx 0;
 		image {
-			width: 159rpx;
-			height: 159rpx;
+			width: 110rpx;
+			height: 110rpx;
 		}
 		.title {
-			font-size: 30rpx;
+			font-size: 28rpx;
 			font-weight: 400;
 			font-family: 'PingFangSC-Regular, PingFang SC';
 			color: #fff;
-			margin: 15rpx 0;
+			margin: 10rpx 0;
 		}
 		.subtitle {
 			font-size: 14rpx;
@@ -49,9 +49,27 @@
 	.pay-way-item-hy {
 		background: linear-gradient(153deg, #FA9460 0%, #FF5065 100%)
 	}
-	.pay-way-item-jh {
+	.pay-way-item-wx {
 		background: linear-gradient(155deg, #5EE3A6 0%, #3EB9C8 100%);
 	}
+	.pay-way-item-jh {
+		background: linear-gradient(155deg, #5AA6FF 0%, #C782FF 100%);
+	}
+}
+.pay-way-subtitle {
+	display: flex;
+	justify-content: space-around;
+	width: calc(100% - 60rpx);
+	margin: 0 auto 60rpx;
+	&-item {
+		width: calc(33% - 9rpx);
+		border-radius: 20rpx;
+		text-align: center;
+		font-size: 20rpx;
+		font-weight: 400;
+		font-family: 'PingFangSC-Regular, PingFang SC';
+		opacity: 0.73;
+	}
 }
 .pay-way-close-btn {
 	width: calc(100% - 80rpx);

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,44 +15,67 @@
 					<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>
-				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
-			</view>
-		</u-modal>
-		<u-toast ref="uToast" />
-	</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>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	export default {
-		props: {
-			// 弹框显示
-			payWayPop: {
-				type: Boolean,
-				default: false
-			},
-			// 订单数组
-			curOrderList: {
-				type: Array,
-				default: null
-			},
-			// 设备编号
-			deviceNo: {
-				type: String,
-				default: null
-			},
-			// 地磁支付需要字段
-			payeeId: {
-				type: String,
-				default: undefined
-			},
-			// 地磁支付需要字段
-			payeeName: {
-				type: String,
-				default: undefined
-			},
-			//扫码支付需要字段
+import { getEnvIsWx } from '@/utils/judgEnvironment.js';
+import $wxPay from '@/utils/wxPay.js';
+export default {
+  props: {
+    // 弹框显示
+    payWayPop: {
+      type: Boolean,
+      default: false
+    },
+    // 订单数组
+    curOrderList: {
+      type: Array,
+      default: null
+    },
+    // 设备编号
+    deviceNo: {
+      type: String,
+      default: null
+    },
+    // 地磁支付需要字段
+    payeeId: {
+      type: String,
+      default: undefined
+    },
+    // 地磁支付需要字段
+    payeeName: {
+      type: String,
+      default: undefined
+    },
+//扫码支付需要字段
 			sanPay: {
 				type: Boolean,
 				default: false
@@ -71,147 +94,147 @@
 			exportFlag: {
 				type: Boolean,
 				default: false
-			}
-		},
-		data() {
-			return {}
-		},
-		methods: {
-			/**
-			 * 贵阳银行支付
-			 * @param {Array} orderList 需要支付的订单号组成的数组
-			 * @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
-				};
-				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 => {
-						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',
-						});
-					});
-				}
-			},
-			/**
-			 * 微信支付
-			 * 判断vuex中是否存在openId
-			 * 存在直接调起微信支付
-			 * 不存在则通过微信登录去获取用户的code
-			 * 完成后通过code去获取用户的openId等信息
-			 * 最后再调起微信支付
-			 * */
-			wechatPay() {
-				uni.showLoading({
-					title: '加载中'
-				});
-				this.getWXPayByJava(this.curOrderList, this.deviceNo)
-			},
-			/**
-			 * 直接通过后台获取贵阳银行微信支付地址
-			 * @param {Array} list 需要支付的订单组合数组
-			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
-			 * */
-			getWXPayByJava(orderList, deviceNo) {
-				let params = {
-					orderList: orderList,
-					openid: '',
-					jumpUrl: this.jumpUrl,
-					deviceNo: deviceNo ? deviceNo : null,
-					payeeId: this.payeeId,
-					payeeName: this.payeeName,
-					pursueType: this.pursueType,
-					sanPay: this.sanPay
-				};
-				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',
-							});
-						})
-				}
-			},
-			/**
-			 * 关闭弹框
-			 * */
-			closePaymentMethod() {
-				this.$emit('closePaymentMethod')
-			}
-		}
-	}
+    }
+  },
+  data() {
+    return {
+      wxEnv: true
+    };
+  },
+  created() {
+    this.wxEnv = getEnvIsWx();
+  },
+  methods: {
+    /**
+     * 贵阳银行支付
+     * @param {Array} orderList 需要支付的订单号组成的数组
+     * @param {String} deviceNo 设备编号(只有车位锁部分有)
+     * */
+    gyBankPay() {
+      const params = {
+        orderList: this.curOrderList,
+        deviceNo: this.deviceNo,
+        jumpUrl: this.jumpUrl,
+        payeeId: this.payeeId,
+        payeeName: this.payeeName
+      };
+      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'
+            });
+            setTimeout(() => {
+              uni.hideLoading();
+              location.reload();
+            }, 1000);
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: err.msg,
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 聚合支付
+     * 判断vuex中是否存在openId
+     * 存在直接调起微信支付
+     * 不存在则通过微信登录去获取用户的code
+     * 完成后通过code去获取用户的openId等信息
+     * 最后再调起微信支付
+     * */
+    juhePay() {
+      this.getWXPayByJava(this.curOrderList, this.deviceNo);
+    },
+    /**
+     * 微信支付
+     */
+    wechatPay() {
+      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;
+              }
+            });
+          }
+        });
+    },
+    /**
+     * 直接通过后台获取贵阳银行微信支付地址
+     * @param {Array} list 需要支付的订单组合数组
+     * @param {Number} deviceNo 设备编号(在停车锁部分需要)
+     * */
+    getWXPayByJava(orderList, deviceNo) {
+      let params = {
+        orderList: orderList,
+        openid: '',
+        jumpUrl: this.jumpUrl,
+        deviceNo: deviceNo ? deviceNo : null,
+        payeeId: this.payeeId,
+        payeeName: this.payeeName
+      };
+      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');
+    }
+  }
+};
 </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>

template.h5.html

@@ -3,8 +3,12 @@
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
 		<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
-		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+		<meta name="viewport"
+			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 		<title>
 			<%= htmlWebpackPlugin.options.title %>
 		</title>
@@ -12,6 +16,24 @@
 			document.addEventListener('DOMContentLoaded', function() {
 				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
 			})
+			window.addEventListener(
+				"error",
+				function(e) {
+					var jsLoadedErrorReload = window.sessionStorage.getItem(
+						"jsLoadedErrorReload" // 跳转的标识，存入sessionStorage。用于不可控情况下，防止一直满足条件，触发死循环性的跳转页面
+					);
+					const fileReg = /\/js\/((chunk-vendors)|(app))\.[a-zA-Z0-9]+/;
+					const filename = e.filename || e.target.src || "";
+					if (jsLoadedErrorReload !== "true" && filename.match(fileReg)) {
+						window.sessionStorage.setItem("jsLoadedErrorReload", true); // 满足条件则，存入标识
+						let url = window.location.href;
+						const timeStr = `timeStr=${Date.now()}`;
+						url = /\?/.test(url) ? url + "&" + timeStr : url + "?" + timeStr;
+						window.location.replace(url); // 跳转时添加了时间戳
+					}
+				},
+				true
+			);
 		</script>
 		<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
 	</head>

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: '支付失败!'
+				});
+			});
+		})
+	}
+}