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,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 'mint-ui'; | @@ -19,6 +19,10 @@ import { Toast } from 'mint-ui'; | ||
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 |