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

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

src/components/GradientThemeSelector.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Popup, Button } from '@nutui/nutui-react-taro'
+import { gradientThemes, GradientTheme } from '@/styles/gradients'
+
+interface GradientThemeSelectorProps {
+  visible: boolean
+  onClose: () => void
+  onSelect: (theme: GradientTheme) => void
+  currentTheme?: GradientTheme
+}
+
+const GradientThemeSelector: React.FC<GradientThemeSelectorProps> = ({
+  visible,
+  onClose,
+  onSelect,
+  currentTheme
+}) => {
+  const [selectedTheme, setSelectedTheme] = useState<GradientTheme | null>(currentTheme || null)
+
+  const handleThemeSelect = (theme: GradientTheme) => {
+    setSelectedTheme(theme)
+  }
+
+  const handleConfirm = () => {
+    if (selectedTheme) {
+      onSelect(selectedTheme)
+      onClose()
+    }
+  }
+
+  const renderThemeItem = (theme: GradientTheme) => {
+    const isSelected = selectedTheme?.name === theme.name
+
+    return (
+      <View
+        key={theme.name}
+        className={`p-3 rounded-lg border-2 ${isSelected ? 'border-blue-500' : 'border-gray-200'}`}
+        onClick={() => handleThemeSelect(theme)}
+      >
+        {/* 渐变预览 */}
+        <View
+          className="w-full h-16 rounded-lg mb-2"
+          style={{
+            background: theme.background
+          }}
+        >
+          <View className="w-full h-full flex items-center justify-center">
+            <Text className="text-white text-xs font-bold drop-shadow-sm">
+              预览
+            </Text>
+          </View>
+        </View>
+
+        {/* 主题信息 */}
+        <View className="text-center">
+          <Text className="text-sm font-semibold text-gray-800 mb-1">
+            {theme.description.split(' - ')[0]}
+          </Text>
+          <Text className="text-xs text-gray-500">
+            {theme.description.split(' - ')[1]}
+          </Text>
+        </View>
+
+        {/* 选中标识 */}
+        {isSelected && (
+          <View className="absolute top-1 right-1 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+            <Text className="text-white text-xs">✓</Text>
+          </View>
+        )}
+      </View>
+    )
+  }
+
+  return (
+    <Popup
+      visible={visible}
+      position="bottom"
+      onClose={onClose}
+      style={{ height: '70vh' }}
+    >
+      <View className="p-4">
+        <View className="flex items-center justify-between mb-4">
+          <Text className="text-lg font-bold">选择主题</Text>
+          <Button size="small" fill="outline" onClick={onClose}>
+            取消
+          </Button>
+        </View>
+
+        <Text className="text-sm text-gray-600 mb-4">
+          选择您喜欢的渐变主题，让界面更符合您的个人风格
+        </Text>
+
+        {/* 主题网格 */}
+        <View className="grid grid-cols-2 gap-3 mb-6">
+          {gradientThemes.map(renderThemeItem)}
+        </View>
+
+        {/* 确认按钮 */}
+        <Button
+          type="primary"
+          block
+          disabled={!selectedTheme}
+          onClick={handleConfirm}
+        >
+          应用主题
+        </Button>
+      </View>
+    </Popup>
+  )
+}
+
+export default GradientThemeSelector

src/dealer/index.tsx

@@ -1,7 +1,18 @@
 import React from 'react'
