Merge branch 'feat/account-package-cards-qr-pay'

Account package card grid and shared WeChat QR payment dialog (QR image deferred to backend base64 fix).

src/views/AccountView/AccountView.vue

@@ -55,16 +55,23 @@
             <label>
               <span>选择流量套餐</span>
               <t-radio-group
+                class="package-card-grid"
                 v-model="selectedTrafficPackageId"
                 :disabled="!trafficPackages.length || trafficOrdering"
               >
                 <t-radio
                   v-for="pkg in trafficPackages"
                   :key="pkg.id"
+                  class="package-card"
                   :value="pkg.id"
                 >
-                  {{ pkg.name }} · {{ (Number(pkg.amountBytes) / 1024 / 1024 / 1024).toFixed(0) }}GB · {{ money(pkg.price) }}
-                  <small v-if="pkg.validityDays"> / {{ pkg.validityDays }}天</small>
+                  <span class="package-card-body">
+                    <strong>{{ pkg.name }}</strong>
+                    <b>{{ (Number(pkg.amountBytes) / 1024 / 1024 / 1024).toFixed(0) }} GB</b>
+                    <em>{{ money(pkg.price) }}</em>
+                    <small v-if="pkg.validityDays">有效期 {{ pkg.validityDays }} 天</small>
+                    <small v-else>长期有效</small>
+                  </span>
                 </t-radio>
               </t-radio-group>
               <small v-if="!trafficPackages.length">暂无可用套餐</small>
@@ -73,6 +80,7 @@
           <div class="traffic-order-summary">
             <span>订单概要</span>
             <strong>云媒体流量订单</strong>
+            <b v-if="selectedTrafficPackage">{{ money(selectedTrafficPackage.price) }}</b>
             <small>创建订单后发起微信支付；金额以服务端订单为准。</small>
             <t-button
               theme="primary"
@@ -269,10 +277,24 @@
       <p>ICCID：{{ simRechargeCard?.iccid || '--' }}</p>
       <label>
         <span>选择套餐</span>
-        <t-radio-group v-model="selectedSimPackageId" :disabled="!simPackages.length || simRecharging">
-          <t-radio v-for="pkg in simPackages" :key="pkg.id" :value="pkg.id">
-            {{ pkg.name }} · {{ pkg.amountGb }}GB · {{ moneyFromFen(pkg.saleFeeFen) }}
-            <small v-if="pkg.validityMonths"> / {{ pkg.validityMonths }}个月</small>
+        <t-radio-group
+          class="package-card-grid"
+          v-model="selectedSimPackageId"
+          :disabled="!simPackages.length || simRecharging"
+        >
+          <t-radio
+            v-for="pkg in simPackages"
+            :key="pkg.id"
+            class="package-card"
+            :value="pkg.id"
+          >
+            <span class="package-card-body">
+              <strong>{{ pkg.name }}</strong>
+              <b>{{ pkg.amountGb }} GB</b>
+              <em>{{ moneyFromFen(pkg.saleFeeFen) }}</em>
+              <small v-if="pkg.validityMonths">有效期 {{ pkg.validityMonths }} 个月</small>
+              <small v-else>按运营商规则</small>
+            </span>
           </t-radio>
         </t-radio-group>
         <small v-if="!simPackages.length">暂无可用通信卡套餐</small>
@@ -287,6 +309,41 @@
         >创建并支付</t-button>
       </template>
     </t-dialog>
