fetch(modify):修改bug

src/views/package-management/package-list/detail.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="package-detail">
+    <ElCard shadow="never">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">套餐详情</h2>
+      </div>
+
+      <!-- 详情内容 -->
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
+import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+import DetailPage from '@/components/common/DetailPage.vue'
+import type { DetailSection } from '@/components/common/DetailPage.vue'
+import { PackageManageService } from '@/api/modules'
+import type { PackageResponse } from '@/types/api'
+import { formatDateTime } from '@/utils/business/format'
+
+defineOptions({ name: 'PackageDetail' })
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const detailData = ref<PackageResponse | null>(null)
+
+// 详情页配置
+const detailSections: DetailSection[] = [
+  {
+    title: '基本信息',
+    fields: [
+      { label: 'ID', prop: 'id' },
+      { label: '套餐编码', prop: 'package_code' },
+      { label: '套餐名称', prop: 'package_name' },
+      { label: '套餐系列', prop: 'series_name' },
+      {
+        label: '套餐类型',
+        formatter: (_, data) => {
+          const typeMap = {
+            formal: '正式套餐',
+            addon: '附加套餐'
+          }
+          return typeMap[data.package_type] || data.package_type
+        }
+      },
+      {
+        label: '套餐时长',
+        formatter: (_, data) => {
+          return `${data.duration_months} 个月`
+        }
+      },
+      {
+        label: '状态',
+        formatter: (_, data) => {
+          return data.status === 1 ? '启用' : '禁用'
+        }
+      },
+      {
+        label: '上架状态',
+        formatter: (_, data) => {
+          return data.shelf_status === 1 ? '上架' : '下架'
+        }
+      },
+      { label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
+      { label: '更新时间', prop: 'updated_at', formatter: (value) => formatDateTime(value) }
+    ]
+  },
+  {
+    title: '流量配置',
+    fields: [
+      {
+        label: '真流量额度',
+        formatter: (_, data) => {
+          if (data.real_data_mb >= 1024) {
+            return `${(data.real_data_mb / 1024).toFixed(2)} GB`
+          }
+          return `${data.real_data_mb} MB`
+        }
+      },
+      {
+        label: '启用虚流量',
+        formatter: (_, data) => {
+          return data.enable_virtual_data ? '是' : '否'
+        }
+      },
+      {
+        label: '虚流量额度',
+        formatter: (_, data) => {
+          if (!data.enable_virtual_data) return '-'
+          if (data.virtual_data_mb >= 1024) {
+            return `${(data.virtual_data_mb / 1024).toFixed(2)} GB`
+          }
+          return `${data.virtual_data_mb} MB`
+        }
+      }
+    ]
+  },
+  {
+    title: '价格信息',
+    fields: [
+      {
+        label: '成本价',
+        formatter: (_, data) => {
+          return `¥${(data.cost_price / 100).toFixed(2)}`
+        }
+      },
+      {
+        label: '建议售价',
+        formatter: (_, data) => {
+          return `¥${(data.suggested_retail_price / 100).toFixed(2)}`
+        }
+      },
+      {
+        label: '利润空间',
+        formatter: (_, data) => {
+          if (data.profit_margin === null || data.profit_margin === undefined) return '-'
+          return `¥${(data.profit_margin / 100).toFixed(2)}`
+        }
+      }
+    ]
+  },
+  {
+    title: '佣金配置',
+    fields: [
+      {
+        label: '当前返佣比例',
+        formatter: (_, data) => {
+          return data.current_commission_rate || '-'
+        }
+      },
+      {
+        label: '一次性佣金金额',
+        formatter: (_, data) => {
+          if (data.one_time_commission_amount === null || data.one_time_commission_amount === undefined) return '-'
+          return `¥${(data.one_time_commission_amount / 100).toFixed(2)}`
+        }
+      },
+      {
+        label: '当前返佣档位',
+        formatter: (_, data) => {
+          if (!data.tier_info || !data.tier_info.current_rate) return '-'
+          return data.tier_info.current_rate
+        }
+      },
+      {
+        label: '下一档位比例',
+        formatter: (_, data) => {
+          if (!data.tier_info || !data.tier_info.next_rate) return '-'
+          return data.tier_info.next_rate
+        }
+      },
+      {
+        label: '下一档位阈值',
+        formatter: (_, data) => {
+          if (!data.tier_info || data.tier_info.next_threshold === null || data.tier_info.next_threshold === undefined) return '-'
+          return data.tier_info.next_threshold
+        }
+      }
+    ]
+  }
+]
+
+// 返回上一页
+const handleBack = () => {
+  router.back()
+}
+
+// 获取详情数据
+const fetchDetail = async () => {
+  const id = Number(route.params.id)
+  if (!id) {
+    ElMessage.error('缺少ID参数')
+    return
+  }
+
+  loading.value = true
+  try {
+    const res = await PackageManageService.getPackageDetail(id)
+    if (res.code === 0) {
+      detailData.value = res.data
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('获取详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDetail()
+})
+</script>
+
+<style scoped lang="scss">
+.package-detail {
+  padding: 20px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--el-border-color-light);
+
+  .detail-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  gap: 12px;
+  color: var(--el-text-color-secondary);
+
+  .el-icon {
+    font-size: 32px;
+  }
+}
+</style>

src/views/package-management/package-list/index.vue

@@ -5,7 +5,7 @@
       <ArtSearchBar
         v-model:filter="searchForm"
         :items="searchFormItems"
-        :show-expand="false"
+        :show-expand="true"
         @reset="handleReset"
         @search="handleSearch"
       ></ArtSearchBar>
@@ -48,7 +48,7 @@
           :close-on-click-modal="false"
           @closed="handleDialogClosed"
         >
-          <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
+          <ElForm ref="formRef" :model="form" :rules="rules" label-width="150px">
             <ElFormItem label="套餐编码" prop="package_code">
               <div style="display: flex; gap: 8px;">
                 <ElInput
@@ -99,17 +99,7 @@
                 />
               </ElSelect>
             </ElFormItem>
-            <ElFormItem label="流量类型" prop="data_type">
-              <ElSelect v-model="form.data_type" placeholder="请选择流量类型" style="width: 100%">
-                <ElOption
-                  v-for="option in DATA_TYPE_OPTIONS"
-                  :key="option.value"
-                  :label="option.label"
-                  :value="option.value"
-                />
-              </ElSelect>
-            </ElFormItem>
-            <ElFormItem label="真流量额度(MB)" prop="real_data_mb" v-if="form.data_type === 'real'">
+            <ElFormItem label="真流量额度(MB)" prop="real_data_mb">
               <ElInputNumber
                 v-model="form.real_data_mb"
                 :min="0"
@@ -118,10 +108,17 @@
                 placeholder="请输入真流量额度"
               />
             </ElFormItem>
+            <ElFormItem label="启用虚流量">
+              <ElSwitch
+                v-model="form.enable_virtual_data"
+                active-text="启用"
+                inactive-text="不启用"
+              />
+            </ElFormItem>
             <ElFormItem
               label="虚流量额度(MB)"
               prop="virtual_data_mb"
-              v-if="form.data_type === 'virtual'"
+              v-if="form.enable_virtual_data"
             >
               <ElInputNumber
                 v-model="form.virtual_data_mb"
@@ -140,15 +137,26 @@
                 style="width: 100%"
               />
             </ElFormItem>
-            <ElFormItem label="价格(元)" prop="price">
+            <ElFormItem label="成本价(元)" prop="cost_price">
               <ElInputNumber
-                v-model="form.price"
+                v-model="form.cost_price"
                 :min="0"
                 :precision="2"
                 :step="0.01"
                 :controls="false"
                 style="width: 100%"
-                placeholder="请输入价格"
+                placeholder="请输入成本价"
+              />
+            </ElFormItem>
+            <ElFormItem label="建议售价(元)" prop="suggested_retail_price">
+              <ElInputNumber
+                v-model="form.suggested_retail_price"
+                :min="0"
+                :precision="2"
+                :step="0.01"
+                :controls="false"
+                style="width: 100%"
+                placeholder="请输入建议售价(可选)"
               />
             </ElFormItem>
             <ElFormItem label="套餐描述" prop="description">
@@ -178,6 +186,7 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
+  import { useRouter } from 'vue-router'
   import { PackageManageService, PackageSeriesService } from '@/api/modules'
   import { ElMessage, ElMessageBox, ElTag, ElSwitch, ElButton } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
@@ -187,25 +196,22 @@
   import { useAuth } from '@/composables/useAuth'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
   import { formatDateTime } from '@/utils/business/format'
+  import { RoutesAlias } from '@/router/routesAlias'
   import {
     CommonStatus,
     getStatusText,
     frontendStatusToApi,
     apiStatusToFrontend,
     PACKAGE_TYPE_OPTIONS,
-    DATA_TYPE_OPTIONS,
-    SHELF_STATUS_OPTIONS,
     getPackageTypeLabel,
-    getPackageTypeTag,
-    getDataTypeLabel,
-    getDataTypeTag,
-    getShelfStatusText
+    getPackageTypeTag
   } from '@/config/constants'
   import { generatePackageCode } from '@/utils/codeGenerator'
 
   defineOptions({ name: 'PackageList' })
 
   const { hasAuth } = useAuth()
+  const router = useRouter()
 
   const dialogVisible = ref(false)
   const loading = ref(false)
@@ -308,16 +314,15 @@
 
   // 列配置
   const columnOptions = [
-    { label: 'ID', prop: 'id' },
     { label: '套餐编码', prop: 'package_code' },
     { label: '套餐名称', prop: 'package_name' },
     { label: '所属系列', prop: 'series_name' },
     { label: '套餐类型', prop: 'package_type' },
-    { label: '流量类型', prop: 'data_type' },
     { label: '真流量', prop: 'real_data_mb' },
     { label: '虚流量', prop: 'virtual_data_mb' },
     { label: '有效期', prop: 'duration_months' },
-    { label: '价格', prop: 'price' },
+    { label: '成本价', prop: 'cost_price' },
+    { label: '建议售价', prop: 'suggested_retail_price' },
     { label: '上架状态', prop: 'shelf_status' },
     { label: '状态', prop: 'status' },
     { label: '创建时间', prop: 'created_at' },
@@ -335,20 +340,16 @@
         { required: true, message: '请输入套餐名称', trigger: 'blur' },
         { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
       ],
-      series_id: [{ required: true, message: '请选择套餐系列', trigger: 'change' }],
       package_type: [{ required: true, message: '请选择套餐类型', trigger: 'change' }],
-      data_type: [{ required: true, message: '请选择流量类型', trigger: 'change' }],
       duration_months: [
         { required: true, message: '请输入有效期', trigger: 'blur' },
         { type: 'number', min: 1, max: 120, message: '有效期范围 1-120 月', trigger: 'blur' }
       ],
-      price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
+      cost_price: [{ required: true, message: '请输入成本价', trigger: 'blur' }]
     }
 
-    // 根据流量类型动态添加验证规则
-    if (form.data_type === 'real') {
-      baseRules.real_data_mb = [{ required: true, message: '请输入真流量额度', trigger: 'blur' }]
-    } else if (form.data_type === 'virtual') {
+    // 如果启用虚流量，则虚流量额度为必填
+    if (form.enable_virtual_data) {
       baseRules.virtual_data_mb = [{ required: true, message: '请输入虚流量额度', trigger: 'blur' }]
     }
 
@@ -362,11 +363,12 @@
     package_name: '',
     series_id: undefined,
     package_type: '',
-    data_type: '',
+    enable_virtual_data: false,
     real_data_mb: 0,
     virtual_data_mb: 0,
     duration_months: 1,
-    price: 0,
+    cost_price: 0,
+    suggested_retail_price: undefined,
     description: ''
   })
 
@@ -375,20 +377,16 @@
 
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
-    {
-      prop: 'id',
-      label: 'ID',
-      width: 80
-    },
     {
       prop: 'package_code',
       label: '套餐编码',
-      minWidth: 150
+      showOverflowTooltip: true,
+      width: 210
     },
     {
       prop: 'package_name',
       label: '套餐名称',
-      minWidth: 180
+      minWidth: 160
     },
     {
       prop: 'series_name',
@@ -405,16 +403,6 @@
         )
       }
     },
