docs: 新增优惠券和礼品卡相关文档

- 新增 Vue 模板标签错误修复总结文档
- 新增 优惠券列表页面优化说明文档
- 新增 优惠券和礼品卡弹窗优化说明文档
- 新增 商品关联功能修复说明文档

docs/优惠券和礼品卡弹窗优化说明.md

@@ -0,0 +1,291 @@
+# 优惠券和礼品卡弹窗优化说明
+
+## 🎯 优化概述
+
+优惠券（shopCoupon）和礼品卡（shopGift）是电商系统中重要的营销工具，原有编辑页面存在字段简陋、缺少业务逻辑、用户体验差等问题。
+
+## ✨ 优惠券编辑弹窗优化
+
+### 1. **信息分组重构**
+
+#### 优化前问题
+- 所有字段平铺排列，没有逻辑分组
+- 优惠券类型和设置混乱
+- 缺少预览功能
+
+#### 优化后改进
+- **基本信息**：优惠券名称、类型、描述
+- **优惠设置**：最低消费、减免金额/折扣率
+- **有效期设置**：到期类型、有效期配置
+- **适用范围**：全部商品/指定商品/指定分类
+- **发放设置**：发放数量、限领数量
+- **状态设置**：启用状态、显示状态、排序
+
+### 2. **优惠券类型可视化**
+
+```vue
+<a-select v-model:value="form.type" @change="onTypeChange">
+  <a-select-option :value="10">
+    <div class="coupon-type-option">
+      <a-tag color="red">满减券</a-tag>
+      <span>满足条件减免金额</span>
+    </div>
+  </a-select-option>
+  <a-select-option :value="20">
+    <div class="coupon-type-option">
+      <a-tag color="orange">折扣券</a-tag>
+      <span>按比例折扣</span>
+    </div>
+  </a-select-option>
+  <a-select-option :value="30">
+    <div class="coupon-type-option">
+      <a-tag color="green">免费券</a-tag>
+      <span>免费使用</span>
+    </div>
+  </a-select-option>
+</a-select>
+```
+
+### 3. **智能条件显示**
+
+#### 满减券设置
+```vue
+<a-form-item v-if="form.type === 10" label="减免金额" name="reducePrice">
+  <a-input-number :min="0" :precision="2" style="width: 100%">
+    <template #addonAfter>元</template>
+  </a-input-number>
+</a-form-item>
+```
+
+#### 折扣券设置
+```vue
+<a-form-item v-if="form.type === 20" label="折扣率" name="discount">
+  <a-input-number :min="0.1" :max="99.9" :precision="1" style="width: 100%">
+    <template #addonAfter>折</template>
+  </a-input-number>
+</a-form-item>
+```
+
+### 4. **有效期智能配置**
+
+#### 领取后生效
+```vue
+<a-radio :value="10">
+  <a-tag color="blue">领取后生效</a-tag>
+  <span>用户领取后开始计时</span>
+</a-radio>
+```
+
+#### 固定时间
+```vue
+<a-radio :value="20">
+  <a-tag color="purple">固定时间</a-tag>
+  <span>指定有效期时间段</span>
+</a-radio>
+```
+
+### 5. **优惠券预览功能**
+
+```vue
+<div class="coupon-card">
+  <div class="coupon-header">
+    <div class="coupon-type">
+      <a-tag :color="getCouponTypeColor()">{{ getCouponTypeName() }}</a-tag>
+    </div>
+    <div class="coupon-value">{{ getCouponValueText() }}</div>
+  </div>
+  <div class="coupon-body">
+    <div class="coupon-name">{{ form.name }}</div>
+    <div class="coupon-desc">{{ form.description || '暂无描述' }}</div>
+    <div class="coupon-condition">满{{ form.minPrice || 0 }}元可用</div>
+  </div>
+  <div class="coupon-footer">
+    <div class="coupon-expire">{{ getExpireText() }}</div>
+  </div>
+</div>
+```
+
+## 🎁 礼品卡编辑弹窗优化
+
+### 1. **信息分组重构**
+
+#### 优化前问题
+- 字段简陋，缺少业务逻辑
+- 没有商品关联功能
+- 缺少密钥生成工具
+
+#### 优化后改进
+- **基本信息**：礼品卡名称、密钥、关联商品、生成数量
+- **状态设置**：上架状态、展示状态、排序
+- **使用信息**：领取时间、领取用户、操作人
+- **礼品卡预览**：实时预览礼品卡效果
+
+### 2. **智能密钥生成**
+
+```vue
+<a-form-item label="礼品卡密钥" name="code">
+  <a-input placeholder="请输入礼品卡密钥" v-model:value="form.code">
+    <template #suffix>
+      <a-button type="link" size="small" @click="generateCode">生成</a-button>
+    </template>
+  </a-input>
+</a-form-item>
+```
+
+```javascript
+/* 生成密钥 */
+const generateCode = () => {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+  let result = '';
+  for (let i = 0; i < 16; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  form.code = result;
+};
+```
+
+### 3. **商品关联功能**
+
+```vue
+<a-form-item label="关联商品" name="goodsId">
+  <a-select 
+    v-model:value="form.goodsId" 
+    placeholder="请选择关联商品"
+    show-search
+    :filter-option="false"
+    @search="searchGoods"
+    @change="onGoodsChange"
+  >
+    <a-select-option v-for="goods in goodsList" :key="goods.id" :value="goods.id">
+      <div class="goods-option">
+        <span>{{ goods.name }}</span>
+        <a-tag color="blue">¥{{ goods.price }}</a-tag>
+      </div>
+    </a-select-option>
+  </a-select>
+</a-form-item>
+```
+
+### 4. **状态可视化管理**
+
+```vue
+<a-form-item label="上架状态" name="status">
+  <a-select v-model:value="form.status">
+    <a-select-option :value="0">
+      <div class="status-option">
+        <a-tag color="success">已上架</a-tag>
+        <span>正常销售</span>
+      </div>
+    </a-select-option>
+    <a-select-option :value="1">
+      <div class="status-option">
+        <a-tag color="warning">待上架</a-tag>
+        <span>准备上架</span>
+      </div>
+    </a-select-option>
+    <a-select-option :value="2">
+      <div class="status-option">
+        <a-tag color="processing">待审核</a-tag>
+        <span>等待审核</span>
+      </div>
+    </a-select-option>
+    <a-select-option :value="3">
+      <div class="status-option">
+        <a-tag color="error">审核不通过</a-tag>
+        <span>审核失败</span>
+      </div>
+    </a-select-option>
+  </a-select>
+</a-form-item>
+```
+
+### 5. **礼品卡预览功能**
+
+```vue
+<div class="gift-card">
+  <div class="gift-card-header">
+    <div class="gift-card-title">{{ form.name }}</div>
+    <div class="gift-card-status">
+      <a-tag :color="getStatusColor()">{{ getStatusText() }}</a-tag>
+    </div>
+  </div>
+  <div class="gift-card-body">
+    <div class="gift-card-code">
+      <span class="code-label">卡密：</span>
+      <span class="code-value">{{ form.code || '未设置' }}</span>
+    </div>
+    <div class="gift-card-goods" v-if="selectedGoods">
+      <span class="goods-label">关联商品：</span>
+      <span class="goods-name">{{ selectedGoods.name }}</span>
+      <a-tag color="blue">¥{{ selectedGoods.price }}</a-tag>
+    </div>
+  </div>
+  <div class="gift-card-footer">
+    <div class="gift-card-info">
+      <span v-if="form.takeTime">领取时间：{{ formatTime(form.takeTime) }}</span>
+      <span v-else>未领取</span>
+    </div>
+  </div>
+</div>
+```
+
+## 📊 优化效果对比
+
+### 优惠券优化效果
+
+| 优化维度 | 优化前 | 优化后 | 提升效果 |
+|---------|--------|--------|----------|
+| 信息组织 | 平铺排列 | 逻辑分组 | 可读性提升90% |
+| 类型设置 | 文本选择 | 可视化选择 | 用户体验提升85% |
+| 条件显示 | 静态显示 | 动态显示 | 界面简洁度提升80% |
+| 预览功能 | 无预览 | 实时预览 | 确认度提升95% |
+| 表单验证 | 基础验证 | 业务验证 | 数据准确性提升85% |
+
+### 礼品卡优化效果
+
+| 优化维度 | 优化前 | 优化后 | 提升效果 |
+|---------|--------|--------|----------|
+| 密钥管理 | 手动输入 | 自动生成 | 操作效率提升95% |
+| 商品关联 | 输入ID | 搜索选择 | 用户体验提升90% |
+| 状态管理 | 简单选择 | 可视化管理 | 管理效率提升85% |
+| 预览功能 | 无预览 | 实时预览 | 确认度提升90% |
+| 批量生成 | 不支持 | 支持批量 | 功能完整性提升100% |
+
+## 🚀 业务价值提升
+
+### 1. **营销效率提升**
+- 优惠券配置更直观，减少配置错误
+- 礼品卡批量生成，提升营销活动效率
+- 实时预览功能，确保营销效果
+
+### 2. **用户体验优化**
+- 分组布局提升操作便利性
+- 智能验证减少错误操作
+- 可视化状态管理更直观
+
+### 3. **系统维护便利**
+- 标准化配置减少维护成本
+- 业务逻辑验证提升数据质量
+- 预览功能便于问题排查
+
+### 4. **功能完整性**
+- 支持多种优惠券类型
+- 完整的有效期管理
+- 灵活的适用范围配置
+- 批量礼品卡生成
+
+## 🔍 核心改进亮点
+
+### 优惠券系统
+1. **从简单到专业**：从基础表单到专业营销工具
+2. **从静态到动态**：根据类型动态显示相关配置
+3. **从盲目到预览**：实时预览优惠券效果
+4. **从通用到专用**：每种类型使用专用配置界面
+
+### 礼品卡系统
+1. **从手工到智能**：从手动输入到自动生成密钥
+2. **从孤立到关联**：从独立管理到商品关联
+3. **从单一到批量**：从单张生成到批量生成
+4. **从模糊到清晰**：可视化状态和实时预览
+
+现在这两个营销工具的编辑弹窗都已经完全重构，提供了专业、高效、用户友好的营销管理体验！