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.
333 lines
9.8 KiB
333 lines
9.8 KiB
import React, { useState, useEffect } from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { Button, Popup, Tag } from '@nutui/nutui-react-taro'
|
|
import { Close, Copy, Share, Refresh, QrCode } from '@nutui/icons-react-taro'
|
|
import Taro from '@tarojs/taro'
|
|
import dayjs from 'dayjs'
|
|
import { generateVerificationCode } from '@/api/shop/shopGift'
|
|
|
|
export interface GiftCardQRCodeProps {
|
|
/** 是否显示弹窗 */
|
|
visible: boolean
|
|
/** 关闭弹窗回调 */
|
|
onClose: () => void
|
|
/** 礼品卡信息 */
|
|
giftCard: {
|
|
id: number
|
|
name?: string
|
|
goodsName?: string
|
|
code?: string
|
|
faceValue?: string
|
|
type?: number
|
|
status?: number
|
|
expireTime?: string
|
|
contactInfo?: string
|
|
}
|
|
}
|
|
|
|
const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
|
|
visible,
|
|
onClose,
|
|
giftCard
|
|
}) => {
|
|
const [loading, setLoading] = useState(false)
|
|
const [verificationCode, setVerificationCode] = useState<string>('')
|
|
const [qrData, setQrData] = useState<string>('')
|
|
|
|
// 生成核销码（6位数字）
|
|
const generateVerificationCode = () => {
|
|
return Math.random().toString().slice(2, 8)
|
|
}
|
|
|
|
// 生成二维码数据
|
|
const generateQRData = () => {
|
|
const code = generateVerificationCode()
|
|
setVerificationCode(code)
|
|
|
|
const data = {
|
|
type: 'gift_card_verification',
|
|
giftId: giftCard.id,
|
|
giftCode: giftCard.code,
|
|
verificationCode: code,
|
|
faceValue: giftCard.faceValue,
|
|
timestamp: Date.now(),
|
|
expireTime: giftCard.expireTime
|
|
}
|
|
|
|
const jsonData = JSON.stringify(data)
|
|
setQrData(jsonData)
|
|
return jsonData
|
|
}
|
|
|
|
// 生成二维码（调用后端API）
|
|
const generateQRCode = async () => {
|
|
try {
|
|
setLoading(true)
|
|
|
|
// 调用后端API生成核销码
|
|
const result = await generateVerificationCode(giftCard.id)
|
|
if (result) {
|
|
setVerificationCode(result.verificationCode)
|
|
|
|
// 生成二维码数据
|
|
const data = {
|
|
type: 'gift_card_verification',
|
|
giftId: giftCard.id,
|
|
giftCode: giftCard.code,
|
|
verificationCode: result.verificationCode,
|
|
faceValue: giftCard.faceValue,
|
|
timestamp: Date.now(),
|
|
expireTime: giftCard.expireTime,
|
|
codeExpireTime: result.expireTime
|
|
}
|
|
|
|
setQrData(JSON.stringify(data))
|
|
console.log('二维码数据:', data)
|
|
}
|
|
} catch (error) {
|
|
console.error('生成二维码失败:', error)
|
|
Taro.showToast({
|
|
title: '生成核销码失败',
|
|
icon: 'error'
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
// 复制核销码
|
|
const copyVerificationCode = () => {
|
|
Taro.setClipboardData({
|
|
data: verificationCode,
|
|
success: () => {
|
|
Taro.showToast({
|
|
title: '核销码已复制',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
// 复制礼品卡码
|
|
const copyGiftCode = () => {
|
|
if (giftCard.code) {
|
|
Taro.setClipboardData({
|
|
data: giftCard.code,
|
|
success: () => {
|
|
Taro.showToast({
|
|
title: '兑换码已复制',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// 分享二维码
|
|
const shareQRCode = () => {
|
|
// 这里可以实现分享功能
|
|
Taro.showToast({
|
|
title: '分享功能开发中',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
// 刷新二维码
|
|
const refreshQRCode = () => {
|
|
generateQRCode()
|
|
}
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status?: number) => {
|
|
switch (status) {
|
|
case 0: return { text: '未使用', color: 'success' }
|
|
case 1: return { text: '已使用', color: 'warning' }
|
|
case 2: return { text: '失效', color: 'danger' }
|
|
default: return { text: '未知', color: 'default' }
|
|
}
|
|
}
|
|
|
|
// 获取类型文本
|
|
const getTypeText = (type?: number) => {
|
|
switch (type) {
|
|
case 10: return '实物礼品卡'
|
|
case 20: return '虚拟礼品卡'
|
|
case 30: return '服务礼品卡'
|
|
default: return '礼品卡'
|
|
}
|
|
}
|
|
|
|
// 弹窗打开时生成二维码
|
|
useEffect(() => {
|
|
if (visible && giftCard.id) {
|
|
generateQRCode()
|
|
}
|
|
}, [visible, giftCard.id])
|
|
|
|
const statusInfo = getStatusText(giftCard.status)
|
|
|
|
return (
|
|
<Popup
|
|
visible={visible}
|
|
position="center"
|
|
closeable
|
|
closeIcon={<Close />}
|
|
onClose={onClose}
|
|
style={{ width: '90%', maxWidth: '400px' }}
|
|
>
|
|
<View className="p-6">
|
|
{/* 标题 */}
|
|
<View className="text-center mb-4">
|
|
<Text className="text-lg font-bold">礼品卡核销</Text>
|
|
<Text className="text-sm text-gray-500 mt-1">
|
|
请向门店工作人员出示此二维码
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 礼品卡信息 */}
|
|
<View className="bg-gray-50 rounded-lg p-4 mb-4">
|
|
<View className="flex justify-between items-start mb-2">
|
|
<Text className="font-medium text-base">
|
|
{giftCard.goodsName || giftCard.name}
|
|
</Text>
|
|
<Tag type={statusInfo.color} size="small">
|
|
{statusInfo.text}
|
|
</Tag>
|
|
</View>
|
|
|
|
<View className="flex justify-between items-center mb-2">
|
|
<Text className="text-sm text-gray-600">面值</Text>
|
|
<Text className="text-lg font-bold text-red-500">
|
|
¥{giftCard.faceValue}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex justify-between items-center mb-2">
|
|
<Text className="text-sm text-gray-600">类型</Text>
|
|
<Text className="text-sm">{getTypeText(giftCard.type)}</Text>
|
|
</View>
|
|
|
|
{giftCard.expireTime && (
|
|
<View className="flex justify-between items-center">
|
|
<Text className="text-sm text-gray-600">有效期至</Text>
|
|
<Text className="text-sm text-orange-600">
|
|
{dayjs(giftCard.expireTime).format('YYYY-MM-DD')}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* 二维码区域 */}
|
|
<View className="text-center mb-4">
|
|
{loading ? (
|
|
<View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
|
|
<Text className="text-gray-500">生成中...</Text>
|
|
</View>
|
|
) : verificationCode ? (
|
|
<View className="relative">
|
|
{/* 模拟二维码显示区域 */}
|
|
<View className="w-48 h-48 mx-auto bg-white border-2 border-gray-300 rounded-lg flex flex-col items-center justify-center">
|
|
<QrCode size="80" className="text-gray-800 mb-2" />
|
|
<Text className="text-xs text-gray-600">核销二维码</Text>
|
|
<Text className="text-xs text-gray-500 mt-1">
|
|
ID: {giftCard.id}
|
|
</Text>
|
|
</View>
|
|
<Button
|
|
size="small"
|
|
fill="outline"
|
|
icon={<Refresh />}
|
|
className="absolute top-2 right-2"
|
|
onClick={refreshQRCode}
|
|
>
|
|
刷新
|
|
</Button>
|
|
</View>
|
|
) : (
|
|
<View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
|
|
<Text className="text-gray-500">生成失败</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* 核销码 */}
|
|
{verificationCode && (
|
|
<View className="bg-blue-50 rounded-lg p-3 mb-4">
|
|
<View className="flex justify-between items-center">
|
|
<View>
|
|
<Text className="text-sm text-blue-600 mb-1">核销码</Text>
|
|
<Text className="text-xl font-mono font-bold text-blue-800">
|
|
{verificationCode}
|
|
</Text>
|
|
</View>
|
|
<Button
|
|
size="small"
|
|
fill="outline"
|
|
icon={<Copy />}
|
|
onClick={copyVerificationCode}
|
|
>
|
|
复制
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* 兑换码 */}
|
|
{giftCard.code && (
|
|
<View className="bg-green-50 rounded-lg p-3 mb-4">
|
|
<View className="flex justify-between items-center">
|
|
<View>
|
|
<Text className="text-sm text-green-600 mb-1">兑换码</Text>
|
|
<Text className="text-base font-mono text-green-800">
|
|
{giftCard.code}
|
|
</Text>
|
|
</View>
|
|
<Button
|
|
size="small"
|
|
fill="outline"
|
|
icon={<Copy />}
|
|
onClick={copyGiftCode}
|
|
>
|
|
复制
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* 操作按钮 */}
|
|
<View className="flex">
|
|
<Button
|
|
size="large"
|
|
fill="outline"
|
|
icon={<Share />}
|
|
onClick={shareQRCode}
|
|
className="flex-1 mr-3"
|
|
>
|
|
分享
|
|
</Button>
|
|
<Button
|
|
size="large"
|
|
type="primary"
|
|
onClick={onClose}
|
|
className="flex-1"
|
|
>
|
|
完成
|
|
</Button>
|
|
</View>
|
|
|
|
{/* 使用说明 */}
|
|
<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 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>
|
|
</View>
|
|
</Popup>
|
|
)
|
|
}
|
|
|
|
export default GiftCardQRCode
|