-import { View, Text } from '@tarojs/components'
-import { Button, Cell, CellGroup, Tag } from '@nutui/nutui-react-taro'
-import { useDealerUser } from '@/hooks/useDealerUser'
+import {View, Text} from '@tarojs/components'
+import {Button, Cell, CellGroup, Tag, Grid, Avatar, Divider} from '@nutui/nutui-react-taro'
+import {
+  User,
+  Shopping,
+  Dongdong,
+  Share,
+  Service,
+  ArrowRight,
+  Purse,
+  People
+} from '@nutui/icons-react-taro'
+import {useDealerUser} from '@/hooks/useDealerUser'
+import { gradientUtils, businessGradients, cardGradients, textGradients } from '@/styles/gradients'
 import Taro from '@tarojs/taro'
 
 const DealerIndex: React.FC = () => {
@@ -15,10 +26,39 @@ const DealerIndex: React.FC = () => {
   // 跳转到申请页面
   const navigateToApply = () => {
     Taro.navigateTo({
-      url: '/pages/dealer/apply/add'
+      url: '/dealer/apply/add'
     })
   }
 
+  // 导航到各个功能页面
+  const navigateToPage = (url: string) => {
+    Taro.navigateTo({url})
+  }
+
+  // 格式化金额
+  const formatMoney = (money?: string) => {
+    if (!money) return '0.00'
+    return parseFloat(money).toFixed(2)
+  }
+
+  // 格式化时间
+  const formatTime = (time?: string) => {
+    if (!time) return '-'
+    return new Date(time).toLocaleDateString()
+  }
+
+  // 获取用户主题
+  const userTheme = gradientUtils.getThemeByUserId(dealerUser?.userId)
+
+  // 获取渐变背景
+  const getGradientBackground = (themeColor?: string) => {
+    if (themeColor) {
+      const darkerColor = gradientUtils.adjustColorBrightness(themeColor, -30)
+      return gradientUtils.createGradient(themeColor, darkerColor)
+    }
+    return userTheme.background
+  }
+
   if (error) {
     return (
       <View className="p-4">
@@ -34,123 +74,178 @@ const DealerIndex: React.FC = () => {
 
   return (
     <View className="bg-gray-50 min-h-screen">
-      {/* 页面标题 */}
-      <View className="bg-white px-4 py-3 border-b border-gray-100 flex justify-between items-center">
-        <Text className="text-lg font-bold text-center">
-          {dealerUser?.realName}
-        </Text>
-        <Text className={'text-gray-400 text-xs'}>推荐人ID：{dealerUser?.refereeId}</Text>
-      </View>
-
-      {!dealerUser ? (
-        // 非经销商状态
-        <View className="bg-white mx-4 mt-4 rounded-lg p-6">
-          <View className="text-center py-8">
-            <Text className="text-gray-500 mb-4">您还不是经销商</Text>
-            <Text className="text-sm text-gray-400 mb-6">
-              成为经销商后可享受专属价格和佣金收益
-            </Text>
-            <Button
-              type="primary"
-              size="large"
-              onClick={navigateToApply}
-            >
-              申请成为经销商
-            </Button>
+      <View>
+        {/*头部信息*/}
+        {dealerUser && (
+          <View className="px-4 py-6 relative overflow-hidden" style={{
+            background: getGradientBackground(dealerUser?.themeColor)
+          }}>
+            {/* 装饰性背景元素 */}
+            <View className="absolute top-0 right-0 w-32 h-32 rounded-full opacity-10" style={{
+              background: 'radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)',
+              transform: 'translate(50%, -50%)'
+            }}></View>
+            <View className="absolute bottom-0 left-0 w-24 h-24 rounded-full opacity-10" style={{
+              background: 'radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%)',
+              transform: 'translate(-50%, 50%)'
+            }}></View>
+            <View className="absolute top-1/2 left-1/2 w-16 h-16 rounded-full opacity-5" style={{
+              background: 'radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%)',
+              transform: 'translate(-50%, -50%)'
+            }}></View>
+            <View className="flex items-center justify-between relative z-10">
+              <Avatar
+                size="50"
+                src={dealerUser?.qrcode}
+                icon={<User/>}
+                className="mr-4"
+                style={{
+                  border: '2px solid rgba(255, 255, 255, 0.3)',
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+                }}
+              />
+              <View className="flex-1">
+                <Text className="text-white text-lg font-bold mb-1" style={{
+                  textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)'
+                }}>
+                  {dealerUser?.realName || '分销商'}
+                </Text>
+                <Text className="text-sm" style={{
+                  color: 'rgba(255, 255, 255, 0.8)'
+                }}>
+                  ID: {dealerUser.userId} | 推荐人: {dealerUser.refereeId || '无'}
+                </Text>
+              </View>
+              <View className="text-right">
+                <Text className="text-xs" style={{
+                  color: 'rgba(255, 255, 255, 0.9)'
+                }}>加入时间</Text>
+                <Text className="text-xs" style={{
+                  color: 'rgba(255, 255, 255, 0.7)'
+                }}>
+                  {formatTime(dealerUser.createTime)}
+                </Text>
+              </View>
+            </View>
           </View>
-        </View>
-      ) : (
-        // 经销商信息展示
-        <View>
-          {/* 状态卡片 */}
-          <View className="bg-white mx-4 mt-4 rounded-lg p-4">
+        )}
+
+        {/* 佣金统计卡片 */}
+        {dealerUser && (
+          <View className="mx-4 -mt-6 rounded-xl p-4 relative z-10" style={cardGradients.elevated}>
+            <Text className="font-semibold mb-4 text-gray-800">佣金统计</Text>
+            <View className="grid grid-cols-3 gap-4">
+              <View className="text-center p-3 rounded-lg" style={{
+                background: businessGradients.money.available,
+                backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)'
+              }}>
+                <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
+                  ¥{formatMoney(dealerUser.money)}
+                </Text>
+                <Text className="text-xs text-white text-opacity-90">可提现</Text>
+              </View>
+              <View className="text-center p-3 rounded-lg" style={{
+                background: businessGradients.money.frozen,
+                backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)'
+              }}>
+                <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
+                  ¥{formatMoney(dealerUser.freezeMoney)}
+                </Text>
+                <Text className="text-xs text-white text-opacity-90">冻结中</Text>
+              </View>
+              <View className="text-center p-3 rounded-lg" style={{
+                background: businessGradients.money.total,
+                backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)'
+              }}>
+                <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
+                  ¥{formatMoney(dealerUser.totalMoney)}
+                </Text>
+                <Text className="text-xs text-white text-opacity-90">累计收益</Text>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 团队统计 */}
+        {dealerUser && (
+          <View className="bg-white mx-4 mt-4 rounded-xl p-4">
             <View className="flex items-center justify-between mb-4">
-              <Text className="text-lg font-semibold">经销商状态</Text>
-              <Tag>
-                {dealerUser.realName}
-              </Tag>
-            </View>
-
-            {/* 基本信息 */}
-            <CellGroup>
-              <Cell
-                title="经销商ID"
-                extra={dealerUser.userId || '-'}
-              />
-              <Cell
-                title="refereeId"
-                extra={dealerUser.refereeId || '-'}
-              />
-              <Cell
-                title="成为经销商时间"
-                extra={
-                  dealerUser.money
-                }
-              />
-
-            </CellGroup>
-
-            {/* 操作按钮 */}
-            <View className="mt-6 space-y-3">
-              <Button
-                type="primary"
-                size="large"
-                loading={loading}
+              <Text className="font-semibold text-gray-800">我的团队</Text>
+              <Text
+                className="text-blue-500 text-sm"
+                onClick={() => navigateToPage('/dealer/team/index')}
               >
-                检查状态
-              </Button>
-            </View>
-          </View>
-
-          {/* 经销商权益 */}
-          <View className="bg-white mx-4 mt-4 rounded-lg p-4">
-            <Text className="font-semibold mb-3">经销商权益</Text>
-            <View className="space-y-2">
-              <Text className="text-sm text-gray-600">
-                • 享受经销商专属价格
-              </Text>
-              <Text className="text-sm text-gray-600">
-                • 获得推广佣金收益
-              </Text>
-              <Text className="text-sm text-gray-600">
-                • 优先获得新品信息
-              </Text>
-              <Text className="text-sm text-gray-600">
-                • 专属客服支持
+                查看详情 <ArrowRight size="12"/>
               </Text>
             </View>
-          </View>
-
-          {/* 佣金统计 */}
-          <View className="bg-white mx-4 mt-4 rounded-lg p-4">
-            <Text className="font-semibold mb-3">佣金统计</Text>
             <View className="grid grid-cols-3 gap-4">
               <View className="text-center">
-                <Text className="text-lg font-bold text-blue-600">0</Text>
-                <Text className="text-sm text-gray-500">今日佣金</Text>
+                <Text className="text-xl font-bold text-purple-500 mb-1">
+                  {dealerUser.firstNum || 0}
+                </Text>
+                <Text className="text-xs text-gray-500">一级成员</Text>
               </View>
               <View className="text-center">
-                <Text className="text-lg font-bold text-green-600">0</Text>
-                <Text className="text-sm text-gray-500">本月佣金</Text>
+                <Text className="text-xl font-bold text-indigo-500 mb-1">
+                  {dealerUser.secondNum || 0}
+                </Text>
+                <Text className="text-xs text-gray-500">二级成员</Text>
               </View>
               <View className="text-center">
-                <Text className="text-lg font-bold text-orange-600">0</Text>
-                <Text className="text-sm text-gray-500">累计佣金</Text>
+                <Text className="text-xl font-bold text-pink-500 mb-1">
+                  {dealerUser.thirdNum || 0}
+                </Text>
+                <Text className="text-xs text-gray-500">三级成员</Text>
               </View>
             </View>
           </View>
-        </View>
-      )}
+        )}
 
-      {/* 刷新按钮 */}
-      <View className="text-center py-4">
-        <Text
-          className="text-blue-500 text-sm"
-          onClick={refresh}
-        >
-          点击刷新数据
-        </Text>
+        {/* 功能导航 */}
+        <View className="bg-white mx-4 mt-4 rounded-xl p-4">
+          <Text className="font-semibold mb-4 text-gray-800">分销工具</Text>
+          <Grid columns={4} gap={16}>
+            <Grid.Item onClick={() => navigateToPage('/dealer/orders/index')}>
+              <View className="text-center">
+                <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
+                  <Shopping color="#3b82f6" size="20"/>
+                </View>
+                <Text className="text-xs text-gray-600">分销订单</Text>
+              </View>
+            </Grid.Item>
+
+            <Grid.Item onClick={() => navigateToPage('/dealer/withdraw/index')}>
+              <View className="text-center">
+                <View className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mx-auto mb-2">
+                  <Purse color="#10b981" size="20"/>
+                </View>
+                <Text className="text-xs text-gray-600">提现申请</Text>
+              </View>
+            </Grid.Item>
+
+            <Grid.Item onClick={() => navigateToPage('/dealer/team/index')}>
+              <View className="text-center">
+                <View className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mx-auto mb-2">
+                  <People color="#8b5cf6" size="20"/>
+                </View>
+                <Text className="text-xs text-gray-600">我的团队</Text>
+              </View>
+            </Grid.Item>
+
+            <Grid.Item onClick={() => navigateToPage('/dealer/qrcode/index')}>
+              <View className="text-center">
+                <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
+                  <Dongdong color="#f59e0b" size="20"/>
+                </View>
+                <Text className="text-xs text-gray-600">推广二维码</Text>
+              </View>
+            </Grid.Item>
+          </Grid>
+        </View>
       </View>
+
+      {/* 底部安全区域 */}
+      <View className="h-20"></View>
     </View>
   )
 }

src/dealer/orders/index.tsx

@@ -1,13 +1,140 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Cell, Empty } from '@nutui/nutui-react-taro'
+import { Cell, Empty, Tabs, Tag, Button, PullToRefresh } from '@nutui/nutui-react-taro'
 
 const DealerOrders: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('0')