-    {
-      prop: 'data_type',
-      label: '流量类型',
-      width: 100,
-      formatter: (row: PackageResponse) => {
-        return h(ElTag, { type: getDataTypeTag(row.data_type), size: 'small' }, () =>
-          getDataTypeLabel(row.data_type)
-        )
-      }
-    },
     {
       prop: 'real_data_mb',
       label: '真流量',
@@ -434,10 +422,17 @@
       formatter: (row: PackageResponse) => `${row.duration_months}月`
     },
     {
-      prop: 'price',
-      label: '价格',
+      prop: 'cost_price',
+      label: '成本价',
       width: 100,
-      formatter: (row: PackageResponse) => `¥${(row.price / 100).toFixed(2)}`
+      formatter: (row: PackageResponse) => `¥${(row.cost_price / 100).toFixed(2)}`
+    },
+    {
+      prop: 'suggested_retail_price',
+      label: '建议售价',
+      width: 100,
+      formatter: (row: PackageResponse) =>
+        row.suggested_retail_price ? `¥${(row.suggested_retail_price / 100).toFixed(2)}` : '-'
     },
     {
       prop: 'shelf_status',
@@ -483,11 +478,18 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 150,
+      width: 200,
       fixed: 'right',
       formatter: (row: PackageResponse) => {
         const buttons = []
 
+        buttons.push(
+          h(ArtButtonTable, {
+            type: 'view',
+            onClick: () => handleViewDetail(row)
+          })
+        )
+
         if (hasAuth('package:edit')) {
           buttons.push(
             h(ArtButtonTable, {
@@ -511,14 +513,12 @@
     }
   ])
 
-  // 监听流量类型变化,重置未使用的流量字段
+  // 监听虚流量开关变化,关闭时重置虚流量额度
   watch(
-    () => form.data_type,
-    (newType) => {
-      if (newType === 'real') {
+    () => form.enable_virtual_data,
+    (enabled) => {
+      if (!enabled) {
         form.virtual_data_mb = 0
-      } else if (newType === 'virtual') {
-        form.real_data_mb = 0
       }
     }
   )
@@ -656,11 +656,12 @@
       form.package_name = row.package_name
       form.series_id = row.series_id
       form.package_type = row.package_type
-      form.data_type = row.data_type
-      form.real_data_mb = row.real_data_mb
-      form.virtual_data_mb = row.virtual_data_mb
+      form.enable_virtual_data = row.enable_virtual_data || false
+      form.real_data_mb = row.real_data_mb || 0
+      form.virtual_data_mb = row.virtual_data_mb || 0
       form.duration_months = row.duration_months
-      form.price = row.price / 100 // 分转换为元显示
+      form.cost_price = row.cost_price / 100 // 分转换为元显示
+      form.suggested_retail_price = row.suggested_retail_price ? row.suggested_retail_price / 100 : undefined
       form.description = row.description || ''
     } else {
       form.id = 0
@@ -668,11 +669,12 @@
       form.package_name = ''
       form.series_id = undefined
       form.package_type = ''
-      form.data_type = ''
+      form.enable_virtual_data = false
       form.real_data_mb = 0
       form.virtual_data_mb = 0
       form.duration_months = 1
-      form.price = 0
+      form.cost_price = 0
+      form.suggested_retail_price = undefined
       form.description = ''
     }
 
@@ -685,6 +687,10 @@
   // 生成套餐编码
   const handleGeneratePackageCode = () => {
     form.package_code = generatePackageCode()
+    // 生成编码后清除该字段的验证错误
+    nextTick(() => {
+      formRef.value?.clearValidate('package_code')
+    })
     ElMessage.success('编码生成成功')
   }
 
@@ -698,11 +704,12 @@
     form.package_name = ''
     form.series_id = undefined
     form.package_type = ''
-    form.data_type = ''
+    form.enable_virtual_data = false
     form.real_data_mb = 0
     form.virtual_data_mb = 0
     form.duration_months = 1
-    form.price = 0
+    form.cost_price = 0
+    form.suggested_retail_price = undefined
     form.description = ''
   }
 
@@ -736,19 +743,32 @@
         submitLoading.value = true
         try {
           // 将元转换为分提交给后端
-          const priceInCents = Math.round(form.price * 100)
+          const costPriceInCents = Math.round(form.cost_price * 100)
+          const suggestedRetailPriceInCents = form.suggested_retail_price
+            ? Math.round(form.suggested_retail_price * 100)
+            : undefined
 
-          const data = {
+          const data: any = {
             package_code: form.package_code,
             package_name: form.package_name,
-            series_id: form.series_id,
             package_type: form.package_type,
-            data_type: form.data_type,
-            real_data_mb: form.real_data_mb,
-            virtual_data_mb: form.virtual_data_mb,
             duration_months: form.duration_months,
-            price: priceInCents,
-            description: form.description || undefined
+            cost_price: costPriceInCents,
+            enable_virtual_data: form.enable_virtual_data
+          }
+
+          // 可选字段
+          if (form.series_id) {
+            data.series_id = form.series_id
+          }
+          if (suggestedRetailPriceInCents !== undefined) {
+            data.suggested_retail_price = suggestedRetailPriceInCents
+          }
+          if (form.real_data_mb) {
+            data.real_data_mb = form.real_data_mb
+          }
+          if (form.enable_virtual_data && form.virtual_data_mb) {
+            data.virtual_data_mb = form.virtual_data_mb
           }
 
           if (dialogType.value === 'add') {
@@ -797,6 +817,11 @@
       console.error(error)
     }
   }
+
+  // 查看详情
+  const handleViewDetail = (row: PackageResponse) => {
+    router.push(`${RoutesAlias.PackageDetail}/${row.id}`)
+  }
 </script>
 
 <style lang="scss" scoped>