62 lines
1.9 KiB
TypeScript
62 lines
1.9 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
|
||
}
|
||
|
||
const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
||
visible,
|
||
onClose,
|
||
qrContent
|
||
}) => {
|
||
|
||
|
||
return (
|
||
<Popup
|
||
visible={visible}
|
||
position="center"
|
||
closeable
|
||
closeIcon={<Close/>}
|
||
onClose={onClose}
|
||
style={{
|
||
width: '90%'
|
||
}}
|
||
>
|
||
<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="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
|