+  const [refreshing, setRefreshing] = useState(false)
+
+  // 模拟订单数据
+  const mockOrders = [
+    {
+      id: '1',
+      orderNo: 'DD202412180001',
+      customerName: '张三',
+      amount: '299.00',
+      commission: '29.90',
+      status: 'completed',
+      createTime: '2024-12-18 10:30:00'
+    },
+    {
+      id: '2',
+      orderNo: 'DD202412180002',
+      customerName: '李四',
+      amount: '599.00',
+      commission: '59.90',
+      status: 'pending',
+      createTime: '2024-12-18 14:20:00'
+    }
+  ]
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'completed': return '已完成'
+      case 'pending': return '待结算'
+      case 'cancelled': return '已取消'
+      default: return '未知'
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return 'success'
+      case 'pending': return 'warning'
+      case 'cancelled': return 'danger'
+      default: return 'default'
+    }
+  }
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    // 模拟刷新
+    setTimeout(() => {
+      setRefreshing(false)
+    }, 1000)
+  }
+
+  const renderOrderItem = (order: any) => (
+    <View key={order.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">
+            订单号：{order.orderNo}
+          </Text>
+          <Text className="text-sm text-gray-500">
+            客户：{order.customerName}
+          </Text>
+        </View>
+        <Tag type={getStatusColor(order.status)} size="small">
+          {getStatusText(order.status)}
+        </Tag>
+      </View>
+
+      <View className="flex justify-between items-center">
+        <View>
+          <Text className="text-sm text-gray-600">
+            订单金额：¥{order.amount}
+          </Text>
+          <Text className="text-sm text-orange-500 font-semibold">
+            预计佣金：¥{order.commission}
+          </Text>
+        </View>
+        <Text className="text-xs text-gray-400">
+          {order.createTime}
+        </Text>
+      </View>
+    </View>
+  )
+
   return (
-    <View className="p-4">
-      <Text className="text-lg font-bold mb-4">分销订单</Text>
-      
-      <Empty description="暂无分销订单" />
+    <View className="bg-gray-50 min-h-screen">
+      {/* 统计卡片 */}
+      <View className="bg-white p-4 mb-4">
+        <View className="grid grid-cols-3 gap-4">
+          <View className="text-center">
+            <Text className="text-lg font-bold text-blue-500">2</Text>
+            <Text className="text-xs text-gray-500">总订单</Text>
+          </View>
+          <View className="text-center">
+            <Text className="text-lg font-bold text-green-500">¥89.80</Text>
+            <Text className="text-xs text-gray-500">总佣金</Text>
+          </View>
+          <View className="text-center">
+            <Text className="text-lg font-bold text-orange-500">¥29.90</Text>
+            <Text className="text-xs text-gray-500">待结算</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 订单列表 */}
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.TabPane title="全部" value="0">
+          <PullToRefresh
+            loading={refreshing}
+            onRefresh={handleRefresh}
+          >
+            <View className="p-4">
+              {mockOrders.length > 0 ? (
+                mockOrders.map(renderOrderItem)
+              ) : (
+                <Empty description="暂无分销订单" />
+              )}
+            </View>
+          </PullToRefresh>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="待结算" value="1">
+          <View className="p-4">
+            {mockOrders.filter(o => o.status === 'pending').map(renderOrderItem)}
+          </View>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="已完成" value="2">
+          <View className="p-4">
+            {mockOrders.filter(o => o.status === 'completed').map(renderOrderItem)}
+          </View>
+        </Tabs.TabPane>
+      </Tabs>
     </View>
   )
 }

