Commit b89c74120ebd17cc70df3f5945745b7d11697879

Authored by 刘淇
1 parent bee69419

赤峰出场码

src/api/orderPay/orderPay.js
@@ -34,6 +34,22 @@ export function bankH5Pay(params) { // 农行 @@ -34,6 +34,22 @@ export function bankH5Pay(params) { // 农行
34 }) 34 })
35 } 35 }
36 36
  37 +export function parkRecordList(params) {
  38 + return request({
  39 + url: 'queryParkOrder/queryParkingRecordPageByCarNumbers',
  40 + method: 'post',
  41 + data: params
  42 + })
  43 +}
  44 +
  45 +export function historyQuery(params) {
  46 + return request({
  47 + url: 'queryParkOrder/queryArrearageStaForWXPublc',
  48 + method: 'post',
  49 + data: params
  50 + })
  51 +}
  52 +
37 53
38 54
39 55
src/components/pay.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div class="car-wrap">  
4 - <div class="carBG carBlue" >  
5 - <p class="carNumber">{{carNumber}}</p>  
6 - <p class="payFee">{{(orderFee/100).toFixed(2)}}元</p>  
7 - </div>  
8 - </div>  
9 3
10 - <ul class="fee-wrap">  
11 - <li>  
12 - <span>停车场</span>  
13 - <span>{{ parkName }}</span>  
14 - </li>  
15 - <li>  
16 - <span>入场时间</span>  
17 - <span>{{ inparktime }}</span>  
18 - </li>  
19 - <li>  
20 - <span>出场时间</span>  
21 - <span>{{ outtime }}</span> 4 + <ul class="tabWrap">
  5 + <li v-for="(i,index) in tabList"
  6 + :key="i.id"
  7 + :class="{tabActive:currentTabActive == index}"
  8 + @click="tabHandle(index)"
  9 + >{{i.text}}
22 </li> 10 </li>
  11 + </ul>
23 12
24 - <li>  
25 - <span>停车时长</span>  
26 - <span>{{ $utils.dateFormat(staytime) }}</span>  
27 - </li> 13 + <div v-show="currentTabActive==0">
  14 +
  15 + <div v-if="currentNeed">
  16 + <div class="car-wrap">
  17 + <div class="carBG carBlue">
  18 + <p class="carNumber">{{carNumber}}</p>
  19 + <p class="payFee">{{(orderFee/100).toFixed(2)}}元</p>
  20 + </div>
  21 + </div>
  22 +
  23 +
  24 + <ul class="fee-wrap">
  25 + <li>
  26 + <span>停车场</span>
  27 + <span>{{ parkName }}</span>
  28 + </li>
  29 + <li>
  30 + <span>入场时间</span>
  31 + <span>{{ inparktime }}</span>
  32 + </li>
  33 + <li>
  34 + <span>出场时间</span>
  35 + <span>{{ outtime }}</span>
  36 + </li>
  37 +
  38 + <li>
  39 + <span>停车时长</span>
  40 + <span>{{ $utils.dateFormat(staytime) }}</span>
  41 + </li>
  42 +
  43 + <li>
  44 + <span>总金额</span>
  45 + <span>{{(due/100).toFixed(2)}} 元</span>
  46 + </li>
  47 +
  48 + <li>
  49 + <span>优惠金额</span>
  50 + <span>{{(discountFee/100).toFixed(2)}} 元</span>
  51 + </li>
  52 +
  53 +
  54 + <li>
  55 + <span>待缴金额</span>
  56 + <span>{{(orderFee/100).toFixed(2)}} 元</span>
  57 + </li>
  58 +
  59 + </ul>
  60 + <div style="padding: 20px 18px">
  61 + <div class="toPay" @click="toPay(101)">{{clientBrowser}}支付</div>
  62 + </div>
  63 + </div>
28 64
29 - <li>  
30 - <span>总金额</span>  
31 - <span>{{(due/100).toFixed(2)}} 元</span>  
32 - </li> 65 + <p style="padding-top: 30px;text-align: center">
  66 + 无需缴费
  67 + </p>
33 68
34 - <li>  
35 - <span>优惠金额</span>  
36 - <span>{{(discountFee/100).toFixed(2)}} 元</span>  
37 - </li>  
38 69
  70 + </div>
39 71
  72 + <div v-show="currentTabActive==1" class="history-con">
  73 + <div v-if="historyList.length>0">
40 74
41 - <li>  
42 - <span>待缴金额</span>  
43 - <span>{{(orderFee/100).toFixed(2)}} 元</span>  
44 - </li> 75 + <ul class="his-wrap">
  76 + <li v-for="(i, index) in historyList" :key="i.id" class="history-main">
45 77
46 - </ul>  
47 - <div style="padding: 20px 18px">  
48 - <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>  
49 - </div> 78 + <p>
  79 + <span>车场名称:{{i.parkName}}</span>
  80 + <span><b style="color: #0564CC">¥{{(i.unPayFee/100).toFixed(2)}}元</b></span>
50 81
51 - <div v-if="appOrderTimeout.length>0">  
52 - <p class="tip">  
53 - 温馨提示:  
54 - </p>  
55 - <p style="color: #666;padding: 0 18px;">  
56 - {{appOrderTimeout}} 82 + </p>
  83 +
  84 + <p>
  85 + <span>进场:{{i.parkInTime}}</span>
  86 + <span>出场:{{i.parkOutTime}}</span>
  87 + </p>
  88 +
  89 + </li>
  90 + </ul>
  91 + <div class="toPay payAll" @click="toPayHisrory">总欠费{{(sumHis/100).toFixed(2)}}元。一键补缴</div>
  92 +
  93 + </div>
  94 +
  95 + <p v-else style="padding-top: 30px;text-align: center">
  96 + 暂无欠费记录
57 </p> 97 </p>
58 </div> 98 </div>
59 99
60 100
61 101
  102 +
  103 + <!--<div v-if="appOrderTimeout.length>0">-->
  104 + <!--<p class="tip">-->
  105 + <!--温馨提示:-->
  106 + <!--</p>-->
  107 + <!--<p style="color: #666;padding: 0 18px;">-->
  108 + <!--{{appOrderTimeout}}-->
  109 + <!--</p>-->
  110 + <!--</div>-->
  111 +
  112 + <div class="parentBox" v-if="loadingFlag">
  113 + <svg class="scalableBox" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
  114 + <defs>
  115 + <linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
  116 + <stop offset="0%" stop-color="hsl(223,90%,55%)"/>
  117 + <stop offset="100%" stop-color="hsl(253,90%,55%)"/>
  118 + </linearGradient>
  119 + <linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
  120 + <stop offset="0%" stop-color="hsl(193,90%,55%)"/>
  121 + <stop offset="50%" stop-color="hsl(223,90%,55%)"/>
  122 + <stop offset="100%" stop-color="hsl(253,90%,55%)"/>
  123 + </linearGradient>
  124 + </defs>
  125 + <circle class="apringBox" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16"
  126 + stroke-linecap="round"/>
  127 + <circle class="apwormOneBox" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16"
  128 + stroke-linecap="round"
  129 + stroke-dasharray="87.96 263.89"/>
  130 + <path class="apwormTwoBox" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none"
  131 + stroke="url(#ap-grad2)"
  132 + stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494"/>
  133 + </svg>
  134 + </div>
  135 +
