赵忠林
1fa58040f3
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
import { View, Text, Input } from '@tarojs/components';
|
||
import { useState } from 'react';
|
||
import NavBar from '@/components/NavBar';
|
||
|
||
export default function RebateWithdrawPage() {
|
||
const [amount, setAmount] = useState('');
|
||
const [account, setAccount] = useState('');
|
||
const [name, setName] = useState('');
|
||
const [canWithdraw, setCanWithdraw] = useState(528.50);
|
||
|
||
const handleWithdraw = () => {
|
||
if (parseFloat(amount) > canWithdraw) {
|
||
console.log('余额不足');
|
||
return;
|
||
}
|
||
if (parseFloat(amount) < 100) {
|
||
console.log('最低提现金额¥100');
|
||
return;
|
||
}
|
||
console.log('申请提现', { amount, account, name });
|
||
};
|
||
|
||
return (
|
||
<View className="bg-gray-100 flex flex-col" style={{ minHeight: '100vh' }}>
|
||
<NavBar title="佣金提现" />
|
||
|
||
<View className="flex-1 p-4">
|
||
{/* 可提现金额 */}
|
||
<View className="bg-white rounded-lg p-4 mb-4">
|
||
<Text className="text-sm text-gray-500 mb-2 block">可提现金额(元)</Text>
|
||
<View className="flex items-baseline">
|
||
<Text className="text-3xl font-bold text-red-500">{canWithdraw.toFixed(2)}</Text>
|
||
</View>
|
||
<Text className="text-xs text-gray-400 mt-2 block">最低提现金额 ¥100.00</Text>
|
||
</View>
|
||
|
||
{/* 提现金额 */}
|
||
<View className="bg-white rounded-lg p-4 mb-4">
|
||
<Text className="text-base font-medium mb-3 block">提现金额</Text>
|
||
<View className="flex items-center border-b border-gray-200 pb-3 mb-3">
|
||
<Text className="text-2xl font-bold mr-2">¥</Text>
|
||
<Input
|
||
className="flex-1 text-2xl font-bold"
|
||
type="digit"
|
||
placeholder="请输入提现金额"
|
||
value={amount}
|
||
onInput={(e: any) => setAmount(e.detail.value)}
|
||
/>
|
||
</View>
|
||
<View className="flex justify-between text-sm">
|
||
<Text className="text-gray-500">手续费：¥0.00</Text>
|
||
<Text
|
||
className="text-blue-500"
|
||
onClick={() => setAmount(canWithdraw.toString())}
|
||
>
|
||
全部提现
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 收款信息 */}
|
||
<View className="bg-white rounded-lg p-4 mb-4">
|
||
<Text className="text-base font-medium mb-3 block">收款信息</Text>
|
||
|
||
<View className="mb-4">
|
||
<Text className="text-sm text-gray-600 mb-2 block">收款人姓名</Text>
|
||
<Input
|
||
className="w-full p-3 bg-gray-100 rounded-lg text-sm"
|
||
placeholder="请输入收款人姓名"
|
||
value={name}
|
||
onInput={(e: any) => setName(e.detail.value)}
|
||
/>
|
||
</View>
|
||
|
||
<View className="mb-4">
|
||
<Text className="text-sm text-gray-600 mb-2 block">支付宝账号</Text>
|
||
<Input
|
||
className="w-full p-3 bg-gray-100 rounded-lg text-sm"
|
||
placeholder="请输入支付宝账号"
|
||
value={account}
|
||
onInput={(e: any) => setAccount(e.detail.value)}
|
||
/>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 提现说明 */}
|
||
<View className="bg-white rounded-lg p-4 mb-4">
|
||
<Text className="text-base font-medium mb-3 block">提现说明</Text>
|
||
<View className="text-sm text-gray-500 flex flex-col" style={{ gap: '8px' }}>
|
||
<View className="flex">
|
||
<Text className="text-red-500 mr-2">•</Text>
|
||
<Text>提现申请将在1-3个工作日内审核</Text>
|
||
</View>
|
||
<View className="flex">
|
||
<Text className="text-red-500 mr-2">•</Text>
|
||
<Text>提现金额将打入您指定的支付宝账号</Text>
|
||
</View>
|
||
<View className="flex">
|
||
<Text className="text-red-500 mr-2">•</Text>
|
||
<Text>如有疑问，请联系客服</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
<View className="p-4 bg-white border-t border-gray-200" style={{ paddingBottom: '20px' }}>
|
||
<View
|
||
className="bg-red-500 text-white rounded-full w-full h-12 flex items-center justify-center"
|
||
onClick={handleWithdraw}
|
||
>
|
||
<Text className="text-white font-medium">申请提现</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|