feat(KIP-11819): Temp parking frontend ｜websocket 交互变更 ｜wx.miniProgram.redirectTo

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div @click="scanQRCode">scanQRCode</div>
+    <!-- <div @click="scanQRCode">scanQRCode</div> -->
     <keep-alive v-if="isInit" :include="cachedViews" :max="15">
       <router-view :key="key" />
     </keep-alive>
@@ -101,9 +101,6 @@ export default {
       
     },
     async init() {
-      await initWxJsSdkConfig(['checkJsApi','scanQRCode']);
-      
-      return
       window.isWxV2 = false
       // this.$store.commit('SET_IS_INIT', true);
       // return

src/pages/parkingFeeV2/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>cachedViews: {{ cachedViews }}-{{ key }}</div>
+<!--    <div>cachedViews: {{ cachedViews }}-{{ key }}</div>-->
     <keep-alive v-if="isInit" :include="cachedViews" :max="15">
       <router-view :key="key" />
     </keep-alive>
@@ -34,18 +34,30 @@ export default {
     },
     $route: {
       immediate: true,
-      handler(to, from) {
+      handler(to = {
+        name: '',
+        meta: {
+          keepAlive: false
+        }
+      }, from = {
+        name: '',
+        meta: {
+          keepAlive: false
+        }
+      }) {
         const {
           name= '',
           meta: { keepAlive = false },
         } = from;
-        console.log(4242424242, name, to?.name);
+        // console.log(4242424242, name, to?.name);
         // this.key
-        const fromNoADD = ['parkingFeeDiscountsV2', 'parkingFeeDetailV2', 'parkingFeePaperCouponV2']
+          
+        const fromNoADD = ['parkingFeeDiscountsV2', 'parkingFeeDetailV2', 'parkingFeePaperCouponV2', 'parkingFeeCouponV2', 'parkingFeePaymentV2']
         const toNoADD = []
+        // parkingFeeMsgV2
         // parkingFeeMsg home parkingFeeSuccess parkingFeePayment
-        
-        if(fromNoADD.indexOf(name)  < 0 && toNoADD.indexOf(to.name) < 0 ) {
+        // console.log('5858585858', to.name)
+        if(fromNoADD.indexOf(name)  < 0 && toNoADD.indexOf(to.name) > -1 ) {
           this.key += 1
         }
       },

src/pages/parkingFeeV2/mixins/parkingFee.js

@@ -84,10 +84,9 @@ export default {
     }),
   },
   created() {
-    console.log('二次加载this.$route.query.fromPage', this.$route.query.fromPage, this.$store.state.pageHistory);
-    console.log('二次加载', this.$route.query.fromPage && !this.$store.state.pageHistory[this.$route.query.fromPage]);
-
-    if(this.$route.query.fromPage && !this.$store.state.pageHistory[this.$route.query.fromPage]) {
+    // console.log('二次加载this.$route.query.fromPage', this.$route.query.fromPage, this.$store.state.pageHistory);
+    // console.log('二次加载', this.$route.query.fromPage && !this.$store.state.pageHistory[this.$route.query.fromPage]);
+    if(this.$route.query?.fromPage !== 'undefined' && !this.$store.state.pageHistory[this.$route.query.fromPage]) {
       this.$store.commit('setPageHistory', {
         [this.$route.query.fromPage]: 1
       })
@@ -96,6 +95,20 @@ export default {
         loginCount: 1
       }});
     }
+    const {type= '', code = ''} = this.$route.query
+    // 无牌车流程
+    if(/unlicensedOut|unlicensedIn/.test(type) && code && !this.$store.state.pageHistory?.unlicensed && !this.endlessLoop) {
+      this.$store.commit('setPageHistory', {
+        unlicensed: 1
+      })
+      this.$store.commit('SET_UNLICENSED_INFO', {
+        type, code
+      });
+      this.$store.commit('SET_ENDLESS_LOOP', type);
+      this.$nextTick(() => {
+          this.qrCodesRule(code);
+      })
+    }
   },
   beforeRouteLeave(to, from, next) {
     this.$store.commit('cachedViews/DEL_CACHED_VIEW', to);
@@ -108,29 +121,31 @@ export default {
         this.showSq = false;
       }
     },
-    unlicensedInfo:{
-      handler(){
-        // const member = uni.getStorageSync('member');
-        // if(!member) return // 如果用户走未登录流程的话
-        // 不论是否出入场，都使用此函数获取 gateId（闸口机器的ID）
-        if (this.unlicensedInfo?.type && /unlicensedOut|unlicensedIn/.test(this.unlicensedInfo.type) && this.endlessLoop.length === 0) {
-          // 此处记录扫码流程执行次数。如果超过一次则不再执行
-          this.$store.commit('SET_ENDLESS_LOOP', this.unlicensedInfo.type);
-          this.$nextTick(() => {
-            this.qrCodesRule(this.unlicensedInfo.code);
-          })
-        }
-      },
-      immediate:true //true就表示会立即执行
-    }
+    // unlicensedInfo:{
+    //   handler(){
+    //     // const member = uni.getStorageSync('member');
+    //     // if(!member) return // 如果用户走未登录流程的话
+    //     // 不论是否出入场，都使用此函数获取 gateId（闸口机器的ID）
+    //     if (this.unlicensedInfo?.type && /unlicensedOut|unlicensedIn/.test(this.unlicensedInfo.type) && this.endlessLoop.length === 0) {
+    //       // 此处记录扫码流程执行次数。如果超过一次则不再执行
+    //       this.$store.commit('SET_ENDLESS_LOOP', this.unlicensedInfo.type);
+    //       this.$nextTick(() => {
+    //         this.qrCodesRule(this.unlicensedInfo.code);
+    //       })
+    //     }
+    //   },
+    //   immediate:true //true就表示会立即执行
+    // }
   },
   async mounted() {
-    console.log(114, 99999999999);
+    // console.log(114, 99999999999);
     const platform = getPlatform();
-    if (platform === 'micromessenger') {
-      await initWxJsSdkConfig(['checkJsApi', 'scanQRCode']);
-    }
+    // if (platform === 'micromessenger') {
+    //   await initWxJsSdkConfig(['checkJsApi', 'scanQRCode']);
+    // }
+
     const openid= uni.getStorageSync('openid');
+      
     // 如果用户未登录的话，返回之后，重新获取数据用户的基础数据
     if (openid) {
       this.getParkInfo();
@@ -146,6 +161,13 @@ export default {
       }
       this.showSq = true;
     }
+    try {
+      setTimeout(async () => {
+        await initWxJsSdkConfig(['checkJsApi', 'scanQRCode']);
+      }, 1500)
+    } catch (e) {
+      console.log(e)
+    }
   },
   methods: {
     toggleType(carType) {
@@ -181,10 +203,10 @@ export default {
         title: '加载中',
       });
       try {
-        console.log('加载车场信息', this.$store.state.lbsId);
+        // console.log('加载车场信息', this.$store.state.lbsId);
         // const res = await parkingLots('8aaa82ea804d07cd0180516ff03b0008'); // TODO: 临时写死
         const res = await parkingLots(this.$store.state.lbsId); // TODO: 临时写死
-        console.log(res);
+        // console.log(res);
         let reg = /[;；]/g;
         this.description = res?.description?.replace(reg, '\r\n').replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>');
         this.supportUnlicensed = res.supportUnlicensed || false
@@ -249,12 +271,17 @@ export default {
         name: 'parkingFeeDetailV2',
       });
       this.$nextTick(() => {
-        this.$router.push({
-          path: 'parkingFeeDetail',
-          query: {
+        const query = {
             ...this.$route.query,
             vehicleNo: this.vehicleNumber,
-          },
+        }
+        // fromPage && format && unlicensed
+        query.fromPage = ''
+        query.format = ''
+        query.unlicensed = ''
+        this.$router.push({
+          path: 'parkingFeeDetail',
+          query,
         });
       })
     },
@@ -266,12 +293,18 @@ export default {
       });
 
       this.$nextTick(() => {
+          const query = {
+              ...this.$route.query,
+              vehicleNo: vehicleNo,
+          }
+          // fromPage && format && unlicensed
+          query.fromPage = ''
+          query.format = ''
+          query.unlicensed = ''
+          
         this.$router.push({
           path: 'parkingFeeDetail',
-          query: {
-            ...this.$route.query,
-            vehicleNo,
-          },
+          query,
         });
       });
     },
