refactor(components): 优化多个组件的样式和结构

-调整了多个组件的图标使用 - 优化了部分组件的布局结构 - 移除了不必要的空行和空格 -统一了部分样式类名的使用
2025-08-17 12:01:17 +08:00
parent 6d66b7abbf
commit ee28aeeff9
27 changed files with 56 additions and 3192 deletions
--- a/src/components/CouponShare.tsx
+++ b/src/components/CouponShare.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text } from '@tarojs/components'
-import { Button, Popup } from '@nutui/nutui-react-taro'
-import { Share, Wechat, QQ, Weibo, Link, Close } from '@nutui/icons-react-taro'
+import { Popup } from '@nutui/nutui-react-taro'
+import { Share, Link, Close } from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'

 export interface CouponShareProps {
@@ -28,10 +28,10 @@ const CouponShare: React.FC<CouponShareProps> = ({
  // 生成分享文案
  const generateShareText = () => {
    const typeText = coupon.type === 10 ? '满减券' : coupon.type === 20 ? '折扣券' : '免费券'
-    const amountText = coupon.type === 10 ? `¥${coupon.amount}` : 
+    const amountText = coupon.type === 10 ? `¥${coupon.amount}` :
                      coupon.type === 20 ? `${coupon.amount}折` : '免费'
    const conditionText = coupon.minAmount ? `满${coupon.minAmount}元可用` : '无门槛'
-    
+
    return `🎁 ${coupon.name}\n💰 ${amountText} ${typeText}\n📋 ${conditionText}\n快来领取吧！`
  }

@@ -66,7 +66,7 @@ const CouponShare: React.FC<CouponShareProps> = ({
    const shareUrl = generateShareUrl()
    const shareText = generateShareText()
    const fullText = `${shareText}\n\n${shareUrl}`
-    
+
    Taro.setClipboardData({
      data: fullText,
      success: () => {
@@ -104,7 +104,7 @@ const CouponShare: React.FC<CouponShareProps> = ({

  const shareOptions = [
    {
-      icon: <Wechat size="32" className="text-green-500" />,
+      icon: <Share size="32" className="text-green-500" />,
      label: '微信好友',
      onClick: handleWechatShare
    },
@@ -142,7 +142,7 @@ const CouponShare: React.FC<CouponShareProps> = ({
          <View className="flex items-center justify-between">
            <View>
              <Text className="text-2xl font-bold">
-                {coupon.type === 10 ? `¥${coupon.amount}` : 
+                {coupon.type === 10 ? `¥${coupon.amount}` :
                 coupon.type === 20 ? `${coupon.amount}折` : '免费'}
              </Text>
              <Text className="text-sm opacity-90">
--- a/src/components/GiftCardQRCode.tsx
+++ b/src/components/GiftCardQRCode.tsx
@@ -179,7 +179,7 @@ const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
        {/* 标题 */}
        <View className="text-center mb-4">
          <Text className="text-lg font-bold">礼品卡核销</Text>
-          <Text className="text-sm text-gray-500 block mt-1">
+          <Text className="text-sm text-gray-500 mt-1">
            请向门店工作人员出示此二维码
          </Text>
        </View>
@@ -295,13 +295,13 @@ const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
        )}

        {/* 操作按钮 */}
-        <View className="flex gap-3">
+        <View className="flex">
          <Button
            size="large"
            fill="outline"
            icon={<Share />}
            onClick={shareQRCode}
-            className="flex-1"
+            className="flex-1 mr-3"
          >
            分享
          </Button>
@@ -318,10 +318,10 @@ const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
        {/* 使用说明 */}
        <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>
+          <View>
+            <Text className="text-xs text-yellow-700 mb-1">• 请向门店工作人员出示此二维码或核销码</Text>
+            <Text className="text-xs text-yellow-700 mb-1">• 工作人员扫码后即可完成核销</Text>
+            <Text className="text-xs text-yellow-700 mb-1">• 每次使用会生成新的核销码，确保安全</Text>
            <Text className="text-xs text-yellow-700">• 如有问题请联系客服：{giftCard.contactInfo || '400-800-8888'}</Text>
          </View>
        </View>
--- a/src/components/GiftCardShare.tsx
+++ b/src/components/GiftCardShare.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text } from '@tarojs/components'
-import { Button, Popup } from '@nutui/nutui-react-taro'
-import { Share, Wechat, QQ, Weibo, Link, Close, Gift } from '@nutui/icons-react-taro'
+import { Popup } from '@nutui/nutui-react-taro'
+import { Share, Link, Close, Gift } from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'

 export interface GiftCardShareProps {
@@ -140,7 +140,7 @@ const GiftCardShare: React.FC<GiftCardShareProps> = ({

  const shareOptions = [
    {
-      icon: <Wechat size="32" className="text-green-500" />,
+      icon: <Share size="32" className="text-green-500" />,
      label: '微信好友',
      onClick: handleWechatShare
    },
--- a/src/components/QRCodeGenerator.tsx
+++ b/src/components/QRCodeGenerator.tsx
@@ -40,10 +40,10 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
      // 方案1: 使用在线API生成二维码
      const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(text)}`
      setQrDataURL(qrApiUrl)
-      
+
      // 方案2: 如果需要离线生成，可以使用Canvas绘制
      // await drawQRCodeOnCanvas()
-      
+
    } catch (error) {
      console.error('生成二维码失败:', error)
      Taro.showToast({
@@ -58,19 +58,19 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
  // 使用Canvas绘制二维码（简化版本）
  const drawQRCodeOnCanvas = async () => {
    const ctx = Taro.createCanvasContext(canvasRef.current)
-    
+
    // 清空画布
    ctx.clearRect(0, 0, size, size)
-    
+
    // 绘制白色背景
    ctx.setFillStyle('#ffffff')
    ctx.fillRect(0, 0, size, size)
-    
+
    // 绘制黑色边框
    ctx.setStrokeStyle('#000000')
    ctx.setLineWidth(2)
    ctx.strokeRect(0, 0, size, size)
-    
+
    // 绘制定位点
    const drawFinderPattern = (x: number, y: number) => {
      ctx.setFillStyle('#000000')
@@ -80,17 +80,17 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
      ctx.setFillStyle('#000000')
      ctx.fillRect(x + 8, y + 8, 12, 12)
    }
-    
+
    // 三个角的定位点
    drawFinderPattern(10, 10)           // 左上
    drawFinderPattern(size - 38, 10)    // 右上
    drawFinderPattern(10, size - 38)    // 左下
-    
+
    // 生成数据点（模拟二维码数据）
    ctx.setFillStyle('#000000')
    const moduleSize = 4
    const modules = Math.floor((size - 80) / moduleSize)
-    
+
    for (let i = 0; i < modules; i++) {
      for (let j = 0; j < modules; j++) {
        // 简单的伪随机算法，基于文本内容生成固定的图案
@@ -102,7 +102,7 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
        }
      }
    }
-    
+
    ctx.draw()
  }

@@ -172,7 +172,7 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
        <View className="text-center mb-4">
          <Text className="text-lg font-bold">二维码</Text>
          {title && (
-            <Text className="text-sm text-gray-600 block mt-1">{title}</Text>
+            <Text className="text-sm text-gray-600 mt-1">{title}</Text>
          )}
        </View>

@@ -186,7 +186,7 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
        {/* 二维码显示区域 */}
        <View className="text-center mb-4">
          {loading ? (
-            <View 
+            <View
              className="bg-gray-100 rounded-lg flex items-center justify-center"
              style={{ width: `${size}px`, height: `${size}px`, margin: '0 auto' }}
            >
@@ -194,11 +194,11 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
            </View>
          ) : qrDataURL ? (
            <View className="p-4 bg-white border border-gray-200 rounded-lg">
-              <img 
+              <img
                src={qrDataURL}
                alt="二维码"
-                style={{ 
-                  width: `${size}px`, 
+                style={{
+                  width: `${size}px`,
                  height: `${size}px`,
                  display: 'block',
                  margin: '0 auto'
@@ -271,9 +271,9 @@ const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({
        <View className="mt-4 p-3 bg-yellow-50 rounded-lg">
          <Text className="text-sm text-yellow-800 font-medium mb-2">使用说明：</Text>
          <View>
-            <Text className="text-xs text-yellow-700 block mb-1">• 长按二维码可以识别或保存</Text>
-            <Text className="text-xs text-yellow-700 block mb-1">• 点击保存按钮可保存到相册</Text>
-            <Text className="text-xs text-yellow-700 block">• 可以复制二维码内容进行分享</Text>
+            <Text className="text-xs text-yellow-700 mb-1">• 长按二维码可以识别或保存</Text>
+            <Text className="text-xs text-yellow-700 mb-1">• 点击保存按钮可保存到相册</Text>
+            <Text className="text-xs text-yellow-700">• 可以复制二维码内容进行分享</Text>
          </View>
        </View>
      </View>
--- a/src/components/SimpleQRCodeModal.tsx
+++ b/src/components/SimpleQRCodeModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import {View, Text} from '@tarojs/components'
-import {Popup} from '@nutui/nutui-react-taro'
-import {Close, QrCode} from '@nutui/icons-react-taro'
+import { View, Text } from '@tarojs/components'
+import { Popup } from '@nutui/nutui-react-taro'
+import { Close, QrCode } from '@nutui/icons-react-taro'

 export interface SimpleQRCodeModalProps {
  /** 是否显示弹窗 */
@@ -27,16 +27,14 @@ const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
      closeIcon={<Close/>}
      onClose={onClose}
      style={{
-        width: '85%',
-        maxWidth: '350px',
-        borderRadius: '12px'
+        width: '90%'
      }}
    >
      <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 className="text-sm text-gray-500 mt-1">
            请向商家出示此二维码
          </Text>
        </View>