+    <t-dialog
+      v-model:visible="payDialogOpen"
+      :header="payDialog.title"
+      width="420px"
+      destroy-on-close
+      dialog-class-name="recharge-modal pay-qr-modal"
+      placement="center"
+    >
+      <div class="pay-qr-panel">
+        <div class="pay-qr-amount">
+          <span>应付金额</span>
+          <strong>{{ payDialog.amountText }}</strong>
+        </div>
+        <dl class="pay-qr-meta">
+          <div><dt>业务</dt><dd>{{ payDialog.businessType === 'sim_recharge_order' ? '通信卡充值' : '云媒体流量' }}</dd></div>
+          <div><dt>订单号</dt><dd>{{ payDialog.businessOrderId || '--' }}</dd></div>
+          <div><dt>支付单</dt><dd>{{ payDialog.transactionId || '--' }}</dd></div>
+          <div><dt>状态</dt><dd>{{ payDialog.statusText || '--' }}</dd></div>
+        </dl>
+        <div class="pay-qr-code" v-if="payDialog.qrSrc">
+          <img :src="payDialog.qrSrc" alt="支付二维码" />
+          <small>请使用微信扫码支付</small>
+        </div>
+        <p class="pay-qr-error" v-else>{{ payDialog.error || '暂无二维码' }}</p>
+      </div>
+      <template #footer>
+        <t-button variant="outline" @click="payDialogOpen = false">关闭</t-button>
+        <t-button
+          theme="primary"
+          :loading="payDialogRefreshing"
+          :disabled="!payDialog.transactionId"
+          @click="refreshPaymentStatus"
+        >我已支付，刷新状态</t-button>
+      </template>
+    </t-dialog>
   </section>
 </template>
 
@@ -330,6 +387,20 @@ const simRecharging = ref(false)
 const pendingSimOrdersByCard = ref({})
 const payingPendingSimId = ref(0)
 const cancellingPendingSimId = ref(0)
