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

- 修改礼品卡颜色主题,使用渐变色提升视觉效果
- 添加礼品卡核销功能,包括生成和验证核销码
-优化礼品卡组件,增加状态显示和使用说明
- 新增礼品卡颜色测试页面,用于验证颜色

src/components/GiftCard.scss

@@ -20,21 +20,22 @@
   // 主题色彩
   &.gift-card-gold {
     .gift-card-header {
-      background: #ffd700;
+      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
     }
     .use-btn {
-      background: #ffd700;
+      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
       border: none;
       color: #333;
+      font-weight: 600;
     }
   }
 
   &.gift-card-silver {
     .gift-card-header {
-      background: #c0c0c0;
+      background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
     }
     .use-btn {
-      background: #c0c0c0;
+      background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
       border: none;
       color: #333;
     }
@@ -42,45 +43,49 @@
 
   &.gift-card-bronze {
     .gift-card-header {
-      background: #cd7f32;
+      background: linear-gradient(135deg, #cd7f32 0%, #b8722c 100%);
     }
     .use-btn {
-      background: #cd7f32;
+      background: linear-gradient(135deg, #cd7f32 0%, #b8722c 100%);
       border: none;
       color: #fff;
+      font-weight: 600;
     }
   }
 
   &.gift-card-blue {
     .gift-card-header {
-      background: #4a90e2;
+      background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
     }
     .use-btn {
-      background: #4a90e2;
+      background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
       border: none;
       color: #fff;
+      font-weight: 600;
     }
   }
 
   &.gift-card-green {
     .gift-card-header {
-      background: #5cb85c;
+      background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
     }
     .use-btn {
-      background: #5cb85c;
+      background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
       border: none;
       color: #fff;
+      font-weight: 600;
     }
   }
 
   &.gift-card-purple {
     .gift-card-header {
-      background: #9b59b6;
+      background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
     }
     .use-btn {
-      background: #9b59b6;
+      background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
       border: none;
       color: #fff;
+      font-weight: 600;
     }
   }
 
@@ -519,7 +524,6 @@
       color: #fff;
       padding: 8px 16px;
       border-radius: 20px;
-      font-size: 16px;
       font-weight: 600;
     }
   }

src/components/GiftCard.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
-import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { Button, Tag, Rate } from '@nutui/nutui-react-taro'
-import { Gift, Clock, Location, Phone, Star, Eye, ShoppingCart, Tips } from '@nutui/icons-react-taro'
+import { Gift, Clock, Location, Phone, ShoppingCart, Tips, QrCode } from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
 import dayjs from 'dayjs'
+import GiftCardQRCode from './GiftCardQRCode'
 import './GiftCard.scss'
 
 export interface GiftCardProps {
@@ -26,8 +28,8 @@ export interface GiftCardProps {
   originalPrice?: string
   /** 礼品卡类型：10-实物礼品卡 20-虚拟礼品卡 30-服务礼品卡 */
   type?: number
-  /** 使用状态：0-可用 1-已使用 2-已过期 */
-  useStatus?: number
+  /** 状态：0-未使用 1-已使用 2-失效 */
+  status?: number
   /** 过期时间 */
   expireTime?: string
   /** 使用时间 */
@@ -99,7 +101,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
   faceValue,
   originalPrice,
   type = 10,
-  useStatus = 0,
+  status = 0,
   expireTime,
   useTime,
   useLocation,
@@ -116,6 +118,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
   onClick
 }) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0)
+  const [showQRCode, setShowQRCode] = useState(false)
 
   // 获取显示名称，优先使用商品名称
   const displayName = goodsName || name
@@ -129,12 +132,12 @@ const GiftCard: React.FC<GiftCardProps> = ({
     }
   }
 
