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