|
@@ -68,7 +68,7 @@
|
|
|
|
|
|
<!-- 支付方式 -->
|
|
|
<div class="payment-section">
|
|
|
- <div class="payment-option">
|
|
|
+ <div v-if="paymentType === 'alipay'" class="payment-option">
|
|
|
<div class="payment-icon">
|
|
|
<img src="@/assets/images/recharge_paypal.png" alt="支付宝支付" class="alipay-icon" />
|
|
|
</div>
|
|
@@ -77,6 +77,15 @@
|
|
|
<img src="@/assets/images/duihao.png" alt="选中" class="check-icon" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="paymentType === 'wechat'" class="payment-option">
|
|
|
+ <div class="payment-icon">
|
|
|
+ <img src="@/assets/images/recharge_wechat.png" alt="微信支付" class="wechat-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="payment-name">微信支付</div>
|
|
|
+ <div class="payment-selected">
|
|
|
+ <img src="@/assets/images/duihao.png" alt="选中" class="check-icon" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 温馨提示 -->
|
|
@@ -85,7 +94,8 @@
|
|
|
<div class="tips-content">
|
|
|
<div class="tip-item">1. 充值前请确定您已满18周岁并具有完全民事行为能力。</div>
|
|
|
<div class="tip-item">2. 安全账号转账、理赔转账、刷单、代充均为骗局,请认真核实并确认</div>
|
|
|
- <div class="tip-item">3. 大额充值,支付方式可选择"零钱通"</div>
|
|
|
+ <div class="tip-item" v-if="paymentType === 'wechat'">3. 大额充值,支付方式可选择"零钱通"</div>
|
|
|
+ <div class="tip-item" v-if="paymentType === 'alipay'">3. 大额充值,请确保支付宝账户余额充足</div>
|
|
|
<div class="tip-item">4. 如有疑问,请联系服务号客服</div>
|
|
|
</div>
|
|
|
|
|
@@ -121,14 +131,16 @@
|
|
|
import { getProductList } from '@/api/product'
|
|
|
import { getUserInfo } from '@/api/user'
|
|
|
import { aliPayCoin, aliPayH5 } from '@/api/pay'
|
|
|
-import { getDevicePayWayId, getPlatformType } from '@/utils/config'
|
|
|
+import { ahtuCodeApi, wechatPayCoin, wxPay } from '@/api/pay'
|
|
|
+import { getDevicePayWayId, getPlatformType, ALI_CUSTOM, PAYMENT_TYPE } from '@/utils/config'
|
|
|
|
|
|
export default {
|
|
|
name: 'RechargePage',
|
|
|
data() {
|
|
|
return {
|
|
|
resultDataMess: {},
|
|
|
- userInfo: {
|
|
|
+ userCode: '', // 用于微信支付
|
|
|
+ userInfo: { // 用于支付宝支付
|
|
|
id: '',
|
|
|
nickname: '',
|
|
|
avatar: ''
|
|
@@ -140,7 +152,9 @@ export default {
|
|
|
agreementChecked: false,
|
|
|
agreementVisible: false,
|
|
|
// 自定义金额
|
|
|
- customAmount: ''
|
|
|
+ customAmount: '',
|
|
|
+ // 支付方式类型
|
|
|
+ paymentType: PAYMENT_TYPE
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -149,7 +163,11 @@ export default {
|
|
|
},
|
|
|
// 显示列表 = 产品列表 + 自定义
|
|
|
rechargeOptionsWithCustom() {
|
|
|
- return [...(this.rechargeOptions || []), { isCustom: true }]
|
|
|
+ if (ALI_CUSTOM && this.paymentType === 'alipay') {
|
|
|
+ return [...(this.rechargeOptions || []), { isCustom: true }]
|
|
|
+ } else {
|
|
|
+ return [...(this.rechargeOptions || [])]
|
|
|
+ }
|
|
|
},
|
|
|
// 是否选择了自定义
|
|
|
isCustomSelected() {
|
|
@@ -159,15 +177,20 @@ export default {
|
|
|
created() {
|
|
|
// 获取用户信息
|
|
|
this.initUserInfo()
|
|
|
-
|
|
|
// 获取产品列表
|
|
|
this.fetchProductList()
|
|
|
+ if (this.paymentType === 'wechat') {
|
|
|
+ this.listenWeixinBridge() // 监听桥梁加载
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化用户信息
|
|
|
async initUserInfo() {
|
|
|
// 从路由参数获取用户信息
|
|
|
const { id, nickname, avatar } = this.$route.query
|
|
|
+ if (this.paymentType === 'wechat') {
|
|
|
+ this.userCode = this.$route.query.userCode
|
|
|
+ }
|
|
|
if (id) {
|
|
|
// 如果路由参数中有用户ID,直接使用
|
|
|
this.userInfo.id = id
|
|
@@ -195,7 +218,7 @@ export default {
|
|
|
}
|
|
|
} else {
|
|
|
// 没有用户ID,返回搜索页面
|
|
|
- this.$toast('请先搜索用户')
|
|
|
+ this.$toast('请先登录')
|
|
|
this.$router.replace('/')
|
|
|
}
|
|
|
}
|
|
@@ -205,6 +228,20 @@ export default {
|
|
|
localStorage.setItem('lastUserId', this.userInfo.id)
|
|
|
}
|
|
|
},
|
|
|
+ // 监听 weixinJSBridge 加载
|
|
|
+ listenWeixinBridge() {
|
|
|
+ if (window.WeixinJSBridge) {
|
|
|
+ this.onWeixinBridgeReady()
|
|
|
+ } else {
|
|
|
+ const listener = () => this.onWeixinBridgeReady()
|
|
|
+ document.addEventListener('WeixinJSBridgeReady', listener, false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // weixinJSBridge 加载成功回调
|
|
|
+ onWeixinBridgeReady() {
|
|
|
+ this.bridgeReady = true
|
|
|
+ console.log('weixinJSBridge 加载成功')
|
|
|
+ },
|
|
|
// 获取产品列表
|
|
|
async fetchProductList() {
|
|
|
try {
|
|
@@ -289,7 +326,11 @@ export default {
|
|
|
allowHtml: true
|
|
|
}).then(() => {
|
|
|
// 调用支付接口
|
|
|
- this.requestAliPay(selectedOption)
|
|
|
+ if (this.paymentType === 'wechat') {
|
|
|
+ this.requestWechatPay(selectedOption)
|
|
|
+ } else {
|
|
|
+ this.requestAliPay(selectedOption)
|
|
|
+ }
|
|
|
}).catch(() => {
|
|
|
// 取消支付
|
|
|
})
|
|
@@ -371,6 +412,83 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ // 请求微信支付
|
|
|
+ async requestWechatPay(product) {
|
|
|
+ // 显示加载提示
|
|
|
+ this.isLoading = true
|
|
|
+ this.$toast.loading({
|
|
|
+ message: '正在发起支付...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0
|
|
|
+ })
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 构建支付参数
|
|
|
+ const payWayId = getDevicePayWayId() // 获取设备对应的支付方式ID
|
|
|
+ const payData = {
|
|
|
+ "productName": "一号房间",
|
|
|
+ openId: localStorage.getItem('userOpenId'),
|
|
|
+ userId: this.userInfo.id,
|
|
|
+ productId: product.id,
|
|
|
+ amount: product.price,
|
|
|
+ orderNo: Date.now(),
|
|
|
+ payWayId: payWayId // 添加支付方式ID
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用后端支付接口
|
|
|
+ const res = await wxPay(payData)
|
|
|
+ console.log(res, 9999)
|
|
|
+ this.$toast.clear()
|
|
|
+ this.isLoading = false
|
|
|
+
|
|
|
+ // 处理支付结果
|
|
|
+ if (res.status == 200) {
|
|
|
+ try {
|
|
|
+ let signData = JSON.parse(res.data.outputJSON)
|
|
|
+ this.resultDataMess = signData
|
|
|
+ console.log(signData, 'signData')
|
|
|
+ let wxJsapiParam = signData.wxJsapiParam
|
|
|
+ if (signData.returnCode == '0000') {
|
|
|
+ // 5. 调用 weixinJSBridge 支付
|
|
|
+ this.invokeWeixinBridgePayment(wxJsapiParam)
|
|
|
+ } else {
|
|
|
+ this.$toast.fail(this.resultDataMess.returnMsg || '获取支付链接失败')
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ this.$toast.fail(this.resultDataMess.returnMsg || '获取支付链接失败')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$toast.fail(this.resultDataMess.returnMsg || '获取支付链接失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.$toast.clear()
|
|
|
+ this.isLoading = false
|
|
|
+ console.error('支付请求失败:', error)
|
|
|
+ this.$toast.fail('支付请求失败,请重试')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 调用 weixinJSBridge 支付
|
|
|
+ invokeWeixinBridgePayment(payParams) {
|
|
|
+ window.WeixinJSBridge.invoke(
|
|
|
+ 'getBrandWCPayRequest',
|
|
|
+ payParams,
|
|
|
+ this.handleWeixinPayResult
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 处理支付结果
|
|
|
+ handleWeixinPayResult(res) {
|
|
|
+ if (res.err_msg === "get_brand_wcpay_request:ok") {
|
|
|
+ // 支付成功
|
|
|
+ this.handlePaymentSuccess(res)
|
|
|
+ } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
|
|
|
+ // 支付取消
|
|
|
+ this.handlePaymentCancel()
|
|
|
+ } else {
|
|
|
+ // 支付失败
|
|
|
+ this.handlePaymentFailure(res)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
// 处理支付成功
|
|
|
handlePaymentSuccess() {
|
|
|
console.log('支付成功')
|
|
@@ -656,7 +774,8 @@ export default {
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
|
|
|
-.alipay-icon {
|
|
|
+.alipay-icon,
|
|
|
+.wechat-icon {
|
|
|
width: 28px;
|
|
|
height: 28px;
|
|
|
object-fit: contain;
|