补分销中心页面

src/dealer/withdraw/index.scss

@@ -0,0 +1,75 @@
+.withdraw-detail-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 16px;
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+  }
+
+  .empty-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+  }
+
+  .records-list {
+    .record-item {
+      background: white;
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:active {
+        transform: scale(0.98);
+        background-color: #f9f9f9;
+      }
+
+      .record-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+
+        .amount {
+          font-size: 20px; // 对应 text-xl，重要金额
+          font-weight: bold;
+          color: #1f2937;
+        }
+
+        .status {
+          font-size: 14px; // 对应 text-sm
+          font-weight: 500;
+          padding: 4px 12px;
+          border-radius: 20px;
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+      }
+
+      .record-info {
+        .time {
+          font-size: 16px; // 对应 text-base
+          color: #6b7280;
+          margin-bottom: 4px;
+        }
+
+        .remark {
+          font-size: 16px; // 对应 text-base
+          color: #ef4444;
+          margin-top: 8px;
+          padding: 8px;
+          background-color: #fef2f2;
+          border-radius: 6px;
+          border-left: 3px solid #ef4444;
+        }
+      }
+    }
+  }
+}

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