Commit b89c74120ebd17cc70df3f5945745b7d11697879
1 parent
bee69419
赤峰出场码
Showing
4 changed files
with
667 additions
and
349 deletions
src/api/orderPay/orderPay.js
... | ... | @@ -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 | 1 | <template> |
2 | 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 | 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 | 97 | </p> |
58 | 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 | 136 | </div> |
63 | 137 | </template> |
64 | 138 | |
65 | 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 | 143 | export default { |
72 | - name: 'dynCodePay', | |
144 | + name: "dynCodePay", | |
73 | 145 | data() { |
74 | 146 | return { |
147 | + tabList: [ // 切换数据 | |
148 | + { text: "本次缴费", id: 1 }, | |
149 | + { text: "离场待缴", id: 2 } | |
150 | + ], | |
151 | + currentTabActive: 1, // 显示当前哪个 | |
75 | 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 | 161 | arrearageActFee: 0, |
85 | 162 | arrearageDiscFee: 0, |
86 | 163 | arrearageActFee: 0, |
87 | - clientBrowser: '', // 客户端 | |
164 | + clientBrowser: "", // 客户端 | |
88 | 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 | 176 | created() { |
177 | + // | |
178 | + // this.$toast({ | |
179 | + // message: '加载中...', | |
180 | + // position: 'top', | |
181 | + // duration: -1 // 设置为-1表示永久显示,直到手动关闭 | |
182 | + // }); | |
95 | 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 | 199 | // this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收 |
105 | 200 | // this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠 |
106 | 201 | // this.arrearageActFee = this.$route.query.arrearageActFee // 实收 |
107 | - this.clientBrowser = this.$utils.clientBrowser() //支付方式 | |
202 | + this.clientBrowser = this.$utils.clientBrowser(); //支付方式 | |
108 | 203 | // this.paySrcType = this.$route.query.codeType // 实收 |
109 | - this.orderId = this.$route.query.orderId | |
204 | + this.orderId = this.$route.query.orderId; | |
110 | 205 | // console.log(this.orderId) |
111 | 206 | // this.appOrderTimeout = this.$route.query.appOrderTimeout |
112 | 207 | if (this.clientBrowser == "微信") { |
113 | 208 | this.webAppCode = this.getCode(); |
114 | 209 | } |
115 | - | |
116 | 210 | }, |
117 | 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 | 302 | getCode() { |
119 | 303 | var appID = this.$utils.myVxAppId; |
120 | 304 | // alert(appID) |
121 | - var code = this.getUrlParam('code'); | |
305 | + var code = this.getUrlParam("code"); | |
122 | 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 | 309 | } else { |
126 | 310 | return code; |
127 | 311 | } |
128 | 312 | }, |
129 | 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 | 336 | var aliParams = {}; |
153 | 337 | aliParams.orderId = this.orderId; |
154 | 338 | // aliParams.carNumber = this.carNumber; |
155 | 339 | aliParams.payType = 1;// 1:支付宝 2:微信 3:银联 10:H5 4微信公众号 |
156 | 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 | 346 | aliPay(aliParams).then(response => { |
163 | - console.log(response) | |
347 | + console.log(response); | |
164 | 348 | if (response.code == 0) {//进场 |
165 | 349 | document.write(response.data);//打开支付表单 |
166 | 350 | } else {//其他情况如【该卡号场内已存在】 |
167 | 351 | console.log(response.message); |
168 | 352 | } |
169 | - | |
170 | - }) | |
353 | + }); | |
171 | 354 | } |
172 | - | |
173 | - if (this.clientBrowser == '立即') { // 农行支付 | |
355 | + if (this.clientBrowser == "立即") { // 农行支付 | |
174 | 356 | var bankabcParams = {}; |
175 | 357 | bankabcParams.orderId = this.orderId; |
176 | 358 | bankabcParams.carNumber = this.carNumber; |
177 | 359 | bankabcParams.payType = 34;// 1:支付宝 2:微信 3:银联 10:H5 4微信公众号 |
178 | 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 | 365 | bankabcParams.recordArreaInfos = JSON.stringify(this.orderId); |
184 | - console.log(bankabcParams) | |
366 | + console.log(bankabcParams); | |
185 | 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 | 375 | // alert('当前页面在新容器'); |
195 | - AlipayJSBridge.call('startApp', { | |
196 | - appId: '30603024', // 固定值 | |
376 | + AlipayJSBridge.call("startApp", { | |
377 | + appId: "30603024", // 固定值 | |
197 | 378 | param: { |
198 | 379 | type: "3", // 3: 掌银内H5页面, |
199 | 380 | tokenId: _token, //商户传过来的tokenId |
... | ... | @@ -201,22 +382,19 @@ export default { |
201 | 382 | payType: "1111", //商户传过来的payType,没有则传'1111' |
202 | 383 | webviewURL: "https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址 |
203 | 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 | 390 | } else { |
211 | 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 | 395 | } else { |
217 | - me.$msgbox('提示', '支付失败') | |
396 | + me.$msgbox("提示", "支付失败"); | |
218 | 397 | } |
219 | - | |
220 | 398 | // console.log(_token) |
221 | 399 | // let _data = 'method=invokePayFromBrowser&tokenID='+_token |
222 | 400 | // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y') |
... | ... | @@ -226,10 +404,9 @@ export default { |
226 | 404 | // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}') |
227 | 405 | // // 即为加密后的数据。其中paramsEncode是需要加密的数据、 |
228 | 406 | // // keyStr是加密时使用的key,与服务端一致、hash是偏移量,是一个随机生成的16位字符串。 |
229 | - }) | |
407 | + }); | |
230 | 408 | } |
231 | - | |
232 | - if (this.clientBrowser == '微信') { // 微信支付 | |
409 | + if (this.clientBrowser == "微信") { // 微信支付 | |
233 | 410 | //第一步获取openid |
234 | 411 | var codeParams = { |
235 | 412 | code: this.webAppCode, |
... | ... | @@ -237,20 +414,18 @@ export default { |
237 | 414 | }; |
238 | 415 | getOpenId(codeParams).then(res => { |
239 | 416 | if (res.code == 0) { |
240 | - me.vxPay(res.data, this.orderId) | |
417 | + me.vxPay(res.data, this.orderId); | |
241 | 418 | } else if (res.code == 40163) { //code been used, hints[重复code问题] |
242 | - me.$msgbox('提示', '请重新扫码') | |
419 | + me.$msgbox("提示", "请重新扫码"); | |
243 | 420 | console.log(res.message); |
244 | 421 | } else { |
245 | - me.$msgbox('提示', '请重新扫码') | |
422 | + me.$msgbox("提示", "请重新扫码"); | |
246 | 423 | } |
247 | - }) | |
248 | - | |
424 | + }); | |
249 | 425 | } |
250 | - | |
251 | 426 | }, |
252 | 427 | vxPay(openIdData, orderIdData) { |
253 | - let vm = this | |
428 | + let vm = this; | |
254 | 429 | var wxParams = {}; |
255 | 430 | wxParams.orderId = orderIdData; |
256 | 431 | // wxParams.backType = 2, |
... | ... | @@ -267,31 +442,31 @@ export default { |
267 | 442 | if (res.data) { |
268 | 443 | var data = res.data; |
269 | 444 | console.log(JSON.stringify(data)); |
270 | - if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档 | |
445 | + if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档 | |
271 | 446 | if (document.addEventListener) { |
272 | - document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false) | |
447 | + document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false); | |
273 | 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 | 452 | } else { |
278 | - console.log('准备调用微信支付') | |
279 | - vm.onBridgeReady(data) | |
453 | + console.log("准备调用微信支付"); | |
454 | + vm.onBridgeReady(data); | |
280 | 455 | } |
281 | 456 | } else { |
282 | - vm.$msgbox('提示', '没有找到返回值') | |
457 | + vm.$msgbox("提示", "没有找到返回值"); | |
283 | 458 | } |
284 | 459 | } else { |
285 | 460 | console.log(res.message); |
286 | - vm.$msgbox('提示', res.message) | |
461 | + vm.$msgbox("提示", res.message); | |
287 | 462 | } |
288 | - }) | |
463 | + }); | |
289 | 464 | }, |
290 | 465 | onBridgeReady(params) { |
291 | - let me = this | |
292 | - console.log('调用微信支付WeixinJSBridge') | |
466 | + let me = this; | |
467 | + console.log("调用微信支付WeixinJSBridge"); | |
293 | 468 | WeixinJSBridge.invoke( |
294 | - 'getBrandWCPayRequest', params, | |
469 | + "getBrandWCPayRequest", params, | |
295 | 470 | // |
296 | 471 | // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的 |
297 | 472 | // 'appId': data.appId, // 公众号名称,由商户传入 |
... | ... | @@ -301,26 +476,57 @@ export default { |
301 | 476 | // 'signType': data.signType, // 微信签名方式 |
302 | 477 | // 'paySign': data.paySign // 微信签名 |
303 | 478 | // }, |
304 | - function (res) { | |
479 | + function(res) { | |
305 | 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 | 484 | } else { |
311 | - console.log('失败') | |
312 | - me.$msgbox('提示', '支付失败') | |
485 | + console.log("失败"); | |
486 | + me.$msgbox("提示", "支付失败"); | |
313 | 487 | me.$router.go(-2); |
314 | 488 | } |
315 | 489 | } |
316 | - ) | |
317 | - }, | |
490 | + ); | |
491 | + } | |
318 | 492 | }, |
319 | 493 | filters: {} |
320 | -} | |
494 | +}; | |
321 | 495 | </script> |
322 | 496 | |
323 | 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 | 530 | .car-wrap { |
325 | 531 | padding: 7px 7px; |
326 | 532 | background: #FFF; |
... | ... | @@ -398,6 +604,11 @@ export default { |
398 | 604 | color: #FFF; |
399 | 605 | cursor: pointer; |
400 | 606 | } |
607 | + .payAll{ | |
608 | + position: fixed; | |
609 | + bottom: 0; | |
610 | + left: 0; | |
611 | + } | |
401 | 612 | |
402 | 613 | .tip { |
403 | 614 | padding-left: 40px; |
... | ... | @@ -405,4 +616,94 @@ export default { |
405 | 616 | background-size: 16px 16px; |
406 | 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 | 709 | </style> | ... | ... |
src/components/plateNumber.vue
... | ... | @@ -13,12 +13,13 @@ |
13 | 13 | <!--</ul>--> |
14 | 14 | |
15 | 15 | <p style="margin-bottom: 18px;margin-top: 18px;"> |
16 | - {{formData.commonCard == '3'?'请输入手机号码':'请输入车牌号码'}} | |
16 | + {{formData.commonCard == "3"?"请输入手机号码":"请输入车牌号码"}} | |
17 | 17 | </p> |
18 | 18 | |
19 | 19 | |
20 | 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 | 23 | </div> |
23 | 24 | |
24 | 25 | <div class="num-box" v-else> |
... | ... | @@ -37,8 +38,6 @@ |
37 | 38 | </div> |
38 | 39 | |
39 | 40 | |
40 | - | |
41 | - | |
42 | 41 | <div class="radio-box"> |
43 | 42 | <label class="flex-items-center" @click="keyBoardStatus = true"> |
44 | 43 | <img v-if="formData.commonCard == 1" |
... | ... | @@ -251,70 +250,68 @@ |
251 | 250 | </div> |
252 | 251 | </template> |
253 | 252 | <script> |
254 | -import { noCarQRcodeInOutPark } from '@/api/plateNumber/plateNumber' | |
255 | - | |
253 | +import { noCarQRcodeInOutPark } from "@/api/plateNumber/plateNumber"; | |
256 | 254 | export default { |
257 | 255 | data() { |
258 | 256 | return { |
259 | 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 | 279 | currentColor: 0, |
282 | - activeBG: '#0054C0', | |
280 | + activeBG: "#0054C0", | |
283 | 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 | 292 | allKeyWord: { |
295 | 293 | _1: [1, 2, 3, 4, 5, 6, 7], |
296 | 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 | 301 | activeKeyWordIndex: 1, // 当前车牌号 |
304 | 302 | keyBoardStatus: false, |
305 | 303 | firstWrapStatus: false, // 选择弹窗 |
306 | - confirmTitle: '', | |
304 | + confirmTitle: "", | |
307 | 305 | submitConfirm: false, |
308 | 306 | submitConfirmFalse: false, |
309 | - submitConfirmText: '', | |
310 | - carNum:'', | |
311 | - tip:'车牌号', | |
312 | - } | |
307 | + submitConfirmText: "", | |
308 | + carNum: "", | |
309 | + tip: "车牌号" | |
310 | + }; | |
313 | 311 | }, |
314 | 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 | 315 | // if (this.$utils.clientBrowser() == "微信") { |
319 | 316 | // var appID = this.$utils.myVxAppId; |
320 | 317 | // var code = this.getUrlParam('code'); |
... | ... | @@ -325,21 +322,18 @@ export default { |
325 | 322 | // return code; |
326 | 323 | // } |
327 | 324 | // } |
328 | - | |
329 | - | |
330 | - let params = this.$route.query | |
325 | + let params = this.$route.query; | |
331 | 326 | if (Object.keys(params).length == 0) { |
332 | - | |
333 | 327 | } else { |
334 | - this.noCarQRcodeInOutPark() | |
328 | + this.noCarQRcodeInOutPark(); | |
335 | 329 | } |
336 | 330 | }, |
337 | 331 | methods: { |
338 | 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 | 338 | // chooseColor (index){ // 颜色选择 |
345 | 339 | // this.currentColor = index |
... | ... | @@ -362,98 +356,106 @@ export default { |
362 | 356 | // } |
363 | 357 | // }, |
364 | 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 | 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 | 369 | noCarQRcodeInOutPark(params).then(res => { |
376 | - console.log(res) | |
370 | + console.log(res); | |
377 | 371 | if (res.code == 0) {//进场 |
378 | 372 | //alertMsg("出场成功"); |
379 | 373 | if (res.data) { |
380 | 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 | 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 | 408 | this.$router.push({ |
403 | - path: 'noPass' | |
409 | + path: "noPass" | |
404 | 410 | // query: tmpObj.message |
405 | - }) | |
411 | + }); | |
406 | 412 | } |
407 | 413 | else {//其他情况如【该卡号场内已存在】 |
408 | 414 | console.log(res.message); |
409 | - this.$msgbox('提示', res.message) | |
410 | - | |
415 | + this.$msgbox("提示", res.message); | |
411 | 416 | } |
412 | - | |
413 | - }) | |
417 | + }); | |
414 | 418 | }, |
415 | 419 | changeTab() { |
416 | 420 | // this.firstSelectStatus = false |
417 | 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 | 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 | 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 | 444 | // this.$refs.num1.focus() |
442 | 445 | // document.getElementById('num1').focus() |
443 | 446 | }, |
444 | 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 | 452 | if (this.activeKeyWordIndex > 6) { |
451 | - this.keyBoardStatus = false | |
453 | + this.keyBoardStatus = false; | |
452 | 454 | } |
453 | 455 | } else { |
454 | - this.activeKeyWordIndex++ | |
456 | + this.activeKeyWordIndex++; | |
455 | 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 | 463 | // console.log(this.activeKeyWordIndex) |
462 | 464 | // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)]) |
463 | 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 | 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 | 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 | 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 | 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 | 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 | 506 | // this.$emit('getPlateLicense', plateLicense) |
508 | 507 | console.log(plateLicense); |
509 | - | |
510 | 508 | // this.$router.push({ |
511 | 509 | // path: 'pay', |
512 | 510 | // query: { |
513 | 511 | // carNumber: plateLicense |
514 | 512 | // } |
515 | 513 | // }) |
516 | - | |
517 | - this.noCarQRcodeInOutPark() | |
514 | + this.noCarQRcodeInOutPark(); | |
518 | 515 | }, |
519 | 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 | 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 | 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 | 539 | checkIsHasSpecialStr(str) { |
543 | - var flag = false | |
544 | - var arr = str.split('') | |
540 | + var flag = false; | |
541 | + var arr = str.split(""); | |
545 | 542 | arr.forEach(val => { |
546 | 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 | 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 | 573 | checkIsHasChineseStr(str) { |
577 | - var Reg = /.*[\u4e00-\u9fa5]+.*/ | |
574 | + var Reg = /.*[\u4e00-\u9fa5]+.*/; | |
578 | 575 | if (Reg.test(str)) { |
579 | - return true | |
576 | + return true; | |
580 | 577 | } |
581 | - return false | |
578 | + return false; | |
582 | 579 | } |
583 | 580 | }, |
584 | 581 | computed: { |
... | ... | @@ -591,7 +588,7 @@ export default { |
591 | 588 | this.formData.num4 + |
592 | 589 | this.formData.num5 + |
593 | 590 | this.formData.num6 |
594 | - ) | |
591 | + ); | |
595 | 592 | }, |
596 | 593 | plate_license_2() { |
597 | 594 | return ( |
... | ... | @@ -603,10 +600,10 @@ export default { |
603 | 600 | this.formData.num5 + |
604 | 601 | this.formData.num6 + |
605 | 602 | this.formData.num7 |
606 | - ) | |
603 | + ); | |
607 | 604 | } |
608 | 605 | } |
609 | -} | |
606 | +}; | |
610 | 607 | </script> |
611 | 608 | <style lang="scss" scoped> |
612 | 609 | .flex-items-center { | ... | ... |