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> |