fix: 新增: 修改资产套餐已用量, 修改资产套餐过期时间

2026-06-13 10:41:10 +08:00
parent e04a283319
commit 2ecab976f5
12 changed files with 688 additions and 68 deletions
--- a/src/api/modules/asset.ts
+++ b/src/api/modules/asset.ts
@@ -21,7 +21,10 @@ import type {
  UpdateAssetRealnameStatusRequest,
  DtoUpdateAssetRealnameStatusResponse,
  AssetOperationLogsResponse,
-  AssetOperationLogsParams
+  AssetOperationLogsParams,
+  AssetPackageUsageRecord,
+  UpdateAssetPackageUsedDataRequest,
+  UpdateAssetPackageExpiresAtRequest
 } from '@/types/api'

 export class AssetService extends BaseService {
@@ -104,6 +107,36 @@ export class AssetService extends BaseService {
    )
  }

+  /**
+   * 修改套餐真实已用量
+   * PATCH /api/admin/assets/:identifier/packages/:package_usage_id/used-data
+   */
+  static updateAssetPackageUsedData(
+    identifier: string,
+    packageUsageId: number,
+    data: UpdateAssetPackageUsedDataRequest
+  ): Promise<BaseResponse<AssetPackageUsageRecord>> {
+    return this.patch<BaseResponse<AssetPackageUsageRecord>>(
+      `/api/admin/assets/${identifier}/packages/${packageUsageId}/used-data`,
+      data as Record<string, any>
+    )
+  }
+
+  /**
+   * 修改套餐过期时间
+   * PATCH /api/admin/assets/:identifier/packages/:package_usage_id/expires-at
+   */
+  static updateAssetPackageExpiresAt(
+    identifier: string,
+    packageUsageId: number,
+    data: UpdateAssetPackageExpiresAtRequest
+  ): Promise<BaseResponse<AssetPackageUsageRecord>> {
+    return this.patch<BaseResponse<AssetPackageUsageRecord>>(
+      `/api/admin/assets/${identifier}/packages/${packageUsageId}/expires-at`,
+      data as Record<string, any>
+    )
+  }
+
  // ========== 资产停复机操作（统一接口）==========

  /**
--- a/src/components/business/CreateRefundDialog.vue
+++ b/src/components/business/CreateRefundDialog.vue
@@ -36,7 +36,7 @@
      <ElFormItem label="实收金额">
        <ElInput :model-value="selectedOrderActualPaid" disabled style="width: 100%" />
      </ElFormItem>
-      <ElFormItem label="退款原因">
+      <ElFormItem label="退款原因" prop="refund_reason">
        <ElInput
          v-model="formData.refund_reason"
          type="textarea"
@@ -148,6 +148,7 @@
      { required: true, message: '请输入申请退款金额', trigger: 'blur' },
      { validator: validateRefundAmount, trigger: 'blur' }
    ],
+    refund_reason: [{ required: true, message: '请输入退款原因', trigger: 'blur' }],
    refund_voucher_key: [{ required: true, message: '请上传退款凭证', trigger: 'change' }]
  })

@@ -173,6 +174,9 @@
      const res = await OrderService.getOrders(params)
      if (res.code === 0) {
        orderSearchOptions.value = res.data.items || []
+        if (hasInitialOrder.value && props.initialOrderId) {
+          formData.order_id = props.initialOrderId
+        }
        if (hasInitialOrder.value && props.initialOrderNo) {
          const matchedOrder = orderSearchOptions.value.find(
            (o) => o.order_no === props.initialOrderNo
@@ -328,6 +332,9 @@

  watch(dialogVisible, (val) => {
    if (val) {
+      if (hasInitialOrder.value && props.initialOrderId) {
+        formData.order_id = props.initialOrderId
+      }
      if (hasInitialOrder.value && props.initialOrderNo) {
        searchOrders(props.initialOrderNo)
      } else {
--- a/src/types/api/asset.ts
+++ b/src/types/api/asset.ts
@@ -270,6 +270,14 @@ export interface AssetPackageParams {
  page_size?: number // 每页数量，默认50
 }

+export interface UpdateAssetPackageUsedDataRequest {
+  data_usage_mb: number | null // 新的套餐真实已用量(MB)
+}
+
+export interface UpdateAssetPackageExpiresAtRequest {
+  expires_at: string // 新的套餐过期时间，格式：YYYY-MM-DD HH:MM:SS 或 RFC3339
+}
+
 /**
 * 当前套餐响应（结构同套餐使用记录单项）
 * 对应接口：GET /api/admin/assets/:asset_type/:id/current-package
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -8,7 +8,7 @@ export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const ElButton: (typeof import('element-plus/es'))['ElButton']
-  const ElMessageBox: (typeof import('element-plus/es'))['ElMessageBox']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -83,7 +83,55 @@ declare module 'vue' {
    CreateRefundDialog: typeof import('./../components/business/CreateRefundDialog.vue')['default']
    CustomerAccountDialog: typeof import('./../components/business/CustomerAccountDialog.vue')['default']
    DetailPage: typeof import('./../components/common/DetailPage.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCalendar: typeof import('element-plus/es')['ElCalendar']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCol: typeof import('element-plus/es')['ElCol']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    ElWatermark: typeof import('element-plus/es')['ElWatermark']
    HorizontalSubmenu: typeof import('./../components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue')['default']
    ImportDialog: typeof import('./../components/business/ImportDialog.vue')['default']
    LoginLeftView: typeof import('./../components/core/views/login/LoginLeftView.vue')['default']
@@ -107,4 +155,7 @@ declare module 'vue' {
    ThemeSettings: typeof import('./../components/core/layouts/art-settings-panel/widget/ThemeSettings.vue')['default']
    UpdateRealnameStatusDialog: typeof import('./../components/business/UpdateRealnameStatusDialog.vue')['default']
  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
--- a/src/views/asset-management/asset-information/components/PackageListCard.vue
+++ b/src/views/asset-management/asset-information/components/PackageListCard.vue
@@ -200,36 +200,54 @@
              {{ formatDateTime(scope.row.created_at) }}
            </template>
          </ElTableColumn>
-          <ElTableColumn label="操作" width="180" fixed="right">
+          <ElTableColumn label="操作" width="240" fixed="right">
            <template #default="scope">
-              <ElButton
-                v-if="hasAuth('package_usage:daily_records')"
-                type="primary"
-                link
-                @click="handlePackageNameClick(scope.row)"
-              >
-                流量详单
-              </ElButton>
-              <ElButton
-                v-if="scope.row.status !== 4 && hasAuth('package:create_refund')"
-                type="primary"
-                link
-                @click="handleCreateRefund(scope.row)"
-              >
-                退款申请
-              </ElButton>
-              <ElButton
-                v-if="
-                  scope.row.status === 4 &&
-                  scope.row.refund_id &&
-                  hasAuth('refund:package_list_detail')
-                "
-                type="primary"
-                link
-                @click="handleViewRefundDetail(scope.row)"
-              >
-                退款详情
-              </ElButton>
+              <div class="package-actions">
+                <ElButton
+                  v-if="hasAuth('package_usage:daily_records')"
+                  type="primary"
+                  link
+                  @click="handlePackageNameClick(scope.row)"
+                >
+                  流量详单
+                </ElButton>
+                <ElButton
+                  v-if="scope.row.status !== 4 && hasAuth('package:create_refund')"
+                  type="primary"
+                  link
+                  @click="handleCreateRefund(scope.row)"
+                >
+                  退款申请
+                </ElButton>
+                <ElButton
+                  v-if="canUpdateUsedData"
+                  type="primary"
+                  link
+                  @click="handleShowUsedDataDialog(scope.row)"
+                >
+                  修改已用量
+                </ElButton>
+                <ElButton
+                  v-if="canUpdateExpiresAt"
+                  type="primary"
+                  link
+                  @click="handleShowExpiresAtDialog(scope.row)"
+                >
+                  修改过期时间
+                </ElButton>
+                <ElButton
+                  v-if="
+                    scope.row.status === 4 &&
+                    scope.row.refund_id &&
+                    hasAuth('refund:package_list_detail')
+                  "
+                  type="primary"
+                  link
+                  @click="handleViewRefundDetail(scope.row)"
+                >
+                  退款详情
+                </ElButton>
+              </div>
            </template>
          </ElTableColumn>
        </ElTable>
@@ -250,14 +268,96 @@
    <!-- 退款申请对话框 -->
    <CreateRefundDialog
      v-model="createRefundDialogVisible"
+      :initial-order-id="currentRefundOrderId"
      :initial-order-no="currentRefundOrderNo"
      @success="handleRefundSuccess"
    />
+
+    <ElDialog
+      v-model="usedDataDialogVisible"
+      title="修改已用量"
+      width="30%"
+      @closed="resetUsedDataForm"
+    >
+      <ElForm
+        ref="usedDataFormRef"
+        :model="usedDataForm"
+        :rules="usedDataRules"
+        label-width="90px"
+      >
+        <ElFormItem label="套餐名称">
+          <span>{{ selectedPackage?.package_name || '-' }}</span>
+        </ElFormItem>
+        <ElFormItem label="当前已用量">
+          <span>{{ formatDataSize(selectedPackage?.real_used_mb || 0) }}</span>
+        </ElFormItem>
+        <ElFormItem label="新的已用量" prop="data_usage">
+          <div class="used-data-input">
+            <ElInputNumber
+              v-model="usedDataForm.data_usage"
+              :min="0"
+              :max="usedDataMaxValue"
+              :precision="usedDataForm.unit === 'MB' ? 0 : 3"
+              :step="usedDataForm.unit === 'MB' ? 1 : 0.1"
+              class="used-data-input__number"
+              placeholder="请输入新的套餐真实已用量"
+            />
+            <ElSelect v-model="usedDataForm.unit" class="used-data-input__unit">
+              <ElOption label="MB" value="MB" />
+              <ElOption label="GB" value="GB" />
+            </ElSelect>
+          </div>
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="usedDataDialogVisible = false">取消</ElButton>
+        <ElButton type="primary" :loading="usedDataSubmitting" @click="handleSubmitUsedData">
+          确认修改
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <ElDialog
+      v-model="expiresAtDialogVisible"
+      title="修改过期时间"
+      width="420px"
+      @closed="resetExpiresAtForm"
+    >
+      <ElForm
+        ref="expiresAtFormRef"
+        :model="expiresAtForm"
+        :rules="expiresAtRules"
+        label-width="120px"
+      >
+        <ElFormItem label="套餐名称">
+          <span>{{ selectedPackage?.package_name || '-' }}</span>
+        </ElFormItem>
+        <ElFormItem label="当前过期时间">
+          <span>{{ formatDateTime(selectedPackage?.expires_at) }}</span>
+        </ElFormItem>
+        <ElFormItem label="新的过期时间" prop="expires_at">
+          <ElDatePicker
+            v-model="expiresAtForm.expires_at"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择新的套餐过期时间"
+            style="width: 100%"
+          />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="expiresAtDialogVisible = false">取消</ElButton>
+        <ElButton type="primary" :loading="expiresAtSubmitting" @click="handleSubmitExpiresAt">
+          确认修改
+        </ElButton>
+      </template>
+    </ElDialog>
  </ElCard>
 </template>

 <script setup lang="ts">
-  import { ref, watch } from 'vue'
+  import { computed, reactive, ref, watch } from 'vue'
  import {
    ElCard,
    ElTable,
@@ -266,13 +366,22 @@
    ElButton,
    ElProgress,
    ElEmpty,
-    ElPagination
+    ElPagination,
+    ElDialog,
+    ElForm,
+    ElFormItem,
+    ElInputNumber,
+    ElDatePicker,
+    ElSelect,
+    ElOption
  } from 'element-plus'
  import { ElMessage } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'

  import { useAssetFormatters } from '../composables/useAssetFormatters'
  import { formatDateTime } from '@/utils/business/format'
  import type { AssetPackageUsageRecord } from '@/types/api'
+  import { AssetService } from '@/api/modules'
  import { useAuth } from '@/composables/useAuth'
  import { useUserStore } from '@/store/modules/user'
  import { storeToRefs } from 'pinia'
@@ -290,15 +399,80 @@
  const isAdminOrPlatform = computed(
    () => userInfo.value.user_type === 1 || userInfo.value.user_type === 2
  )
+  const isProductionMode = import.meta.env.MODE === 'production'
+  const canUseAdjustmentInCurrentEnv = (permission: string) => {
+    if (isProductionMode) {
+      return userInfo.value.user_type === 2 && hasAuth(permission)
+    }
+
+    return userInfo.value.user_type === 1
+  }
+  const canUpdateUsedData = computed(() => canUseAdjustmentInCurrentEnv('package:update_used_data'))
+  const canUpdateExpiresAt = computed(() =>
+    canUseAdjustmentInCurrentEnv('package:update_expires_at')
+  )
+
  // 退款申请对话框
  const createRefundDialogVisible = ref(false)
+  const currentRefundOrderId = ref<number | undefined>(undefined)
  const currentRefundOrderNo = ref<string | undefined>(undefined)
+  const selectedPackage = ref<PackageInfo>()
+  const usedDataDialogVisible = ref(false)
+  const expiresAtDialogVisible = ref(false)
+  const usedDataSubmitting = ref(false)
+  const expiresAtSubmitting = ref(false)
+  const usedDataFormRef = ref<FormInstance>()
+  const expiresAtFormRef = ref<FormInstance>()
+  const usedDataForm = reactive<{ data_usage: number | undefined; unit: 'MB' | 'GB' }>({
+    data_usage: undefined,
+    unit: 'MB'
+  })
+  const expiresAtForm = reactive<{ expires_at: string }>({
+    expires_at: ''
+  })
+
+  const usedDataMaxValue = computed(() => {
+    const realTotalMb = selectedPackage.value?.real_total_mb ?? 0
+    return usedDataForm.unit === 'GB' ? Number((realTotalMb / 1024).toFixed(3)) : realTotalMb
+  })
+
+  const validateUsedData = (
+    _rule: unknown,
+    _value: number | undefined,
+    callback: (error?: Error) => void
+  ) => {
+    const dataUsageMb = getUsedDataMb()
+    if (usedDataForm.data_usage === undefined || usedDataForm.data_usage === null) {
+      callback(new Error('请输入新的套餐真实已用量'))
+      return
+    }
+
+    if (dataUsageMb === undefined || dataUsageMb < 0 || !Number.isInteger(dataUsageMb)) {
+      callback(new Error('请输入可换算为非负整数 MB 的已用量'))
+      return
+    }
+
+    if (dataUsageMb > (selectedPackage.value?.real_total_mb ?? 0)) {
+      callback(new Error('新的已用量不能大于真流量总量'))
+      return
+    }
+
+    callback()
+  }
+
+  const usedDataRules = reactive<FormRules>({
+    data_usage: [{ validator: validateUsedData, trigger: 'blur' }]
+  })
+  const expiresAtRules = reactive<FormRules>({
+    expires_at: [{ required: true, message: '请选择新的套餐过期时间', trigger: 'change' }]
+  })

  const handleCreateRefund = (row: PackageInfo) => {
    if (!hasAuth('package:create_refund')) {
      ElMessage.warning('您没有创建退款申请的权限')
      return
    }
+    currentRefundOrderId.value = row.order_id
    currentRefundOrderNo.value = row.order_no
    createRefundDialogVisible.value = true
  }
@@ -307,6 +481,96 @@
    emit('refresh')
  }

+  const getPackageUsageId = (row: PackageInfo) => row.package_usage_id ?? row.id
+
+  const getUsedDataMb = () => {
+    if (usedDataForm.data_usage === undefined || usedDataForm.data_usage === null) return undefined
+    return usedDataForm.unit === 'GB' ? usedDataForm.data_usage * 1024 : usedDataForm.data_usage
+  }
+
+  const handleShowUsedDataDialog = (row: PackageInfo) => {
+    selectedPackage.value = row
+    usedDataForm.data_usage = row.real_used_mb ?? 0
+    usedDataForm.unit = 'MB'
+    usedDataDialogVisible.value = true
+  }
+
+  const handleShowExpiresAtDialog = (row: PackageInfo) => {
+    selectedPackage.value = row
+    expiresAtForm.expires_at = row.expires_at ? formatDateTime(row.expires_at) : ''
+    expiresAtDialogVisible.value = true
+  }
+
+  const resetUsedDataForm = () => {
+    usedDataFormRef.value?.resetFields()
+    usedDataForm.data_usage = undefined
+    usedDataForm.unit = 'MB'
+    selectedPackage.value = undefined
+  }
+
+  const resetExpiresAtForm = () => {
+    expiresAtFormRef.value?.resetFields()
+    expiresAtForm.expires_at = ''
+    selectedPackage.value = undefined
+  }
+
+  watch(
+    () => usedDataForm.unit,
+    () => {
+      if (usedDataForm.data_usage === undefined) return
+      usedDataForm.data_usage = Math.min(usedDataForm.data_usage, usedDataMaxValue.value)
+    }
+  )
+
+  const handleSubmitUsedData = async () => {
+    if (!usedDataFormRef.value || !selectedPackage.value) return
+    const packageUsageId = getPackageUsageId(selectedPackage.value)
+    if (!props.assetIdentifier || packageUsageId === undefined) {
+      ElMessage.error('缺少资产标识或套餐使用记录ID')
+      return
+    }
+
+    await usedDataFormRef.value.validate(async (valid) => {
+      if (!valid) return
+      usedDataSubmitting.value = true
+      try {
+        const dataUsageMb = getUsedDataMb()
+        await AssetService.updateAssetPackageUsedData(props.assetIdentifier, packageUsageId, {
+          data_usage_mb: dataUsageMb ?? null
+        })
+        ElMessage.success('已用量修改成功')
+        usedDataDialogVisible.value = false
+        emit('refresh')
+      } finally {
+        usedDataSubmitting.value = false
+      }
+    })
+  }
+
+  const handleSubmitExpiresAt = async () => {
+    if (!expiresAtFormRef.value || !selectedPackage.value) return
+    const packageUsageId = getPackageUsageId(selectedPackage.value)
+    if (!props.assetIdentifier || packageUsageId === undefined) {
+      ElMessage.error('缺少资产标识或套餐使用记录ID')
+      return
+    }
+
+    await expiresAtFormRef.value.validate(async (valid) => {
+      if (!valid) return
+      expiresAtSubmitting.value = true
+      try {
+        await AssetService.updateAssetPackageExpiresAt(props.assetIdentifier, packageUsageId, {
+          expires_at: expiresAtForm.expires_at
+        })
+        ElMessage.success('过期时间修改成功')
+        expiresAtDialogVisible.value = false
+        emit('refresh')
+      } finally {
+        expiresAtSubmitting.value = false
+      }
+    })
+  }
+
  // Props 使用 API 类型
  type PackageInfo = AssetPackageUsageRecord

@@ -326,6 +590,7 @@
    boundDeviceId?: number
    boundDeviceNo?: string
    loading?: boolean
+    assetIdentifier?: string
  }

  const props = withDefaults(defineProps<Props>(), {
@@ -334,7 +599,8 @@
    pageSize: 10,
    boundDeviceId: undefined,
    boundDeviceNo: '',
-    loading: false
+    loading: false,
+    assetIdentifier: ''
  })

  // Emits
@@ -464,6 +730,19 @@
            white-space: nowrap;
          }

+          .package-actions {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 6px 8px;
+            align-items: center;
+
+            .el-button {
+              justify-content: flex-start;
+              width: 100%;
+              margin-left: 0;
+            }
+          }
+
          .traffic-progress {
            .progress-text {
              display: flex;
@@ -571,4 +850,28 @@
      }
    }
  }
+
+  .used-data-input {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 8px;
+    width: 100%;
+
+    &__number {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__unit {
+      width: 112px;
+
+      :deep(.el-select__placeholder) {
+        justify-content: flex-start;
+      }
+
+      :deep(.el-select__selected-item) {
+        justify-content: flex-start;
+      }
+    }
+  }
 </style>
--- a/src/views/asset-management/asset-information/index.vue
+++ b/src/views/asset-management/asset-information/index.vue
@@ -58,6 +58,7 @@
            :total="packagePagination.total"
            :page="packagePagination.page"
            :page-size="packagePagination.pageSize"
+            :asset-identifier="cardInfo.identifier"
            :bound-device-id="cardInfo.bound_device_id"
            :bound-device-no="cardInfo.bound_device_no"
            :loading="packageLoading"
--- a/src/views/order-management/order-list/detail.vue
+++ b/src/views/order-management/order-list/detail.vue
@@ -16,39 +16,40 @@
      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />

      <!-- 订单列表 -->
-      <ElCard style="margin-top: 20px" shadow="never">
-        <div
-          v-if="detailData && detailData.items && detailData.items.length > 0"
-          class="order-items-section"
-        >
-          <h3 class="section-title">订单列表</h3>
-          <ElTable :data="detailData.items" border>
-            <ElTableColumn prop="package_name" label="套餐名称" />
-            <ElTableColumn prop="package_type" label="套餐类型">
-              <template #default="{ row }">
-                {{
-                  row.package_type === 'formal'
-                    ? '正式套餐'
-                    : row.package_type === 'addon'
-                      ? '加油包'
-                      : '-'
-                }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn prop="quantity" label="数量" />
-            <ElTableColumn prop="unit_price" label="单价">
-              <template #default="{ row }">
-                {{ formatCurrency(row.unit_price) }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn prop="amount" label="金额">
-              <template #default="{ row }">
-                {{ formatCurrency(row.amount) }}
-              </template>
-            </ElTableColumn>
-          </ElTable>
-        </div>
-      </ElCard>
+      <div v-if="detailData && detailData.items && detailData.items.length > 0">
+        <ElCard style="margin-top: 20px" shadow="never">
+          <div
+            class="order-items-section"
+          >
+            <h3 class="section-title">订单列表</h3>
+            <ElTable :data="detailData.items" border>
+              <ElTableColumn prop="package_name" label="套餐名称" />
+              <ElTableColumn prop="package_type" label="套餐类型">
+                <template #default="{ row }">
+                  {{
+                    row.package_type === 'formal'
+                      ? '正式套餐'
+                      : row.package_type === 'addon'
+                        ? '加油包'
+                        : '-'
+                  }}
+                </template>
+              </ElTableColumn>
+              <ElTableColumn prop="quantity" label="数量" />
+              <ElTableColumn prop="unit_price" label="单价">
+                <template #default="{ row }">
+                  {{ formatCurrency(row.unit_price) }}
+                </template>
+              </ElTableColumn>
+              <ElTableColumn prop="amount" label="金额">
+                <template #default="{ row }">
+                  {{ formatCurrency(row.amount) }}
+                </template>
+              </ElTableColumn>
+            </ElTable>
+          </div>
+        </ElCard>
+      </div>

      <!-- 加载中 -->
      <div v-if="loading" class="loading-container">