You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
7.9 KiB
221 lines
7.9 KiB
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
|