src/dealer/team/index.tsx

@@ -1,13 +1,255 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Empty } from '@nutui/nutui-react-taro'
+import { Empty, Tabs, Avatar, Tag, Cell, Progress } from '@nutui/nutui-react-taro'
+import { User, Crown, Star } from '@nutui/icons-react-taro'
+import { businessGradients, cardGradients } from '@/styles/gradients'
 
 const DealerTeam: React.FC = () => {
-  return (
-    <View className="p-4">
-      <Text className="text-lg font-bold mb-4">我的团队</Text>
+  const [activeTab, setActiveTab] = useState('0')
 
-      <Empty description="暂无团队成员" />
+  // 模拟团队数据
+  const teamStats = {
+    total: 28,
+    firstLevel: 12,
+    secondLevel: 10,
+    thirdLevel: 6,
+    monthlyCommission: '2,580.50'
+  }
+
+  const teamMembers = [
+    {
+      id: '1',
+      name: '张小明',
+      level: 1,
+      joinTime: '2024-11-15',
+      orderCount: 15,
+      commission: '580.50',
+      status: 'active',
+      avatar: '',
+      subMembers: 3
+    },
+    {
+      id: '2',
+      name: '李小红',
+      level: 1,
+      joinTime: '2024-12-01',
+      orderCount: 8,
+      commission: '320.00',
+      status: 'active',
+      avatar: '',
+      subMembers: 2
+    },
+    {
+      id: '3',
+      name: '王小华',
+      level: 2,
+      joinTime: '2024-12-10',
+      orderCount: 5,
+      commission: '150.00',
+      status: 'inactive',
+      avatar: '',
+      subMembers: 0
+    }
+  ]
+
+  const getLevelColor = (level: number) => {
+    switch (level) {
+      case 1: return '#f59e0b'
+      case 2: return '#8b5cf6'
+      case 3: return '#ec4899'
+      default: return '#6b7280'
+    }
+  }
+
+  const getLevelIcon = (level: number) => {
+    switch (level) {
+      case 1: return <Crown color={getLevelColor(level)} size="16" />
+      case 2: return <Star color={getLevelColor(level)} size="16" />
+      case 3: return <User color={getLevelColor(level)} size="16" />
+      default: return <User color={getLevelColor(level)} size="16" />
+    }
+  }
+
+  const renderMemberItem = (member: any) => (
+    <View key={member.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
+      <View className="flex items-center mb-3">
+        <Avatar
+          size="40"
+          src={member.avatar}
+          icon={<User />}
+          className="mr-3"
+        />
+        <View className="flex-1">
+          <View className="flex items-center mb-1">
+            <Text className="font-semibold text-gray-800 mr-2">
+              {member.name}
+            </Text>
+            {getLevelIcon(member.level)}
+            <Text className="text-xs text-gray-500 ml-1">
+              {member.level}级
+            </Text>
+          </View>
+          <Text className="text-xs text-gray-500">
+            加入时间：{member.joinTime}
+          </Text>
+        </View>
+        <View className="text-right">
+          <Tag
+            type={member.status === 'active' ? 'success' : 'default'}
+            size="small"
+          >
+            {member.status === 'active' ? '活跃' : '沉默'}
+          </Tag>
+        </View>
+      </View>
+
+      <View className="grid grid-cols-3 gap-4 text-center">
+        <View>
+          <Text className="text-sm font-semibold text-blue-600">
+            {member.orderCount}
+          </Text>
+          <Text className="text-xs text-gray-500">订单数</Text>
+        </View>
+        <View>
+          <Text className="text-sm font-semibold text-green-600">
+            ¥{member.commission}
+          </Text>
+          <Text className="text-xs text-gray-500">贡献佣金</Text>
+        </View>
+        <View>
+          <Text className="text-sm font-semibold text-purple-600">
+            {member.subMembers}
+          </Text>
+          <Text className="text-xs text-gray-500">下级成员</Text>
+        </View>
+      </View>
+    </View>
+  )
+
+  const renderOverview = () => (
+    <View className="p-4">
+      {/* 团队统计卡片 */}
+      <View className="rounded-xl p-6 mb-6 text-white relative overflow-hidden" style={{
+        background: 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)'
+      }}>
+        {/* 装饰背景 */}
+        <View className="absolute top-0 right-0 w-32 h-32 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="absolute bottom-0 left-0 w-20 h-20 rounded-full opacity-5" style={{
+          background: 'radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%)',
+          transform: 'translate(-50%, 50%)'
+        }}></View>
+
+        <View className="relative z-10">
+          <Text className="text-lg font-bold mb-4 text-white drop-shadow-sm">团队总览</Text>
+          <View className="grid grid-cols-2 gap-4">
+            <View>
+              <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">{teamStats.total}</Text>
+              <Text className="text-white text-opacity-80 text-sm">团队总人数</Text>
+            </View>
+            <View>
+              <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">¥{teamStats.monthlyCommission}</Text>
+              <Text className="text-white text-opacity-80 text-sm">本月团队佣金</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 层级分布 */}
+      <View className="bg-white rounded-xl p-4 mb-4">
+        <Text className="font-semibold mb-4 text-gray-800">层级分布</Text>
+        <View className="space-y-3">
+          <View className="flex items-center justify-between">
+            <View className="flex items-center">
+              <Crown color="#f59e0b" size="16" className="mr-2" />
+              <Text className="text-sm">一级成员</Text>
+            </View>
+            <View className="flex items-center">
+              <Text className="text-sm font-semibold mr-2">{teamStats.firstLevel}</Text>
+              <Progress
+                percentage={(teamStats.firstLevel / teamStats.total) * 100}
+                strokeWidth="6"
+                strokeColor="#f59e0b"
+                className="w-20"
+              />
+            </View>
+          </View>
+
+          <View className="flex items-center justify-between">
+            <View className="flex items-center">
+              <Star color="#8b5cf6" size="16" className="mr-2" />
+              <Text className="text-sm">二级成员</Text>
+            </View>
+            <View className="flex items-center">
+              <Text className="text-sm font-semibold mr-2">{teamStats.secondLevel}</Text>
+              <Progress
+                percentage={(teamStats.secondLevel / teamStats.total) * 100}
+                strokeWidth="6"
+                strokeColor="#8b5cf6"
+                className="w-20"
+              />
+            </View>
+          </View>
+
+          <View className="flex items-center justify-between">
+            <View className="flex items-center">
+              <User color="#ec4899" size="16" className="mr-2" />
+              <Text className="text-sm">三级成员</Text>
+            </View>
+            <View className="flex items-center">
+              <Text className="text-sm font-semibold mr-2">{teamStats.thirdLevel}</Text>
+              <Progress
+                percentage={(teamStats.thirdLevel / teamStats.total) * 100}
+                strokeWidth="6"
+                strokeColor="#ec4899"
+                className="w-20"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 最新成员 */}
+      <View className="bg-white rounded-xl p-4">
+        <Text className="font-semibold mb-4 text-gray-800">最新成员</Text>
+        {teamMembers.slice(0, 3).map(renderMemberItem)}
+      </View>
+    </View>
+  )
+
+  const renderMemberList = (level?: number) => (
+    <View className="p-4">
+      {teamMembers
+        .filter(member => !level || member.level === level)
+        .map(renderMemberItem)}
+
+      {teamMembers.filter(member => !level || member.level === level).length === 0 && (
+        <Empty description={`暂无${level ? level + '级' : ''}团队成员`} />
+      )}
+    </View>
+  )
+
+  return (
+    <View className="bg-gray-50 min-h-screen">
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.TabPane title="团队总览" value="0">
+          {renderOverview()}
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="一级成员" value="1">
+          {renderMemberList(1)}
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="二级成员" value="2">
+          {renderMemberList(2)}
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="三级成员" value="3">
+          {renderMemberList(3)}
+        </Tabs.TabPane>
+      </Tabs>
     </View>
   )
 }

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

