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> |
src/router/index.js