refactor(user/gift): 修复 CSS 兼容性问题并优化礼品卡功能

- 移除了不兼容的 CSS 类名，解决了 WXSS 编译错误
- 优化了礼品卡详细页面，添加了二维码弹窗功能
- 简化了礼品卡统计组件，提高了页面加载速度
- 修复了 SimpleQRCodeModal组件中的样式问题
- 优化了验证页面中的布局结构

src/components/GiftCard.tsx

@@ -1,10 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { View, Text } from '@tarojs/components'
-import { Button, Tag, Rate } from '@nutui/nutui-react-taro'
-import { Gift, Clock, Location, Phone, ShoppingCart, Tips, QrCode } from '@nutui/icons-react-taro'
-import Taro from '@tarojs/taro'
+import { Tag, Rate } from '@nutui/nutui-react-taro'
+import { Gift, Clock, Location } from '@nutui/icons-react-taro'
 import dayjs from 'dayjs'
-import GiftCardQRCode from './GiftCardQRCode'
 import './GiftCard.scss'
 
 export interface GiftCardProps {
@@ -91,13 +89,9 @@ export interface GiftCardProps {
 }
 
 const GiftCard: React.FC<GiftCardProps> = ({
-  id,
   name,
   goodsName,
-  description,
   code,
-  goodsImage,
-  goodsImages,
   faceValue,
   originalPrice,
   type = 10,
@@ -105,23 +99,16 @@ const GiftCard: React.FC<GiftCardProps> = ({
   expireTime,
   useTime,
   useLocation,
-  contactInfo,
   goodsInfo,
   promotionInfo,
   showCode = false,
-  showUseBtn = false,
-  showDetailBtn = true,
   showGoodsDetail = true,
   theme = 'gold',
-  onUse,
-  onDetail,
   onClick
 }) => {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0)
-  const [showQRCode, setShowQRCode] = useState(false)
 
   // 获取显示名称，优先使用商品名称
-  const displayName = goodsName || name
+  // const displayName = goodsName || name
   // 获取礼品卡类型文本
   const getTypeText = () => {
     switch (type) {
@@ -197,29 +184,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
     return code.replace(/(.{4})/g, '$1 ').trim()
   }
 
-  // 获取商品图片列表
-  const getImageList = () => {
-    if (goodsImages && goodsImages.length > 0) {
-      return goodsImages
-    }
-    if (goodsImage) {
-      return [goodsImage]
-    }
-    return []
-  }
-
-  // 计算折扣百分比
-  const getDiscountPercent = () => {
-    if (!originalPrice || !faceValue) return null
-    const original = parseFloat(originalPrice)
-    const current = parseFloat(faceValue)
-    if (original <= current) return null
-    return Math.round(((original - current) / original) * 100)
-  }
-
   const statusInfo = getStatusInfo()
-  const imageList = getImageList()
-  const discountPercent = getDiscountPercent()
 
   return (
     <View
@@ -272,9 +237,6 @@ const GiftCard: React.FC<GiftCardProps> = ({
                 <View className="rating-info">
                   <Rate
                     value={goodsInfo.rating}
-                    readonly
-                    size="12"
-                    spacing="2"
                   />
                   <Text className="rating-text">{goodsInfo.rating}</Text>
                   {goodsInfo.reviewCount && (
@@ -330,12 +292,11 @@ const GiftCard: React.FC<GiftCardProps> = ({
             {goodsInfo.applicableStores && goodsInfo.applicableStores.length > 0 && (
               <View className="instruction-section">
                 <View className="section-header">
-                  <ShoppingCart size="14" className="section-icon" />
                   <Text className="section-title">适用门店</Text>
                 </View>
                 <View className="store-list">
                   {goodsInfo.applicableStores.map((store, index) => (
-                    <Tag key={index} size="small" plain className="store-tag">
+                    <Tag key={index} plain className="store-tag">
                       {store}
                     </Tag>
                   ))}
@@ -371,33 +332,28 @@ const GiftCard: React.FC<GiftCardProps> = ({
       </View>
 
       {/* 卡片底部操作 */}
-      <View className="gift-card-footer">
-        <View className="footer-info">
-          {contactInfo && (
-            <View className="contact-info">
-              <Phone size="12" className="text-gray-400" />
-              <Text className="contact-text">{contactInfo}</Text>
-            </View>
-          )}
-        </View>
+      {/*<View className="gift-card-footer">*/}
+      {/*  <View className="footer-info">*/}
+      {/*    {contactInfo && (*/}
+      {/*      <View className="contact-info">*/}
+      {/*        <Phone size="12" className="text-gray-400" />*/}
+      {/*        <Text className="contact-text">{contactInfo}</Text>*/}
+      {/*      </View>*/}
+      {/*    )}*/}
+      {/*  </View>*/}
 
-        <View className="footer-actions">
-          {showUseBtn && status === 0 && (
-            <Button
-              size="small"
-              type="primary"
-              icon={<QrCode />}
-              className={`use-btn ${getThemeClass()}`}
-              onClick={(e) => {
-                e.stopPropagation()
-                setShowQRCode(true)
-              }}
-            >
-              立即使用
-            </Button>
-          )}
-        </View>
-      </View>
+      {/*  <View className="footer-actions">*/}
+      {/*    {showUseBtn && status === 0 && (*/}
+      {/*      <Button*/}
+      {/*        size="small"*/}
+      {/*        type="primary"*/}
+      {/*        className={`use-btn ${getThemeClass()}`}*/}
+      {/*      >*/}
+      {/*        立即使用*/}
+      {/*      </Button>*/}
+      {/*    )}*/}
+      {/*  </View>*/}
+      {/*</View>*/}
 
       {/* 状态遮罩 */}
       {status !== 0 && (
@@ -408,22 +364,6 @@ const GiftCard: React.FC<GiftCardProps> = ({
         </View>
       )}
 
-      {/* 二维码核销弹窗 */}
-      <GiftCardQRCode
-        visible={showQRCode}
-        onClose={() => setShowQRCode(false)}
-        giftCard={{
-          id,
-          name,
-          goodsName,
-          code,
-          faceValue,
-          type,
-          status,
-          expireTime,
-          contactInfo
-        }}
-      />
     </View>
   )
 }