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.
63 lines
2.0 KiB
63 lines
2.0 KiB
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
|
|
}
|
|
|
|
const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
|
visible,
|
|
onClose,
|
|
qrContent
|
|
}) => {
|
|
|
|
|
|
return (
|
|
<Popup
|
|
visible={visible}
|
|
position="center"
|
|
closeable
|
|
closeIcon={<Close/>}
|
|
onClose={onClose}
|
|
style={{
|
|
width: '85%',
|
|
maxWidth: '350px',
|
|
borderRadius: '12px'
|
|
}}
|
|
>
|
|
<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>
|
|
</View>
|
|
|
|
{/* 二维码区域 */}
|
|
<View className="text-center mb-4">
|
|
<View className="p-4 bg-white border border-gray-200 rounded-lg">
|
|
<View className="bg-gray-100 rounded flex items-center justify-center"
|
|
style={{width: '200px', height: '200px', margin: '0 auto'}}>
|
|
<View className="text-center">
|
|
<QrCode size="48" className="text-gray-400 mb-2"/>
|
|
<Text className="text-gray-500 text-sm">二维码</Text>
|
|
<Text className="text-xs text-gray-400 mt-1">ID: {qrContent ? qrContent.slice(-6) : '------'}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
</Popup>
|
|
)
|
|
}
|
|
|
|
export default SimpleQRCodeModal
|