From 366b97d958614424c8d3a2a9783d416b7657ce0f Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Tue, 25 Feb 2025 22:30:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BC=98=E6=83=A0=E5=88=B8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout.vue       |  36 +-
 src/router/index.js               |  12 +
 src/views/coupon/ActivityList.vue | 591 ++++++++++++++++++++++++++++++
 src/views/coupon/TemplateList.vue | 356 ++++++++++++++++++
 4 files changed, 993 insertions(+), 2 deletions(-)
 create mode 100644 src/views/coupon/ActivityList.vue
 create mode 100644 src/views/coupon/TemplateList.vue

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 0012dd7..051dc54 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -69,6 +69,19 @@
           </a-menu-item>
         </a-sub-menu>
 
+        <a-sub-menu key="coupon">
+          <template #icon>
+            <gift-outlined />
+          </template>
+          <template #title>优惠券管理</template>
+          <a-menu-item key="coupon-template">
+            <router-link to="/coupon/template/list">优惠券模板</router-link>
+          </a-menu-item>
+          <a-menu-item key="coupon-activity">
+            <router-link to="/coupon/activity/list">优惠券活动</router-link>
+          </a-menu-item>
+        </a-sub-menu>
+
         <a-sub-menu key="merchant">
           <template #icon>
             <shop-outlined />
@@ -147,7 +160,8 @@ import {
   ShopOutlined,
   SettingOutlined,
   ShoppingOutlined,
-  MoneyCollectOutlined
+  MoneyCollectOutlined,
+  GiftOutlined
 } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
 
