Commit ae6e7e997d2d2502931dd40ae3d50d8e0bffa721
1 parent
21bb7bf6
支付方式
Showing
3 changed files
with
98 additions
and
54 deletions
src/components/orderPay.vue
| @@ -3,26 +3,26 @@ | @@ -3,26 +3,26 @@ | ||
| 3 | <div class="car-wrap"> | 3 | <div class="car-wrap"> |
| 4 | <div class="carBG" :class="carWrapBG | formateColor"> | 4 | <div class="carBG" :class="carWrapBG | formateColor"> |
| 5 | <p class="carNumber">{{carNumber}}</p> | 5 | <p class="carNumber">{{carNumber}}</p> |
| 6 | - <p class="payFee">{{payFee/100}}.00元</p> | 6 | + <p class="payFee">{{(arrearageActFee/100).toFixed(2)}}元</p> |
| 7 | </div> | 7 | </div> |
| 8 | </div> | 8 | </div> |
| 9 | 9 | ||
| 10 | <ul class="fee-wrap"> | 10 | <ul class="fee-wrap"> |
| 11 | <li> | 11 | <li> |
| 12 | <span>待缴金额</span> | 12 | <span>待缴金额</span> |
| 13 | - <span>36.00</span> | 13 | + <span>{{(arrearageActFee/100).toFixed(2)}}</span> |
| 14 | </li> | 14 | </li> |
| 15 | <li> | 15 | <li> |
| 16 | <span>优惠金额</span> | 16 | <span>优惠金额</span> |
| 17 | - <span>36.00</span> | 17 | + <span>{{(arrearageDiscFee/100).toFixed(2)}}</span> |
| 18 | </li> | 18 | </li> |
| 19 | <li> | 19 | <li> |
| 20 | <span>应付金额</span> | 20 | <span>应付金额</span> |
| 21 | - <span>36.00</span> | 21 | + <span>{{(arrearageActFee/100).toFixed(2)}}</span> |
| 22 | </li> | 22 | </li> |
| 23 | </ul> | 23 | </ul> |
| 24 | <div style="padding: 20px 18px"> | 24 | <div style="padding: 20px 18px"> |
| 25 | - <div class="toPay">微信支付</div> | 25 | + <div class="toPay">{{clientBrowser}}支付</div> |
| 26 | </div> | 26 | </div> |
| 27 | 27 | ||
| 28 | <p class="tip"> | 28 | <p class="tip"> |
| @@ -44,11 +44,23 @@ export default { | @@ -44,11 +44,23 @@ export default { | ||
| 44 | return { | 44 | return { |
| 45 | carWrapBG: 0, | 45 | carWrapBG: 0, |
| 46 | carNumber: '京A12312', | 46 | carNumber: '京A12312', |
| 47 | - payFee: 0 | 47 | + arrearageActFee: 0, |
| 48 | + arrearageDiscFee:0, | ||
| 49 | + arrearageActFee:0, | ||
| 50 | + clientBrowser:'', // 客户端 | ||
| 48 | } | 51 | } |
| 49 | }, | 52 | }, |
| 50 | created() { | 53 | created() { |
| 51 | - this.carWrapBG = this.$route.query.carColor | 54 | + this.carWrapBG = this.$route.query.carColor //车牌颜色 |
| 55 | + this.carNumber = this.$route.query.carNumber | ||
| 56 | + this.arrearageTotalFee = this.$route.query.arrearageTotalFee | ||
| 57 | + this.arrearageDiscFee = this.$route.query.arrearageDiscFee | ||
| 58 | + this.arrearageActFee = this.$route.query.arrearageActFee | ||
| 59 | + this.clientBrowser = this.$utils.clientBrowser() //支付方式 | ||
| 60 | + // arrearageTotalFee: res.arrearageTotalFee,//车牌颜色 | ||
| 61 | + // arrearageDiscFee: res.arrearageDiscFee,//车牌颜色 | ||
| 62 | + // arrearageActFee: res.arrearageActFee,//车牌颜色 | ||
| 63 | + // carNumber: this.carNumber // 车牌 | ||
| 52 | }, | 64 | }, |
| 53 | filters:{ | 65 | filters:{ |
| 54 | formateColor(val){ | 66 | formateColor(val){ |
src/components/parkRecord.vue
| @@ -56,9 +56,9 @@ | @@ -56,9 +56,9 @@ | ||
| 56 | 56 | ||
| 57 | <div class="cost-main cost-main-history" style="padding-left: 50px;" | 57 | <div class="cost-main cost-main-history" style="padding-left: 50px;" |
| 58 | 58 | ||
| 59 | - v-for="(i, index) in historyList" :key="i.id" | ||
| 60 | - @click="chooseHandle(i, index)" | ||
| 61 | - :class="{isChecked: i.checked}" | 59 | + v-for="(i, index) in historyList" :key="i.id" |
| 60 | + @click="chooseHandle(i, index)" | ||
| 61 | + :class="{isChecked: i.checked}" | ||
| 62 | > | 62 | > |
| 63 | <ul class="cost-header"> | 63 | <ul class="cost-header"> |
| 64 | <li :class="carColor | formateColor">{{i.carNumber}}</li> | 64 | <li :class="carColor | formateColor">{{i.carNumber}}</li> |
| @@ -160,20 +160,20 @@ export default { | @@ -160,20 +160,20 @@ export default { | ||
| 160 | methods: { | 160 | methods: { |
| 161 | parkRecordList(){ | 161 | parkRecordList(){ |
| 162 | var salt = this.$utils.myCommonSalt(32); | 162 | var salt = this.$utils.myCommonSalt(32); |
| 163 | - var sortd = [ | ||
| 164 | - { keyname: 'app_id', value: this.$utils.myVarAppid }, | ||
| 165 | - { keyname: 'deviceInfo', value: this.$utils.myDeviceInfo }, | ||
| 166 | - { keyname: 'salt', value: salt }, | ||
| 167 | - { keyname: 'sign_type', value: 'md5' }, | ||
| 168 | - { keyname: 'pageNum', value: 1 }, | ||
| 169 | - { keyname: 'pageSize', value: 1000 }, | ||
| 170 | - { keyname: 'parkState', value: 10 }, | ||
| 171 | - { keyname: 'terminalSource', value: 7 }, | ||
| 172 | - { keyname: 'carNumber', value: this.carNumber }, | ||
| 173 | - { keyname: 'orgId', value: this.$utils.myOrgId }, | ||
| 174 | - | ||
| 175 | - ]; | ||
| 176 | - var md5sign = this.$utils.myGetSign(sortd); | 163 | + // var sortd = [ |
| 164 | + // { keyname: 'app_id', value: this.$utils.myVarAppid }, | ||
| 165 | + // { keyname: 'deviceInfo', value: this.$utils.myDeviceInfo }, | ||
| 166 | + // { keyname: 'salt', value: salt }, | ||
| 167 | + // { keyname: 'sign_type', value: 'md5' }, | ||
| 168 | + // { keyname: 'pageNum', value: 1 }, | ||
| 169 | + // { keyname: 'pageSize', value: 1000 }, | ||
| 170 | + // { keyname: 'parkState', value: 10 }, | ||
| 171 | + // { keyname: 'terminalSource', value: 7 }, | ||
| 172 | + // { keyname: 'carNumber', value: this.carNumber }, | ||
| 173 | + // { keyname: 'orgId', value: this.$utils.myOrgId }, | ||
| 174 | + // | ||
| 175 | + // ]; | ||
| 176 | + // var md5sign = this.$utils.myGetSign(sortd); | ||
| 177 | var jsondata = { | 177 | var jsondata = { |
| 178 | app_id: this.$utils.myVarAppid, | 178 | app_id: this.$utils.myVarAppid, |
| 179 | deviceInfo: this.$utils.myDeviceInfo, | 179 | deviceInfo: this.$utils.myDeviceInfo, |
| @@ -184,9 +184,11 @@ export default { | @@ -184,9 +184,11 @@ export default { | ||
| 184 | parkState: 10, | 184 | parkState: 10, |
| 185 | terminalSource: 7, | 185 | terminalSource: 7, |
| 186 | carNumber: this.carNumber, | 186 | carNumber: this.carNumber, |
| 187 | - sign: md5sign, | 187 | + // sign: md5sign, |
| 188 | orgId: this.$utils.myOrgId | 188 | orgId: this.$utils.myOrgId |
| 189 | } | 189 | } |
| 190 | + jsondata.sign = this.$utils.signObject(jsondata) | ||
| 191 | + | ||
| 190 | 192 | ||
| 191 | 193 | ||
| 192 | // jsondata.sign = md5sign | 194 | // jsondata.sign = md5sign |
| @@ -224,9 +226,13 @@ export default { | @@ -224,9 +226,13 @@ export default { | ||
| 224 | me.historyCheckedLen ++ | 226 | me.historyCheckedLen ++ |
| 225 | if(me.historyCheckedLen == this.historyList.length){ | 227 | if(me.historyCheckedLen == this.historyList.length){ |
| 226 | this.allChecked = true | 228 | this.allChecked = true |
| 229 | + | ||
| 227 | } | 230 | } |
| 231 | + me.orderIds.push(i.orderId) | ||
| 228 | me.historyCheckedMon += Number(i.totalFee) | 232 | me.historyCheckedMon += Number(i.totalFee) |
| 229 | }else{ //单个不选中 | 233 | }else{ //单个不选中 |
| 234 | + let _i = me.orderIds.indexOf(i.orderId) | ||
| 235 | + me.orderIds.splice(_i,1) | ||
| 230 | this.allChecked = false | 236 | this.allChecked = false |
| 231 | me.historyCheckedLen -- | 237 | me.historyCheckedLen -- |
| 232 | me.historyCheckedMon -= Number(i.totalFee) | 238 | me.historyCheckedMon -= Number(i.totalFee) |
| @@ -265,27 +271,27 @@ export default { | @@ -265,27 +271,27 @@ export default { | ||
| 265 | var list = "[" + this.orderIds + "]" | 271 | var list = "[" + this.orderIds + "]" |
| 266 | // var orderlist = this.orderIds | 272 | // var orderlist = this.orderIds |
| 267 | // var codes = "[" + fun.parkCodes + "]" | 273 | // var codes = "[" + fun.parkCodes + "]" |
| 268 | - | ||
| 269 | - var sortd = [ | ||
| 270 | - | ||
| 271 | - { keyname: 'app_id', value: this.$utils.myVarAppid }, | ||
| 272 | - { keyname: 'deviceInfo', value: this.$utils.myDeviceInfo }, | ||
| 273 | - { keyname: 'salt', value: salt }, | ||
| 274 | - { keyname: 'sign_type', value: 'md5' }, | ||
| 275 | - { keyname: 'orderIds', value: list }, | ||
| 276 | - { keyname: 'terminalSource', value: 7 }, | ||
| 277 | - { keyname: 'orgId', value: this.$utils.myOrgId }, | ||
| 278 | - { keyname: 'payType', value:4 }, | ||
| 279 | - { keyname: 'appId', value: this.$utils.myVxAppId } | ||
| 280 | - | ||
| 281 | - ]; | ||
| 282 | - var md5sign = this.$utils.myGetSign(sortd); | 274 | + // |
| 275 | + // var sortd = [ | ||
| 276 | + // | ||
| 277 | + // { keyname: 'app_id', value: this.$utils.myVarAppid }, | ||
| 278 | + // { keyname: 'deviceInfo', value: this.$utils.myDeviceInfo }, | ||
| 279 | + // { keyname: 'salt', value: salt }, | ||
| 280 | + // { keyname: 'sign_type', value: 'md5' }, | ||
| 281 | + // { keyname: 'orderIds', value: list }, | ||
| 282 | + // { keyname: 'terminalSource', value: 7 }, | ||
| 283 | + // { keyname: 'orgId', value: this.$utils.myOrgId }, | ||
| 284 | + // { keyname: 'payType', value:4 }, | ||
| 285 | + // { keyname: 'appId', value: this.$utils.myVxAppId } | ||
| 286 | + // | ||
| 287 | + // ]; | ||
| 288 | + // var md5sign = this.$utils.myGetSign(sortd); | ||
| 283 | 289 | ||
| 284 | var jsondata = { | 290 | var jsondata = { |
| 285 | app_id: this.$utils.myVarAppid, | 291 | app_id: this.$utils.myVarAppid, |
| 286 | deviceInfo: this.$utils.myDeviceInfo, | 292 | deviceInfo: this.$utils.myDeviceInfo, |
| 287 | salt: salt, | 293 | salt: salt, |
| 288 | - sign: md5sign, | 294 | + // sign: md5sign, |
| 289 | sign_type: "md5", | 295 | sign_type: "md5", |
| 290 | appId: this.$utils.myVxAppId, | 296 | appId: this.$utils.myVxAppId, |
| 291 | orderIds: list, | 297 | orderIds: list, |
| @@ -293,22 +299,28 @@ export default { | @@ -293,22 +299,28 @@ export default { | ||
| 293 | payType: 4, | 299 | payType: 4, |
| 294 | orgId: this.$utils.myOrgId, | 300 | orgId: this.$utils.myOrgId, |
| 295 | } | 301 | } |
| 302 | + jsondata.sign = this.$utils.signObject(jsondata) | ||
| 296 | 303 | ||
| 297 | historyQuery(jsondata).then(response => { | 304 | historyQuery(jsondata).then(response => { |
| 298 | console.log(response) | 305 | console.log(response) |
| 299 | - | 306 | + let res = response.data.carArrearages |
| 307 | + this.$router.push( | ||
| 308 | + { | ||
| 309 | + path:'orderPay', | ||
| 310 | + query:{ | ||
| 311 | + carColor:0,// 车牌颜色 | ||
| 312 | + arrearageTotalFee: res.arrearageTotalFee,//车牌颜色 | ||
| 313 | + arrearageDiscFee: res.arrearageDiscFee,//车牌颜色 | ||
| 314 | + arrearageActFee: res.arrearageActFee,//车牌颜色 | ||
| 315 | + carNumber: this.carNumber // 车牌 | ||
| 316 | + } | ||
| 317 | + } | ||
| 318 | + ) | ||
| 300 | }) | 319 | }) |
| 301 | 320 | ||
| 302 | 321 | ||
| 303 | 322 | ||
| 304 | - // this.$router.push( | ||
| 305 | - // { | ||
| 306 | - // path:'orderPay', | ||
| 307 | - // query:{ | ||
| 308 | - // carColor:0 | ||
| 309 | - // } | ||
| 310 | - // } | ||
| 311 | - // ) | 323 | + |
| 312 | } | 324 | } |
| 313 | }, | 325 | }, |
| 314 | filters: { | 326 | filters: { |
| @@ -434,7 +446,6 @@ export default { | @@ -434,7 +446,6 @@ export default { | ||
| 434 | } | 446 | } |
| 435 | } | 447 | } |
| 436 | 448 | ||
| 437 | - | ||
| 438 | .history-con{ | 449 | .history-con{ |
| 439 | height: calc(100% - 38px); | 450 | height: calc(100% - 38px); |
| 440 | overflow: hidden; | 451 | overflow: hidden; |
| @@ -448,7 +459,6 @@ export default { | @@ -448,7 +459,6 @@ export default { | ||
| 448 | background: #F8F8F8; | 459 | background: #F8F8F8; |
| 449 | } | 460 | } |
| 450 | 461 | ||
| 451 | - | ||
| 452 | .cost-main-history{ | 462 | .cost-main-history{ |
| 453 | margin-bottom: 10px; | 463 | margin-bottom: 10px; |
| 454 | background:#fff url("../assets/images/choose.png") no-repeat 10px center; | 464 | background:#fff url("../assets/images/choose.png") no-repeat 10px center; |
| @@ -457,8 +467,6 @@ export default { | @@ -457,8 +467,6 @@ export default { | ||
| 457 | } | 467 | } |
| 458 | 468 | ||
| 459 | 469 | ||
| 460 | - | ||
| 461 | - | ||
| 462 | .isChecked{ | 470 | .isChecked{ |
| 463 | background:#fff url("../assets/images/choosed.png") no-repeat 10px center; | 471 | background:#fff url("../assets/images/choosed.png") no-repeat 10px center; |
| 464 | background-size: 20px 20px; | 472 | background-size: 20px 20px; |
src/utils/utils.js
| @@ -86,6 +86,30 @@ export default { | @@ -86,6 +86,30 @@ export default { | ||
| 86 | return time; | 86 | return time; |
| 87 | }, | 87 | }, |
| 88 | 88 | ||
| 89 | + signObject: function (jsonObj){ //签名字段 | ||
| 90 | + let sort = [] | ||
| 91 | + for(let k in jsonObj){ | ||
| 92 | + sort.push({ | ||
| 93 | + keyname: k, | ||
| 94 | + value: jsonObj[k] | ||
| 95 | + }) | ||
| 96 | + } | ||
| 97 | + return this.myGetSign(sort) | ||
| 98 | + }, | ||
| 99 | + | ||
| 100 | + clientBrowser: function () { // 判断客户端 | ||
| 101 | + if (/MicroMessenger/.test(window.navigator.userAgent)) { | ||
| 102 | + console.log("微信客户端"); | ||
| 103 | + return '微信' | ||
| 104 | + } else if (/AlipayClient/.test(window.navigator.userAgent)) { | ||
| 105 | + console.log("支付宝客户端"); | ||
| 106 | + return '支付宝' | ||
| 107 | + } else { | ||
| 108 | + console.log("其他浏览器"); | ||
| 109 | + return '支付宝' | ||
| 110 | + } | ||
| 111 | + }, | ||
| 112 | + | ||
| 89 | myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid | 113 | myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid |
| 90 | 114 | ||
| 91 | myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息 | 115 | myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息 |