62 </div> 136 </div>
63 </template> 137 </template>
64 138
65 <script> 139 <script>
66 140
67 -let Base64 = require('js-base64').Base64  
68 -  
69 -import {aliPay, getOpenId, vxPayQuery, bankH5Pay} from '@/api/orderPay/orderPay'  
70 - 141 +let Base64 = require("js-base64").Base64;
  142 +import { parkRecordList, historyQuery, aliPay, getOpenId, vxPayQuery, bankH5Pay } from "@/api/orderPay/orderPay";
71 export default { 143 export default {
72 - name: 'dynCodePay', 144 + name: "dynCodePay",
73 data() { 145 data() {
74 return { 146 return {
  147 + tabList: [ // 切换数据
  148 + { text: "本次缴费", id: 1 },
  149 + { text: "离场待缴", id: 2 }
  150 + ],
  151 + currentTabActive: 1, // 显示当前哪个
75 carWrapBG: 0, 152 carWrapBG: 0,
76 - carNumber: '', // 车牌  
77 - parkName: '', // 停车场名称  
78 - inparktime: '', // 入场时间  
79 - outtime: '', // 出场时间  
80 - staytime: '', // 停车时长  
81 - orderFee: '', // 需要支付的费用  
82 - due: '', // 总金额  
83 - discountFee: '', // 优惠金额 153 + carNumber: "", // 车牌
  154 + parkName: "", // 停车场名称
  155 + inparktime: "", // 入场时间
  156 + outtime: "", // 出场时间
  157 + staytime: "", // 停车时长
  158 + orderFee: "", // 需要支付的费用
  159 + due: "", // 总金额
  160 + discountFee: "", // 优惠金额
84 arrearageActFee: 0, 161 arrearageActFee: 0,
85 arrearageDiscFee: 0, 162 arrearageDiscFee: 0,
86 arrearageActFee: 0, 163 arrearageActFee: 0,
87 - clientBrowser: '', // 客户端 164 + clientBrowser: "", // 客户端
88 paySrcType: 101, //支付的类型 101 是本次 103是历史欠费 165 paySrcType: 101, //支付的类型 101 是本次 103是历史欠费
89 - orderId: '', //支付的订单  
90 - webAppCode: '', // 微信code  
91 - appOrderTimeout: '', // 超时描述  
92 - } 166 + orderId: "", //支付的订单
  167 + webAppCode: "", // 微信code
  168 + appOrderTimeout: "", // 超时描述
  169 + loadingFlag: false,
  170 + historyList: [],
  171 + currentNeed:true,
  172 + orderIds:[],
  173 + sumHis:0
  174 + };
93 }, 175 },
94 created() { 176 created() {
  177 + //
  178 + // this.$toast({
  179 + // message: '加载中...',
  180 + // position: 'top',
  181 + // duration: -1 // 设置为-1表示永久显示,直到手动关闭
  182 + // });
95 // this.carWrapBG = this.$route.query.carColor //车牌颜色 183 // this.carWrapBG = this.$route.query.carColor //车牌颜色
96 - this.carNumber = this.$route.query.plateno  
97 - this.parkName = this.$route.query.parkName  
98 - this.inparktime = this.$route.query.inparktime  
99 - this.outtime = this.$route.query.outtime  
100 - this.staytime = this.$route.query.staytime  
101 - this.orderFee = this.$route.query.orderFee  
102 - this.due = this.$route.query.due  
103 - this.discountFee = this.$route.query.discountFee 184 +
  185 + if(!this.$route.query.needPay){
  186 + this.currentNeed = false
  187 + }
  188 +
  189 + this.carNumber = this.$route.query.plateno;
  190 + this.carNumber = "蒙D3711K";
  191 + this.getRecordList();
  192 + this.parkName = this.$route.query.parkName;
  193 + this.inparktime = this.$route.query.inparktime;
  194 + this.outtime = this.$route.query.outtime;
  195 + this.staytime = this.$route.query.staytime;
  196 + this.orderFee = this.$route.query.orderFee;
  197 + this.due = this.$route.query.due;
  198 + this.discountFee = this.$route.query.discountFee;
104 // this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收 199 // this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
105 // this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠 200 // this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
106 // this.arrearageActFee = this.$route.query.arrearageActFee // 实收 201 // this.arrearageActFee = this.$route.query.arrearageActFee // 实收
107 - this.clientBrowser = this.$utils.clientBrowser() //支付方式 202 + this.clientBrowser = this.$utils.clientBrowser(); //支付方式
108 // this.paySrcType = this.$route.query.codeType // 实收 203 // this.paySrcType = this.$route.query.codeType // 实收
109 - this.orderId = this.$route.query.orderId 204 + this.orderId = this.$route.query.orderId;
110 // console.log(this.orderId) 205 // console.log(this.orderId)
111 // this.appOrderTimeout = this.$route.query.appOrderTimeout 206 // this.appOrderTimeout = this.$route.query.appOrderTimeout
112 if (this.clientBrowser == "微信") { 207 if (this.clientBrowser == "微信") {
113 this.webAppCode = this.getCode(); 208 this.webAppCode = this.getCode();
114 } 209 }
115 -  
116 }, 210 },
117 methods: { 211 methods: {
  212 + toPayHisrory(){
  213 + let me = this
  214 + let salt = this.$utils.myCommonSalt(32);
  215 + this.historyList.forEach(function (item) {
  216 + item.checked = true;
  217 + me.orderIds.push(item.orderId)
  218 + });
  219 +
  220 + let list = "[" + this.orderIds + "]"
  221 +
  222 + let jsondata = {
  223 + app_id: this.$utils.myVarAppid,
  224 + deviceInfo: this.$utils.myDeviceInfo,
  225 + salt: salt,
  226 + // sign: md5sign,
  227 + sign_type: "md5",
  228 + appId: this.$utils.myVxAppId,
  229 + orderIds: list,
  230 + terminalSource: '7',
  231 + payType: this.$utils.clientBrowserPayType(),
  232 + orgId: this.historyList[0].orgId,
  233 +
  234 + }
  235 + jsondata.sign = this.$utils.signObject(jsondata)
  236 + console.log(jsondata)
  237 + historyQuery(jsondata).then(response => {
  238 + console.log(response)
  239 +
  240 + if (response.code == 0) {
  241 + let res = response.data.carArrearages[0]
  242 + console.log(res)
  243 +
  244 + // this.orderIds = JSON.stringify(this.orderIds)
  245 + console.log(this.orderIds)
  246 +
  247 + me.toPay(103)
  248 +
  249 + // this.$router.push(
  250 + // {
  251 + // path: 'orderPay',
  252 + // query: {
  253 + // carColor: this.carColor,// 车牌颜色
  254 + // arrearageTotalFee: res.arrearageTotalFee,// 应收
  255 + // arrearageDiscFee: res.arrearageDiscFee,// 优惠
  256 + // arrearageActFee: res.arrearageActFee,// 实收
  257 + // carNumber: this.carNumber, // 车牌
  258 + // paySrcType: 103, //支付的类型 101 是本次 103是历史欠费
  259 + // ordeID: this.orderIds, //支付的订单号
  260 + // appOrderTimeout: '',
  261 + // myOrgId:this.historyList[0].orgId,
  262 + // backDeveloperCode: response.data.inChargerCode
  263 + // }
  264 + // }
  265 + // )
  266 + }else{
  267 + this.$msgbox('提示', response.message)
  268 + }
  269 +
  270 + })
  271 + },
  272 + tabHandle(index) { // tab 切换
  273 + this.currentTabActive = index;
  274 + },
  275 + getRecordList() {
  276 + var salt = this.$utils.myCommonSalt(32);
  277 + var jsondata = {
  278 + app_id: this.$utils.myVarAppid,
  279 + deviceInfo: this.$utils.myDeviceInfo,
  280 + salt: salt,
  281 + sign_type: "md5",
  282 + pageNum: 1,
  283 + pageSize: 1000,
  284 + parkState: 10,
  285 + terminalSource: 7,
  286 + carNumber: this.carNumber,
  287 + carNumberColor: this.carColor,
  288 + orgId: this.$utils.myOrgId
  289 + };
  290 + jsondata.sign = this.$utils.signObject(jsondata);
  291 + parkRecordList(jsondata).then(response => {
  292 + console.log(response.data.dataList);
  293 + this.historyList = response.data.dataList.filter(item => {
  294 + return item.parkState == "20";
  295 + });
  296 + this.sumHis = response.data.dataList.reduce((pre,cur) => {
  297 + return pre+Number(cur.unPayFee)
  298 + },0)
  299 + console.log(this.historyList.length);
  300 + });
  301 + },
118 getCode() { 302 getCode() {
119 var appID = this.$utils.myVxAppId; 303 var appID = this.$utils.myVxAppId;
120 // alert(appID) 304 // alert(appID)
121 - var code = this.getUrlParam('code'); 305 + var code = this.getUrlParam("code");
122 var local = window.location.href; 306 var local = window.location.href;
123 - if (code == null || code === '') {  
124 - 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' 307 + if (code == null || code === "") {
  308 + 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";
125 } else { 309 } else {
126 return code; 310 return code;
127 } 311 }
128 }, 312 },
129 getUrlParam(name) { 313 getUrlParam(name) {
130 - var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');  
131 - var r = window.location.search.substr(1).match(reg)  
132 - if (r != null) return unescape(r[2])  
133 - return null 314 + var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  315 + var r = window.location.search.substr(1).match(reg);
  316 + if (r != null) return unescape(r[2]);
  317 + return null;
134 }, 318 },
135 - toPay() {  
136 - let me = this  
137 - let _order = []  
138 -  
139 - console.log(this.orderId)  
140 - if (this.paySrcType == 103) {  
141 - this.orderId = JSON.parse(this.orderId)  
142 - this.orderId.forEach(item => {  
143 - _order.push({  
144 - orderId: item  
145 - }) 319 + toPay(paySrcType) {
  320 + let me = this;
  321 + let newIds
  322 + if (paySrcType == 103) {
  323 +
  324 + this.orderId = this.orderIds;
  325 +
  326 + // me.orderIds.push({orderId:item.orderId})
  327 + newIds = this.orderIds.map(item=>{
  328 + return {'orderId':item}
146 }) 329 })
147 - this.orderId = []  
148 - this.orderId = _order  
149 - } 330 + // this.orderIds.forEach(item=>{
  331 + // newIds.push({orderId: item})
  332 + // })
150 333
151 - if (this.clientBrowser == '支付宝') { // 支付宝支付 334 + }
  335 + if (this.clientBrowser == "支付宝") { // 支付宝支付
152 var aliParams = {}; 336 var aliParams = {};
153 aliParams.orderId = this.orderId; 337 aliParams.orderId = this.orderId;
154 // aliParams.carNumber = this.carNumber; 338 // aliParams.carNumber = this.carNumber;
155 aliParams.payType = 1;// 1:支付宝 2:微信 3:银联 10:H5 4微信公众号 339 aliParams.payType = 1;// 1:支付宝 2:微信 3:银联 10:H5 4微信公众号
156 aliParams.terminalSource = 7;//请求端来源 1: 任你停 2:pda 3:微信公共号 7:H5扫码 10页面支付 340 aliParams.terminalSource = 7;//请求端来源 1: 任你停 2:pda 3:微信公共号 7:H5扫码 10页面支付
157 - aliParams.paySrcType = this.paySrcType;//101停车支付  
158 - // aliParams.orgId = this.$utils.myOrgId,  
159 - // aliParams.backType = 2,  
160 - // aliParams.recordArreaInfos = JSON.stringify(this.orderId);  
161 - console.log(aliParams) 341 + aliParams.paySrcType = paySrcType;//101停车支付
  342 + // aliParams.orgId = this.$utils.myOrgId
  343 + // aliParams.backType = 2
  344 + aliParams.recordArreaInfos = JSON.stringify(newIds);
  345 + console.log(aliParams);
162 aliPay(aliParams).then(response => { 346 aliPay(aliParams).then(response => {
163 - console.log(response) 347 + console.log(response);
164 if (response.code == 0) {//进场 348 if (response.code == 0) {//进场
165 document.write(response.data);//打开支付表单 349 document.write(response.data);//打开支付表单
166 } else {//其他情况如【该卡号场内已存在】 350 } else {//其他情况如【该卡号场内已存在】
167 console.log(response.message); 351 console.log(response.message);
168 } 352 }
169 -  
170 - }) 353 + });
171 } 354 }
172 -  
173 - if (this.clientBrowser == '立即') { // 农行支付 355 + if (this.clientBrowser == "立即") { // 农行支付
174 var bankabcParams = {}; 356 var bankabcParams = {};
175 bankabcParams.orderId = this.orderId; 357 bankabcParams.orderId = this.orderId;
176 bankabcParams.carNumber = this.carNumber; 358 bankabcParams.carNumber = this.carNumber;
177 bankabcParams.payType = 34;// 1:支付宝 2:微信 3:银联 10:H5 4微信公众号 359 bankabcParams.payType = 34;// 1:支付宝 2:微信 3:银联 10:H5 4微信公众号
178 bankabcParams.terminalSource = 7;//请求端来源 1: 任你停 2:pda 3:微信公共号 7:H5扫码 10页面支付 360 bankabcParams.terminalSource = 7;//请求端来源 1: 任你停 2:pda 3:微信公共号 7:H5扫码 10页面支付
179 - bankabcParams.paySrcType = this.paySrcType;//101停车支付  
180 - bankabcParams.orgId = this.$utils.myOrgId,  
181 - bankabcParams.backType = 2,  
182 - bankabcParams.PaymentLinkType = 1 361 + bankabcParams.paySrcType = paySrcType;//101停车支付
  362 + bankabcParams.orgId = this.$utils.myOrgId;
  363 + bankabcParams.backType = 2;
  364 + bankabcParams.PaymentLinkType = 1;
183 bankabcParams.recordArreaInfos = JSON.stringify(this.orderId); 365 bankabcParams.recordArreaInfos = JSON.stringify(this.orderId);
184 - console.log(bankabcParams) 366 + console.log(bankabcParams);
185 bankH5Pay(bankabcParams).then(response => { 367 bankH5Pay(bankabcParams).then(response => {
186 - console.log(response)  
187 - if (response.code == '0') {  
188 - let res = response.data.PaymentURL  
189 - let _token = res.split('TOKEN=')[1]  
190 - let OrderNo = response.data.OrderNo  
191 - localStorage.setItem('OrderNum', OrderNo)  
192 -  
193 - if (window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) { 368 + console.log(response);
  369 + if (response.code == "0") {
  370 + let res = response.data.PaymentURL;
  371 + let _token = res.split("TOKEN=")[1];
  372 + let OrderNo = response.data.OrderNo;
  373 + localStorage.setItem("OrderNum", OrderNo);
  374 + if (window.navigator.userAgent.indexOf("Bankabc/Portal") > -1) {
194 // alert('当前页面在新容器'); 375 // alert('当前页面在新容器');
195 - AlipayJSBridge.call('startApp', {  
196 - appId: '30603024', // 固定值 376 + AlipayJSBridge.call("startApp", {
  377 + appId: "30603024", // 固定值
197 param: { 378 param: {
198 type: "3", // 3: 掌银内H5页面, 379 type: "3", // 3: 掌银内H5页面,
199 tokenId: _token, //商户传过来的tokenId 380 tokenId: _token, //商户传过来的tokenId
@@ -201,22 +382,19 @@ export default { @@ -201,22 +382,19 @@ export default {
201 payType: "1111", //商户传过来的payType,没有则传'1111' 382 payType: "1111", //商户传过来的payType,没有则传'1111'
202 webviewURL: "https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址 383 webviewURL: "https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址
203 remark: "其他参数", //扩展备用 384 remark: "其他参数", //扩展备用
204 - showProgress: 'NO',  
205 - backBehavior: 'back'  
206 - },  
207 - }, function (result) {  
208 - 385 + showProgress: "NO",
  386 + backBehavior: "back"
  387 + }
  388 + }, function(result) {
209 }); 389 });
210 } else { 390 } else {
211 // alert('当前页面在旧容器'); 391 // alert('当前页面在旧容器');
212 // 旧支付方式 392 // 旧支付方式
213 - 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":""}}');  
214 - 393 + 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\":\"\"}}");
215 } 394 }
216 } else { 395 } else {
217 - me.$msgbox('提示', '支付失败') 396 + me.$msgbox("提示", "支付失败");
218 } 397 }
219 -  
220 // console.log(_token) 398 // console.log(_token)
221 // let _data = 'method=invokePayFromBrowser&tokenID='+_token 399 // let _data = 'method=invokePayFromBrowser&tokenID='+_token
222 // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y') 400 // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y')
@@ -226,10 +404,9 @@ export default { @@ -226,10 +404,9 @@ export default {
226 // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}') 404 // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}')
227 // // 即为加密后的数据。其中paramsEncode是需要加密的数据、 405 // // 即为加密后的数据。其中paramsEncode是需要加密的数据、
228 // // keyStr是加密时使用的key,与服务端一致、hash是偏移量,是一个随机生成的16位字符串。 406 // // keyStr是加密时使用的key,与服务端一致、hash是偏移量,是一个随机生成的16位字符串。
229 - }) 407 + });
230 } 408 }
231 -  
232 - if (this.clientBrowser == '微信') { // 微信支付 409 + if (this.clientBrowser == "微信") { // 微信支付
233 //第一步获取openid 410 //第一步获取openid
234 var codeParams = { 411 var codeParams = {
235 code: this.webAppCode, 412 code: this.webAppCode,
@@ -237,20 +414,18 @@ export default { @@ -237,20 +414,18 @@ export default {
237 }; 414 };
238 getOpenId(codeParams).then(res => { 415 getOpenId(codeParams).then(res => {
239 if (res.code == 0) { 416 if (res.code == 0) {
240 - me.vxPay(res.data, this.orderId) 417 + me.vxPay(res.data, this.orderId);
241 } else if (res.code == 40163) { //code been used, hints[重复code问题] 418 } else if (res.code == 40163) { //code been used, hints[重复code问题]
242 - me.$msgbox('提示', '请重新扫码') 419 + me.$msgbox("提示", "请重新扫码");
243 console.log(res.message); 420 console.log(res.message);
244 } else { 421 } else {
245 - me.$msgbox('提示', '请重新扫码') 422 + me.$msgbox("提示", "请重新扫码");
246 } 423 }
247 - })  
248 - 424 + });
249 } 425 }
250 -  
251 }, 426 },
252 vxPay(openIdData, orderIdData) { 427 vxPay(openIdData, orderIdData) {
253 - let vm = this 428 + let vm = this;
254 var wxParams = {}; 429 var wxParams = {};
255 wxParams.orderId = orderIdData; 430 wxParams.orderId = orderIdData;
256 // wxParams.backType = 2, 431 // wxParams.backType = 2,
@@ -267,31 +442,31 @@ export default { @@ -267,31 +442,31 @@ export default {
267 if (res.data) { 442 if (res.data) {
268 var data = res.data; 443 var data = res.data;
269 console.log(JSON.stringify(data)); 444 console.log(JSON.stringify(data));
270 - if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档 445 + if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档
271 if (document.addEventListener) { 446 if (document.addEventListener) {
272 - document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false) 447 + document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false);
273 } else if (document.attachEvent) { 448 } else if (document.attachEvent) {
274 - document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))  
275 - document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data)) 449 + document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
  450 + document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
276 } 451 }
277 } else { 452 } else {
278 - console.log('准备调用微信支付')  
279 - vm.onBridgeReady(data) 453 + console.log("准备调用微信支付");
  454 + vm.onBridgeReady(data);
280 } 455 }
281 } else { 456 } else {
282 - vm.$msgbox('提示', '没有找到返回值') 457 + vm.$msgbox("提示", "没有找到返回值");
283 } 458 }
284 } else { 459 } else {
285 console.log(res.message); 460 console.log(res.message);
286 - vm.$msgbox('提示', res.message) 461 + vm.$msgbox("提示", res.message);
287 } 462 }
288 - }) 463 + });
289 }, 464 },
290 onBridgeReady(params) { 465 onBridgeReady(params) {
291 - let me = this  
292 - console.log('调用微信支付WeixinJSBridge') 466 + let me = this;
  467 + console.log("调用微信支付WeixinJSBridge");
293 WeixinJSBridge.invoke( 468 WeixinJSBridge.invoke(
294 - 'getBrandWCPayRequest', params, 469 + "getBrandWCPayRequest", params,
295 // 470 //
296 // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的 471 // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
297 // 'appId': data.appId, // 公众号名称,由商户传入 472 // 'appId': data.appId, // 公众号名称,由商户传入
@@ -301,26 +476,57 @@ export default { @@ -301,26 +476,57 @@ export default {
301 // 'signType': data.signType, // 微信签名方式 476 // 'signType': data.signType, // 微信签名方式
302 // 'paySign': data.paySign // 微信签名 477 // 'paySign': data.paySign // 微信签名
303 // }, 478 // },
304 - function (res) { 479 + function(res) {
305 // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 480 // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
306 - if (res.err_msg === 'get_brand_wcpay_request:ok') {  
307 - console.log('成功')  
308 - me.$msgbox('提示', '支付成功')  
309 - 481 + if (res.err_msg === "get_brand_wcpay_request:ok") {
  482 + console.log("成功");
  483 + me.$msgbox("提示", "支付成功");
310 } else { 484 } else {
311 - console.log('失败')  
312 - me.$msgbox('提示', '支付失败') 485 + console.log("失败");
  486 + me.$msgbox("提示", "支付失败");
313 me.$router.go(-2); 487 me.$router.go(-2);
314 } 488 }
315 } 489 }
316 - )  
317 - }, 490 + );
  491 + }
318 }, 492 },
319 filters: {} 493 filters: {}
320 -} 494 +};
321 </script> 495 </script>
322 496
323 <style scoped lang="scss"> 497 <style scoped lang="scss">
  498 + .tabWrap {
  499 + height: 50px;
  500 + background: #FFF;
  501 + display: flex;
  502 + color: #666;
  503 + font-size: 20px;
  504 + li {
  505 + flex: 1;
  506 + line-height: 50px;
  507 + text-align: center;
  508 + border-bottom: 2px solid #DFDFDF;
  509 + }
  510 + .tabActive {
  511 + color: #0564CC;
  512 + border-bottom: 2px solid #0564CC;
  513 + font-weight: bold;
  514 + }
  515 + }
  516 +
  517 + .history-con{
  518 + padding-bottom: 50px;
  519 + }
  520 +
  521 + .history-main{
  522 + padding: 10px;
  523 + border-bottom: 1px solid #e8e2e2;
  524 + >p{
  525 + display: flex;
  526 + justify-content:space-between
  527 + }
  528 + }
  529 +
