feat(dealer): 重构分销中心页面

- 优化了分销中心首页、分销订单、提现申请和团队管理页面的视觉和功能- 新增了渐变设计指南和主题选择器组件
-改进了数据展示、功能导航和用户体验

src/dealer/withdraw/index.tsx

@@ -1,35 +1,239 @@
-import React from 'react'
+import React, { useState, useRef } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Cell, Button, Form, Input } from '@nutui/nutui-react-taro'
+import {
+  Cell,
+  Button,
+  Form,
+  Input,
+  CellGroup,
+  Radio,
+  Tabs,
+  Tag,
+  Empty
+} from '@nutui/nutui-react-taro'
+import { Money, ArrowRight } from '@nutui/icons-react-taro'
+import { businessGradients, cardGradients } from '@/styles/gradients'
+import Taro from '@tarojs/taro'
 
 const DealerWithdraw: React.FC = () => {
-  return (
+  const [activeTab, setActiveTab] = useState('0')
+  const [selectedAccount, setSelectedAccount] = useState('')
+  const formRef = useRef<any>(null)
+
+  // 模拟可提现金额
+  const availableAmount = '1,288.50'
+
+  // 模拟提现记录
+  const withdrawRecords = [
+    {
+      id: '1',
+      amount: '500.00',
+      account: '尾号1234',
+      status: 'completed',
+      createTime: '2024-12-15 10:30:00',
+      completeTime: '2024-12-15 16:20:00'
+    },
+    {
+      id: '2',
+      amount: '300.00',
+      account: '尾号1234',
+      status: 'pending',
+      createTime: '2024-12-18 09:15:00'
+    }
+  ]
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'completed': return '已到账'
+      case 'pending': return '处理中'
+      case 'rejected': return '已拒绝'
+      default: return '未知'
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return 'success'
+      case 'pending': return 'warning'
+      case 'rejected': return 'danger'
+      default: return 'default'
+    }
+  }
+
+  const handleSubmit = (values: any) => {
+    console.log('提现申请:', values)
+    Taro.showToast({
+      title: '提现申请已提交',
+      icon: 'success'
+    })
+  }
+
+  const quickAmounts = ['100', '300', '500', '1000']
+
+  const setQuickAmount = (amount: string) => {
+    formRef.current?.setFieldsValue({ amount })
+  }
+
+  const setAllAmount = () => {
+    formRef.current?.setFieldsValue({ amount: availableAmount.replace(',', '') })
+  }
+
+  const renderWithdrawForm = () => (
     <View className="p-4">
-      <Text className="text-lg font-bold mb-4">提现申请</Text>
-      
-      <Form>
-        <Cell.Group>
+      {/* 余额卡片 */}
+      <View className="rounded-xl p-6 mb-6 text-white relative overflow-hidden" style={{
+        background: businessGradients.dealer.header
+      }}>
+        {/* 装饰背景 */}
+        <View className="absolute top-0 right-0 w-24 h-24 rounded-full opacity-10" style={{
+          background: 'radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)',
+          transform: 'translate(50%, -50%)'
+        }}></View>
+
+        <View className="flex items-center justify-between relative z-10">
+          <View>
+            <Text className="text-white text-opacity-80 text-sm mb-1">可提现余额</Text>
+            <Text className="text-2xl font-bold text-white drop-shadow-sm">¥{availableAmount}</Text>
+          </View>
+          <View className="p-3 rounded-full" style={{
+            background: 'rgba(255, 255, 255, 0.2)'
+          }}>
+            <Money color="white" size="32" />
+          </View>
+        </View>
+        <View className="mt-4 pt-4 relative z-10" style={{
+          borderTop: '1px solid rgba(255, 255, 255, 0.3)'
+        }}>
+          <Text className="text-white text-opacity-80 text-xs">
+            最低提现金额：¥100 | 手续费：免费
+          </Text>
+        </View>
+      </View>
+
+      <Form
+        ref={formRef}
+        onFinish={handleSubmit}
+        labelPosition="top"
+      >
+        <CellGroup>
           <Form.Item name="amount" label="提现金额" required>
-            <Input placeholder="请输入提现金额" type="number" />
+            <Input
+              placeholder="请输入提现金额"
+              type="number"
+              clearable
+            />
           </Form.Item>
-          
-          <Form.Item name="account" label="提现账户" required>
-            <Input placeholder="请输入提现账户" />
+
+          {/* 快捷金额 */}
+          <View className="px-4 py-2">
+            <Text className="text-sm text-gray-600 mb-2">快捷金额</Text>
+            <View className="flex flex-wrap gap-2">
+              {quickAmounts.map(amount => (
+                <Button
+                  key={amount}
+                  size="small"
+                  fill="outline"
+                  onClick={() => setQuickAmount(amount)}
+                >
+                  {amount}
+                </Button>
+              ))}
+              <Button
+                size="small"
+                fill="outline"
+                onClick={setAllAmount}
+              >
+                全部
+              </Button>
+            </View>
+          </View>
+
+          <Form.Item name="accountType" label="提现方式" required>
+            <Radio.Group value={selectedAccount} onChange={setSelectedAccount}>
+              <Cell.Group>
+                <Cell>
+                  <Radio value="wechat">微信钱包</Radio>
+                </Cell>
+                <Cell>
+                  <Radio value="alipay">支付宝</Radio>
+                </Cell>
+                <Cell>
+                  <Radio value="bank">银行卡</Radio>
+                </Cell>
+              </Cell.Group>
+            </Radio.Group>
           </Form.Item>
-          
+
+          <Form.Item name="account" label="账户信息" required>
+            <Input placeholder="请输入账户号码" />
+          </Form.Item>
+
+          <Form.Item name="accountName" label="账户姓名" required>
+            <Input placeholder="请输入账户姓名" />
+          </Form.Item>
+
           <Form.Item name="remark" label="备注">
-            <Input placeholder="请输入备注信息" />
+            <Input placeholder="请输入备注信息（可选）" />
           </Form.Item>
-        </Cell.Group>
-        
-        <View className="mt-4">
-          <Button block type="primary">
+        </CellGroup>
+
+        <View className="mt-6 px-4">
+          <Button block type="primary" nativeType="submit">
             申请提现
           </Button>
         </View>
       </Form>
     </View>
   )
+
+  const renderWithdrawRecords = () => (
+    <View className="p-4">
+      {withdrawRecords.length > 0 ? (
+        withdrawRecords.map(record => (
+          <View key={record.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
+            <View className="flex justify-between items-start mb-3">
+              <View>
+                <Text className="font-semibold text-gray-800 mb-1">
+                  提现金额：¥{record.amount}
+                </Text>
+                <Text className="text-sm text-gray-500">
+                  提现账户：{record.account}
+                </Text>
+              </View>
+              <Tag type={getStatusColor(record.status)} size="small">
+                {getStatusText(record.status)}
+              </Tag>
+            </View>
+
+            <View className="text-xs text-gray-400">
+              <Text>申请时间：{record.createTime}</Text>
+              {record.completeTime && (
+                <Text className="block mt-1">
+                  完成时间：{record.completeTime}
+                </Text>
+              )}
+            </View>
+          </View>
+        ))
+      ) : (
+        <Empty description="暂无提现记录" />
+      )}
+    </View>
+  )
+
+  return (
+    <View className="bg-gray-50 min-h-screen">
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.TabPane title="申请提现" value="0">
+          {renderWithdrawForm()}
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="提现记录" value="1">
+          {renderWithdrawRecords()}
+        </Tabs.TabPane>
+      </Tabs>
+    </View>
+  )
 }
 
 export default DealerWithdraw