feat(avatar): integrate Huihui payments
This commit is contained in:
stefanfeng
@@ -46,7 +46,7 @@
|
||||
:class="{ selected: paymentMethod === 'wechat' }"
|
||||
@click="paymentMethod = 'wechat'"
|
||||
>
|
||||
<span class="payment-icon">💚</span>
|
||||
<span class="payment-icon wechat-icon"><img :src="wechatPayIcon" alt="" /></span>
|
||||
<span class="payment-name">微信支付</span>
|
||||
<span class="payment-check" v-if="paymentMethod === 'wechat'">✓</span>
|
||||
</div>
|
||||
@@ -55,31 +55,41 @@
|
||||
:class="{ selected: paymentMethod === 'alipay' }"
|
||||
@click="paymentMethod = 'alipay'"
|
||||
>
|
||||
<span class="payment-icon">💙</span>
|
||||
<span class="payment-icon alipay-icon"><img :src="alipayIcon" alt="" /></span>
|
||||
<span class="payment-name">支付宝</span>
|
||||
<span class="payment-check" v-if="paymentMethod === 'alipay'">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="paymentNotice" class="payment-notice" :class="paymentNoticeTone">{{ paymentNotice }}</p>
|
||||
</section>
|
||||
|
||||
<!-- 充值按钮 -->
|
||||
<section class="checkout-section">
|
||||
<button
|
||||
class="checkout-btn"
|
||||
:class="{ disabled: !selectedPlan }"
|
||||
:disabled="!selectedPlan"
|
||||
:class="{ disabled: !selectedPlan || charging || Boolean(pendingOrderId) }"
|
||||
:disabled="!selectedPlan || charging || Boolean(pendingOrderId)"
|
||||
@click="doCharge"
|
||||
>
|
||||
{{ selectedPlan ? `立即支付 ¥${selectedPlan.price}` : '请选择充值套餐' }}
|
||||
{{ checkoutLabel }}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getTokenBalance, getRechargePlans, chargeToken } from '@/api'
|
||||
import {
|
||||
chargeToken,
|
||||
getRechargePlans,
|
||||
getTokenBalance,
|
||||
getTokenPaymentStatus,
|
||||
type TokenPaymentOrder
|
||||
} from '@/api'
|
||||
import { isInUniWebView, onNativeMessage, UniEvents } from '@/utils/uniapp-bridge'
|
||||
import wechatPayIcon from '@/assets/wechat-pay.svg'
|
||||
import alipayIcon from '@/assets/alipay.svg'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -101,6 +111,12 @@ const selectedPlan = ref<any>(null)
|
||||
|
||||
// 支付方式
|
||||
const paymentMethod = ref<'wechat' | 'alipay'>('wechat')
|
||||
const paymentNotice = ref('')
|
||||
const paymentNoticeTone = ref<'pending' | 'success' | 'error'>('pending')
|
||||
const pendingOrderId = ref(sessionStorage.getItem('hh_pending_payment_order') || '')
|
||||
let pollTimer: number | undefined
|
||||
let pollDeadline = 0
|
||||
let removeNativeListener: (() => void) | undefined
|
||||
|
||||
// 从后端加载余额与套餐
|
||||
const loadData = async () => {
|
||||
@@ -119,23 +135,144 @@ const loadData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 执行充值（写入后端）
|
||||
// 会会支付订单创建与到账确认
|
||||
const charging = ref(false)
|
||||
const formatTokenAmount = (amount: number) => {
|
||||
if (amount >= 1_000_000 && amount % 1_000_000 === 0) return `${amount / 1_000_000}M`
|
||||
return amount.toLocaleString()
|
||||
}
|
||||
const formatPointsCopy = (value: string) => value.replace(/\bToken\b/gi, '积分')
|
||||
|
||||
const checkoutLabel = computed(() => {
|
||||
if (!selectedPlan.value) return '请选择充值套餐'
|
||||
if (charging.value) return '正在创建支付订单…'
|
||||
if (pendingOrderId.value) return '等待支付结果…'
|
||||
return `立即支付 ¥${selectedPlan.value.price}`
|
||||
})
|
||||
|
||||
const payScene = () => {
|
||||
if (paymentMethod.value === 'wechat' && /MicroMessenger/i.test(navigator.userAgent)) return 'JSAPI' as const
|
||||
return 'APP' as const
|
||||
}
|
||||
|
||||
const parsePayMessage = (message: string) => {
|
||||
const text = (message || '').trim()
|
||||
if (!text) return null
|
||||
try {
|
||||
return JSON.parse(text)
|
||||
} catch {
|
||||
return text
|
||||
}
|
||||
}
|
||||
|
||||
const findPaymentUrl = (value: any): string => {
|
||||
if (typeof value === 'string' && /^https?:\/\//i.test(value)) return value
|
||||
if (!value || typeof value !== 'object') return ''
|
||||
for (const key of ['url', 'payUrl', 'mwebUrl', 'mweb_url', 'redirectUrl']) {
|
||||
if (typeof value[key] === 'string' && /^https?:\/\//i.test(value[key])) return value[key]
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const invokeWechatJsapi = (params: Record<string, any>) => new Promise<void>((resolve, reject) => {
|
||||
const invoke = () => {
|
||||
const bridge = (window as any).WeixinJSBridge
|
||||
if (!bridge?.invoke) {
|
||||
reject(new Error('当前微信环境无法拉起支付'))
|
||||
return
|
||||
}
|
||||
bridge.invoke('getBrandWCPayRequest', params, (result: any) => {
|
||||
const message = String(result?.err_msg || result?.errMsg || '')
|
||||
if (/\bok\b/i.test(message)) resolve()
|
||||
else reject(new Error(/cancel/i.test(message) ? '支付已取消' : '微信支付未完成'))
|
||||
})
|
||||
}
|
||||
if ((window as any).WeixinJSBridge) invoke()
|
||||
else document.addEventListener('WeixinJSBridgeReady', invoke, { once: true })
|
||||
})
|
||||
|
||||
const launchPayment = async (order: TokenPaymentOrder) => {
|
||||
const parsed = parsePayMessage(order.payMessage)
|
||||
if (order.payWay === 'JSAPI' && order.paymentMethod === 'wechat' && parsed && typeof parsed === 'object') {
|
||||
await invokeWechatJsapi(parsed)
|
||||
return
|
||||
}
|
||||
if (isInUniWebView() && UniEvents.payment({
|
||||
orderId: order.id,
|
||||
orderNo: order.orderNo,
|
||||
paymentMethod: order.paymentMethod,
|
||||
payType: order.payType,
|
||||
payWay: order.payWay,
|
||||
payMessage: order.payMessage,
|
||||
paymentParams: parsed
|
||||
})) return
|
||||
|
||||
const paymentUrl = findPaymentUrl(parsed)
|
||||
if (paymentUrl) {
|
||||
window.location.assign(paymentUrl)
|
||||
return
|
||||
}
|
||||
throw new Error('请在会会 App 内完成支付')
|
||||
}
|
||||
|
||||
const clearPendingOrder = () => {
|
||||
pendingOrderId.value = ''
|
||||
sessionStorage.removeItem('hh_pending_payment_order')
|
||||
if (pollTimer) window.clearTimeout(pollTimer)
|
||||
pollTimer = undefined
|
||||
}
|
||||
|
||||
const pollPayment = async () => {
|
||||
if (!pendingOrderId.value) return
|
||||
try {
|
||||
const order = await getTokenPaymentStatus(pendingOrderId.value)
|
||||
if (order.status === 'paid') {
|
||||
currentBalance.value = order.balance
|
||||
paymentNoticeTone.value = 'success'
|
||||
paymentNotice.value = `支付成功，${order.pointsAmount.toLocaleString()} 积分已到账`
|
||||
clearPendingOrder()
|
||||
return
|
||||
}
|
||||
if (order.status === 'failed') {
|
||||
paymentNoticeTone.value = 'error'
|
||||
paymentNotice.value = order.failureReason || '支付未完成，请重新发起'
|
||||
clearPendingOrder()
|
||||
return
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查询支付结果失败', error)
|
||||
}
|
||||
if (Date.now() < pollDeadline) pollTimer = window.setTimeout(pollPayment, 2000)
|
||||
else {
|
||||
paymentNoticeTone.value = 'pending'
|
||||
paymentNotice.value = '支付结果仍在确认中，可稍后刷新余额或重新发起'
|
||||
clearPendingOrder()
|
||||
}
|
||||
}
|
||||
|
||||
const startPolling = (orderId: string) => {
|
||||
pendingOrderId.value = orderId
|
||||
sessionStorage.setItem('hh_pending_payment_order', orderId)
|
||||
pollDeadline = Date.now() + 2 * 60 * 1000
|
||||
if (pollTimer) window.clearTimeout(pollTimer)
|
||||
void pollPayment()
|
||||
}
|
||||
|
||||
const doCharge = async () => {
|
||||
if (!selectedPlan.value || charging.value) return
|
||||
charging.value = true
|
||||
paymentNotice.value = ''
|
||||
try {
|
||||
const methodText = paymentMethod.value === 'wechat' ? '微信支付' : '支付宝'
|
||||
const res: any = await chargeToken(selectedPlan.value.id)
|
||||
currentBalance.value = res?.balance ?? currentBalance.value
|
||||
alert(`已通过${methodText}成功充值，当前余额：${currentBalance.value} 积分`)
|
||||
} catch (e) {
|
||||
alert('充值失败，请重试')
|
||||
const order = await chargeToken(selectedPlan.value.id, paymentMethod.value, payScene())
|
||||
if (order.status === 'failed') throw new Error(order.failureReason || '支付订单创建失败')
|
||||
paymentNoticeTone.value = 'pending'
|
||||
paymentNotice.value = '支付订单已创建，正在等待付款结果'
|
||||
startPolling(order.id)
|
||||
await launchPayment(order)
|
||||
} catch (error: any) {
|
||||
paymentNoticeTone.value = 'error'
|
||||
paymentNotice.value = error?.message || '充值失败，请重试'
|
||||
clearPendingOrder()
|
||||
} finally {
|
||||
charging.value = false
|
||||
}
|
||||
@@ -147,7 +284,33 @@ const goBack = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
void loadData()
|
||||
removeNativeListener = onNativeMessage((message) => {
|
||||
if (message?.type !== 'paymentResult') return
|
||||
if (message.orderId && message.orderId !== pendingOrderId.value) return
|
||||
if (['cancelled', 'canceled'].includes(String(message.status).toLowerCase())) {
|
||||
paymentNoticeTone.value = 'error'
|
||||
paymentNotice.value = '支付已取消'
|
||||
clearPendingOrder()
|
||||
return
|
||||
}
|
||||
if (String(message.status).toLowerCase() === 'failed') {
|
||||
paymentNoticeTone.value = 'error'
|
||||
paymentNotice.value = message.message || '支付未完成，请重新发起'
|
||||
clearPendingOrder()
|
||||
return
|
||||
}
|
||||
void pollPayment()
|
||||
})
|
||||
if (pendingOrderId.value) {
|
||||
paymentNotice.value = '正在确认上一笔支付结果'
|
||||
startPolling(pendingOrderId.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer) window.clearTimeout(pollTimer)
|
||||
removeNativeListener?.()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -334,7 +497,24 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
font-size: 24px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.payment-icon img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
background: #EAF9F0;
|
||||
}
|
||||
|
||||
.alipay-icon {
|
||||
background: #EAF3FF;
|
||||
}
|
||||
|
||||
.payment-name {
|
||||
@@ -357,6 +537,26 @@ onMounted(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.payment-notice {
|
||||
margin: 12px 2px 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
color: #9A5B16;
|
||||
background: #FFF5E8;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.payment-notice.success {
|
||||
color: #08783E;
|
||||
background: #EAF9F0;
|
||||
}
|
||||
|
||||
.payment-notice.error {
|
||||
color: #B42318;
|
||||
background: #FFF0EE;
|
||||
}
|
||||
|
||||
/* 充值按钮 */
|
||||
.checkout-section {
|
||||
padding: 0 20px;
|
||||
|
||||
Reference in New Issue
Block a user