template-10584/src/user/gift/qrcode-demo.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import GiftCard from '@/components/GiftCard'
import { ShopGift } from '@/api/shop/shopGift/model'

const QRCodeDemo: React.FC = () => {
  // 模拟礼品卡数据
  const mockGifts: ShopGift[] = [
    {
      id: 1,
      name: '星巴克礼品卡',
      goodsName: '星巴克经典拿铁咖啡券',
      goodsImage: 'https://img.alicdn.com/imgextra/i1/2206571109/O1CN01QZxQJJ1Uw8QZxQJJ_!!2206571109.jpg',
      description: '享受醇香咖啡时光',
      code: 'SB2024001234567890',
      goodsId: 101,
      faceValue: '100',
      type: 20,
      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: 'MCD2024987654321',
      goodsId: 102,
      faceValue: '50',
      type: 20,
      status: 0, // 未使用
      expireTime: '2024-10-31 23:59:59',
      instructions: '适用于全国麦当劳门店',
      contactInfo: '400-517-517'
    },
    {
      id: 3,
      name: '海底捞火锅券',
      goodsName: '海底捞4人套餐券',
      goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
      description: '享受正宗川味火锅',
      code: 'HDL2024555666777',
      goodsId: 103,
      faceValue: '300',
      type: 30,
      status: 1, // 已使用
      useTime: '2024-08-15 19:30:00',
      useLocation: '海底捞王府井店',
      instructions: '需提前预约',
      contactInfo: '400-869-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,
      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('打开二维码弹窗'),
      onDetail: () => console.log('查看详情'),
      onClick: () => console.log('点击礼品卡')
    }
  }

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

  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">
          点击"立即使用"按钮生成核销二维码
        </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">✅ 点击"立即使用"生成二维码</Text>
          <Text className="text-sm text-gray-600">✅ 每次生成新的6位核销码</Text>
          <Text className="text-sm text-gray-600">✅ 显示礼品卡详细信息</Text>
          <Text className="text-sm text-gray-600">✅ 支持复制核销码和兑换码</Text>
          <Text className="text-sm text-gray-600">✅ 门店工作人员扫码核销</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">1. 用户点击"立即使用"按钮</Text>
          <Text className="text-sm text-blue-700">2. 系统生成核销二维码和核销码</Text>
          <Text className="text-sm text-blue-700">3. 用户向门店工作人员出示二维码</Text>
          <Text className="text-sm text-blue-700">4. 工作人员扫码或输入核销码验证</Text>
          <Text className="text-sm text-blue-700">5. 验证成功后完成核销</Text>
        </View>
      </View>

      {/* 礼品卡列表 */}
      <View className="p-4">
        <Text className="font-bold mb-3">礼品卡示例：</Text>
        {mockGifts.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}: {getStatusText(gift.status)}状态
              </Text>
              <Text className="text-xs text-green-600">
                {gift.status === 0 ? '可以生成二维码核销' : '已使用或失效，无法核销'}
              </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>
        <Text className="text-sm text-gray-600 mb-3">
          如果您是门店工作人员，请使用专门的核销页面
        </Text>
        <Button
          size="large"
          type="primary"
          onClick={() => {
            // 这里可以跳转到门店核销页面
            console.log('跳转到门店核销页面')
          }}
          block
        >
          进入门店核销页面
        </Button>
      </View>

      {/* 技术说明 */}
      <View className="bg-yellow-50 mx-4 mb-4 p-4 rounded-lg">
        <Text className="font-bold mb-2 text-yellow-800">技术实现：</Text>
        <View className="space-y-1">
          <Text className="text-sm text-yellow-700">• 二维码包含礼品卡ID、核销码等信息</Text>
          <Text className="text-sm text-yellow-700">• 每次生成随机6位数字核销码</Text>
          <Text className="text-sm text-yellow-700">• 支持扫码和手动输入两种验证方式</Text>
          <Text className="text-sm text-yellow-700">• 核销后礼品卡状态更新为已使用</Text>
        </View>
      </View>
    </View>
  )
}

export default QRCodeDemo