324 .car-wrap { 530 .car-wrap {
325 padding: 7px 7px; 531 padding: 7px 7px;
326 background: #FFF; 532 background: #FFF;
@@ -398,6 +604,11 @@ export default { @@ -398,6 +604,11 @@ export default {
398 color: #FFF; 604 color: #FFF;
399 cursor: pointer; 605 cursor: pointer;
400 } 606 }
  607 + .payAll{
  608 + position: fixed;
  609 + bottom: 0;
  610 + left: 0;
  611 + }
401 612
402 .tip { 613 .tip {
403 padding-left: 40px; 614 padding-left: 40px;
@@ -405,4 +616,94 @@ export default { @@ -405,4 +616,94 @@ export default {
405 background-size: 16px 16px; 616 background-size: 16px 16px;
406 color: #666; 617 color: #666;
407 } 618 }
  619 +
  620 + .parentBox {
  621 + height: 100%;
  622 + width: 100%;
  623 + position: fixed;
  624 + top: 0;
  625 + left: 0;
  626 + background: rgb(31, 31, 31);
  627 + padding: 100px;
  628 + text-align: center;
  629 + .scalableBox {
  630 + width: 40px;
  631 + height: 70px;
  632 + }
  633 + .apringBox {
  634 + transition: stroke 0.3s;
  635 + }
  636 +
  637 + .apwormOneBox,
  638 + .apwormTwoBox {
  639 + animation-duration: 3s;
  640 + animation-iteration-count: infinite;
  641 + }
  642 + .apwormTwoBox {
  643 + animation-name: worm2;
  644 + visibility: hidden;
  645 + }
  646 + .apwormOneBox {
  647 + animation-name: worm1;
  648 + }
  649 + }
  650 +
  651 + @media (prefers-color-scheme: dark) {
  652 + :root {
  653 + --bg: hsl(var(--hue), 10%, 10%);
  654 + --fg: hsl(var(--hue), 10%, 90%);
  655 + }
  656 +
  657 + .apringBox {
  658 + stroke: hsla(var(--hue), 10%, 90%, 0.9);
  659 + }
  660 + }
  661 +
  662 + @keyframes worm1 {
  663 + from {
  664 + animation-timing-function: ease-in-out;
  665 + stroke-dashoffset: -87.96;
  666 + }
  667 +
  668 + 20% {
  669 + animation-timing-function: ease-in;
  670 + stroke-dashoffset: 0;
  671 + }
  672 +
  673 + 60% {
  674 + stroke-dashoffset: -791.68;
  675 + visibility: visible;
  676 + }
  677 +
  678 + 60.1%,
  679 + to {
  680 + stroke-dashoffset: -791.68;
  681 + visibility: hidden;
  682 + }
  683 + }
  684 +
  685 + @keyframes worm2 {
  686 + from,
  687 + 60% {
  688 + stroke-dashoffset: -87.96;
  689 + visibility: hidden;
  690 + }
  691 +
  692 + 60.1% {
  693 + animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
  694 + stroke-dashoffset: -87.96;
  695 + visibility: visible;
  696 + }
  697 +
  698 + 77% {
  699 + animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
  700 + stroke-dashoffset: -340;
  701 + visibility: visible;
  702 + }
  703 +
  704 + to {
  705 + stroke-dashoffset: -669.92;
  706 + visibility: visible;
  707 + }
  708 + }
408 </style> 709 </style>
src/components/plateNumber.vue
@@ -13,12 +13,13 @@ @@ -13,12 +13,13 @@
13 <!--</ul>--> 13 <!--</ul>-->
14 14
15 <p style="margin-bottom: 18px;margin-top: 18px;"> 15 <p style="margin-bottom: 18px;margin-top: 18px;">
16 - {{formData.commonCard == '3'?'请输入手机号码':'请输入车牌号码'}} 16 + {{formData.commonCard == "3"?"请输入手机号码":"请输入车牌号码"}}
17 </p> 17 </p>
18 18
19 19
20 <div v-if="formData.commonCard == '3'"> 20 <div v-if="formData.commonCard == '3'">
21 - <input type="text" class="iphone-box" v-model="carNum" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"> 21 + <input type="text" class="iphone-box" v-model="carNum" maxlength="11"
  22 + oninput="value=value.replace(/[^\d]/g,'')">
22 </div> 23 </div>
23 24
24 <div class="num-box" v-else> 25 <div class="num-box" v-else>
@@ -37,8 +38,6 @@ @@ -37,8 +38,6 @@
37 </div> 38 </div>
38 39
39 40
40 -  
41 -  
42 <div class="radio-box"> 41 <div class="radio-box">
43 <label class="flex-items-center" @click="keyBoardStatus = true"> 42 <label class="flex-items-center" @click="keyBoardStatus = true">
44 <img v-if="formData.commonCard == 1" 43 <img v-if="formData.commonCard == 1"
@@ -251,70 +250,68 @@ @@ -251,70 +250,68 @@
251 </div> 250 </div>
252 </template> 251 </template>
253 <script> 252 <script>
254 -import { noCarQRcodeInOutPark } from '@/api/plateNumber/plateNumber'  
255 - 253 +import { noCarQRcodeInOutPark } from "@/api/plateNumber/plateNumber";
256 export default { 254 export default {
257 data() { 255 data() {
258 return { 256 return {
259 colorList: [ 257 colorList: [
260 { 258 {
261 - name: '蓝牌',  
262 - id: '1' 259 + name: "蓝牌",
  260 + id: "1"
263 }, 261 },
264 { 262 {
265 - name: '黄牌',  
266 - id: '2' 263 + name: "黄牌",
  264 + id: "2"
267 }, 265 },
268 { 266 {
269 - name: '绿牌',  
270 - id: '3' 267 + name: "绿牌",
  268 + id: "3"
271 }, 269 },
272 { 270 {
273 - name: '白牌',  
274 - id: '4' 271 + name: "白牌",
  272 + id: "4"
275 }, 273 },
276 { 274 {
277 - name: '黑牌',  
278 - id: '5'  
279 - }, 275 + name: "黑牌",
  276 + id: "5"
  277 + }
280 ], 278 ],
281 currentColor: 0, 279 currentColor: 0,
282 - activeBG: '#0054C0', 280 + activeBG: "#0054C0",
283 formData: { 281 formData: {
284 - commonCard: '1',  
285 - num0: '',  
286 - num1: '',  
287 - num2: '',  
288 - num3: '',  
289 - num4: '',  
290 - num5: '',  
291 - num6: '',  
292 - num7: '' 282 + commonCard: "1",
  283 + num0: "",
  284 + num1: "",
  285 + num2: "",
  286 + num3: "",
  287 + num4: "",
  288 + num5: "",
  289 + num6: "",
  290 + num7: ""
293 }, 291 },
294 allKeyWord: { 292 allKeyWord: {
295 _1: [1, 2, 3, 4, 5, 6, 7], 293 _1: [1, 2, 3, 4, 5, 6, 7],
296 _2: [8, 9, 0], 294 _2: [8, 9, 0],
297 - _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],  
298 - _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],  
299 - _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],  
300 - _6: ['W', 'X', 'Y', 'Z'],  
301 - _7: ['港', '澳', '学', '领', '警'] 295 + _3: ["A", "B", "C", "D", "E", "F", "G"],
  296 + _4: ["H", "J", "K", "L", "M", "N", "O"],
  297 + _5: ["P", "Q", "R", "S", "T", "U", "V"],
  298 + _6: ["W", "X", "Y", "Z"],
  299 + _7: ["港", "澳", "学", "领", "警"]
302 }, 300 },
303 activeKeyWordIndex: 1, // 当前车牌号 301 activeKeyWordIndex: 1, // 当前车牌号
304 keyBoardStatus: false, 302 keyBoardStatus: false,
305 firstWrapStatus: false, // 选择弹窗 303 firstWrapStatus: false, // 选择弹窗
306 - confirmTitle: '', 304 + confirmTitle: "",
307 submitConfirm: false, 305 submitConfirm: false,
308 submitConfirmFalse: false, 306 submitConfirmFalse: false,
309 - submitConfirmText: '',  
310 - carNum:'',  
311 - tip:'车牌号',  
312 - } 307 + submitConfirmText: "",
  308 + carNum: "",
  309 + tip: "车牌号"
  310 + };
313 }, 311 },
314 mounted() { 312 mounted() {
315 -  
316 - console.log(window.location)  
317 - console.log(this.$route.query) 313 + console.log(window.location);
  314 + console.log(this.$route.query);
318 // if (this.$utils.clientBrowser() == "微信") { 315 // if (this.$utils.clientBrowser() == "微信") {
319 // var appID = this.$utils.myVxAppId; 316 // var appID = this.$utils.myVxAppId;
320 // var code = this.getUrlParam('code'); 317 // var code = this.getUrlParam('code');
@@ -325,21 +322,18 @@ export default { @@ -325,21 +322,18 @@ export default {
325 // return code; 322 // return code;
326 // } 323 // }
327 // } 324 // }
328 -  
329 -  
330 - let params = this.$route.query 325 + let params = this.$route.query;
331 if (Object.keys(params).length == 0) { 326 if (Object.keys(params).length == 0) {
332 -  
333 } else { 327 } else {
334 - this.noCarQRcodeInOutPark() 328 + this.noCarQRcodeInOutPark();
335 } 329 }
336 }, 330 },
337 methods: { 331 methods: {
338 getUrlParam(name) { 332 getUrlParam(name) {
339 - var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');  
340 - var r = window.location.search.substr(1).match(reg)  
341 - if (r != null) return unescape(r[2])  
342 - return null 333 + var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  334 + var r = window.location.search.substr(1).match(reg);
  335 + if (r != null) return unescape(r[2]);
  336 + return null;
343 }, 337 },
344 // chooseColor (index){ // 颜色选择 338 // chooseColor (index){ // 颜色选择
345 // this.currentColor = index 339 // this.currentColor = index
@@ -362,98 +356,106 @@ export default { @@ -362,98 +356,106 @@ export default {
362 // } 356 // }
363 // }, 357 // },
364 noCarQRcodeInOutPark() { 358 noCarQRcodeInOutPark() {
365 - let params = this.$route.query  
366 - params.payType = this.$utils.IsWeixinOrAlipay()//4:微信 1:支付宝 34:农行 359 + let params = this.$route.query;
  360 + params.payType = this.$utils.IsWeixinOrAlipay();//4:微信 1:支付宝 34:农行
367 params.terminalSource = "7";//1:任你听 3:微信公共号 4:云平台 7:H5 361 params.terminalSource = "7";//1:任你听 3:微信公共号 4:云平台 7:H5
368 - params.app_id = 1,  
369 - params.salt = 2,  
370 - params.deviceInfo = 3,  
371 - params.sign_type = 'md5',  
372 - params.sign = 4,  
373 - params.token = '666'  
374 - params.carNumber = this.carNum 362 + params.app_id = 1;
  363 + params.salt = 2;
  364 + params.deviceInfo = 3;
  365 + params.sign_type = "md5";
  366 + params.sign = 4;
  367 + params.token = "666";
  368 + params.carNumber = this.carNum;
375 noCarQRcodeInOutPark(params).then(res => { 369 noCarQRcodeInOutPark(params).then(res => {
376 - console.log(res) 370 + console.log(res);
377 if (res.code == 0) {//进场 371 if (res.code == 0) {//进场
378 //alertMsg("出场成功"); 372 //alertMsg("出场成功");
379 if (res.data) { 373 if (res.data) {
380 var tmpObj = res.data; 374 var tmpObj = res.data;
381 - console.log(tmpObj) 375 + console.log(tmpObj);
382 //判断是否需要支付 376 //判断是否需要支付
383 - if (tmpObj.needPay) {  
384 - var queryParams = this.$utils.parseParams(tmpObj);  
385 - console.log(queryParams)  
386 - // //  
387 - this.$router.push({  
388 - path: 'pay',  
389 - query: tmpObj  
390 - })  
391 - // window.location.href = "../pay.html?" + queryParams;  
392 - } else {  
393 - this.$msgbox('提示', '无需缴费,欢迎下次光临')  
394 - } 377 + // if (tmpObj.needPay) {
  378 + // var queryParams = this.$utils.parseParams(tmpObj);
  379 + // console.log(queryParams);
  380 + // // //
  381 + // this.$router.push({
  382 + // path: "pay",
  383 + // query: tmpObj
  384 + // });
  385 + // // window.location.href = "../pay.html?" + queryParams;
  386 + // } else {
  387 + // this.$msgbox("提示", "无需缴费,欢迎下次光临");
  388 + // }
  389 +
  390 +
  391 +
  392 + var queryParams = this.$utils.parseParams(tmpObj);
  393 + console.log(queryParams);
  394 + // //
  395 + this.$router.push({
  396 + path: "pay",
  397 + query: tmpObj
  398 + });
  399 +
  400 +
395 401
396 } else { 402 } else {
397 - this.$msgbox('提示', '没有找到订单') 403 + this.$msgbox("提示", "没有找到订单");
398 } 404 }
399 } 405 }
400 - else if(res.code == 1031){  
401 - sessionStorage.setItem('noPassText',res.message) 406 + else if (res.code == 1031) { // 当前道闸禁止通行
  407 + sessionStorage.setItem("noPassText", res.message);
402 this.$router.push({ 408 this.$router.push({
403 - path: 'noPass' 409 + path: "noPass"
404 // query: tmpObj.message 410 // query: tmpObj.message
405 - }) 411 + });
406 } 412 }
407 else {//其他情况如【该卡号场内已存在】 413 else {//其他情况如【该卡号场内已存在】
408 console.log(res.message); 414 console.log(res.message);
409 - this.$msgbox('提示', res.message)  
410 - 415 + this.$msgbox("提示", res.message);
411 } 416 }
412 -  
413 - }) 417 + });
414 }, 418 },
415 changeTab() { 419 changeTab() {
416 // this.firstSelectStatus = false 420 // this.firstSelectStatus = false
417 // this.firstWrapStatus = false 421 // this.firstWrapStatus = false
418 - this.keyBoardStatus = false  
419 - this.firstClickStatus = false  
420 - this.firstWrapStatus = false  
421 - 422 + this.keyBoardStatus = false;
  423 + this.firstClickStatus = false;
  424 + this.firstWrapStatus = false;
422 }, 425 },
423 clickFirstWrap() { 426 clickFirstWrap() {
424 // 点击第一个输入框 427 // 点击第一个输入框
425 - this.firstClickStatus = true  
426 - this.firstWrapStatus = true  
427 - this.keyBoardStatus = false  
428 - this.formData.num0 = '' 428 + this.firstClickStatus = true;
  429 + this.firstWrapStatus = true;
  430 + this.keyBoardStatus = false;
  431 + this.formData.num0 = "";
429 }, 432 },
430 selectFirstWord(event) { 433 selectFirstWord(event) {
431 // 选择省份 434 // 选择省份
432 - if (event.target.localName !== 'span') {  
433 - return 435 + if (event.target.localName !== "span") {
  436 + return;
434 } 437 }
435 - this.formData.num0 = event.target.innerText  
436 - this.firstSelectStatus = true  
437 - this.firstWrapStatus = false  
438 - this.firstClickStatus = false  
439 - this.keyBoardStatus = true  
440 - this.activeKeyWordIndex = 1 438 + this.formData.num0 = event.target.innerText;
  439 + this.firstSelectStatus = true;
  440 + this.firstWrapStatus = false;
  441 + this.firstClickStatus = false;
  442 + this.keyBoardStatus = true;
  443 + this.activeKeyWordIndex = 1;
441 // this.$refs.num1.focus() 444 // this.$refs.num1.focus()
442 // document.getElementById('num1').focus() 445 // document.getElementById('num1').focus()
443 }, 446 },
444 clickKeyBoard(item) { // 点击自定义键盘 447 clickKeyBoard(item) { // 点击自定义键盘
445 - console.log(item)  
446 - this.formData['num' + this.activeKeyWordIndex] = item  
447 -  
448 - if (this.formData.commonCard === '1') {  
449 - this.activeKeyWordIndex++ 448 + console.log(item);
  449 + this.formData["num" + this.activeKeyWordIndex] = item;
  450 + if (this.formData.commonCard === "1") {
  451 + this.activeKeyWordIndex++;
450 if (this.activeKeyWordIndex > 6) { 452 if (this.activeKeyWordIndex > 6) {
451 - this.keyBoardStatus = false 453 + this.keyBoardStatus = false;
452 } 454 }
453 } else { 455 } else {
454 - this.activeKeyWordIndex++ 456 + this.activeKeyWordIndex++;
455 if (this.activeKeyWordIndex > 7) { 457 if (this.activeKeyWordIndex > 7) {
456 - this.keyBoardStatus = false 458 + this.keyBoardStatus = false;
457 } 459 }
458 } 460 }
459 }, 461 },
@@ -461,124 +463,119 @@ export default { @@ -461,124 +463,119 @@ export default {
461 // console.log(this.activeKeyWordIndex) 463 // console.log(this.activeKeyWordIndex)
462 // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)]) 464 // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
463 if (this.activeKeyWordIndex > 1) { 465 if (this.activeKeyWordIndex > 1) {
464 - this.formData['num' + (this.activeKeyWordIndex - 1)] = ''  
465 - this.activeKeyWordIndex-- 466 + this.formData["num" + (this.activeKeyWordIndex - 1)] = "";
  467 + this.activeKeyWordIndex--;
466 } 468 }
467 }, 469 },
468 clickKeyWordWrap(activeKeyWordIndex) { 470 clickKeyWordWrap(activeKeyWordIndex) {
469 - this.keyBoardStatus = true  
470 - this.activeKeyWordIndex = activeKeyWordIndex  
471 - this.formData['num' + this.activeKeyWordIndex] = '' 471 + this.keyBoardStatus = true;
  472 + this.activeKeyWordIndex = activeKeyWordIndex;
  473 + this.formData["num" + this.activeKeyWordIndex] = "";
472 }, 474 },
473 submitFn() { 475 submitFn() {
474 - let plateLicense  
475 - if (this.formData.commonCard === '1') {  
476 - plateLicense = this.plate_license_1  
477 - plateLicense = this.palindrome(plateLicense) 476 + let plateLicense;
  477 + if (this.formData.commonCard === "1") {
  478 + plateLicense = this.plate_license_1;
  479 + plateLicense = this.palindrome(plateLicense);
478 if (plateLicense.length < 7) { 480 if (plateLicense.length < 7) {
479 - this.$msgbox('提示', '请输入正确车牌号')  
480 -  
481 - return 481 + this.$msgbox("提示", "请输入正确车牌号");
  482 + return;
482 } 483 }
483 - this.carNum = plateLicense 484 + this.carNum = plateLicense;
484 } 485 }
485 - if (this.formData.commonCard === '2') {  
486 - plateLicense = this.plate_license_2  
487 - plateLicense = this.palindrome(plateLicense) 486 + if (this.formData.commonCard === "2") {
  487 + plateLicense = this.plate_license_2;
  488 + plateLicense = this.palindrome(plateLicense);
488 if (plateLicense.length < 8) { 489 if (plateLicense.length < 8) {
489 - this.$msgbox('提示', '请输入正确车牌号')  
490 -  
491 - return 490 + this.$msgbox("提示", "请输入正确车牌号");
  491 + return;
492 } 492 }
493 - this.carNum = plateLicense 493 + this.carNum = plateLicense;
494 } 494 }
495 - console.log(plateLicense)  
496 - if (this.formData.commonCard === '3') {  
497 - plateLicense = this.plate_license_2  
498 - plateLicense = this.palindrome(plateLicense) 495 + console.log(plateLicense);
  496 + if (this.formData.commonCard === "3") {
  497 + plateLicense = this.plate_license_2;
  498 + plateLicense = this.palindrome(plateLicense);
499 if (this.carNum.length < 11) { 499 if (this.carNum.length < 11) {
500 - this.$msgbox('提示', '请输入正确手机号')  
501 -  
502 - return 500 + this.$msgbox("提示", "请输入正确手机号");
  501 + return;
503 } 502 }
504 - this.carNum = this.carNum+'111' 503 + this.carNum = this.carNum + "111";
505 } 504 }
506 // 505 //
507 // this.$emit('getPlateLicense', plateLicense) 506 // this.$emit('getPlateLicense', plateLicense)
508 console.log(plateLicense); 507 console.log(plateLicense);
509 -  
510 // this.$router.push({ 508 // this.$router.push({
511 // path: 'pay', 509 // path: 'pay',
512 // query: { 510 // query: {
513 // carNumber: plateLicense 511 // carNumber: plateLicense
514 // } 512 // }
515 // }) 513 // })
516 -  
517 - this.noCarQRcodeInOutPark() 514 + this.noCarQRcodeInOutPark();
518 }, 515 },
519 palindrome(str) { 516 palindrome(str) {
520 - var arr = str.split('')  
521 - arr = arr.filter(function (val) { 517 + var arr = str.split("");
  518 + arr = arr.filter(function(val) {
522 return ( 519 return (
523 - val !== ' ' &&  
524 - val !== ',' &&  
525 - val !== '.' &&  
526 - val !== '?' &&  
527 - val !== ':' &&  
528 - val !== ';' &&  
529 - val !== '`' && 520 + val !== " " &&
  521 + val !== "," &&
  522 + val !== "." &&
  523 + val !== "?" &&
  524 + val !== ":" &&
  525 + val !== ";" &&
  526 + val !== "`" &&
530 val !== "'" && 527 val !== "'" &&
531 - val !== '_' &&  
532 - val !== '/' &&  
533 - val !== '-' &&  
534 - val !== '\\' &&  
535 - val !== '' &&  
536 - val !== '(' &&  
537 - val !== ')'  
538 - )  
539 - })  
540 - return arr.join('') 528 + val !== "_" &&
  529 + val !== "/" &&
  530 + val !== "-" &&
  531 + val !== "\\" &&
  532 + val !== "" &&
  533 + val !== "(" &&
  534 + val !== ")"
  535 + );
  536 + });
  537 + return arr.join("");
541 }, 538 },
542 checkIsHasSpecialStr(str) { 539 checkIsHasSpecialStr(str) {
543 - var flag = false  
544 - var arr = str.split('') 540 + var flag = false;
  541 + var arr = str.split("");
545 arr.forEach(val => { 542 arr.forEach(val => {
546 if ( 543 if (
547 - val === '!' ||  
548 - val === '}' ||  
549 - val === '{' ||  
550 - val === ']' ||  
551 - val === '[' ||  
552 - val === '&' ||  
553 - val === '$' ||  
554 - val === '@' ||  
555 - val === ' ' ||  
556 - val === ',' ||  
557 - val === '.' ||  
558 - val === '?' ||  
559 - val === ':' ||  
560 - val === ';' ||  
561 - val === '`' || 544 + val === "!" ||
  545 + val === "}" ||
  546 + val === "{" ||
  547 + val === "]" ||
  548 + val === "[" ||
  549 + val === "&" ||
  550 + val === "$" ||
  551 + val === "@" ||
  552 + val === " " ||
  553 + val === "," ||
  554 + val === "." ||
  555 + val === "?" ||
  556 + val === ":" ||
  557 + val === ";" ||
  558 + val === "`" ||
562 val === "'" || 559 val === "'" ||
563 - val === '_' ||  
564 - val === '/' ||  
565 - val === '-' ||  
566 - val === '\\' ||  
567 - val === '' ||  
568 - val === '(' ||  
569 - val === ')' 560 + val === "_" ||
  561 + val === "/" ||
  562 + val === "-" ||
  563 + val === "\\" ||
  564 + val === "" ||
  565 + val === "(" ||
  566 + val === ")"
570 ) { 567 ) {
571 - flag = true 568 + flag = true;
572 } 569 }
573 - })  
574 - return flag 570 + });
  571 + return flag;
575 }, 572 },
576 checkIsHasChineseStr(str) { 573 checkIsHasChineseStr(str) {
577 - var Reg = /.*[\u4e00-\u9fa5]+.*/ 574 + var Reg = /.*[\u4e00-\u9fa5]+.*/;
578 if (Reg.test(str)) { 575 if (Reg.test(str)) {
579 - return true 576 + return true;
580 } 577 }
581 - return false 578 + return false;
582 } 579 }
583 }, 580 },
584 computed: { 581 computed: {
@@ -591,7 +588,7 @@ export default { @@ -591,7 +588,7 @@ export default {
591 this.formData.num4 + 588 this.formData.num4 +
592 this.formData.num5 + 589 this.formData.num5 +
593 this.formData.num6 590 this.formData.num6
594 - ) 591 + );
595 }, 592 },
596 plate_license_2() { 593 plate_license_2() {
597 return ( 594 return (
@@ -603,10 +600,10 @@ export default { @@ -603,10 +600,10 @@ export default {
603 this.formData.num5 + 600 this.formData.num5 +
604 this.formData.num6 + 601 this.formData.num6 +
605 this.formData.num7 602 this.formData.num7
606 - ) 603 + );
607 } 604 }
608 } 605 }
609 -} 606 +};
610 </script> 607 </script>
611 <style lang="scss" scoped> 608 <style lang="scss" scoped>
612 .flex-items-center { 609 .flex-items-center {
src/main.js
@@ -19,6 +19,10 @@ import { Toast } from &#39;mint-ui&#39;; @@ -19,6 +19,10 @@ import { Toast } from &#39;mint-ui&#39;;
19 import { Field } from 'mint-ui'; 19 import { Field } from 'mint-ui';
20 Vue.component(Field.name, Field); 20 Vue.component(Field.name, Field);
21 21
  22 +
  23 +
  24 +
  25 +
22 Vue.prototype.$msgbox = MessageBox 26 Vue.prototype.$msgbox = MessageBox
23 Vue.prototype.$toast = Toast 27 Vue.prototype.$toast = Toast
24 28