From b89c74120ebd17cc70df3f5945745b7d11697879 Mon Sep 17 00:00:00 2001
From: liugongyu <290219706@qq.com>
Date: Mon, 22 Apr 2024 16:38:33 +0800
Subject: [PATCH] 赤峰出场码

---
 src/api/orderPay/orderPay.js   |  16 ++++++++++++++++
 src/components/pay.vue         | 623 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/plateNumber.vue | 373 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/main.js                    |   4 ++++
 4 files changed, 667 insertions(+), 349 deletions(-)

diff --git a/src/api/orderPay/orderPay.js b/src/api/orderPay/orderPay.js
index c24de4b..896415d 100644
--- a/src/api/orderPay/orderPay.js
+++ b/src/api/orderPay/orderPay.js
@@ -34,6 +34,22 @@ export function bankH5Pay(params) {  // 农行
   })
 }
 
+export function parkRecordList(params) {
+  return request({
+    url: 'queryParkOrder/queryParkingRecordPageByCarNumbers',
+    method: 'post',
+    data: params
+  })
+}
+
+export function historyQuery(params) {
+  return request({
+    url: 'queryParkOrder/queryArrearageStaForWXPublc',
+    method: 'post',
+    data: params
+  })
+}
+
 
 
 
diff --git a/src/components/pay.vue b/src/components/pay.vue
index 7cb8298..f9c54a1 100644
--- a/src/components/pay.vue
+++ b/src/components/pay.vue
@@ -1,199 +1,380 @@
 <template>
   <div>
-    <div class="car-wrap">
-      <div class="carBG carBlue" >
-        <p class="carNumber">{{carNumber}}</p>
-        <p class="payFee">{{(orderFee/100).toFixed(2)}}元</p>
-      </div>
-    </div>
 
-    <ul class="fee-wrap">
-      <li>
-        <span>停车场</span>
-        <span>{{ parkName }}</span>
-      </li>
-      <li>
-        <span>入场时间</span>
-        <span>{{ inparktime }}</span>
-      </li>
-      <li>
-        <span>出场时间</span>
-        <span>{{ outtime }}</span>
+    <ul class="tabWrap">
+      <li v-for="(i,index) in tabList"
+          :key="i.id"
+          :class="{tabActive:currentTabActive == index}"
+          @click="tabHandle(index)"
+      >{{i.text}}
       </li>
+    </ul>
 
-      <li>
-        <span>停车时长</span>
-        <span>{{ $utils.dateFormat(staytime) }}</span>
-      </li>
+    <div v-show="currentTabActive==0">
+
+      <div v-if="currentNeed">
+        <div class="car-wrap">
+          <div class="carBG carBlue">
+            <p class="carNumber">{{carNumber}}</p>
+            <p class="payFee">{{(orderFee/100).toFixed(2)}}元</p>
+          </div>
+        </div>
+
+
+        <ul class="fee-wrap">
+          <li>
+            <span>停车场</span>
+            <span>{{ parkName }}</span>
+          </li>
+          <li>
+            <span>入场时间</span>
+            <span>{{ inparktime }}</span>
+          </li>
+          <li>
+            <span>出场时间</span>
+            <span>{{ outtime }}</span>
+          </li>
+
+          <li>
+            <span>停车时长</span>
+            <span>{{ $utils.dateFormat(staytime) }}</span>
+          </li>
+
+          <li>
+            <span>总金额</span>
+            <span>{{(due/100).toFixed(2)}} 元</span>
+          </li>
+
+          <li>
+            <span>优惠金额</span>
+            <span>{{(discountFee/100).toFixed(2)}} 元</span>
+          </li>
+
+
+          <li>
+            <span>待缴金额</span>
+            <span>{{(orderFee/100).toFixed(2)}} 元</span>
+          </li>
+
+        </ul>
+        <div style="padding: 20px 18px">
+          <div class="toPay" @click="toPay(101)">{{clientBrowser}}支付</div>
+        </div>
+      </div>
 
-      <li>
-        <span>总金额</span>
-        <span>{{(due/100).toFixed(2)}} 元</span>
-      </li>
+      <p  style="padding-top: 30px;text-align: center">
+        无需缴费
+      </p>
 
-      <li>
-        <span>优惠金额</span>
-        <span>{{(discountFee/100).toFixed(2)}} 元</span>
-      </li>
 
+    </div>
 
+    <div v-show="currentTabActive==1" class="history-con">
+      <div v-if="historyList.length>0">
 
-      <li>
-        <span>待缴金额</span>
-        <span>{{(orderFee/100).toFixed(2)}} 元</span>
-      </li>
+        <ul class="his-wrap">
+          <li v-for="(i, index) in historyList" :key="i.id" class="history-main">
 
-    </ul>
-    <div style="padding: 20px 18px">
-      <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>
-    </div>
+              <p>
+                <span>车场名称：{{i.parkName}}</span>
+                <span><b style="color: #0564CC">￥{{(i.unPayFee/100).toFixed(2)}}元</b></span>
 
