refactor(user/gift): 修复 CSS 兼容性问题并优化礼品卡功能

- 移除了不兼容的 CSS 类名,解决了 WXSS 编译错误
- 优化了礼品卡详细页面,添加了二维码弹窗功能
- 简化了礼品卡统计组件,提高了页面加载速度
- 修复了 SimpleQRCodeModal组件中的样式问题
- 优化了验证页面中的布局结构
This commit is contained in:
2025-08-17 11:02:14 +08:00
parent ecfbdc0286
commit 6d66b7abbf
12 changed files with 876 additions and 194 deletions

View 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