补分销中心页面

2025-08-10 01:38:17 +08:00
parent 44fd815fe7
commit afe54770a8
20 changed files with 2499 additions and 4 deletions
--- a/src/dealer/withdraw/index.tsx
+++ b/src/dealer/withdraw/index.tsx
@@ -0,0 +1,146 @@
+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