@@ -164,7 +178,8 @@ export default defineComponent({
     ShopOutlined,
     SettingOutlined,
     ShoppingOutlined,
-    MoneyCollectOutlined
+    MoneyCollectOutlined,
+    GiftOutlined
   },
   setup() {
     const router = useRouter()
@@ -262,6 +277,23 @@ export default defineComponent({
           }
         ]
       },
+      {
+        key: 'coupon',
+        icon: () => h(GiftOutlined),
+        title: '优惠券管理',
+        children: [
+          {
+            key: 'coupon-template',
+            title: '优惠券模板',
+            path: '/coupon/template/list'
+          },
+          {
+            key: 'coupon-activity',
+            title: '优惠券活动',
+            path: '/coupon/activity/list'
+          }
+        ]
+      },
       {
         key: 'merchant',
         icon: () => h(ShopOutlined),
diff --git a/src/router/index.js b/src/router/index.js
index 18834c2..5e4e279 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,6 +34,18 @@ const routes = [
         component: () => import('../views/community/CommunityList.vue'),
         meta: { title: '小区列表' }
       },
+      {
+        path: '/coupon/template/list',
+        name: 'CouponTemplateList',
+        component: () => import('../views/coupon/TemplateList.vue'),
+        meta: { title: '优惠券模板' }
+      },
+      {
+        path: '/coupon/activity/list',
+        name: 'CouponActivityList',
+        component: () => import('../views/coupon/ActivityList.vue'),
+        meta: { title: '优惠券活动' }
+      },
       {
         path: '/community/building',
         name: 'BuildingList',
diff --git a/src/views/coupon/ActivityList.vue b/src/views/coupon/ActivityList.vue
new file mode 100644
index 0000000..1268a12
--- /dev/null
+++ b/src/views/coupon/ActivityList.vue
@@ -0,0 +1,591 @@
+<template>
+  <page-container>
+    <div class="coupon-activity-list">
+      <div class="table-header">
+        <h1>优惠券活动</h1>
+        <a-button type="primary" @click="showAddModal">
+          新建活动
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+        row-key="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'is_active'">
+            <a-tag :color="record.is_active ? 'success' : 'default'">
+              {{ record.is_active ? '进行中' : '已结束' }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'time_range'">
+            <div>{{ formatDateTime(record.start_time) }}</div>
+            <div>{{ formatDateTime(record.end_time) }}</div>
+          </template>
+          <template v-if="column.key === 'daily_time'">
+            <div>{{ record.daily_start_time }}</div>
+            <div>{{ record.daily_end_time }}</div>
+          </template>
+          <template v-if="column.key === 'create_time'">
+            {{ formatDateTime(record.create_time) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="handleEdit(record)">编辑</a>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 添加/编辑活动模态框 -->
+      <a-modal
+        v-model:visible="modalVisible"
+        :title="isEdit ? '编辑活动' : '新建活动'"
+        @ok="handleSubmit"
+        @cancel="handleCancel"
+        :confirmLoading="submitting"
+        width="720px"
+      >
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :rules="rules"
+          layout="vertical"
+        >
+          <a-form-item
+            label="活动名称"
+            name="name"
+            :rules="[{ required: true, message: '请输入活动名称' }]"
+          >
+            <a-input 
+              v-model:value="formState.name"
+              placeholder="请输入活动名称"
+              :maxLength="50"
+            />
+          </a-form-item>
+          
+          <a-form-item
+            label="活动说明"
+            name="description"
+          >
+            <a-textarea
+              v-model:value="formState.description"
+              placeholder="请输入活动说明"
+              :rows="2"
+              :maxLength="200"
+            />
+          </a-form-item>
+          
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="活动开始时间"
+                name="start_time"
+                :rules="[{ required: true, message: '请选择开始时间' }]"
+              >
+                <a-date-picker
+                  v-model:value="formState.start_time"
+                  show-time
+                  style="width: 100%"
+                  :disabledDate="disabledStartDate"
+                  placeholder="选择开始时间"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="活动结束时间"
+                name="end_time"
+                :rules="[{ required: true, message: '请选择结束时间' }]"
+              >
+                <a-date-picker
+                  v-model:value="formState.end_time"
+                  show-time
+                  style="width: 100%"
+                  :disabledDate="disabledEndDate"
+                  placeholder="选择结束时间"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="每日开始时间"
+                name="daily_start_time"
+                :rules="[{ required: true, message: '请选择每日开始时间' }]"
+              >
+                <a-time-picker
+                  v-model:value="formState.daily_start_time"
+                  style="width: 100%"
+                  :disabledTime="disabledDailyStartTime"
+                  placeholder="选择每日开始时间"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="每日结束时间"
+                name="daily_end_time"
+                :rules="[{ required: true, message: '请选择每日结束时间' }]"
+              >
+                <a-time-picker
+                  v-model:value="formState.daily_end_time"
+                  style="width: 100%"
+                  :disabledTime="disabledDailyEndTime"
+                  placeholder="选择每日结束时间"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          
+          <a-form-item
+            label="每日限领数量"
+            name="daily_limit"
+            :rules="[{ required: true, message: '请输入每日限领数量' }]"
+          >
+            <a-input-number
+              v-model:value="formState.daily_limit"
+              :min="1"
+              style="width: 100%"
+              placeholder="请输入每日限领数量"
+            />
+          </a-form-item>
+          
+          <a-form-item
+            label="优惠券配置"
+            name="coupon_config"
+            :rules="[{ required: true, message: '请至少选择一个优惠券' }]"
+          >
+            <a-table
+              :columns="couponColumns"
+              :data-source="couponTemplates"
+              :pagination="false"
+              size="small"
+              :scroll="{ y: 200 }"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'amount'">
+                  {{ record.amount }}元
+                </template>
+                <template v-if="column.key === 'quantity'">
+                  <a-input-number
+                    v-model:value="formState.coupon_config[record.id]"
+                    :min="0"
+                    size="small"
+                  />
+                </template>
+              </template>
+            </a-table>
+          </a-form-item>
+          
+          <a-form-item
+            label="活动状态"
+            name="is_active"
+          >
+            <a-switch v-model:checked="formState.is_active" />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import { 
+  message, 
+  DatePicker, 
+  TimePicker, 
+  Row, 
+  Col, 
+  Input, 
+  InputNumber, 
+  Switch, 
+  Table 
+} from 'ant-design-vue'
+import PageContainer from '@/components/PageContainer.vue'
+import dayjs from 'dayjs'
+import request from '@/utils/request'
+
+export default defineComponent({
+  components: {
+    PageContainer,
+    ADatePicker: DatePicker,
+    ATimePicker: TimePicker,
+    ARow: Row,
+    ACol: Col,
+    AInput: Input,
+    ATextarea: Input.TextArea,
+    AInputNumber: InputNumber,
+    ASwitch: Switch,
+    ATable: Table
+  },
+  
+  setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '活动名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 200
+      },
+      {
+        title: '活动说明',
+        dataIndex: 'description',
+        key: 'description',
+        width: 200,
+        ellipsis: true
+      },
+      {
+        title: '活动时间',
+        key: 'time_range',
+        width: 180
+      },
+      {
+        title: '每日时段',
+        key: 'daily_time',
+        width: 120
+      },
+      {
+        title: '每日限领',
+        dataIndex: 'daily_limit',
+        key: 'daily_limit',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '已领取次数',
+        dataIndex: 'receive_count',
+        key: 'receive_count',
+        width: 100,
+        align: 'center',
+        customRender: ({ text }) => {
+          return text || 0
+        }
+      },
+      {
+        title: '状态',
+        key: 'is_active',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        key: 'create_time',
+        width: 180
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 80,
+        fixed: 'right'
+      }
+    ]
+
+    // 格式化日期时间
+    const formatDateTime = (value) => {
+      if (!value) return '-'
+      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    // 获取列表数据
+    const fetchData = async () => {
+      try {
+        loading.value = true
+        const res = await request.get('/api/coupon-activities')
+        if (res.code === 200) {
+          tableData.value = res.data.items
+          pagination.value.total = res.data.total
+        } else {
+          message.error(res.message || '获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取优惠券活动列表失败:', error)
+        message.error('获取数据失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 处理表格分页变化
+    const handleTableChange = (pag) => {
+      pagination.value.current = pag.current
+      pagination.value.pageSize = pag.pageSize
+      fetchData()
+    }
+
+    const modalVisible = ref(false)
+    const submitting = ref(false)
+    const isEdit = ref(false)
+    const currentId = ref(null)
+    const formRef = ref(null)
+    const couponTemplates = ref([])
+    
+    const formState = ref({
+      name: '',
+      description: '',
+      start_time: null,
+      end_time: null,
+      daily_start_time: null,
+      daily_end_time: null,
+      daily_limit: 1,
+      coupon_config: {},
+      is_active: true
+    })
+    
+    const couponColumns = [
+      {
+        title: '模板名称',
+        dataIndex: 'name',
+        key: 'name'
+      },
+      {
+        title: '优惠金额',
+        key: 'amount',
+        width: 100,
+        align: 'right'
+      },
+      {
+        title: '发放数量',
+        key: 'quantity',
+        width: 120,
+        align: 'center'
+      }
+    ]
+
+    // 获取优惠券模板列表
+    const fetchCouponTemplates = async () => {
+      try {
+        const res = await request.get('/api/coupon/list')
+        if (res.code === 200) {
+          couponTemplates.value = res.data
+        }
+      } catch (error) {
+        console.error('获取优惠券模板列表失败:', error)
+      }
+    }
+
+    // 显示新建模态框
+    const showAddModal = async () => {
+      isEdit.value = false
+      currentId.value = null
+      formState.value = {
+        name: '',
+        description: '',
+        start_time: null,
+        end_time: null,
+        daily_start_time: null,
+        daily_end_time: null,
+        daily_limit: 1,
+        coupon_config: {},
+        is_active: true
+      }
+      await fetchCouponTemplates()
+      modalVisible.value = true
+    }
+
+    // 显示编辑模态框
+    const handleEdit = async (record) => {
+      try {
+        isEdit.value = true
+        currentId.value = record.id
+        
+        // 获取优惠券模板列表
+        await fetchCouponTemplates()
+        
+        // 设置表单数据
+        formState.value = {
+          name: record.name,
+          description: record.description,
+          start_time: dayjs(record.start_time),
+          end_time: dayjs(record.end_time),
+          daily_start_time: dayjs(record.daily_start_time, 'HH:mm:ss'),
+          daily_end_time: dayjs(record.daily_end_time, 'HH:mm:ss'),
+          daily_limit: record.daily_limit,
+          coupon_config: record.coupon_config || {},
+          is_active: record.is_active
+        }
+        
+        modalVisible.value = true
+      } catch (error) {
+        console.error('加载活动数据失败:', error)
+        message.error('加载数据失败')
+      }
+    }
+
+    // 提交表单
+    const handleSubmit = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          submitting.value = true
+          const params = {
+            ...formState.value,
+            start_time: dayjs(formState.value.start_time).format('YYYY-MM-DD HH:mm:ss'),
+            end_time: dayjs(formState.value.end_time).format('YYYY-MM-DD HH:mm:ss'),
+            daily_start_time: dayjs(formState.value.daily_start_time).format('HH:mm:ss'),
+            daily_end_time: dayjs(formState.value.daily_end_time).format('HH:mm:ss')
+          }
+          
+          let res
+          if (isEdit.value) {
+            res = await request.put(`/api/coupon-activities/${currentId.value}`, params)
+          } else {
+            res = await request.post('/api/coupon-activities', params)
+          }
+          
+          if (res.code === 200) {
+            message.success(isEdit.value ? '更新成功' : '创建成功')
+            modalVisible.value = false
+            fetchData()
+          } else {
+            message.error(isEdit.value ? '更新失败' : '创建失败')
+          }
+        } catch (error) {
+          console.error(isEdit.value ? '更新优惠券活动失败:' : '创建优惠券活动失败:', error)
+          message.error(isEdit.value ? '更新失败' : '创建失败')
+        } finally {
+          submitting.value = false
+        }
+      })
+    }
+
+    // 取消操作
+    const handleCancel = () => {
+      formRef.value?.resetFields()
+      modalVisible.value = false
+    }
+
+    // 日期时间选择限制
+    const disabledStartDate = (current) => {
+      // 不能选择过去的时间
+      return current && current < dayjs().startOf('day')
+    }
+    
+    const disabledEndDate = (current) => {
+      // 不能选择过去的时间，且不能早于开始时间
+      return (current && current < dayjs().startOf('day')) || 
+             (formState.value.start_time && current < dayjs(formState.value.start_time))
+    }
+    
+    // 每日时间段选择限制
+    const disabledDailyStartTime = () => {
+      return {
+        disabledHours: () => [],
+        disabledMinutes: () => [],
+        disabledSeconds: () => []
+      }
+    }
+    
+    const disabledDailyEndTime = () => {
+      if (!formState.value.daily_start_time) return {
+        disabledHours: () => [],
+        disabledMinutes: () => [],
+        disabledSeconds: () => []
+      }
+      
+      const startTime = dayjs(formState.value.daily_start_time)
+      const startHour = startTime.hour()
+      
+      return {
+        disabledHours: () => Array.from({ length: startHour }, (_, i) => i),
+        disabledMinutes: (selectedHour) => {
+          if (selectedHour === startHour) {
+            return Array.from({ length: startTime.minute() }, (_, i) => i)
+          }
+          return []
+        },
+        disabledSeconds: (selectedHour, selectedMinute) => {
+          if (selectedHour === startHour && selectedMinute === startTime.minute()) {
+            return Array.from({ length: startTime.second() }, (_, i) => i)
+          }
+          return []
+        }
+      }
+    }
+
+    // 监听时间变化
+    watch(() => formState.value.start_time, (newVal) => {
+      // 如果开始时间大于结束时间，清空结束时间
+      if (newVal && formState.value.end_time && dayjs(newVal) > dayjs(formState.value.end_time)) {
+        formState.value.end_time = null
+      }
+    })
+
+    watch(() => formState.value.daily_start_time, (newVal) => {
+      // 如果每日开始时间大于结束时间，清空结束时间
+      if (newVal && formState.value.daily_end_time && 
+          dayjs(newVal).isAfter(dayjs(formState.value.daily_end_time))) {
+        formState.value.daily_end_time = null
+      }
+    })
+
+    onMounted(() => {
+      fetchData()
+    })
+
+    return {
+      loading,
+      tableData,
+      columns,
+      pagination,
+      formatDateTime,
+      handleTableChange,
+      modalVisible,
+      submitting,
+      formState,
+      formRef,
+      couponTemplates,
+      couponColumns,
+      showAddModal,
+      handleSubmit,
+      handleCancel,
+      disabledStartDate,
+      disabledEndDate,
+      disabledDailyStartTime,
+      disabledDailyEndTime,
+      handleEdit
+    }
+  }
+})
+</script>
+
+<style scoped>
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+
+:deep(.ant-table-content) {
+  overflow-x: auto;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/coupon/TemplateList.vue b/src/views/coupon/TemplateList.vue
new file mode 100644
index 0000000..54f8080
--- /dev/null
+++ b/src/views/coupon/TemplateList.vue
@@ -0,0 +1,356 @@
+<template>
+  <page-container>
+    <div class="coupon-template-list">
+      <div class="table-header">
+        <h1>优惠券模板</h1>
+        <a-button type="primary" @click="showAddModal">
+          新建模板
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+        row-key="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'amount'">
+            <span>{{ record.amount > 0 ? `${record.amount}元` : '-' }}</span>
+          </template>
+          <template v-if="column.key === 'coupon_type'">
+            <a-tag :color="getCouponTypeColor(record.coupon_type)">
+              {{ getCouponTypeText(record.coupon_type) }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'create_time'">
+            {{ formatDateTime(record.create_time) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="handleEdit(record)">编辑</a>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 添加/编辑模态框 -->
+      <a-modal
+        v-model:visible="modalVisible"
+        :title="isEdit ? '编辑优惠券模板' : '新建优惠券模板'"
+        @ok="handleSubmit"
+        @cancel="handleCancel"
+        :confirmLoading="submitting"
+      >
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :rules="rules"
+          layout="vertical"
+        >
+          <a-form-item
+            label="模板名称"
+            name="name"
+            :rules="[{ required: true, message: '请输入模板名称' }]"
+          >
+            <a-input 
+              v-model:value="formState.name"
+              placeholder="请输入模板名称"
+              :maxLength="50"
+            />
+          </a-form-item>
+          
+          <a-form-item
+            label="优惠券类型"
+            name="coupon_type"
+            :rules="[{ required: true, message: '请选择优惠券类型' }]"
+          >
+            <a-select
+              v-model:value="formState.coupon_type"
+              @change="handleCouponTypeChange"
+              placeholder="请选择优惠券类型"
+            >
+              <a-select-option value="CASH">现金券</a-select-option>
+              <a-select-option value="PRODUCT">商品兑换券</a-select-option>
+            </a-select>
+          </a-form-item>
+          
+          <a-form-item
+            label="优惠金额"
+            name="amount"
+            v-if="formState.coupon_type === 'CASH'"
+            :rules="[{ required: true, message: '请输入优惠金额' }]"
+          >
+            <a-input-number
+              v-model:value="formState.amount"
+              :min="0"
+              :precision="2"
+              :step="0.5"
+              style="width: 100%"
+              placeholder="请输入优惠金额"
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import PageContainer from '@/components/PageContainer.vue'
+import dayjs from 'dayjs'
+import request from '@/utils/request'
+
+export default defineComponent({
+  components: {
+    PageContainer
+  },
+  
+  setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '模板名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 250
+      },
+      {
+        title: '优惠金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        width: 100,
+        align: 'right'
+      },
+      {
+        title: '优惠券类型',
+        dataIndex: 'coupon_type',
+        key: 'coupon_type',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'create_time',
+        key: 'create_time',
+        width: 180
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 80,
+        fixed: 'right'
+      }
+    ]
+
+    // 获取优惠券类型显示文本
+    const getCouponTypeText = (type) => {
+      const typeMap = {
+        'CASH': '现金券',
+        'PRODUCT': '商品兑换券'
+      }
+      return typeMap[type] || type
+    }
+
+    // 获取优惠券类型标签颜色
+    const getCouponTypeColor = (type) => {
+      const colorMap = {
+        'CASH': 'blue'
+      }
+      return colorMap[type] || 'default'
+    }
+
+    // 格式化日期时间
+    const formatDateTime = (value) => {
+      if (!value) return ''
+      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    // 获取列表数据
+    const fetchData = async () => {
+      try {
+        loading.value = true
+        const params = {
+          skip: (pagination.value.current - 1) * pagination.value.pageSize,
+          limit: pagination.value.pageSize
+        }
+        
+        const res = await request.get('/api/coupon/list', { params })
+        if (res.code === 200) {
+          tableData.value = res.data
+          pagination.value.total = res.data.length
+        } else {
+          message.error(res.message || '获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取优惠券模板列表失败:', error)
+        message.error('获取数据失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 处理表格分页变化
+    const handleTableChange = (pag) => {
+      pagination.value.current = pag.current
+      pagination.value.pageSize = pag.pageSize
+      fetchData()
+    }
+
+    const modalVisible = ref(false)
+    const submitting = ref(false)
+    const isEdit = ref(false)
+    const currentId = ref(null)
+    const formRef = ref(null)
+    
+    const formState = ref({
+      name: '',
+      amount: undefined,
+      coupon_type: undefined
+    })
+
+    // 显示新建模态框
+    const showAddModal = () => {
+      isEdit.value = false
+      currentId.value = null
+      formState.value = {
+        name: '',
+        amount: undefined,
+        coupon_type: undefined
+      }
+      modalVisible.value = true
+    }
+
+    // 显示编辑模态框
+    const handleEdit = (record) => {
+      isEdit.value = true
+      currentId.value = record.id
+      formState.value = {
+        name: record.name,
+        amount: record.coupon_type === 'CASH' ? record.amount : undefined,
+        coupon_type: record.coupon_type
+      }
+      modalVisible.value = true
+    }
+
+    // 处理优惠券类型变化
+    const handleCouponTypeChange = (value) => {
+      if (value === 'PRODUCT') {
+        formState.value.amount = undefined
+      } else if (value === 'CASH' && !formState.value.amount) {
+        formState.value.amount = 0
+      }
+    }
+
+    // 提交表单
+    const handleSubmit = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          submitting.value = true
+          const params = {
+            name: formState.value.name,
+            amount: formState.value.coupon_type === 'CASH' ? formState.value.amount : 0,
+            coupon_type: formState.value.coupon_type
+          }
+          
+          let res
+          if (isEdit.value) {
+            res = await request.put(`/api/coupon/${currentId.value}`, params)
+          } else {
+            res = await request.post('/api/coupon', params)
+          }
+          
+          if (res.code === 200) {
+            message.success(isEdit.value ? '更新成功' : '创建成功')
+            modalVisible.value = false
+            fetchData()
+          } else {
+            message.error(res.message || (isEdit.value ? '更新失败' : '创建失败'))
+          }
+        } catch (error) {
+          console.error(isEdit.value ? '更新优惠券模板失败:' : '创建优惠券模板失败:', error)
+          message.error(isEdit.value ? '更新失败' : '创建失败')
+        } finally {
+          submitting.value = false
+        }
+      })
+    }
+
+    // 取消操作
+    const handleCancel = () => {
+      formRef.value?.resetFields()
+      modalVisible.value = false
+    }
+
+    onMounted(() => {
+      fetchData()
+    })
+
+    return {
+      loading,
+      tableData,
+      columns,
+      pagination,
+      getCouponTypeText,
+      getCouponTypeColor,
+      formatDateTime,
+      handleTableChange,
+      modalVisible,
+      submitting,
+      formState,
+      formRef,
+      showAddModal,
+      handleEdit,
+      handleSubmit,
+      handleCancel,
+      handleCouponTypeChange
+    }
+  }
+})
+</script>
+
+<style scoped>
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+
+:deep(.ant-table-content) {
+  overflow-x: auto;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 24px;
+}
+
+:deep(.ant-input-number) {
+  width: 100% !important;
+}
+</style> 
\ No newline at end of file