- 将开发、测试及生产环境的API和服务器地址统一更改为开发环境地址 - 修复 FreezeMoneyModal 中关闭按钮位置样式问题 - 调整 Shop 模块商品详情角标字体内边距,提高视觉舒适度 - 订单确认页调整部分字体大小,提高显示效果一致性 - 修改 Dealer 模块待使用金额弹窗逻辑,允许金额为0时也显示弹窗
99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import React from 'react'
|
||
import { View, Text } from '@tarojs/components'
|
||
import { Popup, Button } from '@nutui/nutui-react-taro'
|
||
import { Close } from '@nutui/icons-react-taro'
|
||
|
||
interface FreezeMoneyModalProps {
|
||
visible: boolean
|
||
amount: string
|
||
onClose: () => void
|
||
}
|
||
|
||
/**
|
||
* 待使用明细弹窗组件
|
||
* 展示待使用(冻结中)金额和解冻规则说明
|
||
*/
|
||
const FreezeMoneyModal: React.FC<FreezeMoneyModalProps> = ({
|
||
visible,
|
||
amount,
|
||
onClose
|
||
}) => {
|
||
// 格式化金额,保留2位小数
|
||
const formatAmount = (value: string | number): string => {
|
||
const num = typeof value === 'string' ? parseFloat(value) : value
|
||
if (isNaN(num)) return '0.00'
|
||
return num.toFixed(2)
|
||
}
|
||
|
||
return (
|
||
<Popup
|
||
visible={visible}
|
||
style={{ padding: '0', borderRadius: '16px', overflow: 'hidden' }}
|
||
onClose={onClose}
|
||
closeOnOverlayClick={true}
|
||
position="center"
|
||
>
|
||
<View className="w-72 bg-white">
|
||
{/* 头部标题 */}
|
||
<View className="relative px-4 py-4 border-b border-gray-100">
|
||
<Text className="text-lg font-semibold text-gray-800 text-center block">
|
||
待使用明细
|
||
</Text>
|
||
<View
|
||
className="absolute right-3 top-1 -translate-y-1 p-1"
|
||
onClick={onClose}
|
||
>
|
||
<Close size={20} className="text-gray-400" />
|
||
</View>
|
||
</View>
|
||
|
||
{/* 金额展示区域 */}
|
||
<View className="px-6 py-8 text-center">
|
||
<Text className="text-sm text-gray-500 mb-2 block">
|
||
待使用(冻结中)
|
||
</Text>
|
||
<View className="flex items-baseline justify-center">
|
||
<Text className="text-2xl font-bold text-gray-800">¥</Text>
|
||
<Text className="text-4xl font-bold text-gray-800 ml-1">
|
||
{formatAmount(amount)}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 分隔线 */}
|
||
<View className="mx-6 h-px bg-gray-100" />
|
||
|
||
{/* 温馨提示区域 */}
|
||
<View className="px-6 py-6">
|
||
<Text className="text-sm font-medium text-gray-700 mb-3 block">
|
||
温馨提示:
|
||
</Text>
|
||
<Text className="text-sm text-gray-500 leading-relaxed block">
|
||
需要直推用户进行下单配送后方可解冻到待提现资金组
|
||
</Text>
|
||
</View>
|
||
|
||
{/* 底部按钮 */}
|
||
<View className="px-6 pb-6">
|
||
<Button
|
||
type="primary"
|
||
block
|
||
onClick={onClose}
|
||
style={{
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
border: 'none',
|
||
borderRadius: '8px',
|
||
height: '44px',
|
||
lineHeight: '44px'
|
||
}}
|
||
>
|
||
关闭
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
</Popup>
|
||
)
|
||
}
|
||
|
||
export default FreezeMoneyModal
|