refactor(dealer): 重构提现功能并优化用户体验
- 移除不必要的状态和引用 - 更新 API 请求路径 - 优化提现金额输入和计算逻辑 -调整提现记录展示布局- 统一错误提示信息
This commit is contained in:
@@ -21,7 +21,7 @@ export async function pageShopDealerBank(params: ShopDealerBankParam) {
|
||||
*/
|
||||
export async function listShopDealerBank(params?: ShopDealerBankParam) {
|
||||
const res = await request.get<ApiResult<ShopDealerBank[]>>(
|
||||
'http://127.0.0.1:9200/api/shop/shop-dealer-bank',
|
||||
'/shop/shop-dealer-bank',
|
||||
params
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, {useState, useRef, useEffect, useCallback} from 'react'
|
||||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {
|
||||
Cell,
|
||||
@@ -28,7 +28,6 @@ interface WithdrawRecordWithDetails extends ShopDealerWithdraw {
|
||||
|
||||
const DealerWithdraw: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<string | number>('0')
|
||||
const [selectedAccount, setSelectedAccount] = useState('')
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [submitting, setSubmitting] = useState<boolean>(false)
|
||||
@@ -37,7 +36,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false)
|
||||
const [availableAmount, setAvailableAmount] = useState<string>('0.00')
|
||||
const [withdrawRecords, setWithdrawRecords] = useState<WithdrawRecordWithDetails[]>([])
|
||||
const formRef = useRef<any>(null)
|
||||
const [withdrawAmount, setWithdrawAmount] = useState<string>('')
|
||||
|
||||
const {dealerUser} = useDealerUser()
|
||||
|
||||
@@ -48,7 +47,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
|
||||
// 如果切换到提现记录页面,刷新数据
|
||||
if (String(value) === '1') {
|
||||
fetchWithdrawRecords()
|
||||
fetchWithdrawRecords().then()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +55,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
const fetchBalance = useCallback(async () => {
|
||||
console.log(dealerUser, 'dealerUser...')
|
||||
try {
|
||||
setAvailableAmount(dealerUser?.money || '0.00')
|
||||
setAvailableAmount(String(dealerUser?.money || '0.00'))
|
||||
} catch (error) {
|
||||
console.error('获取余额失败:', error)
|
||||
}
|
||||
@@ -175,7 +174,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
const handleSubmit = async () => {
|
||||
if (!dealerUser?.userId) {
|
||||
Taro.showToast({
|
||||
title: '用户信息获取失败',
|
||||
@@ -184,17 +183,18 @@ const DealerWithdraw: React.FC = () => {
|
||||
return
|
||||
}
|
||||
|
||||
if (!values.accountType) {
|
||||
if (!bank) {
|
||||
Taro.showToast({
|
||||
title: '请选择提现方式',
|
||||
title: '请选择提现银行卡',
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 验证提现金额
|
||||
const amount = parseFloat(values.amount)
|
||||
const available = parseFloat(availableAmount.replace(/,/g, ''))
|
||||
const amount = parseFloat(withdrawAmount)
|
||||
const availableStr = String(availableAmount || '0')
|
||||
const available = parseFloat(availableStr.replace(/,/g, ''))
|
||||
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
Taro.showToast({
|
||||
@@ -204,9 +204,9 @@ const DealerWithdraw: React.FC = () => {
|
||||
return
|
||||
}
|
||||
|
||||
if (amount < 100) {
|
||||
if (amount < 10) {
|
||||
Taro.showToast({
|
||||
title: '最低提现金额为100元',
|
||||
title: '最低提现金额为10元',
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
@@ -220,45 +220,27 @@ const DealerWithdraw: React.FC = () => {
|
||||
return
|
||||
}
|
||||
|
||||
// 验证账户信息
|
||||
if (values.accountType === 'alipay') {
|
||||
if (!values.account || !values.accountName) {
|
||||
// 验证银行卡信息
|
||||
if (!bank.bankCard || !bank.bankAccount || !bank.bankName) {
|
||||
Taro.showToast({
|
||||
title: '请填写完整的支付宝信息',
|
||||
title: '银行卡信息不完整',
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
} else if (values.accountType === 'bank') {
|
||||
if (!values.account || !values.accountName || !values.bankName) {
|
||||
Taro.showToast({
|
||||
title: '请填写完整的银行卡信息',
|
||||
icon: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true)
|
||||
|
||||
const withdrawData: ShopDealerWithdraw = {
|
||||
userId: dealerUser.userId,
|
||||
money: values.amount,
|
||||
payType: values.accountType === 'wechat' ? 10 :
|
||||
values.accountType === 'alipay' ? 20 : 30,
|
||||
money: withdrawAmount,
|
||||
payType: 30, // 银行卡提现
|
||||
applyStatus: 10, // 待审核
|
||||
platform: 'MiniProgram'
|
||||
}
|
||||
|
||||
// 根据提现方式设置账户信息
|
||||
if (values.accountType === 'alipay') {
|
||||
withdrawData.alipayAccount = values.account
|
||||
withdrawData.alipayName = values.accountName
|
||||
} else if (values.accountType === 'bank') {
|
||||
withdrawData.bankCard = values.account
|
||||
withdrawData.bankAccount = values.accountName
|
||||
withdrawData.bankName = values.bankName || '银行卡'
|
||||
platform: 'MiniProgram',
|
||||
bankCard: bank.bankCard,
|
||||
bankAccount: bank.bankAccount,
|
||||
bankName: bank.bankName
|
||||
}
|
||||
|
||||
await addShopDealerWithdraw(withdrawData)
|
||||
@@ -269,8 +251,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
})
|
||||
|
||||
// 重置表单
|
||||
formRef.current?.resetFields()
|
||||
setSelectedAccount('')
|
||||
setWithdrawAmount('')
|
||||
|
||||
// 刷新数据
|
||||
await handleRefresh()
|
||||
@@ -295,6 +276,18 @@ const DealerWithdraw: React.FC = () => {
|
||||
return parseFloat(money).toFixed(2)
|
||||
}
|
||||
|
||||
// 计算预计到账金额
|
||||
const calculateExpectedAmount = (amount: string) => {
|
||||
if (!amount || isNaN(parseFloat(amount))) return '0.00'
|
||||
const withdrawAmount = parseFloat(amount)
|
||||
// 提现费率 16% + 3元
|
||||
const feeRate = 0.16
|
||||
const fixedFee = 3
|
||||
const totalFee = withdrawAmount * feeRate + fixedFee
|
||||
const expectedAmount = withdrawAmount - totalFee
|
||||
return Math.max(0, expectedAmount).toFixed(2)
|
||||
}
|
||||
|
||||
const renderWithdrawForm = () => (
|
||||
<View>
|
||||
{/* 余额卡片 */}
|
||||
@@ -323,7 +316,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
borderTop: '1px solid rgba(255, 255, 255, 0.3)'
|
||||
}}>
|
||||
<Text className="text-white text-opacity-80 text-xs">
|
||||
最低提现金额:¥100
|
||||
最低提现金额:¥10
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -338,12 +331,14 @@ const DealerWithdraw: React.FC = () => {
|
||||
placeholder="提现金额"
|
||||
type="number"
|
||||
maxLength={7}
|
||||
value={withdrawAmount}
|
||||
onChange={(value) => setWithdrawAmount(value)}
|
||||
style={{
|
||||
padding: '0 10px',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
/>
|
||||
<Button fill="none" size={'small'}><Text className={'text-blue-500'}>全部提现</Text></Button>
|
||||
<Button fill="none" size={'small'} onClick={() => setWithdrawAmount(dealerUser?.money || '0')}><Text className={'text-blue-500'}>全部提现</Text></Button>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
@@ -355,7 +350,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
}/>
|
||||
<Cell title={'预计到账金额'} description={'提现费率 16% +3元'} extra={
|
||||
<View className="flex items-center justify-between gap-1">
|
||||
<Text className={'text-orange-500 px-2 text-lg'}>¥2141.41</Text>
|
||||
<Text className={'text-orange-500 px-2 text-lg'}>¥{calculateExpectedAmount(withdrawAmount)}</Text>
|
||||
</View>
|
||||
}/>
|
||||
</CellGroup>
|
||||
@@ -366,7 +361,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
type="primary"
|
||||
nativeType="submit"
|
||||
loading={submitting}
|
||||
disabled={submitting || !selectedAccount}
|
||||
disabled={submitting || !withdrawAmount || !bank}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{submitting ? '提交中...' : '申请提现'}
|
||||
@@ -393,7 +388,7 @@ const DealerWithdraw: React.FC = () => {
|
||||
withdrawRecords.map(record => (
|
||||
<View key={record.id} className="rounded-lg bg-gray-50 p-4 mb-3 shadow-sm">
|
||||
<View className="flex justify-between items-start mb-3">
|
||||
<Space>
|
||||
<Space direction={'vertical'}>
|
||||
<Text className="font-semibold text-gray-800 mb-1">
|
||||
提现金额:¥{record.money}
|
||||
</Text>
|
||||
|
||||
Reference in New Issue
Block a user