-    <div v-if="appOrderTimeout.length>0">
-      <p class="tip">
-        温馨提示：
-      </p>
-      <p style="color: #666;padding: 0 18px;">
-        {{appOrderTimeout}}
+              </p>
+
+              <p>
+                <span>进场:{{i.parkInTime}}</span>
+                <span>出场:{{i.parkOutTime}}</span>
+              </p>
+
+          </li>
+        </ul>
+        <div class="toPay payAll" @click="toPayHisrory">总欠费{{(sumHis/100).toFixed(2)}}元。一键补缴</div>
+
+      </div>
+
+      <p v-else  style="padding-top: 30px;text-align: center">
+        暂无欠费记录
       </p>
     </div>
 
 
 
+
+    <!--<div v-if="appOrderTimeout.length>0">-->
+    <!--<p class="tip">-->
+    <!--温馨提示：-->
+    <!--</p>-->
+    <!--<p style="color: #666;padding: 0 18px;">-->
+    <!--{{appOrderTimeout}}-->
+    <!--</p>-->
+    <!--</div>-->
+
+    <div class="parentBox" v-if="loadingFlag">
+      <svg class="scalableBox" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="hsl(223,90%,55%)"/>
+            <stop offset="100%" stop-color="hsl(253,90%,55%)"/>
+          </linearGradient>
+          <linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="hsl(193,90%,55%)"/>
+            <stop offset="50%" stop-color="hsl(223,90%,55%)"/>
+            <stop offset="100%" stop-color="hsl(253,90%,55%)"/>
+          </linearGradient>
+        </defs>
+        <circle class="apringBox" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16"
+                stroke-linecap="round"/>
+        <circle class="apwormOneBox" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16"
+                stroke-linecap="round"
+                stroke-dasharray="87.96 263.89"/>
+        <path class="apwormTwoBox" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none"
+              stroke="url(#ap-grad2)"
+              stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494"/>
+      </svg>
+    </div>
+
   </div>
 </template>
 
 <script>
 