+const payDialogOpen = ref(false)
+const payDialogRefreshing = ref(false)
+const payDialog = ref({
+  title: '微信支付',
+  businessType: '',
+  businessOrderId: 0,
+  transactionId: 0,
+  amountText: '--',
+  status: '',
+  statusText: '',
+  qrSrc: '',
+  error: ''
+})
+
 const editOpen = ref(false); const saving = ref(false); const editForm = ref({ name: '', email: '' })
 
 const orderColumns = [
@@ -399,6 +470,10 @@ const invoiceOrderOptions = computed(() => [{ label: '请选择已支付订单',
 const activeSimCount = computed(() => simCards.value.filter((card) => simStatus(card).cls === 'normal').length)
 const warnSimCount = computed(() => simTotal.value - activeSimCount.value)
 const actionablePendingSimOrders = computed(() => Object.values(pendingSimOrdersByCard.value || {}).filter((order) => order?.paymentStatus === 'unpaid' || order?.paymentStatus === 'processing'))
+const selectedTrafficPackage = computed(() =>
+  trafficPackages.value.find((pkg) => String(pkg.id) === String(selectedTrafficPackageId.value)) || null
+)
+
 
 
 function applyPage(targetRef, page) {
@@ -423,11 +498,100 @@ function payStatusName(status) {
 function isTrafficOrderActionable(row) {
   return row?.payStatus === 'unpaid' || row?.payStatus === 'processing'
 }
-function describePayment(payment) {
-  if (!payment) return '支付已创建'
-  const amount = moneyFromFen(payment.totalFeeFen)
-  if (payment.providerPayload) return `支付已创建（${amount}），请按返回凭证完成支付`
-  return `支付已创建（${amount}），状态：${payment.status || '--'}`
+function paymentStatusName(status) {
+  return ({
+    unpaid: '待支付',
+    processing: '支付中',
+    paid: '已支付',
+    success: '已支付',
+    failed: '支付失败',
+    cancelled: '已取消',
+    closed: '已关闭'
+  })[status] || status || '--'
+}
+function looksLikeBase64(value) {
+  const text = String(value || '').replace(/\s+/g, '')
+  return text.length > 32 && /^[A-Za-z0-9+/=]+$/.test(text)
+}
+function resolvePaymentQrSrc(payload) {
+  if (payload == null) return ''
+  if (typeof payload !== 'string') {
+    if (typeof payload === 'object') {
+      const nested = payload.qrCode || payload.qrUrl || payload.image || payload.codeUrl || ''
+      return resolvePaymentQrSrc(nested)
+    }
+    return ''
+  }
+  const text = payload.trim()
+  if (!text) return ''
+  if (text.startsWith('data:image/')) return text
+  if (/^https?:\/\//i.test(text) || text.startsWith('/')) return text
+  if (text.startsWith('weixin://')) return ''
+  if (looksLikeBase64(text)) return `data:image/png;base64,${text.replace(/\s+/g, '')}`
+  // JSON 字符串里混入了 PNG 二进制时，尝试从 latin1 字节转 base64
+  try {
+    const bytes = Array.from(text, (ch) => ch.charCodeAt(0) & 0xff)
+    let binary = ''
+    for (let i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i])
+    if (bytes[0] === 0x89 && bytes[1] === 0x50) {
+      return `data:image/png;base64,${btoa(binary)}`
+    }
+  } catch (_) {}
+  return ''
+}
+function openPaymentDialog(payment, meta = {}) {
+  const qrSrc = resolvePaymentQrSrc(payment?.providerPayload)
+  payDialog.value = {
+    title: meta.title || '微信支付',
+    businessType: meta.businessType || payment?.businessType || '',
+    businessOrderId: meta.businessOrderId || payment?.businessOrderId || 0,
+    transactionId: payment?.transactionId || 0,
+    amountText: moneyFromFen(payment?.totalFeeFen),
+    status: payment?.status || '',
+    statusText: paymentStatusName(payment?.status),
+    qrSrc,
+    error: qrSrc ? '' : '支付已创建，但二维码无法展示；可关闭后点击「去支付」重试'
+  }
+  payDialogOpen.value = true
+  return payment
+}
+async function refreshPaymentStatus() {
+  const id = payDialog.value.transactionId
+  if (!id) {
+    ui.toast('缺少支付单号')
+    return
+  }
+  payDialogRefreshing.value = true
+  try {
+    const payment = await request.get(urls.PAYMENT(id))
+    const qrSrc = resolvePaymentQrSrc(payment?.providerPayload) || payDialog.value.qrSrc
+    payDialog.value = {
+      ...payDialog.value,
+      status: payment?.status || payDialog.value.status,
+      statusText: paymentStatusName(payment?.status || payDialog.value.status),
+      amountText: moneyFromFen(payment?.totalFeeFen) || payDialog.value.amountText,
+      qrSrc,
+      error: qrSrc ? '' : payDialog.value.error
+    }
+    const paid = payment?.status === 'paid' || payment?.status === 'success'
+    await Promise.all([
+      loadOrders(),
+      request.get(urls.TRAFFIC_BALANCE).then((data) => {
+        balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
+      }).catch(() => {}),
+      loadSim().catch(() => {})
+    ])
+    if (paid) {
+      ui.toast('支付成功，流量/订单已刷新')
+      payDialogOpen.value = false
+    } else {
+      ui.toast(`当前状态：${paymentStatusName(payment?.status)}，如已扫码请稍后再试`)
+    }
+  } catch (error) {
+    ui.toast(error.message || '刷新支付状态失败')
+  } finally {
+    payDialogRefreshing.value = false
+  }
 }
 async function createPayment(businessType, businessOrderId) {
   return request.post(urls.PAYMENTS, { businessType, businessOrderId })
@@ -503,7 +667,11 @@ async function createTrafficOrderAndPay() {
     orderCreated = true
     orderPageNum.value = 1
     const payment = await createPayment('traffic_order', order.id)
-    ui.toast(describePayment(payment))
+    openPaymentDialog(payment, {
+      title: '云媒体流量支付',
+      businessType: 'traffic_order',
+      businessOrderId: order.id
+    })
     await Promise.all([loadOrders(), request.get(urls.TRAFFIC_BALANCE).then((data) => {
       balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
     })])
@@ -521,7 +689,11 @@ async function payTrafficOrder(row) {
   payingOrderId.value = row.id
   try {
     const payment = await createPayment('traffic_order', row.id)
-    ui.toast(describePayment(payment))
+    openPaymentDialog(payment, {
+      title: '云媒体流量支付',
+      businessType: 'traffic_order',
+      businessOrderId: row.id
+    })
     await loadOrders()
   } catch (error) {
     ui.toast(error.message || '发起支付失败')
@@ -591,7 +763,11 @@ async function payPendingSimOrder(order) {
   payingPendingSimId.value = order.id
   try {
     const payment = await createPayment('sim_recharge_order', order.id)
-    ui.toast(describePayment(payment))
+    openPaymentDialog(payment, {
+      title: '通信卡充值支付',
+      businessType: 'sim_recharge_order',
+      businessOrderId: order.id
+    })
     await refreshPendingSimOrder(order.id, order.simCardId)
     await loadSim()
   } catch (error) {
@@ -634,7 +810,11 @@ async function submitSimRecharge() {
     orderCreated = true
     upsertPendingSimOrder(order)
     const payment = await createPayment('sim_recharge_order', order.id)
-    ui.toast(describePayment(payment))
+    openPaymentDialog(payment, {
+      title: '通信卡充值支付',
+      businessType: 'sim_recharge_order',
+      businessOrderId: order.id
+    })
     simRechargeOpen.value = false
     await refreshPendingSimOrder(order.id, order.simCardId)
     await loadSim()
@@ -751,6 +931,83 @@ onMounted(load)
 .traffic-order-summary :deep(.t-select) {
   margin: 10px 0 14px;
 }
+.package-card-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+  width: 100%;
+}
+.package-card-grid :deep(.t-radio) {
+  margin: 0;
+  width: 100%;
+  border: 1px solid #cfdae2;
+  border-radius: 5px;
+  background: #fff;
+  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
+}
+.package-card-grid :deep(.t-radio__former) {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.package-card-grid :deep(.t-radio__input) {
+  display: none;
+}
+.package-card-grid :deep(.t-radio__label) {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+.package-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 12px 10px;
+  min-height: 96px;
+}
+.package-card-body strong {
+  color: #304552;
+  font-size: 12px;
+  font-weight: 600;
+}
+.package-card-body b {
+  color: #246fae;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.1;
+}
+.package-card-body em {
+  font-style: normal;
+  color: #3b4d58;
+  font-size: 13px;
+  font-weight: 600;
+}
+.package-card-body small {
+  color: #74838d;
+  font-size: 10px;
+}
+.package-card-grid :deep(.t-is-checked) {
+  border-color: #3b8fd4;
+  background: #f3f8fc;
+  box-shadow: inset 0 0 0 1px #3b8fd4;
+}
+.package-card-grid :deep(.t-radio:hover) {
+  border-color: #8fb8da;
+}
+.package-card-grid :deep(.t-is-disabled) {
+  opacity: .6;
+}
+.pay-qr-panel { display: flex; flex-direction: column; gap: 14px; }
+.pay-qr-amount span { display: block; color: var(--muted); font-size: 10px; }
+.pay-qr-amount strong { display: block; margin-top: 4px; color: #246fae; font-size: 28px; font-weight: 600; }
+.pay-qr-meta { margin: 0; display: grid; gap: 6px; }
+.pay-qr-meta > div { display: flex; gap: 10px; font-size: 12px; }
+.pay-qr-meta dt { width: 48px; color: #74838d; }
+.pay-qr-meta dd { margin: 0; color: #304552; word-break: break-all; }
+.pay-qr-code { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid #d7e4ee; border-radius: 5px; background: #f5f9fc; }
+.pay-qr-code img { width: 220px; height: 220px; object-fit: contain; background: #fff; }
+.pay-qr-code small { color: #74838d; font-size: 11px; }
+.pay-qr-error { margin: 0; padding: 12px; border-radius: 5px; background: #fff5f5; color: #bd4046; font-size: 12px; }
 </style>
 
 <style>
@@ -771,4 +1028,7 @@ onMounted(load)
   justify-content: flex-end;
   gap: 8px;
 }
+.recharge-modal .package-card-grid {
+  margin-top: 4px;
+}
 </style>