feat: add avatar payments and finance management
This commit is contained in:
stefanfeng
@@ -152,16 +152,35 @@ export interface TokenPaymentOrder {
|
||||
planId: string
|
||||
paymentMethod: 'wechat' | 'alipay'
|
||||
payType: 'WECHAT' | 'ALIPAY'
|
||||
payWay: 'APP' | 'LITE' | 'JSAPI'
|
||||
payWay: 'APP' | 'H5' | 'LITE' | 'JSAPI'
|
||||
pointsAmount: number
|
||||
price: number
|
||||
status: 'pending' | 'paid' | 'failed'
|
||||
status: 'pending' | 'paid' | 'failed' | 'closed' | 'refunded'
|
||||
provider: 'huihui' | 'wechat_virtual'
|
||||
providerStatus: string
|
||||
payMessage: string
|
||||
failureReason: string
|
||||
refundStatus: 'none' | 'pending' | 'processing' | 'succeeded' | 'failed'
|
||||
createdAt: string | null
|
||||
paidAt: string | null
|
||||
refundedAt: string | null
|
||||
balance: number
|
||||
}
|
||||
|
||||
export interface TokenInvoice {
|
||||
id: string
|
||||
orderNo: string
|
||||
title: string
|
||||
invoiceType: 'personal' | 'company'
|
||||
taxNumber: string
|
||||
email: string
|
||||
amount: number
|
||||
status: 'pending' | 'issued' | 'rejected' | 'cancelled'
|
||||
invoiceNo: string
|
||||
invoiceUrl: string
|
||||
remark: string
|
||||
}
|
||||
|
||||
// 获取 Token 余额
|
||||
export const getTokenBalance = () =>
|
||||
request.get<TokenBalance>('/token/balance')
|
||||
@@ -174,12 +193,25 @@ export const getRechargePlans = () =>
|
||||
export const chargeToken = (
|
||||
planId: string,
|
||||
paymentMethod: 'wechat' | 'alipay',
|
||||
payScene: 'APP' | 'LITE' | 'JSAPI'
|
||||
payScene: 'APP' | 'H5' | 'LITE' | 'JSAPI'
|
||||
) => request.post<TokenPaymentOrder>('/token/charge', { planId, paymentMethod, payScene })
|
||||
|
||||
export const getTokenPaymentStatus = (orderId: string) =>
|
||||
request.get<TokenPaymentOrder>(`/token/payment/${orderId}`)
|
||||
|
||||
export const bindWechatVirtualSession = (code: string) =>
|
||||
request.post<{ ready: boolean }>('/token/wechat/session', { code })
|
||||
|
||||
export const getTokenOrders = (page = 1, pageSize = 20) =>
|
||||
request.get<{ total: number; page: number; pageSize: number; items: Array<TokenPaymentOrder & { invoice?: TokenInvoice }> }>(
|
||||
'/token/orders', { params: { page, page_size: pageSize } }
|
||||
)
|
||||
|
||||
export const applyTokenInvoice = (
|
||||
orderNo: string,
|
||||
payload: { title: string; invoiceType: 'personal' | 'company'; taxNumber?: string; email?: string }
|
||||
) => request.post<TokenInvoice>(`/token/orders/${orderNo}/invoice`, payload)
|
||||
|
||||
// 按分身和使用场景汇总 Token 消耗
|
||||
export const getTokenUsage = () =>
|
||||
request.get<TokenUsageSummary[]>('/token/usage')
|
||||
|
||||
@@ -74,6 +74,35 @@
|
||||
{{ checkoutLabel }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section v-if="recentOrders.length" class="orders-section">
|
||||
<h3 class="section-title">充值记录</h3>
|
||||
<div v-for="order in recentOrders" :key="order.id" class="order-card">
|
||||
<div>
|
||||
<strong>{{ order.pointsAmount.toLocaleString() }} 积分</strong>
|
||||
<p>{{ order.orderNo }} · {{ order.createdAt ? new Date(order.createdAt).toLocaleDateString('zh-CN') : '' }}</p>
|
||||
</div>
|
||||
<div class="order-side">
|
||||
<strong>¥{{ order.price.toFixed(2) }}</strong>
|
||||
<button v-if="canInvoice(order)" class="text-btn" @click="openInvoice(order)">申请发票</button>
|
||||
<span v-else class="order-status">{{ orderStatus(order) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="invoiceOrder" class="modal-mask" @click.self="invoiceOrder = null">
|
||||
<form class="invoice-modal" @submit.prevent="submitInvoice">
|
||||
<h3>申请电子发票</h3>
|
||||
<label>发票类型
|
||||
<select v-model="invoiceType"><option value="personal">个人</option><option value="company">企业</option></select>
|
||||
</label>
|
||||
<label>发票抬头<input v-model.trim="invoiceTitle" maxlength="120" required /></label>
|
||||
<label v-if="invoiceType === 'company'">企业税号<input v-model.trim="invoiceTaxNumber" minlength="15" maxlength="20" required /></label>
|
||||
<label>接收邮箱<input v-model.trim="invoiceEmail" type="email" placeholder="选填" /></label>
|
||||
<p v-if="invoiceError" class="invoice-error">{{ invoiceError }}</p>
|
||||
<div class="modal-actions"><button type="button" @click="invoiceOrder = null">取消</button><button class="primary" :disabled="invoiceSubmitting">{{ invoiceSubmitting ? '提交中…' : '提交申请' }}</button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -82,8 +111,10 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
chargeToken,
|
||||
applyTokenInvoice,
|
||||
getRechargePlans,
|
||||
getTokenBalance,
|
||||
getTokenOrders,
|
||||
getTokenPaymentStatus,
|
||||
type TokenPaymentOrder
|
||||
} from '@/api'
|
||||
@@ -114,6 +145,14 @@ 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') || '')
|
||||
const recentOrders = ref<Array<TokenPaymentOrder & { invoice?: any }>>([])
|
||||
const invoiceOrder = ref<(TokenPaymentOrder & { invoice?: any }) | null>(null)
|
||||
const invoiceType = ref<'personal' | 'company'>('personal')
|
||||
const invoiceTitle = ref('')
|
||||
const invoiceTaxNumber = ref('')
|
||||
const invoiceEmail = ref('')
|
||||
const invoiceError = ref('')
|
||||
const invoiceSubmitting = ref(false)
|
||||
let pollTimer: number | undefined
|
||||
let pollDeadline = 0
|
||||
let removeNativeListener: (() => void) | undefined
|
||||
@@ -133,6 +172,51 @@ const loadData = async () => {
|
||||
} catch (e) {
|
||||
console.error('加载套餐失败', e)
|
||||
}
|
||||
try {
|
||||
const result = await getTokenOrders(1, 10)
|
||||
recentOrders.value = result?.items || []
|
||||
} catch (e) {
|
||||
console.error('加载充值记录失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
const canInvoice = (order: TokenPaymentOrder & { invoice?: any }) =>
|
||||
order.status === 'paid' && (!order.refundStatus || order.refundStatus === 'none') &&
|
||||
(!order.invoice || ['rejected', 'cancelled'].includes(order.invoice.status))
|
||||
const orderStatus = (order: TokenPaymentOrder & { invoice?: any }) => {
|
||||
if (order.invoice?.status === 'issued') return '发票已开具'
|
||||
if (order.invoice?.status === 'pending') return '发票处理中'
|
||||
if (order.invoice?.status === 'rejected') return '发票已驳回'
|
||||
return ({ pending: '待支付', paid: '已支付', failed: '支付失败', closed: '已关闭', refunded: '已退款' } as Record<string, string>)[order.status] || order.status
|
||||
}
|
||||
const openInvoice = (order: TokenPaymentOrder & { invoice?: any }) => {
|
||||
invoiceOrder.value = order
|
||||
invoiceType.value = 'personal'
|
||||
invoiceTitle.value = ''
|
||||
invoiceTaxNumber.value = ''
|
||||
invoiceEmail.value = ''
|
||||
invoiceError.value = ''
|
||||
}
|
||||
const submitInvoice = async () => {
|
||||
if (!invoiceOrder.value || invoiceSubmitting.value) return
|
||||
invoiceSubmitting.value = true
|
||||
invoiceError.value = ''
|
||||
try {
|
||||
await applyTokenInvoice(invoiceOrder.value.orderNo, {
|
||||
title: invoiceTitle.value,
|
||||
invoiceType: invoiceType.value,
|
||||
taxNumber: invoiceTaxNumber.value,
|
||||
email: invoiceEmail.value
|
||||
})
|
||||
paymentNoticeTone.value = 'success'
|
||||
paymentNotice.value = '发票申请已提交，请等待财务处理'
|
||||
invoiceOrder.value = null
|
||||
await loadData()
|
||||
} catch (error: any) {
|
||||
invoiceError.value = error?.message || '发票申请提交失败'
|
||||
} finally {
|
||||
invoiceSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 会会支付订单创建与到账确认
|
||||
@@ -151,8 +235,9 @@ const checkoutLabel = computed(() => {
|
||||
})
|
||||
|
||||
const payScene = () => {
|
||||
if (isInUniWebView()) return 'APP' as const
|
||||
if (paymentMethod.value === 'wechat' && /MicroMessenger/i.test(navigator.userAgent)) return 'JSAPI' as const
|
||||
return 'APP' as const
|
||||
return 'H5' as const
|
||||
}
|
||||
|
||||
const parsePayMessage = (message: string) => {
|
||||
@@ -231,6 +316,7 @@ const pollPayment = async () => {
|
||||
paymentNoticeTone.value = 'success'
|
||||
paymentNotice.value = `支付成功，${order.pointsAmount.toLocaleString()} 积分已到账`
|
||||
clearPendingOrder()
|
||||
void loadData()
|
||||
return
|
||||
}
|
||||
if (order.status === 'failed') {
|
||||
@@ -562,6 +648,17 @@ onUnmounted(() => {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.orders-section { padding: 24px 20px 0; }
|
||||
.order-card { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; margin-bottom:10px; background:#fff; border:1px solid #EDEEF1; border-radius:12px; }
|
||||
.order-card strong { color:#18191C; font-size:14px; }.order-card p,.order-status { color:#9398AE; font-size:11px; margin:5px 0 0; }
|
||||
.order-side { text-align:right; }.text-btn { display:block; margin-top:5px; padding:0; border:0; background:none; color:#F97316; font-size:12px; cursor:pointer; }
|
||||
.modal-mask { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(15,23,42,.45); }
|
||||
.invoice-modal { width:min(100%,420px); padding:22px; border-radius:16px; background:#fff; box-shadow:0 18px 50px rgba(15,23,42,.2); }
|
||||
.invoice-modal h3 { margin:0 0 18px; }.invoice-modal label { display:grid; gap:7px; margin:12px 0; color:#4B5563; font-size:13px; }
|
||||
.invoice-modal input,.invoice-modal select { width:100%; height:42px; padding:0 12px; border:1px solid #D9DCE3; border-radius:9px; background:#fff; color:#18191C; font-size:14px; }
|
||||
.invoice-error { color:#B42318; font-size:12px; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
|
||||
.modal-actions button { padding:9px 18px; border:1px solid #D9DCE3; border-radius:9px; background:#fff; }.modal-actions .primary { border-color:#F97316; background:#F97316; color:#fff; }
|
||||
|
||||
.checkout-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
Reference in New Issue
Block a user