feat(account): render traffic and SIM packages as card grid

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>
@@ -399,6 +421,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) {
@@ -751,6 +777,72 @@ 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;
+}
 </style>
 
 <style>
@@ -771,4 +863,7 @@ onMounted(load)
   justify-content: flex-end;
   gap: 8px;
 }
+.recharge-modal .package-card-grid {
+  margin-top: 4px;
+}
 </style>