117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
|
<!--
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: kBank
|
|||
|
|
* @Date: 2023-04-03 16:49:49
|
|||
|
|
-->
|
|||
|
|
<!--
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: kBank
|
|||
|
|
* @Date: 2023-02-11 17:26:55
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<div class="contain">
|
|||
|
|
<img src="../assets/images/pay_i2.png"
|
|||
|
|
alt="" />
|
|||
|
|
<div>宝付支付中...</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import wx from 'weixin-js-sdk'
|
|||
|
|
import * as pay from '@/api/pay.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
code: '',
|
|||
|
|
state: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
let allData = decodeURIComponent(window.location.href).split('=')
|
|||
|
|
console.log(
|
|||
|
|
'%c [ allData ]-34',
|
|||
|
|
'font-size:13px; background:#a3905c; color:#e7d4a0;',
|
|||
|
|
allData
|
|||
|
|
)
|
|||
|
|
this.code = allData[1].split('&')[0]
|
|||
|
|
this.state = allData[2].split('#')[0]
|
|||
|
|
this.getFiveCode()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getFiveCode() {
|
|||
|
|
pay
|
|||
|
|
.baoFuPay({
|
|||
|
|
code: this.code,
|
|||
|
|
state: this.state,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
let obj = res.data
|
|||
|
|
this.onBridgeReady(obj)
|
|||
|
|
// wx.chooseWXPay({
|
|||
|
|
// appId: obj.appId,
|
|||
|
|
// timeStamp: obj.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
|
|||
|
|
// nonceStr: obj.nonceStr, // 支付签名随机串，不长于 32 位
|
|||
|
|
// package: obj.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
|
|||
|
|
// signType: obj.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
|
|||
|
|
// paySign: obj.paySign, // 支付签名
|
|||
|
|
// success: function (res) {
|
|||
|
|
// console.log(
|
|||
|
|
// '%c [ res ]-48',
|
|||
|
|
// 'font-size:13px; background:#71e3dc; color:#b5ffff;',
|
|||
|
|
// res
|
|||
|
|
// )
|
|||
|
|
// // 支付成功后的回调函数
|
|||
|
|
// },
|
|||
|
|
// })
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onBridgeReady(data) {
|
|||
|
|
console.log('调用微信支付WeixinJSBridge')
|
|||
|
|
var vm = this
|
|||
|
|
WeixinJSBridge.invoke(
|
|||
|
|
'getBrandWCPayRequest',
|
|||
|
|
{
|
|||
|
|
// 下面参数内容都是后台返回的
|
|||
|
|
appId: data.appId, // 公众号名称，由商户传入
|
|||
|
|
timeStamp: data.timeStamp, // 时间戳
|
|||
|
|
nonceStr: data.nonceStr, // 随机串
|
|||
|
|
package: data.package, // 预支付id
|
|||
|
|
signType: data.signType, // 微信签名方式
|
|||
|
|
paySign: data.paySign, // 微信签名
|
|||
|
|
},
|
|||
|
|
function (res) {
|
|||
|
|
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
|||
|
|
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
|||
|
|
this.$message({
|
|||
|
|
message: '支付成功',
|
|||
|
|
type: 'success',
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.$message({
|
|||
|
|
message: '支付失败',
|
|||
|
|
type: 'warning',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.contain {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 200px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
img {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|