feat(礼品卡): 优化颜色主题并添加核销功能

- 修改礼品卡颜色主题,使用渐变色提升视觉效果 - 添加礼品卡核销功能,包括生成和验证核销码 -优化礼品卡组件,增加状态显示和使用说明 - 新增礼品卡颜色测试页面,用于验证颜色
2025-08-17 10:01:56 +08:00
parent ecb5d9059a
commit ecfbdc0286
22 changed files with 2821 additions and 116 deletions
--- a/src/user/gift/status-test.tsx
+++ b/src/user/gift/status-test.tsx
@@ -0,0 +1,219 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import GiftCard from '@/components/GiftCard'
+import { ShopGift } from '@/api/shop/shopGift/model'
+
+const StatusTest: React.FC = () => {
+  // 测试不同状态的礼品卡
+  const testGifts: ShopGift[] = [
+    {
+      id: 1,
+      name: '未使用礼品卡',
+      goodsName: '杜尔伯特草原奶香牛上脑（2kg，分4小包）',
+      goodsImage: 'https://img.alicdn.com/imgextra/i1/2206571109/O1CN01QZxQJJ1Uw8QZxQJJ_!!2206571109.jpg',
+      description: '未使用状态的礼品卡',
+      code: 'UNUSED1234567890',
+      goodsId: 101,
+      faceValue: '200',
+      type: 10,
+      status: 0, // 未使用
+      expireTime: '2024-12-31 23:59:59',
+      instructions: '适用于实物商品兑换',
+      contactInfo: '400-800-8888'
+    },
+    {
+      id: 2,
+      name: '已使用礼品卡',
+      goodsName: '星巴克经典拿铁咖啡券',
+      goodsImage: 'https://img.alicdn.com/imgextra/i2/2206571109/O1CN01ABC123_!!2206571109.jpg',
+      description: '已使用状态的礼品卡',
+      code: 'USED001234567890',
+      goodsId: 102,
+      faceValue: '100',
+      type: 20,
+      status: 1, // 已使用
+      useTime: '2024-08-15 14:30:00',
+      useLocation: '星巴克王府井店',
+      instructions: '适用于虚拟商品兑换',
+      contactInfo: '400-800-8888'
+    },
+    {
+      id: 3,
+      name: '失效礼品卡',
+      goodsName: '海底捞4人套餐券',
+      goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
+      description: '失效状态的礼品卡',
+      code: 'INVALID1234567890',
+      goodsId: 103,
+      faceValue: '300',
+      type: 30,
+      status: 2, // 失效
+      expireTime: '2024-07-31 23:59:59',
+      instructions: '适用于服务类商品兑换',
+      contactInfo: '400-800-8888'
+    }
+  ]
+
+  // 转换数据格式
+  const transformGiftData = (gift: ShopGift) => {
+    return {
+      id: gift.id || 0,
+      name: gift.name || '礼品卡',
+      goodsName: gift.goodsName,
+      description: gift.description || gift.instructions,
+      code: gift.code,
+      goodsImage: gift.goodsImage,
+      faceValue: gift.faceValue,
+      type: gift.type,
+      status: gift.status, // 使用 status 字段
+      expireTime: gift.expireTime,
+      useTime: gift.useTime,
+      useLocation: gift.useLocation,
+      contactInfo: gift.contactInfo,
+      goodsInfo: {
+        ...((gift.goodsName || gift.goodsId) && {
+          specification: `礼品卡面值：¥${gift.faceValue}`,
+          category: getTypeText(gift.type),
+          tags: [
+            getTypeText(gift.type),
+            getStatusText(gift.status),
+            '测试卡片'
+          ].filter(Boolean),
+          instructions: [
+            '这是状态测试卡片',
+            '请检查状态显示是否正确',
+            '不可兑换现金'
+          ],
+          notices: [
+            '这是测试数据',
+            '请勿实际使用',
+            '仅用于状态测试'
+          ]
+        })
+      },
+      showCode: gift.status === 0, // 只有未使用状态显示兑换码
+      showUseBtn: gift.status === 0, // 只有未使用状态显示使用按钮
+      showDetailBtn: true,
+      showGoodsDetail: true,
+      theme: getThemeByType(gift.type),
+      onUse: () => console.log('使用:', gift.goodsName || gift.name),
+      onDetail: () => console.log('详情:', gift.goodsName || gift.name),
+      onClick: () => console.log('点击:', gift.goodsName || gift.name)
+    }
+  }
+
+  const getTypeText = (type?: number): string => {
+    switch (type) {
+      case 10: return '实物礼品卡'
+      case 20: return '虚拟礼品卡'
+      case 30: return '服务礼品卡'
+      default: return '通用礼品卡'
+    }
+  }
+
+  const getStatusText = (status?: number): string => {
+    switch (status) {
+      case 0: return '未使用'
+      case 1: return '已使用'
+      case 2: return '失效'
+      default: return '未知状态'
+    }
+  }
+
+  const getThemeByType = (type?: number): 'gold' | 'silver' | 'bronze' | 'blue' | 'green' | 'purple' => {
+    switch (type) {
+      case 10: return 'gold'
+      case 20: return 'blue'
+      case 30: return 'green'
+      default: return 'purple'
+    }
+  }
+
+  const getExpectedBehavior = (status?: number): string => {
+    switch (status) {
+      case 0: return '显示兑换码和使用按钮'
+      case 1: return '显示使用时间，无兑换码和使用按钮'
+      case 2: return '显示失效状态，无兑换码和使用按钮'
+      default: return '未知行为'
+    }
+  }
+
+  return (
+    <View className="bg-gray-50 min-h-screen">
+      {/* 页面标题 */}
+      <View className="bg-white px-4 py-3 border-b border-gray-100">
+        <Text className="text-lg font-bold text-center">
+          礼品卡状态字段测试
+        </Text>
+        <Text className="text-sm text-gray-600 text-center mt-1">
+          验证 status 字段替代 useStatus 字段
+        </Text>
+      </View>
+
+      {/* 状态说明 */}
+      <View className="bg-white mx-4 mt-4 p-4 rounded-lg">
+        <Text className="font-bold mb-2">状态字段说明：</Text>
+        <View className="space-y-1">
+          <Text className="text-sm text-gray-600">• status=0 (未使用) → 显示"未使用"标签</Text>
+          <Text className="text-sm text-gray-600">• status=1 (已使用) → 显示"已使用"标签</Text>
+          <Text className="text-sm text-gray-600">• status=2 (失效) → 显示"失效"标签</Text>
+        </View>
+      </View>
+
+      {/* 修改说明 */}
+      <View className="bg-blue-50 mx-4 mt-4 p-4 rounded-lg">
+        <Text className="font-bold mb-2 text-blue-800">字段修改说明：</Text>
+        <View className="space-y-1">
+          <Text className="text-sm text-blue-700">✅ useStatus 字段已废弃</Text>
+          <Text className="text-sm text-blue-700">✅ 使用 status 字段替代</Text>
+          <Text className="text-sm text-blue-700">✅ 状态文本更新：可用→未使用，已过期→失效</Text>
+          <Text className="text-sm text-blue-700">✅ Tab标签文本同步更新</Text>
+        </View>
+      </View>
+
+      {/* 礼品卡列表 */}
+      <View className="p-4">
+        {testGifts.map((gift, index) => (
+          <View key={gift.id} className="mb-4">
+            <View className="bg-green-50 px-3 py-2 rounded-t-lg">
+              <Text className="text-sm font-medium text-green-800">
+                测试 {index + 1}: status={gift.status} → {getStatusText(gift.status)}
+              </Text>
+              <Text className="text-xs text-green-600">
+                预期行为: {getExpectedBehavior(gift.status)}
+              </Text>
+            </View>
+            <GiftCard {...transformGiftData(gift)} />
+          </View>
+        ))}
+      </View>
+
+      {/* 验证清单 */}
+      <View className="bg-white mx-4 mb-4 p-4 rounded-lg">
+        <Text className="font-bold mb-2">验证清单：</Text>
+        <View className="space-y-1">
+          <Text className="text-sm text-gray-600">□ status=0 的卡片显示"未使用"标签</Text>
+          <Text className="text-sm text-gray-600">□ status=0 的卡片显示兑换码和使用按钮</Text>
+          <Text className="text-sm text-gray-600">□ status=1 的卡片显示"已使用"标签</Text>
+          <Text className="text-sm text-gray-600">□ status=1 的卡片显示使用时间</Text>
+          <Text className="text-sm text-gray-600">□ status=1 的卡片不显示兑换码和使用按钮</Text>
+          <Text className="text-sm text-gray-600">□ status=2 的卡片显示"失效"标签</Text>
+          <Text className="text-sm text-gray-600">□ status=2 的卡片有状态遮罩</Text>
+          <Text className="text-sm text-gray-600">□ 所有非0状态的卡片都有disabled样式</Text>
+        </View>
+      </View>
+
+      {/* API 参数说明 */}
+      <View className="bg-yellow-50 mx-4 mb-4 p-4 rounded-lg">
+        <Text className="font-bold mb-2 text-yellow-800">API 参数更新：</Text>
+        <View className="space-y-1">
+          <Text className="text-sm text-yellow-700">• 筛选参数：useStatus → status</Text>
+          <Text className="text-sm text-yellow-700">• 返回字段：useStatus → status</Text>
+          <Text className="text-sm text-yellow-700">• 状态值：0未使用 1已使用 2失效</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default StatusTest