-let Base64 = require('js-base64').Base64
-
-import {aliPay, getOpenId, vxPayQuery, bankH5Pay} from '@/api/orderPay/orderPay'
-
+let Base64 = require("js-base64").Base64;
+import { parkRecordList, historyQuery, aliPay, getOpenId, vxPayQuery, bankH5Pay } from "@/api/orderPay/orderPay";
 export default {
-  name: 'dynCodePay',
+  name: "dynCodePay",
   data() {
     return {
+      tabList: [  // 切换数据
+        { text: "本次缴费", id: 1 },
+        { text: "离场待缴", id: 2 }
+      ],
+      currentTabActive: 1, // 显示当前哪个
       carWrapBG: 0,
-      carNumber: '',  // 车牌
-      parkName: '', // 停车场名称
-      inparktime: '', // 入场时间
-      outtime: '', // 出场时间
-      staytime: '', // 停车时长
-      orderFee: '', // 需要支付的费用
-      due: '', //  总金额
-      discountFee: '', // 优惠金额
+      carNumber: "",  // 车牌
+      parkName: "", // 停车场名称
+      inparktime: "", // 入场时间
+      outtime: "", // 出场时间
+      staytime: "", // 停车时长
+      orderFee: "", // 需要支付的费用
+      due: "", //  总金额
+      discountFee: "", // 优惠金额
       arrearageActFee: 0,
       arrearageDiscFee: 0,
       arrearageActFee: 0,
-      clientBrowser: '', // 客户端
+      clientBrowser: "", // 客户端
       paySrcType: 101, //支付的类型   101 是本次   103是历史欠费
-      orderId: '',  //支付的订单
-      webAppCode: '', // 微信code
-      appOrderTimeout: '', // 超时描述
-    }
+      orderId: "",  //支付的订单
+      webAppCode: "", // 微信code
+      appOrderTimeout: "", // 超时描述
+      loadingFlag: false,
+      historyList: [],
+      currentNeed:true,
+      orderIds:[],
+      sumHis:0
+    };
   },
   created() {
+    //
+    // this.$toast({
+    //   message: '加载中...',
+    //   position: 'top',
+    //   duration: -1 // 设置为-1表示永久显示，直到手动关闭
+    // });
     // this.carWrapBG = this.$route.query.carColor //车牌颜色
-    this.carNumber = this.$route.query.plateno
-    this.parkName = this.$route.query.parkName
-    this.inparktime = this.$route.query.inparktime
-    this.outtime = this.$route.query.outtime
-    this.staytime = this.$route.query.staytime
-    this.orderFee = this.$route.query.orderFee
-    this.due = this.$route.query.due
-    this.discountFee = this.$route.query.discountFee
+
+    if(!this.$route.query.needPay){
+      this.currentNeed = false
+    }
+
+    this.carNumber = this.$route.query.plateno;
+    this.carNumber = "蒙D3711K";
+    this.getRecordList();
+    this.parkName = this.$route.query.parkName;
+    this.inparktime = this.$route.query.inparktime;
+    this.outtime = this.$route.query.outtime;
+    this.staytime = this.$route.query.staytime;
+    this.orderFee = this.$route.query.orderFee;
+    this.due = this.$route.query.due;
+    this.discountFee = this.$route.query.discountFee;
     // this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
     // this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
     // this.arrearageActFee = this.$route.query.arrearageActFee // 实收
-    this.clientBrowser = this.$utils.clientBrowser() //支付方式
+    this.clientBrowser = this.$utils.clientBrowser(); //支付方式
     // this.paySrcType = this.$route.query.codeType // 实收
-    this.orderId = this.$route.query.orderId
+    this.orderId = this.$route.query.orderId;
     // console.log(this.orderId)
     // this.appOrderTimeout = this.$route.query.appOrderTimeout
     if (this.clientBrowser == "微信") {
       this.webAppCode = this.getCode();
     }
-
   },
   methods: {
+    toPayHisrory(){
+      let me = this
+      let salt = this.$utils.myCommonSalt(32);
+      this.historyList.forEach(function (item) {
+        item.checked = true;
+        me.orderIds.push(item.orderId)
+      });
+
+      let list = "[" + this.orderIds + "]"
+
+      let jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        // sign: md5sign,
+        sign_type: "md5",
+        appId: this.$utils.myVxAppId,
+        orderIds: list,
+        terminalSource: '7',
+        payType: this.$utils.clientBrowserPayType(),
+        orgId: this.historyList[0].orgId,
+
+      }
+      jsondata.sign = this.$utils.signObject(jsondata)
+      console.log(jsondata)
+      historyQuery(jsondata).then(response => {
+        console.log(response)
+
+        if (response.code == 0) {
+          let res = response.data.carArrearages[0]
+          console.log(res)
+
+          // this.orderIds = JSON.stringify(this.orderIds)
+          console.log(this.orderIds)
+
+          me.toPay(103)
+
+          // this.$router.push(
+          //   {
+          //     path: 'orderPay',
+          //     query: {
+          //       carColor: this.carColor,// 车牌颜色
+          //       arrearageTotalFee: res.arrearageTotalFee,// 应收
+          //       arrearageDiscFee: res.arrearageDiscFee,// 优惠
+          //       arrearageActFee: res.arrearageActFee,// 实收
+          //       carNumber: this.carNumber, // 车牌
+          //       paySrcType: 103, //支付的类型   101 是本次   103是历史欠费
+          //       ordeID: this.orderIds, //支付的订单号
+          //       appOrderTimeout: '',
+          //       myOrgId:this.historyList[0].orgId,
+          //       backDeveloperCode: response.data.inChargerCode
+          //     }
+          //   }
+          // )
+        }else{
+          this.$msgbox('提示', response.message)
+        }
+
+      })
+    },
+    tabHandle(index) { // tab 切换
+      this.currentTabActive = index;
+    },
+    getRecordList() {
+      var salt = this.$utils.myCommonSalt(32);
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        sign_type: "md5",
+        pageNum: 1,
+        pageSize: 1000,
+        parkState: 10,
+        terminalSource: 7,
+        carNumber: this.carNumber,
+        carNumberColor: this.carColor,
+        orgId: this.$utils.myOrgId
+      };
+      jsondata.sign = this.$utils.signObject(jsondata);
+      parkRecordList(jsondata).then(response => {
+        console.log(response.data.dataList);
+        this.historyList = response.data.dataList.filter(item => {
+          return item.parkState == "20";
+        });
+        this.sumHis = response.data.dataList.reduce((pre,cur) => {
+          return pre+Number(cur.unPayFee)
+        },0)
+        console.log(this.historyList.length);
+      });
+    },
     getCode() {
       var appID = this.$utils.myVxAppId;
       // alert(appID)
-      var code = this.getUrlParam('code');
+      var code = this.getUrlParam("code");
       var local = window.location.href;
-      if (code == null || code === '') {
-        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
+      if (code == null || code === "") {
+        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
       } else {
         return code;
       }
     },
     getUrlParam(name) {
-      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
-      var r = window.location.search.substr(1).match(reg)
-      if (r != null) return unescape(r[2])
-      return null
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
     },
-    toPay() {
-      let me = this
-      let _order = []
-
-      console.log(this.orderId)
-      if (this.paySrcType == 103) {
-        this.orderId = JSON.parse(this.orderId)
-        this.orderId.forEach(item => {
-          _order.push({
-            orderId: item
-          })
+    toPay(paySrcType) {
+      let me = this;
+      let newIds
+      if (paySrcType == 103) {
+
+        this.orderId = this.orderIds;
+
+        // me.orderIds.push({orderId:item.orderId})
+        newIds = this.orderIds.map(item=>{
+          return {'orderId':item}
         })
-        this.orderId = []
-        this.orderId = _order
-      }
+        // this.orderIds.forEach(item=>{
+        //   newIds.push({orderId: item})
+        // })
 
-      if (this.clientBrowser == '支付宝') { // 支付宝支付
+      }
+      if (this.clientBrowser == "支付宝") { // 支付宝支付
         var aliParams = {};
         aliParams.orderId = this.orderId;
         // aliParams.carNumber = this.carNumber;
         aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
         aliParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
-        aliParams.paySrcType = this.paySrcType;//101停车支付
-        // aliParams.orgId = this.$utils.myOrgId,
-        //   aliParams.backType = 2,
-        //   aliParams.recordArreaInfos = JSON.stringify(this.orderId);
-        console.log(aliParams)
+        aliParams.paySrcType = paySrcType;//101停车支付
+        // aliParams.orgId = this.$utils.myOrgId
+        //   aliParams.backType = 2
+          aliParams.recordArreaInfos = JSON.stringify(newIds);
+        console.log(aliParams);
         aliPay(aliParams).then(response => {
-          console.log(response)
+          console.log(response);
           if (response.code == 0) {//进场
             document.write(response.data);//打开支付表单
           } else {//其他情况如【该卡号场内已存在】
             console.log(response.message);
           }
-
-        })
+        });
       }
-
-      if (this.clientBrowser == '立即') { // 农行支付
+      if (this.clientBrowser == "立即") { // 农行支付
         var bankabcParams = {};
         bankabcParams.orderId = this.orderId;
         bankabcParams.carNumber = this.carNumber;
         bankabcParams.payType = 34;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
         bankabcParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
-        bankabcParams.paySrcType = this.paySrcType;//101停车支付
-        bankabcParams.orgId = this.$utils.myOrgId,
-          bankabcParams.backType = 2,
-        bankabcParams.PaymentLinkType = 1
+        bankabcParams.paySrcType = paySrcType;//101停车支付
+        bankabcParams.orgId = this.$utils.myOrgId;
+        bankabcParams.backType = 2;
+        bankabcParams.PaymentLinkType = 1;
         bankabcParams.recordArreaInfos = JSON.stringify(this.orderId);
-        console.log(bankabcParams)
+        console.log(bankabcParams);
         bankH5Pay(bankabcParams).then(response => {
-          console.log(response)
-          if (response.code == '0') {
-            let res = response.data.PaymentURL
-            let _token = res.split('TOKEN=')[1]
-            let OrderNo = response.data.OrderNo
-            localStorage.setItem('OrderNum', OrderNo)
-
-            if (window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) {
+          console.log(response);
+          if (response.code == "0") {
+            let res = response.data.PaymentURL;
+            let _token = res.split("TOKEN=")[1];
+            let OrderNo = response.data.OrderNo;
+            localStorage.setItem("OrderNum", OrderNo);
+            if (window.navigator.userAgent.indexOf("Bankabc/Portal") > -1) {
               // alert('当前页面在新容器');
-              AlipayJSBridge.call('startApp', {
-                appId: '30603024', // 固定值
+              AlipayJSBridge.call("startApp", {
+                appId: "30603024", // 固定值
                 param: {
                   type: "3", // 3： 掌银内H5页面，
                   tokenId: _token, //商户传过来的tokenId
@@ -201,22 +382,19 @@ export default {
                   payType: "1111", //商户传过来的payType，没有则传'1111'
                   webviewURL: "https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址
                   remark: "其他参数", //扩展备用
-                  showProgress: 'NO',
-                  backBehavior: 'back'
-                },
-              }, function (result) {
-
+                  showProgress: "NO",
+                  backBehavior: "back"
+                }
+              }, function(result) {
               });
             } else {
               // alert('当前页面在旧容器');
               // 旧支付方式
-              window.location.href = 'https://www.abchina.com/luascript/mobilePayLua/' + encodeURI('{"return":{"tokenID":"' + _token + '","backURL":"https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult","payType":""}}');
-
+              window.location.href = "https://www.abchina.com/luascript/mobilePayLua/" + encodeURI("{\"return\":{\"tokenID\":\"" + _token + "\",\"backURL\":\"https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult\",\"payType\":\"\"}}");
             }
           } else {
-            me.$msgbox('提示', '支付失败')
+            me.$msgbox("提示", "支付失败");
           }
-
           // console.log(_token)
           // let _data = 'method=invokePayFromBrowser&tokenID='+_token
           // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y')
@@ -226,10 +404,9 @@ export default {
           // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}')
           // // 即为加密后的数据。其中paramsEncode是需要加密的数据、
           // // keyStr是加密时使用的key，与服务端一致、hash是偏移量，是一个随机生成的16位字符串。
-        })
+        });
       }
-
-      if (this.clientBrowser == '微信') { // 微信支付
+      if (this.clientBrowser == "微信") { // 微信支付
         //第一步获取openid
         var codeParams = {
           code: this.webAppCode,
@@ -237,20 +414,18 @@ export default {
         };
         getOpenId(codeParams).then(res => {
           if (res.code == 0) {
-            me.vxPay(res.data, this.orderId)
+            me.vxPay(res.data, this.orderId);
           } else if (res.code == 40163) { //code been used, hints[重复code问题]
-            me.$msgbox('提示', '请重新扫码')
+            me.$msgbox("提示", "请重新扫码");
             console.log(res.message);
           } else {
-            me.$msgbox('提示', '请重新扫码')
+            me.$msgbox("提示", "请重新扫码");
           }
-        })
-
+        });
       }
-
     },
     vxPay(openIdData, orderIdData) {
-      let vm = this
+      let vm = this;
       var wxParams = {};
       wxParams.orderId = orderIdData;
       // wxParams.backType = 2,
@@ -267,31 +442,31 @@ export default {
           if (res.data) {
             var data = res.data;
             console.log(JSON.stringify(data));
-            if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
+            if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档
               if (document.addEventListener) {
-                document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
+                document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false);
               } else if (document.attachEvent) {
-                document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
-                document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
+                document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
+                document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
               }
             } else {
-              console.log('准备调用微信支付')
-              vm.onBridgeReady(data)
+              console.log("准备调用微信支付");
+              vm.onBridgeReady(data);
             }
           } else {
-            vm.$msgbox('提示', '没有找到返回值')
+            vm.$msgbox("提示", "没有找到返回值");
           }
         } else {
           console.log(res.message);
-          vm.$msgbox('提示', res.message)
+          vm.$msgbox("提示", res.message);
         }
-      })
+      });
     },
     onBridgeReady(params) {
-      let me = this
-      console.log('调用微信支付WeixinJSBridge')
+      let me = this;
+      console.log("调用微信支付WeixinJSBridge");
       WeixinJSBridge.invoke(
-        'getBrandWCPayRequest', params,
+        "getBrandWCPayRequest", params,
         //
         // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
         //   'appId': data.appId, // 公众号名称，由商户传入
@@ -301,26 +476,57 @@ export default {
         //   'signType': data.signType, // 微信签名方式
         //   'paySign': data.paySign // 微信签名
         // },
-        function (res) {
+        function(res) {
           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-          if (res.err_msg === 'get_brand_wcpay_request:ok') {
-            console.log('成功')
-            me.$msgbox('提示', '支付成功')
-
+          if (res.err_msg === "get_brand_wcpay_request:ok") {
+            console.log("成功");
+            me.$msgbox("提示", "支付成功");
           } else {
-            console.log('失败')
-            me.$msgbox('提示', '支付失败')
+            console.log("失败");
+            me.$msgbox("提示", "支付失败");
             me.$router.go(-2);
           }
         }
-      )
-    },
+      );
+    }
   },
   filters: {}
-}
+};
 </script>
 
 <style scoped lang="scss">
