refactor(user/gift): 修复 CSS 兼容性问题并优化礼品卡功能
- 移除了不兼容的 CSS 类名,解决了 WXSS 编译错误 - 优化了礼品卡详细页面,添加了二维码弹窗功能 - 简化了礼品卡统计组件,提高了页面加载速度 - 修复了 SimpleQRCodeModal组件中的样式问题 - 优化了验证页面中的布局结构
This commit is contained in:
63
src/components/SimpleQRCodeModal.tsx
Normal file
63
src/components/SimpleQRCodeModal.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
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
|
||||
Reference in New Issue
Block a user