fix:修改bug: 虚流量关闭的时候还是显示了

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

@@ -63,7 +63,7 @@
           <ElTableColumn label="流量" min-width="450">
             <template #default="scope">
               <div class="traffic-progress">
-                <template v-if="isAdminOrPlatform && shouldShowAdminTrafficBreakdown">
+                <template v-if="isAdminOrPlatform && shouldShowAdminTrafficBreakdown(scope.row)">
                   <div v-if="canViewCurrentPackageRealUsage" class="progress-text">
                     <span class="used"
                       >已使用真流量: {{ formatDataSize(scope.row.real_used_mb || 0) }}</span
@@ -93,7 +93,7 @@
                     "
                   />
                   <div
-                    v-if="canViewCurrentPackageVirtualUsage"
+                    v-if="canShowPackageVirtualUsage(scope.row)"
                     class="progress-text"
                     :style="{ marginTop: canViewCurrentPackageRealUsage ? '8px' : '0' }"
                   >
@@ -104,7 +104,7 @@
                       >停机阈值: {{ formatDataSize(scope.row.virtual_total_mb || 0) }}</span
                     >
                   </div>
-                  <div v-if="canViewCurrentPackageVirtualUsage" class="progress-wrapper">
+                  <div v-if="canShowPackageVirtualUsage(scope.row)" class="progress-wrapper">
                     <div class="progress-track">
                       <ElProgress
                         style="margin-top: 4px"
@@ -285,11 +285,6 @@
   const isAdminOrPlatform = computed(
     () => userInfo.value.user_type === 1 || userInfo.value.user_type === 2
   )
-  const shouldShowAdminTrafficBreakdown = computed(() => {
-    if (!isAdminOrPlatform.value) return true
-    return canViewCurrentPackageRealUsage.value || canViewCurrentPackageVirtualUsage.value
-  })
-
   // 退款申请对话框
   const createRefundDialogVisible = ref(false)
   const currentRefundOrderNo = ref<string | undefined>(undefined)
@@ -310,6 +305,14 @@
   // Props 使用 API 类型
   type PackageInfo = AssetPackageUsageRecord
 
+  const canShowPackageVirtualUsage = (pkg: PackageInfo) =>
+    canViewCurrentPackageVirtualUsage.value && pkg.enable_virtual_data !== false
+
+  const shouldShowAdminTrafficBreakdown = (pkg: PackageInfo) => {
+    if (!isAdminOrPlatform.value) return true
+    return canViewCurrentPackageRealUsage.value || canShowPackageVirtualUsage(pkg)
+  }
+
   interface Props {
     packageList: PackageInfo[]
     total?: number
@@ -459,6 +462,7 @@
           .traffic-progress {
             .progress-text {
               display: flex;
+              flex-wrap: wrap;
               gap: 12px;
               align-items: center;
               justify-content: space-between;
@@ -517,6 +521,49 @@
         margin-top: 16px;
         justify-content: flex-end;
       }
+
+      @media (width <= 768px) {
+        .card-header {
+          align-items: stretch;
+          flex-direction: column;
+          gap: 12px;
+
+          .card-header-right,
+          .card-header-right .el-button {
+            width: 100%;
+          }
+        }
+
+        .package-table-wrapper {
+          .package-table {
+            min-width: 900px;
+          }
+
+          .traffic-progress {
+            .progress-text {
+              align-items: flex-start;
+              flex-direction: column;
+              gap: 4px;
+            }
+
+            .progress-wrapper {
+              align-items: stretch;
+              flex-direction: column;
+              gap: 6px;
+
+              .progress-percentage {
+                min-width: 0;
+                text-align: left;
+              }
+            }
+          }
+
+          .pagination {
+            justify-content: flex-start;
+            overflow-x: auto;
+          }
+        }
+      }
     }
   }
 </style>