@@ -323,12 +356,17 @@ export default {
             this.parkingFeeDetailInit();
             uni.setStorageSync('isReload', '3');
             // this.$destroy();
+              const query = {
+                  ...this.$route.query,
+                  vehicleNo: carno,
+              }
+              // fromPage && format && unlicensed
+              query.fromPage = ''
+              query.format = ''
+              query.unlicensed = ''
             this.$router.push({
               path: 'parkingFeeDetail',
-              query: {
-                ...this.$route.query,
-                vehicleNo: carno,
-              },
+              query,
             });
             parkTime = res.data?.data?.serviceMin;
             redirectUrl = '/pages/parkingFee/parkingFeeDetail.vue';
@@ -557,7 +595,7 @@ export default {
             console.log('微信扫码之后，处理过的参数', params);
             this.$store.commit('SET_UNLICENSED_INFO', params);
             this.$nextTick(() => {
-              this.qrCodesRule(params.code);
+              this.qrCodesRule(params.code, 'scan');
             })
             return
           }
@@ -569,7 +607,7 @@ export default {
             const params = getUrlParams(`?${decodeURIComponent(res.path.replace(/.*scene=/g, ''))}`)
             this.$store.commit('SET_UNLICENSED_INFO', params);
             this.$nextTick(() => {
-              this.qrCodesRule(params.code);
+              this.qrCodesRule(params.code, 'scan');
             })
           }
           // 兜底逻辑，如果是其他小程序扫描，则提取rawData，进行解析提取入参
@@ -581,7 +619,7 @@ export default {
             const obj = { code: match[1], type: match[2] };
             this.$store.commit('SET_UNLICENSED_INFO', obj);
             this.$nextTick(() => {
-              this.qrCodesRule(obj.code);
+              this.qrCodesRule(obj.code, 'scan');
             })
           }
         };
