Commit 8910837d4d4baf1949f43ba80ec51d39fee157dc
1 parent
df198031
赤峰动态二维码
Showing
2 changed files
with
391 additions
and
0 deletions
src/components/dynCodePay.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <div class="car-wrap"> | |
| 4 | + <div class="carBG" :class="carWrapBG | formateColor"> | |
| 5 | + <p class="carNumber">{{carNumber}}</p> | |
| 6 | + <p class="payFee">{{(arrearageActFee/100).toFixed(2)}}元</p> | |
| 7 | + </div> | |
| 8 | + </div> | |
| 9 | + | |
| 10 | + <ul class="fee-wrap"> | |
| 11 | + <li> | |
| 12 | + <span>待缴金额</span> | |
| 13 | + <span>{{(arrearageActFee/100).toFixed(2)}}</span> | |
| 14 | + </li> | |
| 15 | + <li> | |
| 16 | + <span>优惠金额</span> | |
| 17 | + <span>{{(arrearageDiscFee/100).toFixed(2)}}</span> | |
| 18 | + </li> | |
| 19 | + <li> | |
| 20 | + <span>应付金额</span> | |
| 21 | + <span>{{(arrearageActFee/100).toFixed(2)}}</span> | |
| 22 | + </li> | |
| 23 | + </ul> | |
| 24 | + <div style="padding: 20px 18px"> | |
| 25 | + <div class="toPay" @click="toPay">{{clientBrowser}}支付</div> | |
| 26 | + </div> | |
| 27 | + | |
| 28 | + <div v-if="appOrderTimeout.length>0"> | |
| 29 | + <p class="tip"> | |
| 30 | + 温馨提示： | |
| 31 | + </p> | |
| 32 | + <p style="color: #666;padding: 0 18px;"> | |
| 33 | + {{appOrderTimeout}} | |
| 34 | + </p> | |
| 35 | + </div> | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + </div> | |
| 40 | +</template> | |
| 41 | + | |
| 42 | +<script> | |
| 43 | + | |
| 44 | +let Base64 = require('js-base64').Base64 | |
| 45 | + | |
| 46 | +import { aliPay, getOpenId, vxPayQuery, bankH5Pay } from '@/api/orderPay/orderPay' | |
| 47 | + | |
| 48 | +export default { | |
| 49 | + name: 'dynCodePay', | |
| 50 | + data() { | |
| 51 | + return { | |
| 52 | + carWrapBG: 0, | |
| 53 | + carNumber: '', | |
| 54 | + arrearageActFee: 0, | |
| 55 | + arrearageDiscFee: 0, | |
| 56 | + arrearageActFee: 0, | |
| 57 | + clientBrowser: '', // 客户端 | |
| 58 | + paySrcType: '', //支付的类型 101 是本次 103是历史欠费 | |
| 59 | + orderId: '', //支付的订单 | |
| 60 | + webAppCode: '', // 微信code | |
| 61 | + appOrderTimeout: '', // 超时描述 | |
| 62 | + } | |
| 63 | + }, | |
| 64 | + created() { | |
| 65 | + // this.carWrapBG = this.$route.query.carColor //车牌颜色 | |
| 66 | + // this.carNumber = this.$route.query.carNumber | |
| 67 | + // this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收 | |
| 68 | + // this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠 | |
| 69 | + // this.arrearageActFee = this.$route.query.arrearageActFee // 实收 | |
| 70 | + // this.clientBrowser = this.$utils.clientBrowser() //支付方式 | |
| 71 | + // this.paySrcType = this.$route.query.paySrcType // 实收 | |
| 72 | + // this.orderId = this.$route.query.ordeID | |
| 73 | + // console.log(this.orderId) | |
| 74 | + // this.appOrderTimeout = this.$route.query.appOrderTimeout | |
| 75 | + // if (this.clientBrowser == "微信") { | |
| 76 | + // this.webAppCode = this.getCode(); | |
| 77 | + // } | |
| 78 | + | |
| 79 | + }, | |
| 80 | + methods: { | |
| 81 | + getCode() { | |
| 82 | + var appID = this.$utils.myVxAppId; | |
| 83 | + alert(appID) | |
| 84 | + var code = this.getUrlParam('code'); | |
| 85 | + var local = window.location.href; | |
| 86 | + if (code == null || code === '') { | |
| 87 | + window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect' | |
| 88 | + } else { | |
| 89 | + return code; | |
| 90 | + } | |
| 91 | + }, | |
| 92 | + getUrlParam(name) { | |
| 93 | + var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); | |
| 94 | + var r = window.location.search.substr(1).match(reg) | |
| 95 | + if (r != null) return unescape(r[2]) | |
| 96 | + return null | |
| 97 | + }, | |
| 98 | + toPay() { | |
| 99 | + let me = this | |
| 100 | + let _order = [] | |
| 101 | + | |
| 102 | + console.log(this.orderId) | |
| 103 | + if (this.paySrcType == 103) { | |
| 104 | + this.orderId = JSON.parse(this.orderId) | |
| 105 | + this.orderId.forEach(item => { | |
| 106 | + _order.push({ | |
| 107 | + orderId: item | |
| 108 | + }) | |
| 109 | + }) | |
| 110 | + this.orderId = [] | |
| 111 | + this.orderId = _order | |
| 112 | + } | |
| 113 | + | |
| 114 | + if (this.clientBrowser == '支付宝') { // 支付宝支付 | |
| 115 | + var aliParams = {}; | |
| 116 | + aliParams.orderId = this.orderId; | |
| 117 | + aliParams.carNumber = this.carNumber; | |
| 118 | + aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号 | |
| 119 | + aliParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付 | |
| 120 | + aliParams.paySrcType = this.paySrcType;//101停车支付 | |
| 121 | + aliParams.orgId = this.$utils.myOrgId, | |
| 122 | + aliParams.backType = 2, | |
| 123 | + aliParams.recordArreaInfos = JSON.stringify(this.orderId); | |
| 124 | + console.log(aliParams) | |
| 125 | + aliPay(aliParams).then(response => { | |
| 126 | + console.log(response) | |
| 127 | + if (response.code == 0) {//进场 | |
| 128 | + document.write(response.data);//打开支付表单 | |
| 129 | + } else {//其他情况如【该卡号场内已存在】 | |
| 130 | + console.log(response.message); | |
| 131 | + } | |
| 132 | + | |
| 133 | + }) | |
| 134 | + } | |
| 135 | + | |
| 136 | + console.log(this.clientBrowser) | |
| 137 | + if (this.clientBrowser == '农行') { // 农行支付 | |
| 138 | + var bankabcParams = {}; | |
| 139 | + bankabcParams.orderId = this.orderId; | |
| 140 | + bankabcParams.carNumber = this.carNumber; | |
| 141 | + bankabcParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号 | |
| 142 | + bankabcParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付 | |
| 143 | + bankabcParams.paySrcType = this.paySrcType;//101停车支付 | |
| 144 | + bankabcParams.orgId = this.$utils.myOrgId, | |
| 145 | + bankabcParams.backType = 2, | |
| 146 | + bankabcParams.PaymentLinkType = 1 | |
| 147 | + bankabcParams.recordArreaInfos = JSON.stringify(this.orderId); | |
| 148 | + console.log(bankabcParams) | |
| 149 | + | |
| 150 | + bankH5Pay(bankabcParams).then(response => { | |
| 151 | + console.log(response) | |
| 152 | + if(response.code=='0'){ | |
| 153 | + let res = response.data.PaymentURL | |
| 154 | + let _token = res.split('TOKEN=')[1] | |
| 155 | + let OrderNo = response.data.OrderNo | |
| 156 | + localStorage.setItem('OrderNum',OrderNo) | |
| 157 | + | |
| 158 | + | |
| 159 | + if(window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) { | |
| 160 | + // alert('当前页面在新容器'); | |
| 161 | + AlipayJSBridge.call('startApp',{ | |
| 162 | + appId:'30603024', // 固定值 | |
| 163 | + param:{ | |
| 164 | + type:"3", // 3： 掌银内H5页面， | |
| 165 | + tokenId:_token, //商户传过来的tokenId | |
| 166 | + paySystem:"", //商户传过来的paySystem, 没有则传空字符串 | |
| 167 | + payType:"1111", //商户传过来的payType，没有则传'1111' | |
| 168 | + webviewURL:"https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址 | |
| 169 | + remark:"其他参数", //扩展备用 | |
| 170 | + showProgress:'NO', | |
| 171 | + backBehavior:'back' | |
| 172 | + }, | |
| 173 | + },function(result){ | |
| 174 | + | |
| 175 | + }); | |
| 176 | + } else { | |
| 177 | + // alert('当前页面在旧容器'); | |
| 178 | + // 旧支付方式 | |
| 179 | + 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":""}}'); | |
| 180 | + | |
| 181 | + } | |
| 182 | + }else{ | |
| 183 | + alert('支付失败') | |
| 184 | + } | |
| 185 | + | |
| 186 | + | |
| 187 | + // console.log(_token) | |
| 188 | + // let _data = 'method=invokePayFromBrowser&tokenID='+_token | |
| 189 | + // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y') | |
| 190 | + // | |
| 191 | + // let baseCRY = Base64.encode(cryData) | |
| 192 | + // console.log(baseCRY) | |
| 193 | + // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}') | |
| 194 | + // // 即为加密后的数据。其中paramsEncode是需要加密的数据、 | |
| 195 | + // // keyStr是加密时使用的key，与服务端一致、hash是偏移量，是一个随机生成的16位字符串。 | |
| 196 | + }) | |
| 197 | + } | |
| 198 | + | |
| 199 | + | |
| 200 | + | |
| 201 | + | |
| 202 | + | |
| 203 | + | |
| 204 | + | |
| 205 | + if (this.clientBrowser == '微信') { // 微信支付 | |
| 206 | + //第一步获取openid | |
| 207 | + var codeParams = { | |
| 208 | + code: this.webAppCode, | |
| 209 | + appId: this.$utils.myVxAppId | |
| 210 | + }; | |
| 211 | + getOpenId(codeParams).then(res => { | |
| 212 | + if (res.code == 0) { | |
| 213 | + me.vxPay(res.data, this.orderId) | |
| 214 | + } else if (res.code == 40163) { //code been used, hints[重复code问题] | |
| 215 | + alert('请重新扫码') | |
| 216 | + console.log(res.message); | |
| 217 | + } else { | |
| 218 | + alert('请重新扫码') | |
| 219 | + } | |
| 220 | + }) | |
| 221 | + | |
| 222 | + } | |
| 223 | + | |
| 224 | + }, | |
| 225 | + vxPay(openIdData, orderIdData) { | |
| 226 | + let vm = this | |
| 227 | + var wxParams = {}; | |
| 228 | + wxParams.orderId = orderIdData; | |
| 229 | + wxParams.backType = 2, | |
| 230 | + wxParams.orgId = this.$utils.myOrgId, | |
| 231 | + wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号 | |
| 232 | + wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付 | |
| 233 | + wxParams.carNumber = this.carNumber; | |
| 234 | + wxParams.paySrcType = this.paySrcType;//101停车支付 | |
| 235 | + wxParams.recordArreaInfos = JSON.stringify(orderIdData); | |
| 236 | + wxParams.openId = openIdData; | |
| 237 | + wxParams.appId = this.$utils.myVxAppId; | |
| 238 | + vxPayQuery(wxParams).then(res => { | |
| 239 | + if (res.code == 0) { // | |
| 240 | + if (res.data) { | |
| 241 | + var data = res.data; | |
| 242 | + console.log(JSON.stringify(data)); | |
| 243 | + if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档 | |
| 244 | + if (document.addEventListener) { | |
| 245 | + document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false) | |
| 246 | + } else if (document.attachEvent) { | |
| 247 | + document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data)) | |
| 248 | + document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data)) | |
| 249 | + } | |
| 250 | + } else { | |
| 251 | + console.log('准备调用微信支付') | |
| 252 | + vm.onBridgeReady(data) | |
| 253 | + } | |
| 254 | + } else { | |
| 255 | + alert("没有找到返回值"); | |
| 256 | + } | |
| 257 | + } else { | |
| 258 | + console.log(res.message); | |
| 259 | + alert(res.message); | |
| 260 | + } | |
| 261 | + }) | |
| 262 | + }, | |
| 263 | + onBridgeReady(params) { | |
| 264 | + let me = this | |
| 265 | + console.log('调用微信支付WeixinJSBridge') | |
| 266 | + WeixinJSBridge.invoke( | |
| 267 | + 'getBrandWCPayRequest', params, | |
| 268 | + // | |
| 269 | + // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的 | |
| 270 | + // 'appId': data.appId, // 公众号名称，由商户传入 | |
| 271 | + // 'timeStamp': data.timeStamp, // 时间戳 | |
| 272 | + // 'nonceStr': data.nonceStr, // 随机串 | |
| 273 | + // 'package': data.package, // 预支付id | |
| 274 | + // 'signType': data.signType, // 微信签名方式 | |
| 275 | + // 'paySign': data.paySign // 微信签名 | |
| 276 | + // }, | |
| 277 | + function (res) { | |
| 278 | + // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 | |
| 279 | + if (res.err_msg === 'get_brand_wcpay_request:ok') { | |
| 280 | + console.log('成功') | |
| 281 | + alert('支付成功') | |
| 282 | + } else { | |
| 283 | + console.log('失败') | |
| 284 | + alert('支付失败') | |
| 285 | + me.$router.go(-2); | |
| 286 | + } | |
| 287 | + } | |
| 288 | + ) | |
| 289 | + }, | |
| 290 | + }, | |
| 291 | + filters: { | |
| 292 | + } | |
| 293 | +} | |
| 294 | +</script> | |
| 295 | + | |
| 296 | +<style scoped lang="scss"> | |
| 297 | + .car-wrap { | |
| 298 | + padding: 7px 7px; | |
| 299 | + background: #FFF; | |
| 300 | + } | |
| 301 | + | |
| 302 | + .carBG { | |
| 303 | + width: 100%; | |
| 304 | + height: 130px; | |
| 305 | + } | |
| 306 | + | |
| 307 | + .carBlue { | |
| 308 | + background: url("../assets/images/blueBG.png") no-repeat; | |
| 309 | + background-size: 100% 100%; | |
| 310 | + } | |
| 311 | + | |
| 312 | + .carYellow { | |
| 313 | + background: url("../assets/images/yellowBG.png") no-repeat; | |
| 314 | + background-size: 100% 100%; | |
| 315 | + } | |
| 316 | + | |
| 317 | + .carGreen { | |
| 318 | + background: url("../assets/images/greenBG.png") no-repeat; | |
| 319 | + background-size: 100% 100%; | |
| 320 | + } | |
| 321 | + | |
| 322 | + .carWhite { | |
| 323 | + background: url("../assets/images/whiteBG.png") no-repeat; | |
| 324 | + background-size: 100% 100%; | |
| 325 | + } | |
| 326 | + | |
| 327 | + .carBlack { | |
| 328 | + background: url("../assets/images/blackBG.png") no-repeat; | |
| 329 | + background-size: 100% 100%; | |
| 330 | + } | |
| 331 | + | |
| 332 | + .carNumber { | |
| 333 | + padding: 20px 0 10px; | |
| 334 | + font-size: 30px; | |
| 335 | + color: #fff; | |
| 336 | + text-align: center; | |
| 337 | + } | |
| 338 | + | |
| 339 | + .payFee { | |
| 340 | + font-size: 24px; | |
| 341 | + color: #FF7B7B; | |
| 342 | + text-align: center; | |
| 343 | + } | |
| 344 | + | |
| 345 | + .fee-wrap { | |
| 346 | + background: #FFF; | |
| 347 | + padding: 0 18px; | |
| 348 | + > li { | |
| 349 | + display: flex; | |
| 350 | + justify-content: space-between; | |
| 351 | + height: 30px; | |
| 352 | + line-height: 30px; | |
| 353 | + border-bottom: 1px solid #EAEAEA; | |
| 354 | + &:last-child { | |
| 355 | + border-bottom: 0; | |
| 356 | + } | |
| 357 | + } | |
| 358 | + | |
| 359 | + } | |
| 360 | + | |
| 361 | + .toPay { | |
| 362 | + width: 100%; | |
| 363 | + height: 44px; | |
| 364 | + margin: 0 auto; | |
| 365 | + line-height: 44px; | |
| 366 | + text-align: center; | |
| 367 | + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%); | |
| 368 | + border-radius: 4px; | |
| 369 | + border: 1px solid #0D72E2; | |
| 370 | + font-size: 20px; | |
| 371 | + color: #FFF; | |
| 372 | + cursor: pointer; | |
| 373 | + } | |
| 374 | + | |
| 375 | + .tip { | |
| 376 | + padding-left: 40px; | |
| 377 | + background: url("../assets/images/tip.png") no-repeat 18px center; | |
| 378 | + background-size: 16px 16px; | |
| 379 | + color: #666; | |
| 380 | + } | |
| 381 | +</style> | ... | ... |