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

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

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>
   )
 }