forked from gxwebsoft/mp-10550
147 lines
3.8 KiB
TypeScript
147 lines
3.8 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { View } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
import { Empty } from '@nutui/nutui-react-taro'
|
||
import './index.scss'
|
||
|
||
interface WithdrawRecord {
|
||
id: string
|
||
amount: number
|
||
status: 'pending' | 'success' | 'failed'
|
||
statusText: string
|
||
createTime: string
|
||
completeTime?: string
|
||
remark?: string
|
||
}
|
||
|
||
function WithdrawDetail() {
|
||
const [records, setRecords] = useState<WithdrawRecord[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
|
||
useEffect(() => {
|
||
Taro.setNavigationBarTitle({
|
||
title: '提现明细'
|
||
})
|
||
loadWithdrawRecords()
|
||
}, [])
|
||
|
||
const loadWithdrawRecords = async () => {
|
||
try {
|
||
setLoading(true)
|
||
// 模拟数据，实际应该调用API
|
||
const mockData: WithdrawRecord[] = [
|
||
{
|
||
id: '1',
|
||
amount: 100.00,
|
||
status: 'success',
|
||
statusText: '提现成功',
|
||
createTime: '2024-01-15 14:30:00',
|
||
completeTime: '2024-01-15 16:45:00'
|
||
},
|
||
{
|
||
id: '2',
|
||
amount: 50.00,
|
||
status: 'pending',
|
||
statusText: '处理中',
|
||
createTime: '2024-01-10 09:20:00'
|
||
},
|
||
{
|
||
id: '3',
|
||
amount: 200.00,
|
||
status: 'failed',
|
||
statusText: '提现失败',
|
||
createTime: '2024-01-05 11:15:00',
|
||
remark: '银行卡信息有误'
|
||
}
|
||
]
|
||
|
||
setTimeout(() => {
|
||
setRecords(mockData)
|
||
setLoading(false)
|
||
}, 1000)
|
||
} catch (error) {
|
||
console.error('加载提现记录失败:', error)
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'success':
|
||
return '#10B981'
|
||
case 'pending':
|
||
return '#F59E0B'
|
||
case 'failed':
|
||
return '#EF4444'
|
||
default:
|
||
return '#6B7280'
|
||
}
|
||
}
|
||
|
||
const handleRecordClick = (record: WithdrawRecord) => {
|
||
const content = `
|
||
提现金额：¥${record.amount.toFixed(2)}
|
||
申请时间：${record.createTime}
|
||
${record.completeTime ? `完成时间：${record.completeTime}` : ''}
|
||
${record.remark ? `备注：${record.remark}` : ''}
|
||
`.trim()
|
||
|
||
Taro.showModal({
|
||
title: '提现详情',
|
||
content,
|
||
showCancel: false
|
||
})
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<View className="withdraw-detail-page">
|
||
<View className="loading-container">
|
||
<View className="text-center text-gray-500">加载中...</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<View className="withdraw-detail-page">
|
||
{records.length === 0 ? (
|
||
<View className="empty-container">
|
||
<Empty description="暂无提现记录" />
|
||
</View>
|
||
) : (
|
||
<View className="records-list">
|
||
{records.map((record) => (
|
||
<View
|
||
key={record.id}
|
||
className="record-item"
|
||
onClick={() => handleRecordClick(record)}
|
||
>
|
||
<View className="record-header">
|
||
<View className="amount">¥{record.amount.toFixed(2)}</View>
|
||
<View
|
||
className="status"
|
||
style={{ color: getStatusColor(record.status) }}
|
||
>
|
||
{record.statusText}
|
||
</View>
|
||
</View>
|
||
<View className="record-info">
|
||
<View className="time">申请时间：{record.createTime}</View>
|
||
{record.completeTime && (
|
||
<View className="time">完成时间：{record.completeTime}</View>
|
||
)}
|
||
{record.remark && (
|
||
<View className="remark">备注：{record.remark}</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
))}
|
||
</View>
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default WithdrawDetail
|