src/styles/gradients.ts

@@ -0,0 +1,223 @@
+/**
+ * 渐变主题配置
+ * 提供统一的渐变样式管理
+ */
+
+export interface GradientTheme {
+  name: string
+  primary: string
+  secondary?: string
+  background: string
+  textColor: string
+  description: string
+}
+
+// 预定义渐变主题
+export const gradientThemes: GradientTheme[] = [
+  {
+    name: 'ocean',
+    primary: '#667eea',
+    secondary: '#764ba2',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    textColor: '#ffffff',
+    description: '海洋蓝紫 - 科技感与专业感'
+  },
+  {
+    name: 'sunset',
+    primary: '#f093fb',
+    secondary: '#f5576c',
+    background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    textColor: '#ffffff',
+    description: '日落橙红 - 活力与热情'
+  },
+  {
+    name: 'fresh',
+    primary: '#4facfe',
+    secondary: '#00f2fe',
+    background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    textColor: '#ffffff',
+    description: '清新蓝绿 - 清新与活力'
+  },
+  {
+    name: 'nature',
+    primary: '#43e97b',
+    secondary: '#38f9d7',
+    background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+    textColor: '#ffffff',
+    description: '自然绿青 - 生机与成长'
+  },
+  {
+    name: 'warm',
+    primary: '#fa709a',
+    secondary: '#fee140',
+    background: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+    textColor: '#ffffff',
+    description: '温暖金粉 - 温馨与友好'
+  },
+  {
+    name: 'elegant',
+    primary: '#a8edea',
+    secondary: '#fed6e3',
+    background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
+    textColor: '#374151',
+    description: '优雅淡彩 - 柔和与精致'
+  },
+  {
+    name: 'royal',
+    primary: '#667eea',
+    secondary: '#764ba2',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    textColor: '#ffffff',
+    description: '皇家紫蓝 - 高贵与权威'
+  },
+  {
+    name: 'fire',
+    primary: '#ff9a9e',
+    secondary: '#fecfef',
+    background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
+    textColor: '#ffffff',
+    description: '火焰粉红 - 激情与浪漫'
+  }
+]
+
+// 业务场景渐变
+export const businessGradients = {
+  // 分销商相关
+  dealer: {
+    header: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    card: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+    success: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
+    warning: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
+    danger: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)',
+    info: 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
+  },
+  
+  // 订单相关
+  order: {
+    pending: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)',
+    completed: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+    cancelled: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+    processing: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)'
+  },
+  
+  // 金额相关
+  money: {
+    available: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+    frozen: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+    total: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
+  }
+}
+
+// 卡片渐变样式
+export const cardGradients = {
+  glass: {
+    background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    backdropFilter: 'blur(10px)'
+  },
+  
+  subtle: {
+    background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+    border: '1px solid rgba(255, 255, 255, 0.8)',
+    boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05)'
+  },
+  
+  elevated: {
+    background: 'linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%)',
+    border: '1px solid rgba(255, 255, 255, 0.9)',
+    boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06)'
+  }
+}
+
+// 文字渐变样式
+export const textGradients = {
+  primary: {
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent'
+  },
+  
+  success: {
+    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent'
+  },
+  
+  warning: {
+    background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent'
+  },
+  
+  danger: {
+    background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent'
+  }
+}
+
+// 工具函数
+export const gradientUtils = {
+  // 根据用户ID获取主题
+  getThemeByUserId: (userId?: number): GradientTheme => {
+    if (!userId) return gradientThemes[0]
+    const index = userId % gradientThemes.length
+    return gradientThemes[index]
+  },
+  
+  // 根据主题名获取主题
+  getThemeByName: (name: string): GradientTheme | undefined => {
+    return gradientThemes.find(theme => theme.name === name)
+  },
+  
+  // 调整颜色亮度
+  adjustColorBrightness: (color: string, percent: number): string => {
+    const num = parseInt(color.replace("#", ""), 16)
+    const amt = Math.round(2.55 * percent)
+    const R = (num >> 16) + amt
+    const G = (num >> 8 & 0x00FF) + amt
+    const B = (num & 0x0000FF) + amt
+    return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+      (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
+  },
+  
+  // 生成自定义渐变
+  createGradient: (color1: string, color2: string, direction = '135deg'): string => {
+    return `linear-gradient(${direction}, ${color1} 0%, ${color2} 100%)`
+  },
+  
+  // 获取渐变的主色调
+  getPrimaryColor: (gradient: string): string => {
+    const match = gradient.match(/#[a-fA-F0-9]{6}/)
+    return match ? match[0] : '#667eea'
+  }
+}
+
+// 动画渐变
+export const animatedGradients = {
+  flowing: {
+    background: 'linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c)',
+    backgroundSize: '400% 400%',
+    animation: 'gradientFlow 15s ease infinite'
+  },
+  
+  pulse: {
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    animation: 'gradientPulse 3s ease-in-out infinite'
+  }
+}
+
+// CSS 动画关键帧（需要在全局样式中定义）
+export const gradientAnimations = `
+@keyframes gradientFlow {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes gradientPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+`