|
|
@@ -1,6 +1,6 @@
|
|
|
<!--
|
|
|
- 中央钱包充值页(仅 UI)
|
|
|
- 用途:我的-可用余额-充值;支付与下单后续迭代
|
|
|
+ 中央钱包充值页
|
|
|
+ 用途:我的-可用余额-充值;调 main-wallet/recharge 拉起微信支付,回调入账
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="wallet-recharge-page">
|
|
|
@@ -43,16 +43,21 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="footer-wrap">
|
|
|
- <button class="pay-btn" @click="onPayPlaceholder">微信支付</button>
|
|
|
+ <button class="pay-btn" :loading="paying" :disabled="paying" @click="onWxPay">微信支付</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mainMy } from '@/api/home'
|
|
|
+import { mainWalletRecharge } from '@/api/main-wallet'
|
|
|
+import { postWxCode } from '@/api/mini'
|
|
|
+import wexinPay from '@/utils/pay/wxPay'
|
|
|
|
|
|
/** 预设充值档位(元) */
|
|
|
const PRESET_AMOUNTS = [300, 500, 1000, 2000, 3000]
|
|
|
+/** 与后端 MainWalletRechargeClass::MAX_AMOUNT 一致 */
|
|
|
+const MAX_AMOUNT = 50000
|
|
|
|
|
|
export default {
|
|
|
name: 'walletRecharge',
|
|
|
@@ -62,7 +67,8 @@ export default {
|
|
|
presetAmounts: PRESET_AMOUNTS,
|
|
|
selectedPreset: PRESET_AMOUNTS[0],
|
|
|
isCustom: false,
|
|
|
- customAmount: ''
|
|
|
+ customAmount: '',
|
|
|
+ paying: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -75,6 +81,17 @@ export default {
|
|
|
return this.formatPlainAmount(n)
|
|
|
}
|
|
|
return String(this.selectedPreset)
|
|
|
+ },
|
|
|
+ /** 当前待充值金额(元) */
|
|
|
+ payAmount () {
|
|
|
+ if (this.isCustom) {
|
|
|
+ const n = parseFloat(this.customAmount)
|
|
|
+ if (isNaN(n) || n <= 0) {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ return Math.floor(n * 100) / 100
|
|
|
+ }
|
|
|
+ return Number(this.selectedPreset) || 0
|
|
|
}
|
|
|
},
|
|
|
onShow () {
|
|
|
@@ -113,11 +130,93 @@ export default {
|
|
|
selectCustomMode () {
|
|
|
this.isCustom = true
|
|
|
},
|
|
|
- onPayPlaceholder () {
|
|
|
- uni.showToast({
|
|
|
- title: '功能开发中',
|
|
|
- icon: 'none'
|
|
|
+ /** 校验金额后发起微信充值 */
|
|
|
+ onWxPay () {
|
|
|
+ const amount = this.payAmount
|
|
|
+ if (amount <= 0) {
|
|
|
+ this.$msg('请输入充值金额')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (amount > MAX_AMOUNT) {
|
|
|
+ this.$msg('单笔充值不能超过' + MAX_AMOUNT + '元')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.doRechargePay()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 调后端建单并拉起微信支付;无 openId 时补授权后重试
|
|
|
+ */
|
|
|
+ doRechargePay () {
|
|
|
+ if (this.paying) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.paying = true
|
|
|
+ uni.showLoading({ title: '加载中', mask: true })
|
|
|
+ const miniOpenId = uni.getStorageSync('currentMiniOpenId') || ''
|
|
|
+ mainWalletRecharge({
|
|
|
+ amount: this.payAmount,
|
|
|
+ miniOpenId: miniOpenId
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.paying = false
|
|
|
+ if (res.code != 1) {
|
|
|
+ this.$msg(res.msg || '下单失败')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 后端提示缺少小程序 openId,先登录再重试
|
|
|
+ if (res.data && res.data.hasNoMiniOpenId == 1) {
|
|
|
+ this.bindMiniOpenIdThenPay()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ wexinPay(res.data, this.paySuccess, this.payFail)
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.paying = false
|
|
|
+ this.$msg('网络异常,请重试')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 无 openId:uni.login + postWxCode 后再次支付 */
|
|
|
+ bindMiniOpenIdThenPay () {
|
|
|
+ const that = this
|
|
|
+ uni.login({
|
|
|
+ provider: 'weixin',
|
|
|
+ success: loginRes => {
|
|
|
+ uni.setStorageSync('code', loginRes.code)
|
|
|
+ postWxCode({ code: loginRes.code }).then(subRes => {
|
|
|
+ if (subRes.data && subRes.data.currentMiniOpenId) {
|
|
|
+ uni.setStorageSync('currentMiniOpenId', subRes.data.currentMiniOpenId)
|
|
|
+ that.$util.confirmModal(
|
|
|
+ { content: '网络开小差了,请继续', okText: '确认', singer: true },
|
|
|
+ () => {
|
|
|
+ that.doRechargePay()
|
|
|
+ }
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ that.$util.confirmModal(
|
|
|
+ { content: '出错了,请添加客服微信反馈', okText: '复制微信' },
|
|
|
+ () => {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: '15280215347',
|
|
|
+ success: function () {
|
|
|
+ that.$msg('复制成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ that.$msg('微信登录失败')
|
|
|
+ }
|
|
|
})
|
|
|
+ },
|
|
|
+ paySuccess () {
|
|
|
+ this.$msg('支付成功')
|
|
|
+ this.loadWalletBalance()
|
|
|
+ },
|
|
|
+ payFail () {
|
|
|
+ this.$msg('支付取消或失败')
|
|
|
}
|
|
|
}
|
|
|
}
|