106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
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'
|
||
|
||
export interface SimpleQRCodeModalProps {
|
||
/** 是否显示弹窗 */
|
||
visible: boolean
|
||
/** 关闭弹窗回调 */
|
||
onClose: () => void
|
||
/** 二维码内容（礼品卡code码） */
|
||
qrContent: string
|
||
/** 礼品卡名称 */
|
||
giftName?: string
|
||
/** 礼品卡面值 */
|
||
faceValue?: string
|
||
}
|
||
|
||
const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
||
visible,
|
||
onClose,
|
||
qrContent,
|
||
giftName,
|
||
faceValue
|
||
}) => {
|
||
|
||
// const copyToClipboard = () => {
|
||
// if (qrContent) {
|
||
// Taro.setClipboardData({
|
||
// data: qrContent,
|
||
// success: () => {
|
||
// Taro.showToast({
|
||
// title: '兑换码已复制',
|
||
// icon: 'success'
|
||
// })
|
||
// }
|
||
// })
|
||
// }
|
||
// }
|
||
|
||
|
||
return (
|
||
<Popup
|
||
visible={visible}
|
||
position="center"
|
||
closeable
|
||
closeIcon={<Close/>}
|
||
onClose={onClose}
|
||
style={{
|
||
width: '90%'
|
||
}}
|
||
>
|
||
<View className="p-6">
|
||
{/* 标题 */}
|
||
<View className="mb-4">
|
||
<Text className="text-lg font-bold">礼品卡二维码</Text>
|
||
<Text className="text-sm text-gray-400 mt-1 px-2">
|
||
请向商家出示此二维码
|
||
</Text>
|
||
</View>
|
||
|
||
{/* 礼品卡信息 */}
|
||
{(giftName || faceValue) && (
|
||
<View className="bg-gray-50 rounded-lg p-3 mb-4">
|
||
{giftName && (
|
||
<Text className="font-medium text-center mb-1">
|
||
{giftName}
|
||
</Text>
|
||
)}
|
||
{faceValue && (
|
||
<Text className="text-lg font-bold text-red-500 text-center">
|
||
¥{faceValue}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
)}
|
||
|
||
{/* 二维码区域 */}
|
||
<View className="text-center mb-4">
|
||
<View className="p-4 bg-white border border-gray-200 rounded-lg">
|
||
{qrContent ? (
|
||
<img
|
||
src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrContent)}`}
|
||
alt="二维码"
|
||
style={{width: '200px', height: '200px'}}
|
||
className="mx-auto"
|
||
/>
|
||
) : (
|
||
<View className="bg-gray-100 rounded flex items-center justify-center mx-auto"
|
||
style={{width: '200px', height: '200px'}}>
|
||
<View className="text-center">
|
||
<QrCode size="48" className="text-gray-400 mb-2"/>
|
||
<Text className="text-gray-500 text-sm">生成中...</Text>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
</View>
|
||
</Popup>
|
||
)
|
||
}
|
||
|
||
export default SimpleQRCodeModal
|