feat: 预计最终到期时间展示

src/views/asset-management/asset-information/components/BasicInfoCard.vue

@@ -86,6 +86,14 @@
         <ElDescriptionsItem label="所有套餐剩余量">
           {{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
         </ElDescriptionsItem>
+        <ElDescriptionsItem label="预计套餐到期时间">
+          <span
+            :class="{ 'expiry-estimate--expiring': cardInfo?.is_expiring }"
+            :title="getExpiryEstimateTooltip(cardInfo)"
+          >
+            {{ getExpiryEstimateText(cardInfo) }}
+          </span>
+        </ElDescriptionsItem>
 
         <template v-if="cardInfo?.bound_device_id">
           <ElDescriptionsItem label="绑定设备号">
@@ -172,6 +180,14 @@
         <ElDescriptionsItem label="所有套餐剩余量">
           {{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
         </ElDescriptionsItem>
+        <ElDescriptionsItem label="预计套餐到期时间">
+          <span
+            :class="{ 'expiry-estimate--expiring': cardInfo?.is_expiring }"
+            :title="getExpiryEstimateTooltip(cardInfo)"
+          >
+            {{ getExpiryEstimateText(cardInfo) }}
+          </span>
+        </ElDescriptionsItem>
         <ElDescriptionsItem label="最后同步时间">{{
           formatDateTime(deviceRealtime?.last_sync_time) || '-'
         }}</ElDescriptionsItem>
@@ -577,6 +593,7 @@
   import { useAuth } from '@/composables/useAuth'
   import { useUserStore } from '@/store/modules/user'
   import { formatDateTime } from '@/utils/business/format'
+  import { getExpiryEstimateText, getExpiryEstimateTooltip } from '@/utils/business/expiryEstimate'
 
   // Props
   interface BindingCard {
@@ -624,6 +641,10 @@
     gateway_extend?: string
     total_virtual_used_mb?: number | null
     total_virtual_remaining_mb?: number | null
+    estimated_final_expires_at?: string | null
+    days_until_final_expiry?: number | null
+    expiry_estimate_status?: string
+    is_expiring?: boolean
     last_sync_time?: string | null
     last_data_check_at?: string | null
     last_real_name_check_at?: string | null
@@ -965,6 +986,11 @@
         word-break: break-all;
       }
 
+      .expiry-estimate--expiring {
+        font-weight: 500;
+        color: var(--el-color-danger);
+      }
+
       .card-header {
         display: flex;
         gap: 12px;