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

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

@@ -79,7 +79,7 @@
               />
             </div>
             <!-- 虚流量 -->
-            <div v-if="canViewCurrentPackageVirtualUsage" class="flow-stat-section">
+            <div v-if="canShowCurrentPackageVirtualUsage" class="flow-stat-section">
               <div class="flow-stat-label">虚流量使用</div>
               <div class="flow-stat-row">
                 <span class="stat-item">
@@ -186,7 +186,7 @@
       </div>
 
       <!-- 套餐详情表格 -->
-      <ElDescriptions :column="4" border class="package-info-table">
+      <ElDescriptions :column="descriptionsColumn" border class="package-info-table">
         <ElDescriptionsItem label="订单号">
           {{ currentPackage.order_no || '-' }}
         </ElDescriptionsItem>
@@ -232,6 +232,7 @@
     ElEmpty,
     ElAlert
   } from 'element-plus'
+  import { useWindowSize } from '@vueuse/core'
   import { useAssetFormatters } from '../composables/useAssetFormatters'
   import { useAuth } from '@/composables/useAuth'
   import { useUserStore } from '@/store/modules/user'
@@ -250,21 +251,12 @@
   } = useAssetFormatters()
 
   const { hasAuth } = useAuth()
+  const { width } = useWindowSize()
   const userStore = useUserStore()
   const { info: userInfo } = storeToRefs(userStore)
   const isAdminOrPlatform = computed(
     () => userInfo.value.user_type === 1 || userInfo.value.user_type === 2
   )
-  const canViewCurrentPackageRealUsage = computed(() =>
-    hasAuth('asset_info:view_current_package_real_usage')
-  )
-  const canViewCurrentPackageVirtualUsage = computed(() =>
-    hasAuth('asset_info:view_current_package_virtual_usage')
-  )
-  const shouldShowTrafficCard = computed(() => {
-    if (!isAdminOrPlatform.value) return true
-    return canViewCurrentPackageRealUsage.value || canViewCurrentPackageVirtualUsage.value
-  })
 
   interface Props {
     currentPackage: AssetPackageUsageRecord | null
@@ -283,6 +275,26 @@
     boundDeviceName: ''
   })
 
+  const canViewCurrentPackageRealUsage = computed(() =>
+    hasAuth('asset_info:view_current_package_real_usage')
+  )
+  const canViewCurrentPackageVirtualUsage = computed(() =>
+    hasAuth('asset_info:view_current_package_virtual_usage')
+  )
+  const canShowCurrentPackageVirtualUsage = computed(
+    () => canViewCurrentPackageVirtualUsage.value && props.currentPackage?.enable_virtual_data !== false
+  )
+  const shouldShowTrafficCard = computed(() => {
+    if (!isAdminOrPlatform.value) return true
+    return canViewCurrentPackageRealUsage.value || canShowCurrentPackageVirtualUsage.value
+  })
+
+  const descriptionsColumn = computed(() => {
+    if (width.value <= 640) return 1
+    if (width.value <= 1024) return 2
+    return 4
+  })
+
   const emit = defineEmits<{
     showRecharge: []
     navigateToDevice: [deviceNo: string]
@@ -307,10 +319,11 @@
 
 <style scoped lang="scss">
   .current-package-card {
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      .card-header {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
 
       .header-title {
         font-size: 16px;
@@ -324,9 +337,10 @@
       border-radius: 8px;
       margin-bottom: 20px;
 
-      .flow-stats-container {
-        display: flex;
-        gap: 40px;
+        .flow-stats-container {
+          display: flex;
+          gap: 40px;
+          min-width: 0;
 
         .flow-stat-section {
           flex: 1;
@@ -341,6 +355,7 @@
 
           .flow-stat-row {
             display: flex;
+            flex-wrap: wrap;
             gap: 16px;
             margin-bottom: 8px;
 
@@ -366,6 +381,7 @@
 
       .flow-stats-row {
         display: flex;
+        flex-wrap: wrap;
         gap: 32px;
         margin-bottom: 16px;
 
@@ -433,5 +449,54 @@
     .package-info-table {
       margin-top: 0;
     }
+
+    :deep(.el-descriptions__body) {
+      overflow-x: auto;
+    }
+
+    :deep(.el-descriptions__cell) {
+      word-break: break-word;
+    }
+
+    @media (width <= 992px) {
+      .flow-progress-card {
+        .flow-stats-container {
+          flex-direction: column;
+          gap: 20px;
+        }
+      }
+    }
+
+    @media (width <= 768px) {
+      .card-header {
+        align-items: flex-start;
+        flex-direction: column;
+
+        .header-actions {
+          width: 100%;
+        }
+      }
+
+      .flow-progress-card {
+        padding: 14px;
+
+        .flow-stats-row,
+        .flow-stat-row {
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .progress-wrapper {
+          align-items: stretch;
+          flex-direction: column;
+          gap: 6px;
+
+          .progress-percentage {
+            min-width: 0;
+            text-align: left;
+          }
+        }
+      }
+    }
   }
 </style>