-  // 获取使用状态信息
+  // 获取状态信息
   const getStatusInfo = () => {
-    switch (useStatus) {
+    switch (status) {
       case 0:
         return {
-          text: '可使用',
+          text: '未使用',
           color: 'success' as const,
           bgColor: 'bg-green-100',
           textColor: 'text-green-600'
@@ -148,7 +151,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
         }
       case 2:
         return {
-          text: '已过期',
+          text: '失效',
           color: 'danger' as const,
           bgColor: 'bg-red-100',
           textColor: 'text-red-600'
@@ -220,7 +223,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
 
   return (
     <View
-      className={`gift-card ${getThemeClass()} ${useStatus !== 0 ? 'disabled' : ''}`}
+      className={`gift-card ${getThemeClass()} ${status !== 0 ? 'disabled' : ''}`}
       onClick={onClick}
     >
       {/* 卡片头部 */}
@@ -230,6 +233,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
         </View>
         <View className="gift-card-title">
           <Text className="title-text">{getTypeText()}</Text>
+          <Text className="type-text">{name}</Text>
         </View>
         <View className="gift-card-status">
           <Tag type={statusInfo.color}>{statusInfo.text}</Tag>
@@ -343,14 +347,14 @@ const GiftCard: React.FC<GiftCardProps> = ({
 
         {/* 时间信息 */}
         <View className="gift-time-info">
-          {useStatus === 1 && useTime && (
+          {status === 1 && useTime && (
             <View className="time-item">
               <Clock size="14" className="text-gray-400" />
               <Text className="time-text">使用时间：{dayjs(useTime).format('YYYY-MM-DD HH:mm')}</Text>
             </View>
           )}
 
-          {useStatus === 0 && expireTime && (
+          {status === 0 && expireTime && (
             <View className="time-item">
               <Clock size="14" className="text-orange-500" />
               <Text className="time-text">{formatExpireTime()}</Text>
@@ -378,14 +382,15 @@ const GiftCard: React.FC<GiftCardProps> = ({
         </View>
 
         <View className="footer-actions">
-          {showUseBtn && useStatus === 0 && (
+          {showUseBtn && status === 0 && (
             <Button
               size="small"
               type="primary"
+              icon={<QrCode />}
               className={`use-btn ${getThemeClass()}`}
               onClick={(e) => {
                 e.stopPropagation()
-                onUse?.()
+                setShowQRCode(true)
               }}
             >
               立即使用
@@ -395,13 +400,30 @@ const GiftCard: React.FC<GiftCardProps> = ({
       </View>
 
       {/* 状态遮罩 */}
-      {useStatus !== 0 && (
+      {status !== 0 && (
         <View className="gift-card-overlay">
           <View className="overlay-badge">
             {statusInfo.text}
           </View>
         </View>
       )}
+
+      {/* 二维码核销弹窗 */}
+      <GiftCardQRCode
+        visible={showQRCode}
+        onClose={() => setShowQRCode(false)}
+        giftCard={{
+          id,
+          name,
+          goodsName,
+          code,
+          faceValue,
+          type,
+          status,
+          expireTime,
+          contactInfo
+        }}
+      />
     </View>
   )
 }

src/components/GiftCardQRCode.tsx

@@ -0,0 +1,333 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Button, Popup, Tag } from '@nutui/nutui-react-taro'
+import { Close, Copy, Share, Refresh, QrCode } from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
+import dayjs from 'dayjs'
+import { generateVerificationCode } from '@/api/shop/shopGift'
+
+export interface GiftCardQRCodeProps {
+  /** 是否显示弹窗 */
+  visible: boolean
+  /** 关闭弹窗回调 */
+  onClose: () => void
+  /** 礼品卡信息 */
+  giftCard: {
+    id: number
+    name?: string
+    goodsName?: string
+    code?: string
+    faceValue?: string
+    type?: number
+    status?: number
+    expireTime?: string
+    contactInfo?: string
+  }
+}
+
+const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
+  visible,
+  onClose,
+  giftCard
+}) => {
+  const [loading, setLoading] = useState(false)
+  const [verificationCode, setVerificationCode] = useState<string>('')
+  const [qrData, setQrData] = useState<string>('')
+
+  // 生成核销码（6位数字）
+  const generateVerificationCode = () => {
+    return Math.random().toString().slice(2, 8)
+  }
+
+  // 生成二维码数据
+  const generateQRData = () => {
+    const code = generateVerificationCode()
+    setVerificationCode(code)
+
+    const data = {
+      type: 'gift_card_verification',
+      giftId: giftCard.id,
+      giftCode: giftCard.code,
+      verificationCode: code,
+      faceValue: giftCard.faceValue,
+      timestamp: Date.now(),
+      expireTime: giftCard.expireTime
+    }
+
+    const jsonData = JSON.stringify(data)
+    setQrData(jsonData)
+    return jsonData
+  }
+
+  // 生成二维码（调用后端API）
+  const generateQRCode = async () => {
+    try {
+      setLoading(true)
+
+      // 调用后端API生成核销码
+      const result = await generateVerificationCode(giftCard.id)
+      if (result) {
+        setVerificationCode(result.verificationCode)
+
+        // 生成二维码数据
+        const data = {
+          type: 'gift_card_verification',
+          giftId: giftCard.id,
+          giftCode: giftCard.code,
+          verificationCode: result.verificationCode,
+          faceValue: giftCard.faceValue,
+          timestamp: Date.now(),
+          expireTime: giftCard.expireTime,
+          codeExpireTime: result.expireTime
+        }
+
+        setQrData(JSON.stringify(data))
+        console.log('二维码数据:', data)
+      }
+    } catch (error) {
+      console.error('生成二维码失败:', error)
+      Taro.showToast({
+        title: '生成核销码失败',
+        icon: 'error'
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // 复制核销码
+  const copyVerificationCode = () => {
+    Taro.setClipboardData({
+      data: verificationCode,
+      success: () => {
+        Taro.showToast({
+          title: '核销码已复制',
+          icon: 'success'
+        })
+      }
+    })
+  }
+
+  // 复制礼品卡码
+  const copyGiftCode = () => {
+    if (giftCard.code) {
+      Taro.setClipboardData({
+        data: giftCard.code,
+        success: () => {
+          Taro.showToast({
+            title: '兑换码已复制',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+
+  // 分享二维码
+  const shareQRCode = () => {
+    // 这里可以实现分享功能
+    Taro.showToast({
+      title: '分享功能开发中',
+      icon: 'none'
+    })
+  }
+
+  // 刷新二维码
+  const refreshQRCode = () => {
+    generateQRCode()
+  }
+
+  // 获取状态文本
+  const getStatusText = (status?: number) => {
+    switch (status) {
+      case 0: return { text: '未使用', color: 'success' }
+      case 1: return { text: '已使用', color: 'warning' }
+      case 2: return { text: '失效', color: 'danger' }
+      default: return { text: '未知', color: 'default' }
+    }
+  }
+
+  // 获取类型文本
+  const getTypeText = (type?: number) => {
+    switch (type) {
+      case 10: return '实物礼品卡'
+      case 20: return '虚拟礼品卡'
+      case 30: return '服务礼品卡'
+      default: return '礼品卡'
+    }
+  }
+
+  // 弹窗打开时生成二维码
+  useEffect(() => {
+    if (visible && giftCard.id) {
+      generateQRCode()
+    }
+  }, [visible, giftCard.id])
+
+  const statusInfo = getStatusText(giftCard.status)
+
+  return (
+    <Popup
+      visible={visible}
+      position="center"
+      closeable
+      closeIcon={<Close />}
+      onClose={onClose}
+      style={{ width: '90%', maxWidth: '400px' }}
+    >
+      <View className="p-6">
+        {/* 标题 */}
+        <View className="text-center mb-4">
+          <Text className="text-lg font-bold">礼品卡核销</Text>
+          <Text className="text-sm text-gray-500 block mt-1">
+            请向门店工作人员出示此二维码
+          </Text>
+        </View>
+
+        {/* 礼品卡信息 */}
+        <View className="bg-gray-50 rounded-lg p-4 mb-4">
+          <View className="flex justify-between items-start mb-2">
+            <Text className="font-medium text-base">
+              {giftCard.goodsName || giftCard.name}
+            </Text>
+            <Tag type={statusInfo.color} size="small">
+              {statusInfo.text}
+            </Tag>
+          </View>
+
+          <View className="flex justify-between items-center mb-2">
+            <Text className="text-sm text-gray-600">面值</Text>
+            <Text className="text-lg font-bold text-red-500">
+              ¥{giftCard.faceValue}
+            </Text>
+          </View>
+
+          <View className="flex justify-between items-center mb-2">
+            <Text className="text-sm text-gray-600">类型</Text>
+            <Text className="text-sm">{getTypeText(giftCard.type)}</Text>
+          </View>
+
+          {giftCard.expireTime && (
+            <View className="flex justify-between items-center">
+              <Text className="text-sm text-gray-600">有效期至</Text>
+              <Text className="text-sm text-orange-600">
+                {dayjs(giftCard.expireTime).format('YYYY-MM-DD')}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {/* 二维码区域 */}
+        <View className="text-center mb-4">
+          {loading ? (
+            <View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
+              <Text className="text-gray-500">生成中...</Text>
+            </View>
+          ) : verificationCode ? (
+            <View className="relative">
+              {/* 模拟二维码显示区域 */}
+              <View className="w-48 h-48 mx-auto bg-white border-2 border-gray-300 rounded-lg flex flex-col items-center justify-center">
+                <QrCode size="80" className="text-gray-800 mb-2" />
+                <Text className="text-xs text-gray-600">核销二维码</Text>
+                <Text className="text-xs text-gray-500 mt-1">
+                  ID: {giftCard.id}
+                </Text>
+              </View>
+              <Button
+                size="small"
+                fill="outline"
+                icon={<Refresh />}
+                className="absolute top-2 right-2"
+                onClick={refreshQRCode}
+              >
+                刷新
+              </Button>
+            </View>
+          ) : (
+            <View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
+              <Text className="text-gray-500">生成失败</Text>
+            </View>
+          )}
+        </View>
+
+        {/* 核销码 */}
+        {verificationCode && (
+          <View className="bg-blue-50 rounded-lg p-3 mb-4">
+            <View className="flex justify-between items-center">
+              <View>
+                <Text className="text-sm text-blue-600 mb-1">核销码</Text>
+                <Text className="text-xl font-mono font-bold text-blue-800">
+                  {verificationCode}
+                </Text>
+              </View>
+              <Button
+                size="small"
+                fill="outline"
+                icon={<Copy />}
+                onClick={copyVerificationCode}
+              >
+                复制
+              </Button>
+            </View>
+          </View>
+        )}
+
+        {/* 兑换码 */}
+        {giftCard.code && (
+          <View className="bg-green-50 rounded-lg p-3 mb-4">
+            <View className="flex justify-between items-center">
+              <View>
+                <Text className="text-sm text-green-600 mb-1">兑换码</Text>
+                <Text className="text-base font-mono text-green-800">
+                  {giftCard.code}
+                </Text>
+              </View>
+              <Button
+                size="small"
+                fill="outline"
+                icon={<Copy />}
+                onClick={copyGiftCode}
+              >
+                复制
+              </Button>
+            </View>
+          </View>
+        )}
+
+        {/* 操作按钮 */}
+        <View className="flex gap-3">
+          <Button
+            size="large"
+            fill="outline"
+            icon={<Share />}
+            onClick={shareQRCode}
+            className="flex-1"
+          >
+            分享
+          </Button>
+          <Button
+            size="large"
+            type="primary"
+            onClick={onClose}
+            className="flex-1"
+          >
+            完成
+          </Button>
+        </View>
+
+        {/* 使用说明 */}
+        <View className="mt-4 p-3 bg-yellow-50 rounded-lg">
+          <Text className="text-sm text-yellow-800 font-medium mb-2">使用说明：</Text>
+          <View className="space-y-1">
+            <Text className="text-xs text-yellow-700">• 请向门店工作人员出示此二维码或核销码</Text>
+            <Text className="text-xs text-yellow-700">• 工作人员扫码后即可完成核销</Text>
+            <Text className="text-xs text-yellow-700">• 每次使用会生成新的核销码，确保安全</Text>
+            <Text className="text-xs text-yellow-700">• 如有问题请联系客服：{giftCard.contactInfo || '400-800-8888'}</Text>
+          </View>
+        </View>
+      </View>
+    </Popup>
+  )
+}
+
+export default GiftCardQRCode