feat: add avatar payments and finance management

digital-avatar-app/src/views/TokenCharge.vue

@@ -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;