refactor(dealer): 重构提现功能并优化用户体验

- 移除不必要的状态和引用
- 更新 API 请求路径
- 优化提现金额输入和计算逻辑
-调整提现记录展示布局- 统一错误提示信息
This commit is contained in:
2025-09-06 19:51:48 +08:00
parent d770796df4
commit ae1af2f3c0
2 changed files with 46 additions and 51 deletions

View File

@@ -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) {

View File

@@ -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,23 +220,13 @@ const DealerWithdraw: React.FC = () => {
return
}
// 验证账户信息
if (values.accountType === 'alipay') {
if (!values.account || !values.accountName) {
Taro.showToast({
title: '请填写完整的支付宝信息',
icon: 'error'
})
return
}
} else if (values.accountType === 'bank') {
if (!values.account || !values.accountName || !values.bankName) {
Taro.showToast({
title: '请填写完整的银行卡信息',
icon: 'error'
})
return
}
// 验证银行卡信息
if (!bank.bankCard || !bank.bankAccount || !bank.bankName) {
Taro.showToast({
title: '银行卡信息不完整',
icon: 'error'
})
return
}
try {
@@ -244,21 +234,13 @@ const DealerWithdraw: React.FC = () => {
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>