feat: 虚拟支付完整链路——vpay服务模块(双签名/充值下单/回调到账/退款) + 充值页 + 我的入口 + session_key存储
This commit is contained in:
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view class="vpay-page page-layout">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
|
||||
<view class="balance-card">
|
||||
<text class="balance-label">我的{{ info.coinName || '星尘' }}</text>
|
||||
<text class="balance-num">{{ info.balance || 0 }}</text>
|
||||
<text class="balance-hint">{{ info.env === 'sandbox' ? '（沙箱环境）' : '' }}1元 = 100 {{ info.coinName || '星尘' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="section-header">
|
||||
<text class="section-title">选择充值档位</text>
|
||||
</view>
|
||||
|
||||
<view class="pkg-grid">
|
||||
<view
|
||||
v-for="p in info.packages || []"
|
||||
:key="p.id"
|
||||
class="pkg-card"
|
||||
:class="{ active: picked === p.id }"
|
||||
@tap="picked = p.id"
|
||||
>
|
||||
<text class="pkg-coins">{{ p.label }}</text>
|
||||
<text class="pkg-price">¥{{ p.priceYuan }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="use-cases">
|
||||
<text class="uc-title">{{ info.coinName || '星尘' }}用途</text>
|
||||
<view class="uc-item"><text class="uc-tag">问答</text><text>AI 问答一次 10 {{ info.coinName || '星尘' }}</text></view>
|
||||
<view class="uc-item"><text class="uc-tag">会员</text><text>Pro 月卡 3000 {{ info.coinName || '星尘' }}</text></view>
|
||||
</view>
|
||||
|
||||
<view class="pay-agreement-row">
|
||||
<text class="pay-agreement-text">
|
||||
充值即消耗型虚拟商品，不支持退款（法定情形除外），详见
|
||||
<text class="pay-agreement-link" @click.stop="openAgreement">《用户协议》</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<button class="recharge-btn" :disabled="!picked || paying" @tap="recharge">
|
||||
{{ paying ? '拉起支付中…' : '立即充值' }}
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { request } from '../../utils/api'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const info = ref({})
|
||||
const picked = ref('')
|
||||
const paying = ref(false)
|
||||
|
||||
function openAgreement() {
|
||||
uni.navigateTo({ url: '/pages/agreement/agreement?type=terms' })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
return
|
||||
}
|
||||
try {
|
||||
info.value = await request('GET', '/api/vpay/info', null, userStore.token)
|
||||
if ((info.value.packages || []).length) picked.value = info.value.packages[0].id
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || '获取充值信息失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
|
||||
async function recharge() {
|
||||
if (!picked.value || paying.value) return
|
||||
paying.value = true
|
||||
try {
|
||||
const data = await request('POST', '/api/vpay/recharge', { packageId: picked.value }, userStore.token)
|
||||
const pay = data.payParams
|
||||
if (!pay) throw new Error('支付参数异常')
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
await new Promise((resolve, reject) => {
|
||||
uni.requestVirtualPayment({
|
||||
mode: pay.mode,
|
||||
env: pay.env,
|
||||
offerId: pay.offerId,
|
||||
buyQuantity: pay.buyQuantity,
|
||||
currencyType: pay.currencyType,
|
||||
platform: pay.platform,
|
||||
outTradeNo: pay.outTradeNo,
|
||||
signData: pay.signData,
|
||||
paySig: pay.paySig,
|
||||
signature: pay.signature,
|
||||
success: resolve,
|
||||
fail: (err) => reject(new Error(err.errMsg || err.errCode || '支付失败')),
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.showToast({ title: '请在微信小程序内充值', icon: 'none' })
|
||||
return
|
||||
// #endif
|
||||
|
||||
uni.showToast({ title: '充值成功！', icon: 'success' })
|
||||
// 刷新余额
|
||||
info.value = await request('GET', '/api/vpay/info', null, userStore.token)
|
||||
} catch (e) {
|
||||
const msg = e.message || '支付未完成'
|
||||
if (msg.includes('cancel')) {
|
||||
uni.showToast({ title: '已取消支付', icon: 'none' })
|
||||
} else {
|
||||
uni.showToast({ title: msg, icon: 'none', duration: 3000 })
|
||||
}
|
||||
} finally {
|
||||
paying.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vpay-page { min-height: 100vh; padding: 0 20px 40px; background: var(--bg-primary); }
|
||||
.status-bar-placeholder { height: 44px; }
|
||||
.balance-card {
|
||||
background: linear-gradient(135deg, #5b5ff8, #8b5cf6);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 22px 20px;
|
||||
margin-bottom: 16px;
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
.balance-label { font-size: 12px; color: rgba(255,255,255,.7); }
|
||||
.balance-num { font-size: 36px; font-weight: 800; color: #fff; }
|
||||
.balance-hint { font-size: 11px; color: rgba(255,255,255,.5); }
|
||||
}
|
||||
.section-header { display: flex; align-items: center; margin: 16px 0 12px;
|
||||
.section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); } }
|
||||
.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.pkg-card {
|
||||
background: var(--glass-bg); border: 2px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg); padding: 16px 14px;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||
transition: border-color .2s;
|
||||
&.active { border-color: var(--color-brand); background: var(--color-brand-bg); }
|
||||
.pkg-coins { font-size: 16px; font-weight: 700; color: var(--text-primary); }
|
||||
.pkg-price { font-size: 14px; color: var(--color-brand); font-weight: 600; }
|
||||
}
|
||||
.use-cases {
|
||||
background: var(--glass-bg); border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg); padding: 14px 16px; margin-top: 16px;
|
||||
.uc-title { font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 8px; }
|
||||
.uc-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--text-tertiary); }
|
||||
.uc-tag {
|
||||
background: var(--color-brand-bg); color: var(--color-brand);
|
||||
border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.pay-agreement-row { display: flex; justify-content: center; margin-top: 14px; }
|
||||
.pay-agreement-text { font-size: 10px; color: var(--text-muted); text-align: center; }
|
||||
.pay-agreement-link { color: var(--color-brand); }
|
||||
.recharge-btn {
|
||||
width: 100%; height: 48px; margin-top: 16px;
|
||||
background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
|
||||
color: #fff; font-size: 16px; font-weight: 700; border-radius: var(--radius-lg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
&[disabled] { opacity: .5; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user