@@ -625,7 +663,11 @@ export default {
 
     },
     // 处理扫码结果: 组装参数，剩余流程，在 缴费支付页面 实现
-    async qrCodesRule(code) {
+    async qrCodesRule(code, source = '') {
+      // source 是为了避免重复刷新
+      if(this.$store.state.pageHistory.parkingFeeMsg && !source) {
+        return
+      }
       try {
         if ( this.qrCodeHistory && this.qrCodeHistory === code ) {
           return
@@ -641,14 +683,20 @@ export default {
         });
         // return
         if (this.unlicensedInfo?.type === 'unlicensedOut') {
+            const query = {
+                ...this.$route.query,
+                gateId: qrCodesres.gateId,
+                vehicleNo: '',
+                type: this.unlicensedInfo.type
+            }
+            // fromPage && format && unlicensed
+            query.fromPage = ''
+            query.format = ''
+            query.unlicensed = ''
+            query.code = ''
           this.$router.push({
             path: 'parkingFeeDetail',
-            query: {
-              ...this.$route.query,
-              gateId: qrCodesres.gateId,
-              vehicleNo: '',
-              type: this.unlicensedInfo.type
-            }
+            query
           })
           return
         }
@@ -656,14 +704,24 @@ export default {
         const unlicensedCarCheckInres = await unlicensedCarCheckIn({ // 获取无牌车牌
           gateId: qrCodesres.gateId
         });
+
+          const query = {
+              ...this.$route.query,
+              type: 'success',
+              vehicleNo: unlicensedCarCheckInres.vehicleNo
+          }
+          // fromPage && format && unlicensed
+          query.fromPage = ''
+          query.format = ''
+          query.unlicensed = ''
+          query.code = ''
+        this.$store.commit('setPageHistory', {
+          parkingFeeMsg: 1
+        })
         // 前往 缴费支付页面
         this.$router.push({
           path: 'parkingFeeMsg',
-          query: {
-            ...this.$route.query,
-            type: 'success',
-            vehicleNo: unlicensedCarCheckInres.vehicleNo
-          }
+          query: query
         })
       } catch (err) {
         // 车场扫描道闸入口，发现无车/车场扫描道闸入口，发现有牌车 >>> 停止往下执行,默认提示报错信息
@@ -671,13 +729,22 @@ export default {
           return
         }
         if (/CAR_NOT_FOUND|INOUT_FAILED|UNLICENSED_PLATE_ACQUISITION_FAILED/.test(err.code)) {
+            const query = {
+                ...this.$route.query,
+                type: 'fail'
+            }
+            // fromPage && format && unlicensed
+            query.fromPage = ''
+            query.format = ''
+            query.unlicensed = ''
+            query.code = ''
+          this.$store.commit('setPageHistory', {
+            parkingFeeMsg: 1
+          })
           // 如果是其他错误的话，则继续往下执行
           this.$router.push({
             path: 'parkingFeeMsg',
-            query: {
-              ...this.$route.query,
-              type: 'fail'
-            }
+            query
           })
         }
       }

src/pages/parkingFeeV2/mixins/parkingFeeDetail.js

@@ -45,22 +45,46 @@ export default {
     }
     next();
   },
-  created() {
-    console.log('如果本地不存在', this.$route.query);
-    // if ( this.$route?.query?.format.indexOf('success') > -1) {
-    //   // 判断有牌车
-    //   if(this.$route?.query?.format === 'licensedVehicle-success') {
-    //     this.$router.replace({
-    //       // path: 'parkingFeeSuccess?vehicleNo=' + this.$route.query.vehicleNo,
-    //       path: this.getPagePath(),
-    //       query:{
-    //         ...this.$route.query,
-    //       }
-    //     });
-    //   }
-    //   // 判断无牌车
-    // }
-    // return
+  async created() {
+    // console.log('如果本地不存在', this.$route.query);
+    const {fromPage = '', format = '', unlicensed = ''} = this.$route.query
+    // licensedVehicle
+    // format
+    /*  unlicensed: unlicensedVehicle(无牌车), licensedVehicle(有牌车)
+     *  format: success, fail
+     *  fromPage: 'parkingFeeDetail' 
+     */
+    if(fromPage && format && unlicensed) {
+      const query = {
+        ...this.$route.query,
+      }
+      query.fromPage = ''
+      query.format = ''
+      query.unlicensed = ''
+      // 无牌车失败跳转
+      // 有牌车失败跳转
+      if (format === 'success') {
+        // 无牌车成功跳转, 有牌车成功跳转
+        this.$router.replace({
+          // path: 'parkingFeeSuccess?vehicleNo=' + this.$route.query.vehicleNo,
+          path: this.getPagePath(),
+          query: {
+            ...this.$route.query,
+          }
+        });
+        return
+      }
+      // 如果失败的话，刷新当前页面，则不做任何处理
+      if(format === 'fail') {
+        await Dialog.alert({
+          title: '提示',
+          message: '支付失败',
+          confirmButtonColor: '#333',
+        })
+        // await this.pageInit();
+        // return
+      }
+    }
     // 如果本地不存在
     // setTimeout(() => {
     //   uni.setNavigationBarTitle({
@@ -402,14 +426,14 @@ export default {
           // console.log(1795, res);
           if (res.data?.code == '000000') {
             const prepayJson = res.data.data.params;
-            console.log('prepayJson::', res.data)
+            // console.log('prepayJson::', res.data)
             const platform = getPlatform();
             this.isPay = true
             // TODO: h5环境判断
             if (platform === 'micromessenger') {
               const weixinH5PayRes = await this.weixinH5Pay(prepayJson);
               // 微信支付完成，判断结果
-              console.log(1784, weixinH5PayRes);
+              // console.log(1784, weixinH5PayRes);
               //  errMsg: 'requestPayment:ok'
               if (weixinH5PayRes?.errMsg === 'requestPayment:ok') {
                 this.btnLoading = false
@@ -443,8 +467,8 @@ export default {
                   paySign: prepayJson.paySign,
                 }
               }
-              debugger
-              console.log(430, options)
+              // debugger
+              // console.log(430, options)
               const data = {
                 ...options,
                 unlicensed: payParams.unlicensed,
@@ -474,40 +498,40 @@ export default {
                   vehicleNo
                 }`,
               });
-              return
-              window?.toWXSendMsg({
-                type: 'nowRoute',
-                options: {
-                  fullPath: '1'
-                },
-              });
-              window.toWXSendMsg({
-                type: 'openWxPay',
-                options: options,
-              });
-              window.subscribe('wxPayOver', (options) => {
-                if(isAlipayClient) {
-                  options.wxPayOver = options.options.wxPayOver 
-                }
-                // this.Toastloading.clear();
-                // console.log('微信支付结束之后的返回参数', options);
-                // T-ODO: 在 qa 新发版前，只提示支付成功的信息(已处理成功信息)
-                if (options?.wxPayOver === 'fail') {
-                  console.log('支付失败');
-                  this.reCreateParkOrder();
-                } else {
-                  this.btnLoading = false;
-                  this.isPay = false
-                  this.clearOrderTimeEvent()
-                  this.$router.replace({
-                    // path: 'parkingFeeSuccess?vehicleNo=' + this.$route.query.vehicleNo,
-                    path: this.getPagePath(),
-                    query:{
-                      ...this.$route.query,
-                    }
-                  });
-                }
-              });
+              // return
+              // window?.toWXSendMsg({
+              //   type: 'nowRoute',
+              //   options: {
+              //     fullPath: '1'
+              //   },
+              // });
+              // window.toWXSendMsg({
+              //   type: 'openWxPay',
+              //   options: options,
+              // });
+              // window.subscribe('wxPayOver', (options) => {
+              //   if(isAlipayClient) {
+              //     options.wxPayOver = options.options.wxPayOver 
+              //   }
+              //   // this.Toastloading.clear();
+              //   // console.log('微信支付结束之后的返回参数', options);
+              //   // T-ODO: 在 qa 新发版前，只提示支付成功的信息(已处理成功信息)
+              //   if (options?.wxPayOver === 'fail') {
+              //     console.log('支付失败');
+              //     this.reCreateParkOrder();
+              //   } else {
+              //     this.btnLoading = false;
+              //     this.isPay = false
+              //     this.clearOrderTimeEvent()
+              //     this.$router.replace({
+              //       // path: 'parkingFeeSuccess?vehicleNo=' + this.$route.query.vehicleNo,
+              //       path: this.getPagePath(),
+              //       query:{
+              //         ...this.$route.query,
+              //       }
+              //     });
+              //   }
+              // });
             }
           } else {
             this.reCreateParkOrder();
@@ -630,7 +654,7 @@ export default {
           this.$store.dispatch('clearUnlicensed');
         }, 1200);
       } catch (err) {
-        console.log('查询车辆是否在场的报错信息?', err, err.code === "INTERNAL_SERVER_ERROR");
+        // console.log('查询车辆是否在场的报错信息?', err, err.code === "INTERNAL_SERVER_ERROR");
         // 如果网络异常（这里是因为订单页面存在空白场景，才需要单独处理报错交互）
         if (err.code === "INTERNAL_SERVER_ERROR") {
           this.clearOrderTimeEvent()
@@ -749,8 +773,8 @@ export default {
     // 获取成功缴费之后前往的页面
     getPagePath() {
       let pagePath = 'parkingFeeSuccess?vehicleNo=' + this.$route.query.vehicleNo
-      console.log('临时车流程', this.endlessLoop);
-      if (this.$route.query.vehicleNo.indexOf('临') > -1 && this.endlessLoop || this.$route.query.gateId) {
+      // console.log('临时车流程', this.endlessLoop);
+      if (this.$route.query.vehicleNo.indexOf('临') > -1) {
         pagePath = 'parkingFeeMsg?type=pay'
       }
       return pagePath
@@ -787,7 +811,7 @@ export default {
           this.$router.replace({
             path: 'parkingFeeMsg',
             query: {
-              type: pay,
+              type: 'pay',
               ...this.$route.query,
             }
           });
@@ -831,6 +855,9 @@ export default {
               vehicleNo: this.$route.query.vehicleNo,
             },
           });
+          setTimeout(() => {
+            this.$router.go(-1)
+          }, 300)
           return
         }
         if (/LOCAL_PARK_ERROR|INTERNAL_SERVER_ERROR|VALIDATION_FAILED|PLEASE_SCAN_QRCODE/g.test(res.code)) {

src/pages/parkingFeeV2/mixins/parkingFeeSuccess.js

@@ -0,0 +1,78 @@
+// import payIcon from '../static/images/hint.png';
+import payIcon from '@/pages/parkingFee/static/images/pay-success.png';
+import { mapState } from 'vuex';
+import uni from '@/utils/uniHooks';
+
+export default {
+  onLoad(params) {
+    const parkInfo = JSON.parse(uni.getStorageSync('parkinfo'));
+    this.carno = params.carno;
+    if (parkInfo && parkInfo.outParkCharging) {
+      this.outParkCharging = parkInfo.outParkCharging;
+    }
+  },
+  data() {
+    return {
+      vehicleNo: '',
+      outParkCharging: 15,
+      blueIcon: this.$picUrl + '/images/icon-success-blue.png',
+      greenIcon: this.$picUrl + '/images/icon-success-green.png',
+    };
+  },
+  computed: {
+    ...mapState({
+      custTypeId: (state) => state.custTypeId,
+    }),
+    icon() {
+      return payIcon
+      /*return this.custTypeId === 0
+        ? payIcon
+        : this.custTypeId === 1
+        ? this.blueIcon
+        : this.greenIcon;*/
+    },
+  },
+  mounted() {
+    // setTimeout(() => {
+    //   window?.toWXSendMsg({
+    //     type: 'nowRoute',
+    //     options: {
+    //       fullPath: '1'
+    //     },
+    //   });
+    // }, 100);
+    // setTimeout(() => {
+    //   uni.setNavigationBarTitle({
+    //     title: '提示',
+    //   });
+    // }, 300);
+    // setTimeout(() => {
+    //   window?.toWXSendMsg({
+    //     type: 'uni_func',
+    //     funcName: 'setNavigationBarColor',
+    //     options: {
+    //       frontColor: '#000000',
+    //       backgroundColor: '#FBFCFF',
+    //     },
+    //   });
+    // }, 500)
+    if ( this.$router.query?.vehicleNo ) {
+      this.vehicleNo = this.$route.query.vehicleNo  
+    }
+  },
+  methods: {
+    page_button() {
+      // fromPage && format && unlicensed
+      this.$router.replace({
+        path: 'parkingFeeList',
+        query: this.$route.query
+      });
+    },
+    page_button1() {
+      this.$router.replace({
+        path: 'home',
+        query: this.$route.query
+      });
+    },
+  },
+};

src/pages/parkingFeeV2/parkingFeeMsg.vue

@@ -0,0 +1,342 @@
+<template>
+  <div :class="[theme, 'bg']">
+    <!-- 领取临牌：成功 -->
+    <div class="success-box" v-if="type === 'success'">
+      <img class="icon" :src="require(`@/pages/parkingFee/static/images/unlicensed/success.png`)" />
+      <div class="status-title">临牌领取成功</div>
+      <div class="status-info">若未正常抬杠，请关闭当前页面重新扫码</div>
+      <div class="status-info">或联系车场管理人员处理</div>
+      <div class="card-box">
+        <img :src="`${require(`@/pages/parkingFee/static/images/unlicensed-0.png`)}`" style="margin-left: 10px"/>
+        <div class="car-number">
+          <div class="number">{{ vehicleNo | formatCarno}}</div>
+          <div class="tips">车辆类型：无牌车辆</div>
+        </div>
+      </div>
+      <k-button title="进入首页" disabledColor="#D1D2D9" @click="goHome" />
+    </div>
+    <!-- 领取临牌：失败 -->
+    <div class="fail-box" v-if="type === 'fail'">
+      <img class="icon" :src="require(`@/pages/parkingFee/static/images/unlicensed/fail.png`)" />
+      <div class="status-title">临牌领取失败</div>
+      <div class="status-info">请关闭当前页面重新扫码</div>
+      <div class="status-info">或联系车场管理人员处理</div>
+      <div class="card-box">
+        <img :src="`${require(`@/pages/parkingFee/static/images/unlicensed-0.png`)}`" style="margin-left: 10px"/>
+        <div class="car-number">
+          <div class="number">临K ？？？</div>
+          <div class="tips">车辆类型：无牌车辆</div>
+        </div>
+      </div>
+      <k-button disabledColor="#D1D2D9" @click="scanCarCode">
+        <template v-slot:left>
+          <img class="unlicensed-scan" :src="`${require(`@/pages/parkingFee/static/images/unlicensed-scan.png`)}`" />
+        </template>
+        重新扫码
+      </k-button>
+    </div>
+    <!-- 支付成功 -->
+    <div class="pay-box" v-if="type === 'pay'">
+      <img class="pay-log" :src="require(`@/pages/parkingFee/static/images/unlicensed/pay.svg`)" />
+      <span class="info">您已缴费成功，欢迎下次光临</span>
+    </div>
+    <!-- 出场临牌：失败 -->
+    <div class="fail-box" v-if="type === 'outFail'">
+      <img class="out-fail-log" :src="require(`@/pages/parkingFee/static/images/unlicensed/no-car-out.svg`)" />
+      <k-button disabledColor="#D1D2D9" @click="scanCarCode">
+        <template v-slot:left>
+          <img class="unlicensed-scan" :src="`${require(`@/pages/parkingFee/static/images/unlicensed-scan.png`)}`" />
+        </template>
+        重新扫码
+      </k-button>
+<!--      <span class="info">您已缴费成功，欢迎下次光临</span>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import { qrCodes,unlicensedCarCheckIn } from "@/api/parking";
+import baseMixins from "@/pages/parkingFee/mixins/base";
+import uni from '@/utils/uniHooks';
+import { initWxJsSdkConfig } from '@/utils/login';
+import { getPlatform,getUrlParams, theCommunicationBetweenWechatAndH5IsNormal } from '@/utils';
+import {mapState} from "vuex";
+
+export default {
+  mixins: [baseMixins],
+  name: 'parkingFeeMsg',
+  data() {
+    return {
+      type: '',
+      vehicleNo: '',
+    };
+  },
+  computed:{
+    ...mapState({
+      unlicensedInfo: (state) => state.unlicensedInfo,
+    })
+  },
+  async created() {
+    // setTimeout(() => {
+    //   window?.toWXSendMsg({
+    //     type: 'nowRoute',
+    //     options: {
+    //       fullPath: '1'
+    //     },
+    //   });
+    // }, 100);
+    // setTimeout(() => {
+    //   uni.setNavigationBarTitle({
+    //     title: '停车缴费提示',
+    //   });
+    // }, 300);
+    // const platform = getPlatform();
+    // console.log(this.$route.query);
+    this.pageInit()
+    try {
+      await initWxJsSdkConfig(['checkJsApi', 'scanQRCode']);
+    } catch (e) {
+      console.log(e)
+    }
+  },
+  mounted() {},
+  methods: {
+    pageInit(){
+      if (this.$route.query?.type) {
+        this.type = this.$route.query?.type;
+      }
+      if (this.type === 'success') {
+        this.vehicleNo = this.$route.query?.vehicleNo;
+      }
+      this.$store.commit('SET_UNLICENSED_INFO', {});
+    },
+    // 无牌车闸机扫码
+    async scanCarCode() {
+      const runScanFn = (res) => {
+        /*
+         针对微信的小程序码进行的兼容改造
+         微信扫码结束之后的返回参数 {"errMsg": "scanCode:ok", "scanType": "WX_CODE", "charSet": "ISO8859-1", "rawData": "bGsoP3gyT1Aud3QpbW1JeHRfVHJsUjg4JnR5cGU9dW5saWNlbnNlZElu", "path": "pages/automatic/automaticIndex?scene=code%3D9988%26type%3DunlicensedIn"}
+         */
+        if(res.scanType && res.scanType === 'WX_CODE' && res?.path) {
+          const params = getUrlParams(`?${decodeURIComponent(res.path.replace(/.*scene=/g, ''))}`)
+          this.$store.commit('SET_UNLICENSED_INFO', params);
+          this.$nextTick(() => {
+            this.qrCodesRule(params.code);
+          })
+        }
+        // 兜底逻辑，如果是其他小程序扫描，则提取rawData，进行解析提取入参
+        if(res.scanType && res.scanType === 'WX_CODE' && !res?.path){
+          let path = atob(res.rawData)
+          path = path.replace(/.*([a-z0-9]{6}&type)/g, '8b$1')
+          const regex = /(\w+)&type=(\w+)/;
+          const match = path.match(regex);
+          const obj = { code: match[1], type: match[2] };
+          this.$store.commit('SET_UNLICENSED_INFO', obj);
+          this.$nextTick(() => {
+            this.qrCodesRule(obj.code);
+          })
+        }
+      };
+      // 微信小程序
+      const platform = getPlatform();
+      if (platform === 'miniprogram') {
+        // 判断微信小程序与 h5 是否正常通信
+        const isReload = await theCommunicationBetweenWechatAndH5IsNormal()
+        if(!isReload) {
+          uni.setStorageSync('isReload', 1)
+          window.location.reload()
+          return
+        }
+        window.toWXSendMsg({
+          type: 'scanQRCode',
+        });
+        // TODO 兼容支付宝无牌车扫码
+        window.subscribe('scanQRCodeOver', (options) => {
+          // console.log('微信扫码结束之后的返回参数', options);
+          runScanFn(options);
+        });
+      } else {
+        this.$wx.scanQRCode({
+          desc: 'scanQRCode desc',
+          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+          // scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
+          success: (res) => {
+            console.log('H5页面扫码获取到的参数——成功', res);
+            runScanFn(res);
+            // this.formMsg.deviceCode = res.resultStr;
+          },
+          error: (res) => {
+            console.log('H5页面扫码获取到的参数——失败', res);
+            // console.log(242, res);
+          },
+        });
+      }
+    },
+    // 处理扫码结果: 组装参数，剩余流程，在 缴费支付页面 实现
+    async qrCodesRule(code) {
+      try {
+        const qrCodesres = await qrCodes(code); // 无牌车扫码
+        // 记录buildingId，确保 buildingId 是最新的数据
+        window.localStorage.setItem('buildingId', qrCodesres.buildingId);
+        // 如果是无牌车扫码：出场
+        console.log('模拟出场', this.unlicensedInfo?.type);
+        this.$store.commit('cachedViews/DEL_CACHED_VIEW', {
+          name: 'parkingFeeDetail',
+        });
+        if (this.unlicensedInfo?.type === 'unlicensedOut') {
+          setTimeout(() => {
+            this.$router.replace({
+              path: 'parkingFeeDetail',
+              query: {
+                gateId: qrCodesres.gateId,
+                vehicleNo: '',
+                type: 'unlicensedOut'
+              }
+            })  
+          }, 300)
+          return
+        }
+        // 如果是无牌车扫码：入场
+        const unlicensedCarCheckInres = await unlicensedCarCheckIn({ // 获取无牌车牌
+          gateId: qrCodesres.gateId
+        });
+        // 前往 缴费支付页面
+        this.$router.replace({
+          path: 'parkingFeeMsg',
+          query: {
+            type: 'success',
+            vehicleNo: unlicensedCarCheckInres.vehicleNo
+          }
+        })
+      } catch (err) {
+        // 车场扫描道闸入口，发现无车/车场扫描道闸入口，发现有牌车 >>> 停止往下执行,默认提示报错信息
+        if (/CAR_HAS_PLATE/.test(err.code)) {
+          return
+        }
+        if (/CAR_NOT_FOUND|UNLICENSED_PLATE_ACQUISITION_FAILED/.test(err.code)) {
+          setTimeout(() => {
+            // 如果是其他错误的话，则继续往下执行
+            this.$router.replace({
+              path: 'parkingFeeMsg',
+              query: {
+                type: this.unlicensedInfo?.type === 'unlicensedOut' ? 'outFail' : 'fail'
+                // this.type
+              }
+            }) 
+            this.pageInit()
+          }, 300)
+        }
+      }
+    },
+    goHome() {
+      this.$router.replace({
+        path: 'home',
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bg {
+  background-color: #FBFCFF;
+}
+.pay-box {
+  text-align: center;
+  height: calc(100vh - 100px);
+  //margin-top: 84px;
+  padding-top: 100px;
+  .pay-log {
+    width: 523px;
+    display: block;
+    margin: 0 auto;
+  }
+  .info {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 39px;
+    text-align: center;
+    color: #919baa;
+  }
+}
+
+.success-box,
+.fail-box {
+  //margin-top: 123px;
+  //padding-top: 123px;
+  text-align: center;
+  padding: 123px 24px 0;
+  .icon {
+    width: 80px;
+    height: 80px;
+    display: block;
+    margin: 0 auto 42px;
+  }
+  .status-title {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 36px;
+    line-height: 50px;
+    color: #333333;
+    margin-bottom: 42px;
+  }
+  .status-info {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 40px;
+    text-align: center;
+    color: #999999;
+  }
+  .card-box {
+    height: 230px;
+    margin-top: 42px;
+    margin-bottom: 52px;
+    background: #fbfcff;
+    border: 1px solid #d9dbe0;
+    border-radius: 4px;
+    display: flex;
+
+    img {
+      width: 288px;
+      height: 142px;
+      display: block;
+      margin: auto 0;
+    }
+    .car-number {
+      //margin-top: 68px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .number {
+        font-size: 50px;
+        line-height: 56px;
+        font-weight: 600;
+        color: #333333;
+        margin-bottom: 23px;
+        letter-spacing: 6.5px;
+      }
+      .tips {
+        color: #999999;
+        text-align: left;
+      }
+    }
+  }
+  .out-fail-log {
+    width: 535px;
+    height: 410px;
+    display: block;
+    margin:  0 auto 68px;
+  }
+  
+  .unlicensed-scan {
+    width: 60px;
+    height: 60px;
+    margin-right: 16px;
+  }
+}
+</style>

src/pages/parkingFeeV2/parkingFeeSuccess.vue

@@ -0,0 +1,126 @@
+<template>
+  <div :class="['scroll-Y', theme]">
+    <!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <img :src="icon" />
+    <div class="pay-success-title">[支付成功]</div>
+    <div class="pay-success-info" >{{vehicleNo | formatCarno}}停车费支付成功</div>
+    <div class="pay-success-info" style="margin-bottom: 40px">请在<span style="color: var(--k-color-primary);">{{outParkCharging}}分钟</span>内离场</div>
+    <div>
+      <k-button title="查看缴费记录" style="margin-bottom: 24px;" @click="page_button" />
+      <k-button type="outline" title="返回首页" @click="page_button1" />
+    </div>
+
+    <!--    <div :class="{'page_button': true, 'blue_page_button': custTypeId === 1, 'green_page_button': custTypeId === 2}" @click="page_button">查看缴费记录</div>-->
+    <!--    <div :class="{'page_button1': true, 'blue_page_button1': custTypeId === 1, 'green_page_button1': custTypeId === 2}" @click="page_button1">返回首页</div>-->
+  </div>
+</template>
+
+<script>
+import parkingFeeSuccessJs from './mixins/parkingFeeSuccess'
+import baseMixins from './mixins/base'
+export default {
+  mixins:[baseMixins, parkingFeeSuccessJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #fff;
+  text-align: center;
+  img {
+    width: 110px;
+    height: 110px;
+    //margin-top: 250px;
+    margin: 126px auto 52px;
+  }
+  .pay-success-title {
+    height: 48px;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 48px;
+    margin-bottom: 40px;
+    color: #333333;
+  }
+  .pay-success-info {
+    /* 辽A 11111停车费支付成功 */
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 48px;
+    /* identical to box height */
+    text-align: center;
+    color: #999999;
+    margin-bottom: 10px;
+  }
+  .pay-success-dec {
+    /* 请在20分钟内离场 */
+
+
+    position: absolute;
+    width: 279px;
+    height: 48px;
+    left: 236px;
+    top: 594px;
+
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 48px;
+    /* identical to box height */
+
+    text-align: center;
+
+    color: #999999;
+
+  }
+}
+.page_button {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #fff;
+  background-image: linear-gradient(to right, #7e4fa1 , #433c7f);
+}
+.blue_page_button {
+  .color-background-color('blue')
+}
+.green_page_button {
+  .color-background-color('green')
+}
+.page_button1 {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #7e4fa1;
+  border:1px solid  #7e4fa1;
+}
+.style-color(@value) {
+  @color: 'color-@{value}';
+  color: @@color;
+  border-color: @@color;
+}
+.blue_page_button1 {
+  .style-color('blue')
+}
+.green_page_button1 {
+  .style-color('green')
+}
+</style>
+

src/routes/indexV2.js

@@ -74,6 +74,14 @@ export const routes = [
         path: 'parkingFeeCoupon',
         name: 'parkingFeeCouponV2',
         component: () => import('@/pages/parkingFeeV2/parkingFeeCoupon.vue'),
+    },{
+        path: 'parkingFeeMsg',
+        name: 'parkingFeeMsgV2',
+        component: () => import('@/pages/parkingFeeV2/parkingFeeMsg.vue'),
+    },{
+        path: 'parkingFeeSuccess',
+        name: 'parkingFeeSuccessV2',
+        component: () => import('@/pages/parkingFeeV2/parkingFeeSuccess.vue'),
     },
       {
         path: 'about',

src/store/order/index.js

@@ -25,7 +25,7 @@ export default {
      * @param callback    回调函数，用于接口报错时，展示对应的信息
      * @param endlessLoop 用于判断当前用户是否扫码进入
      */
-    async orderInit( {commit,dispatch,state},{gateId = '124p3LK1',vehicleNo = '浙A616A1',callback,endlessLoop, enquiryFarePolling} ) {
+    async orderInit( {commit,dispatch,state},{gateId = '',vehicleNo = '',callback,endlessLoop, enquiryFarePolling} ) {
       try {
         commit('clearOrderInfo');
         const unlicensed = vehicleNo.indexOf('临') > -1 || !vehicleNo; // true: 临时车牌；false：普通车牌

src/utils/index.js

@@ -195,6 +195,7 @@ export function initEnv() {
     // window.profileApi = 'https://sl-apim.kerryplus.com/c/api';
     // window.cmrApi = 'https://sl-crm.kerryplus.com/xcrm-api/api';
     // window.api = 'api';
+    window.wechatOfficialAccountId = 'wxb81a622ed6d60adf'
     return;
   }
   if ( /qa-/.test(href) ) {
@@ -202,6 +203,7 @@ export function initEnv() {
     window.api = 'qaApi';
     window.profileApi = 'https://qa-apim.kerryplus.com/c/api';
     window.cmrApi = 'https://qa-crm.kerryplus.com/xcrm-api/api';
+    window.wechatOfficialAccountId = 'wxb81a622ed6d60adf'
     return;
   }
   if ( /sl-/.test(href) ) {
@@ -209,12 +211,14 @@ export function initEnv() {
     window.profileApi = 'https://sl-apim.kerryplus.com/c/api';
     window.cmrApi = 'https://sl-crm.kerryplus.com/xcrm-api/api';
     window.api = 'api';
+    window.wechatOfficialAccountId = 'wxb81a622ed6d60adf'
     return;
   }
   window.env = 'prod';
   window.profileApi = 'https://apim.kerryplus.com/c/api';
   window.cmrApi = 'https://crm.kerryplus.com/xcrm-api/api';
   window.api = 'api';
+  window.wechatOfficialAccountId = 'wxb81a622ed6d60adf'
 }
 
 export function requestInit() {

src/utils/request-kip.js

@@ -14,8 +14,8 @@ function getHeaders(config = {}) {
   const { contentType = 'json' } = config;
   const ct = CONTENT_TYPE_ARRAY[contentType];
   let header = {
-    // TODO 后期需要根据环境 appId
-    appId: 'wxb81a622ed6d60adf',
+    // appId: 'wxb81a622ed6d60adf',
+    appId: window.wechatOfficialAccountId,
     'Content-Type': ct,
   };
   const token = getToken();