+  .tabWrap {
+    height: 50px;
+    background: #FFF;
+    display: flex;
+    color: #666;
+    font-size: 20px;
+    li {
+      flex: 1;
+      line-height: 50px;
+      text-align: center;
+      border-bottom: 2px solid #DFDFDF;
+    }
+    .tabActive {
+      color: #0564CC;
+      border-bottom: 2px solid #0564CC;
+      font-weight: bold;
+    }
+  }
+
+  .history-con{
+    padding-bottom: 50px;
+  }
+
+  .history-main{
+    padding: 10px;
+    border-bottom: 1px solid #e8e2e2;
+    >p{
+      display: flex;
+      justify-content:space-between
+    }
+  }
+
   .car-wrap {
     padding: 7px 7px;
     background: #FFF;
@@ -398,6 +604,11 @@ export default {
     color: #FFF;
     cursor: pointer;
   }
+  .payAll{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
 
   .tip {
     padding-left: 40px;
@@ -405,4 +616,94 @@ export default {
     background-size: 16px 16px;
     color: #666;
   }
+
+  .parentBox {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgb(31, 31, 31);
+    padding: 100px;
+    text-align: center;
+    .scalableBox {
+      width: 40px;
+      height: 70px;
+    }
+    .apringBox {
+      transition: stroke 0.3s;
+    }
+
+    .apwormOneBox,
+    .apwormTwoBox {
+      animation-duration: 3s;
+      animation-iteration-count: infinite;
+    }
+    .apwormTwoBox {
+      animation-name: worm2;
+      visibility: hidden;
+    }
+    .apwormOneBox {
+      animation-name: worm1;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: hsl(var(--hue), 10%, 10%);
+      --fg: hsl(var(--hue), 10%, 90%);
+    }
+
+    .apringBox {
+      stroke: hsla(var(--hue), 10%, 90%, 0.9);
+    }
+  }
+
+  @keyframes worm1 {
+    from {
+      animation-timing-function: ease-in-out;
+      stroke-dashoffset: -87.96;
+    }
+
+    20% {
+      animation-timing-function: ease-in;
+      stroke-dashoffset: 0;
+    }
+
+    60% {
+      stroke-dashoffset: -791.68;
+      visibility: visible;
+    }
+
+    60.1%,
+    to {
+      stroke-dashoffset: -791.68;
+      visibility: hidden;
+    }
+  }
+
+  @keyframes worm2 {
+    from,
+    60% {
+      stroke-dashoffset: -87.96;
+      visibility: hidden;
+    }
+
+    60.1% {
+      animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
+      stroke-dashoffset: -87.96;
+      visibility: visible;
+    }
+
+    77% {
+      animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
+      stroke-dashoffset: -340;
+      visibility: visible;
+    }
+
+    to {
+      stroke-dashoffset: -669.92;
+      visibility: visible;
+    }
+  }
 </style>
diff --git a/src/components/plateNumber.vue b/src/components/plateNumber.vue
index 6cae703..500b981 100644
--- a/src/components/plateNumber.vue
+++ b/src/components/plateNumber.vue
@@ -13,12 +13,13 @@
       <!--</ul>-->
 
       <p style="margin-bottom: 18px;margin-top: 18px;">
-        {{formData.commonCard == '3'?'请输入手机号码':'请输入车牌号码'}}
+        {{formData.commonCard == "3"?"请输入手机号码":"请输入车牌号码"}}
       </p>
 
 
       <div v-if="formData.commonCard == '3'">
-        <input type="text" class="iphone-box" v-model="carNum" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')">
+        <input type="text" class="iphone-box" v-model="carNum" maxlength="11"
+               oninput="value=value.replace(/[^\d]/g,'')">
       </div>
 
       <div class="num-box" v-else>
@@ -37,8 +38,6 @@
       </div>
 
 
-
-
       <div class="radio-box">
         <label class="flex-items-center" @click="keyBoardStatus = true">
           <img v-if="formData.commonCard == 1"
@@ -251,70 +250,68 @@
   </div>
 </template>
 <script>
-import { noCarQRcodeInOutPark } from '@/api/plateNumber/plateNumber'
-
+import { noCarQRcodeInOutPark } from "@/api/plateNumber/plateNumber";
 export default {
   data() {
     return {
       colorList: [
         {
-          name: '蓝牌',
-          id: '1'
+          name: "蓝牌",
+          id: "1"
         },
         {
-          name: '黄牌',
-          id: '2'
+          name: "黄牌",
+          id: "2"
         },
         {
-          name: '绿牌',
-          id: '3'
+          name: "绿牌",
+          id: "3"
         },
         {
-          name: '白牌',
-          id: '4'
+          name: "白牌",
+          id: "4"
         },
         {
-          name: '黑牌',
-          id: '5'
-        },
+          name: "黑牌",
+          id: "5"
+        }
       ],
       currentColor: 0,
-      activeBG: '#0054C0',
+      activeBG: "#0054C0",
       formData: {
-        commonCard: '1',
-        num0: '',
-        num1: '',
-        num2: '',
-        num3: '',
-        num4: '',
-        num5: '',
-        num6: '',
-        num7: ''
+        commonCard: "1",
+        num0: "",
+        num1: "",
+        num2: "",
+        num3: "",
+        num4: "",
+        num5: "",
+        num6: "",
+        num7: ""
       },
       allKeyWord: {
         _1: [1, 2, 3, 4, 5, 6, 7],
         _2: [8, 9, 0],
-        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
-        _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
-        _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
-        _6: ['W', 'X', 'Y', 'Z'],
-        _7: ['港', '澳', '学', '领', '警']
+        _3: ["A", "B", "C", "D", "E", "F", "G"],
+        _4: ["H", "J", "K", "L", "M", "N", "O"],
+        _5: ["P", "Q", "R", "S", "T", "U", "V"],
+        _6: ["W", "X", "Y", "Z"],
+        _7: ["港", "澳", "学", "领", "警"]
       },
       activeKeyWordIndex: 1, // 当前车牌号
       keyBoardStatus: false,
       firstWrapStatus: false, // 选择弹窗
-      confirmTitle: '',
+      confirmTitle: "",
       submitConfirm: false,
       submitConfirmFalse: false,
-      submitConfirmText: '',
-      carNum:'',
-      tip:'车牌号',
-    }
+      submitConfirmText: "",
+      carNum: "",
+      tip: "车牌号"
+    };
   },
   mounted() {
-
-    console.log(window.location)
-    console.log(this.$route.query)
+    console.log(window.location);
+    console.log(this.$route.query);
     // if (this.$utils.clientBrowser() == "微信") {
     //   var appID = this.$utils.myVxAppId;
     //   var code = this.getUrlParam('code');
@@ -325,21 +322,18 @@ export default {
     //     return code;
     //   }
     // }
-
-
-    let params = this.$route.query
+    let params = this.$route.query;
     if (Object.keys(params).length == 0) {
-
     } else {
-      this.noCarQRcodeInOutPark()
+      this.noCarQRcodeInOutPark();
     }
   },
   methods: {
     getUrlParam(name) {
-      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
-      var r = window.location.search.substr(1).match(reg)
-      if (r != null) return unescape(r[2])
-      return null
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
     },
     // chooseColor (index){ // 颜色选择
     //   this.currentColor = index
@@ -362,98 +356,106 @@ export default {
     //   }
     // },
     noCarQRcodeInOutPark() {
-      let params = this.$route.query
-      params.payType = this.$utils.IsWeixinOrAlipay()//4：微信     1：支付宝    34:农行
+      let params = this.$route.query;
+      params.payType = this.$utils.IsWeixinOrAlipay();//4：微信     1：支付宝    34:农行
       params.terminalSource = "7";//1:任你听 3：微信公共号 4:云平台 7:H5
-      params.app_id = 1,
-      params.salt = 2,
-      params.deviceInfo = 3,
-      params.sign_type = 'md5',
-      params.sign = 4,
-      params.token = '666'
-      params.carNumber = this.carNum
+      params.app_id = 1;
+      params.salt = 2;
+      params.deviceInfo = 3;
+      params.sign_type = "md5";
+      params.sign = 4;
+      params.token = "666";
+      params.carNumber = this.carNum;
       noCarQRcodeInOutPark(params).then(res => {
-        console.log(res)
+        console.log(res);
         if (res.code == 0) {//进场
           //alertMsg("出场成功");
           if (res.data) {
             var tmpObj = res.data;
-            console.log(tmpObj)
+            console.log(tmpObj);
             //判断是否需要支付
-            if (tmpObj.needPay) {
-              var queryParams = this.$utils.parseParams(tmpObj);
-              console.log(queryParams)
-              // //
-              this.$router.push({
-                path: 'pay',
-                query: tmpObj
-              })
-              // window.location.href = "../pay.html?" + queryParams;
-            } else {
-              this.$msgbox('提示', '无需缴费，欢迎下次光临')
-            }
+            // if (tmpObj.needPay) {
+            //   var queryParams = this.$utils.parseParams(tmpObj);
+            //   console.log(queryParams);
+            //   // //
+            //   this.$router.push({
+            //     path: "pay",
+            //     query: tmpObj
+            //   });
+            //   // window.location.href = "../pay.html?" + queryParams;
+            // } else {
+            //   this.$msgbox("提示", "无需缴费，欢迎下次光临");
+            // }
+
+
+
+            var queryParams = this.$utils.parseParams(tmpObj);
+            console.log(queryParams);
+            // //
+            this.$router.push({
+              path: "pay",
+              query: tmpObj
+            });
+
+
 
           } else {
-            this.$msgbox('提示', '没有找到订单')
+            this.$msgbox("提示", "没有找到订单");
           }
         }
-        else if(res.code == 1031){
-          sessionStorage.setItem('noPassText',res.message)
+        else if (res.code == 1031) { // 当前道闸禁止通行
+          sessionStorage.setItem("noPassText", res.message);
           this.$router.push({
-            path: 'noPass'
+            path: "noPass"
             // query: tmpObj.message
-          })
+          });
         }
         else {//其他情况如【该卡号场内已存在】
           console.log(res.message);
-          this.$msgbox('提示', res.message)
-
+          this.$msgbox("提示", res.message);
         }
-
-      })
+      });
     },
     changeTab() {
       // this.firstSelectStatus = false
       // this.firstWrapStatus = false
-      this.keyBoardStatus = false
-      this.firstClickStatus = false
-      this.firstWrapStatus = false
-
+      this.keyBoardStatus = false;
+      this.firstClickStatus = false;
+      this.firstWrapStatus = false;
     },
     clickFirstWrap() {
       // 点击第一个输入框
-      this.firstClickStatus = true
-      this.firstWrapStatus = true
-      this.keyBoardStatus = false
-      this.formData.num0 = ''
+      this.firstClickStatus = true;
+      this.firstWrapStatus = true;
+      this.keyBoardStatus = false;
+      this.formData.num0 = "";
     },
     selectFirstWord(event) {
       // 选择省份
-      if (event.target.localName !== 'span') {
-        return
+      if (event.target.localName !== "span") {
+        return;
       }
-      this.formData.num0 = event.target.innerText
-      this.firstSelectStatus = true
-      this.firstWrapStatus = false
-      this.firstClickStatus = false
-      this.keyBoardStatus = true
-      this.activeKeyWordIndex = 1
+      this.formData.num0 = event.target.innerText;
+      this.firstSelectStatus = true;
+      this.firstWrapStatus = false;
+      this.firstClickStatus = false;
+      this.keyBoardStatus = true;
+      this.activeKeyWordIndex = 1;
       // this.$refs.num1.focus()
       // document.getElementById('num1').focus()
     },
     clickKeyBoard(item) { // 点击自定义键盘
-      console.log(item)
-      this.formData['num' + this.activeKeyWordIndex] = item
-
-      if (this.formData.commonCard === '1') {
-        this.activeKeyWordIndex++
+      console.log(item);
+      this.formData["num" + this.activeKeyWordIndex] = item;
+      if (this.formData.commonCard === "1") {
+        this.activeKeyWordIndex++;
         if (this.activeKeyWordIndex > 6) {
-          this.keyBoardStatus = false
+          this.keyBoardStatus = false;
         }
       } else {
-        this.activeKeyWordIndex++
+        this.activeKeyWordIndex++;
         if (this.activeKeyWordIndex > 7) {
-          this.keyBoardStatus = false
+          this.keyBoardStatus = false;
         }
       }
     },
@@ -461,124 +463,119 @@ export default {
       // console.log(this.activeKeyWordIndex)
       // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
       if (this.activeKeyWordIndex > 1) {
-        this.formData['num' + (this.activeKeyWordIndex - 1)] = ''
-        this.activeKeyWordIndex--
+        this.formData["num" + (this.activeKeyWordIndex - 1)] = "";
+        this.activeKeyWordIndex--;
       }
     },
     clickKeyWordWrap(activeKeyWordIndex) {
-      this.keyBoardStatus = true
-      this.activeKeyWordIndex = activeKeyWordIndex
-      this.formData['num' + this.activeKeyWordIndex] = ''
+      this.keyBoardStatus = true;
+      this.activeKeyWordIndex = activeKeyWordIndex;
+      this.formData["num" + this.activeKeyWordIndex] = "";
     },
     submitFn() {
-      let plateLicense
-      if (this.formData.commonCard === '1') {
-        plateLicense = this.plate_license_1
-        plateLicense = this.palindrome(plateLicense)
+      let plateLicense;
+      if (this.formData.commonCard === "1") {
+        plateLicense = this.plate_license_1;
+        plateLicense = this.palindrome(plateLicense);
         if (plateLicense.length < 7) {
-          this.$msgbox('提示', '请输入正确车牌号')
-
-          return
+          this.$msgbox("提示", "请输入正确车牌号");
+          return;
         }
-        this.carNum = plateLicense
+        this.carNum = plateLicense;
       }
-      if (this.formData.commonCard === '2') {
-        plateLicense = this.plate_license_2
-        plateLicense = this.palindrome(plateLicense)
+      if (this.formData.commonCard === "2") {
+        plateLicense = this.plate_license_2;
+        plateLicense = this.palindrome(plateLicense);
         if (plateLicense.length < 8) {
-          this.$msgbox('提示', '请输入正确车牌号')
-
-          return
+          this.$msgbox("提示", "请输入正确车牌号");
+          return;
         }
-        this.carNum = plateLicense
+        this.carNum = plateLicense;
       }
-      console.log(plateLicense)
-      if (this.formData.commonCard === '3') {
-        plateLicense = this.plate_license_2
-        plateLicense = this.palindrome(plateLicense)
+      console.log(plateLicense);
+      if (this.formData.commonCard === "3") {
+        plateLicense = this.plate_license_2;
+        plateLicense = this.palindrome(plateLicense);
         if (this.carNum.length < 11) {
-          this.$msgbox('提示', '请输入正确手机号')
-
-          return
+          this.$msgbox("提示", "请输入正确手机号");
+          return;
         }
-        this.carNum = this.carNum+'111'
+        this.carNum = this.carNum + "111";
       }
       //
       // this.$emit('getPlateLicense', plateLicense)
       console.log(plateLicense);
-
       // this.$router.push({
       //   path: 'pay',
       //   query: {
       //     carNumber: plateLicense
       //   }
       // })
-
-      this.noCarQRcodeInOutPark()
+      this.noCarQRcodeInOutPark();
     },
     palindrome(str) {
-      var arr = str.split('')
-      arr = arr.filter(function (val) {
+      var arr = str.split("");
+      arr = arr.filter(function(val) {
         return (
-          val !== ' ' &&
-          val !== ',' &&
-          val !== '.' &&
-          val !== '?' &&
-          val !== ':' &&
-          val !== ';' &&
-          val !== '`' &&
+          val !== " " &&
+          val !== "," &&
+          val !== "." &&
+          val !== "?" &&
+          val !== ":" &&
+          val !== ";" &&
+          val !== "`" &&
           val !== "'" &&
-          val !== '_' &&
-          val !== '/' &&
-          val !== '-' &&
-          val !== '\\' &&
-          val !== '' &&
-          val !== '(' &&
-          val !== ')'
-        )
-      })
-      return arr.join('')
+          val !== "_" &&
+          val !== "/" &&
+          val !== "-" &&
+          val !== "\\" &&
+          val !== "" &&
+          val !== "(" &&
+          val !== ")"
+        );
+      });
+      return arr.join("");
     },
     checkIsHasSpecialStr(str) {
-      var flag = false
-      var arr = str.split('')
+      var flag = false;
+      var arr = str.split("");
       arr.forEach(val => {
         if (
-          val === '!' ||
-          val === '}' ||
-          val === '{' ||
-          val === ']' ||
-          val === '[' ||
-          val === '&' ||
-          val === '$' ||
-          val === '@' ||
-          val === ' ' ||
-          val === ',' ||
-          val === '.' ||
-          val === '?' ||
-          val === ':' ||
-          val === ';' ||
-          val === '`' ||
+          val === "!" ||
+          val === "}" ||
+          val === "{" ||
+          val === "]" ||
+          val === "[" ||
+          val === "&" ||
+          val === "$" ||
+          val === "@" ||
+          val === " " ||
+          val === "," ||
+          val === "." ||
+          val === "?" ||
+          val === ":" ||
+          val === ";" ||
+          val === "`" ||
           val === "'" ||
-          val === '_' ||
-          val === '/' ||
-          val === '-' ||
-          val === '\\' ||
-          val === '' ||
-          val === '(' ||
-          val === ')'
+          val === "_" ||
+          val === "/" ||
+          val === "-" ||
+          val === "\\" ||
+          val === "" ||
+          val === "(" ||
+          val === ")"
         ) {
-          flag = true
+          flag = true;
         }
-      })
-      return flag
+      });
+      return flag;
     },
     checkIsHasChineseStr(str) {
-      var Reg = /.*[\u4e00-\u9fa5]+.*/
+      var Reg = /.*[\u4e00-\u9fa5]+.*/;
       if (Reg.test(str)) {
-        return true
+        return true;
       }
-      return false
+      return false;
     }
   },
   computed: {
@@ -591,7 +588,7 @@ export default {
         this.formData.num4 +
         this.formData.num5 +
         this.formData.num6
-      )
+      );
     },
     plate_license_2() {
       return (
@@ -603,10 +600,10 @@ export default {
         this.formData.num5 +
         this.formData.num6 +
         this.formData.num7
-      )
+      );
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
   .flex-items-center {
diff --git a/src/main.js b/src/main.js
index 57bbb85..a7efac8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,6 +19,10 @@ import { Toast } from 'mint-ui';
 import { Field } from 'mint-ui';
 Vue.component(Field.name, Field);
 
+
+
+
+
 Vue.prototype.$msgbox = MessageBox
 Vue.prototype.$toast = Toast
 
--
libgit2 0.21.4