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

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

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>
   )
 }