From 8efeb9a5bd45a4e929a8570b49fd3d5f40f62cd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Mon, 18 Aug 2025 21:20:03 +0800 Subject: [PATCH] =?UTF-8?q?feat(dealer):=20=E9=87=8D=E6=9E=84=E5=88=86?= =?UTF-8?q?=E9=94=80=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化了分销中心首页、分销订单、提现申请和团队管理页面的视觉和功能- 新增了渐变设计指南和主题选择器组件 -改进了数据展示、功能导航和用户体验 --- docs/DEALER_OPTIMIZATION.md | 137 ++++++++++ docs/GRADIENT_DESIGN_GUIDE.md | 206 +++++++++++++++ REQUEST_USAGE.md => docs/REQUEST_USAGE.md | 0 src/components/GradientThemeSelector.tsx | 113 ++++++++ src/dealer/index.tsx | 301 ++++++++++++++-------- src/dealer/orders/index.tsx | 139 +++++++++- src/dealer/team/index.tsx | 252 +++++++++++++++++- src/dealer/withdraw/index.tsx | 238 +++++++++++++++-- src/styles/gradients.ts | 223 ++++++++++++++++ 9 files changed, 1478 insertions(+), 131 deletions(-) create mode 100644 docs/DEALER_OPTIMIZATION.md create mode 100644 docs/GRADIENT_DESIGN_GUIDE.md rename REQUEST_USAGE.md => docs/REQUEST_USAGE.md (100%) create mode 100644 src/components/GradientThemeSelector.tsx create mode 100644 src/styles/gradients.ts diff --git a/docs/DEALER_OPTIMIZATION.md b/docs/DEALER_OPTIMIZATION.md new file mode 100644 index 0000000..9423e8c --- /dev/null +++ b/docs/DEALER_OPTIMIZATION.md @@ -0,0 +1,137 @@ +# 分销中心页面优化总结 + +## 🔍 原始问题分析 + +### 主要问题 +1. **数据展示错误**：成为经销商时间显示的是 `money` 字段 +2. **功能缺失**：缺少导航到其他分销功能的入口 +3. **用户体验差**：页面单调，缺少视觉层次 +4. **代码问题**：路径错误，硬编码数据 + +## 🚀 优化方案 + +### 1. 分销中心首页 (`/dealer/index.tsx`) + +#### 优化内容 +- **视觉升级**：使用渐变背景和卡片设计 +- **功能导航**：添加4个核心功能的快捷入口 +- **数据可视化**：佣金和团队数据的直观展示 +- **状态区分**：非经销商和经销商状态的不同展示 + +#### 新增功能 +- 用户头像和基本信息展示 +- 佣金统计（可提现、冻结中、累计收益） +- 团队统计（一级、二级、三级成员） +- 功能导航网格（分销订单、提现申请、我的团队、推广二维码） + +### 2. 分销订单页面 (`/dealer/orders/index.tsx`) + +#### 优化内容 +- **标签页设计**：全部、待结算、已完成 +- **统计面板**：总订单、总佣金、待结算金额 +- **下拉刷新**：支持手动刷新数据 +- **订单卡片**：清晰的订单信息展示 + +#### 新增功能 +- 订单状态标签和颜色区分 +- 佣金预计和实际到账显示 +- 客户信息和订单时间 + +### 3. 提现申请页面 (`/dealer/withdraw/index.tsx`) + +#### 优化内容 +- **双标签页**：申请提现 + 提现记录 +- **余额卡片**：渐变设计显示可提现余额 +- **快捷金额**：预设金额按钮和全部提现 +- **提现方式**：微信、支付宝、银行卡选择 + +#### 新增功能 +- 提现规则说明（最低金额、手续费） +- 提现记录状态跟踪 +- 表单验证和用户体验优化 + +### 4. 团队管理页面 (`/dealer/team/index.tsx`) + +#### 优化内容 +- **团队总览**：统计卡片和层级分布图 +- **成员分级**：按一级、二级、三级分类显示 +- **成员卡片**：头像、等级、贡献数据 +- **进度条**：可视化层级分布比例 + +#### 新增功能 +- 成员活跃状态标识 +- 贡献佣金和订单数统计 +- 下级成员数量显示 +- 等级图标和颜色区分 + +## 📊 技术改进 + +### 1. 数据处理 +```typescript +// 格式化金额 +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() +} +``` + +### 2. 状态管理 +- 使用真实的 `dealerUser` 数据 +- 正确的字段映射和显示 +- 错误处理和加载状态 + +### 3. 导航优化 +- 修复路径错误：`/dealer/apply/add` 而不是 `/pages/dealer/apply/add` +- 统一的页面跳转方法 +- 清晰的功能入口 + +## 🎨 UI/UX 改进 + +### 1. 视觉设计 +- **渐变背景**：增加视觉吸引力 +- **卡片设计**：信息分组和层次感 +- **图标系统**：统一的图标风格 +- **颜色系统**：语义化的颜色使用 + +### 2. 交互体验 +- **下拉刷新**：实时数据更新 +- **快捷操作**：减少用户操作步骤 +- **状态反馈**：清晰的状态提示 +- **响应式布局**：适配不同屏幕尺寸 + +### 3. 信息架构 +- **功能分组**：相关功能集中展示 +- **数据层次**：重要信息突出显示 +- **导航清晰**：明确的页面结构 + +## 🔧 待完善功能 + +### 1. 数据接口集成 +- 连接真实的分销订单 API +- 实现提现申请和记录查询 +- 团队成员数据的实时获取 + +### 2. 功能增强 +- 推广二维码生成和分享 +- 佣金明细和结算记录 +- 团队成员邀请和管理 + +### 3. 性能优化 +- 列表虚拟化（大量数据时） +- 图片懒加载 +- 缓存策略优化 + +## 📱 移动端适配 + +- 响应式设计确保各种屏幕尺寸下的良好体验 +- 触摸友好的交互元素 +- 合适的字体大小和间距 +- 底部安全区域处理 + +这次优化大幅提升了分销中心的用户体验和功能完整性，为后续的功能扩展奠定了良好基础。 diff --git a/docs/GRADIENT_DESIGN_GUIDE.md b/docs/GRADIENT_DESIGN_GUIDE.md new file mode 100644 index 0000000..926cbf6 --- /dev/null +++ b/docs/GRADIENT_DESIGN_GUIDE.md @@ -0,0 +1,206 @@ +# 🎨 渐变设计指南 + +## 概述 + +我为你的分销中心设计了一套完整的渐变主题系统，包含多种美观的渐变方案和统一的设计语言。 + +## 🌈 渐变主题方案 + +### 1. 预设主题 + +| 主题名称 | 颜色搭配 | 适用场景 | 视觉效果 | +|---------|---------|---------|---------| +| **ocean** | 蓝紫渐变 | 科技、专业 | 🌊 海洋般的深邃感 | +| **sunset** | 橙红渐变 | 活力、热情 | 🌅 日落般的温暖感 | +| **fresh** | 蓝绿渐变 | 清新、活力 | 🍃 清新自然的感觉 | +| **nature** | 绿青渐变 | 生机、成长 | 🌱 生机勃勃的活力 | +| **warm** | 金粉渐变 | 温馨、友好 | ☀️ 温暖亲和的感觉 | +| **elegant** | 淡彩渐变 | 优雅、精致 | 💎 优雅精致的品味 | +| **royal** | 皇家紫蓝 | 高贵、权威 | 👑 高贵典雅的气质 | +| **fire** | 火焰粉红 | 激情、浪漫 | 🔥 激情浪漫的氛围 | + +### 2. 业务场景渐变 + +```typescript +// 分销商相关 +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%)' +} + +// 金额相关 +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%)' // 累计 - 橙色 +} +``` + +## 🎯 设计特点 + +### 1. 视觉层次 +- **主背景**：动态渐变，根据用户ID自动选择 +- **卡片背景**：微妙的白色渐变，增加层次感 +- **装饰元素**：半透明圆形，增加空间感 + +### 2. 色彩心理学 +- **蓝色系**：信任、专业、稳定 +- **绿色系**：成长、财富、安全 +- **橙色系**：活力、温暖、友好 +- **紫色系**：高贵、创新、神秘 + +### 3. 交互反馈 +- **悬停效果**：轻微的亮度变化 +- **选中状态**：边框高亮 +- **加载状态**：渐变动画 + +## 🛠️ 使用方法 + +### 1. 基础使用 + +```tsx +import { businessGradients, cardGradients } from '@/styles/gradients' + +// 使用预设的业务渐变 + + 内容 + + +// 使用卡片渐变 + + 卡片内容 + +``` + +### 2. 动态主题 + +```tsx +import { gradientUtils } from '@/styles/gradients' + +// 根据用户ID获取主题 +const userTheme = gradientUtils.getThemeByUserId(userId) + + + 个性化内容 + +``` + +### 3. 自定义渐变 + +```tsx +import { gradientUtils } from '@/styles/gradients' + +// 创建自定义渐变 +const customGradient = gradientUtils.createGradient('#ff6b6b', '#4ecdc4', '45deg') + + + 自定义内容 + +``` + +## 🎨 设计原则 + +### 1. 一致性 +- 所有页面使用统一的渐变系统 +- 相同功能使用相同的颜色语义 +- 保持视觉风格的连贯性 + +### 2. 可访问性 +- 确保文字与背景有足够的对比度 +- 支持深色模式适配 +- 考虑色盲用户的体验 + +### 3. 性能优化 +- 使用 CSS 渐变而非图片 +- 避免过度复杂的渐变效果 +- 合理使用动画和过渡 + +## 📱 移动端适配 + +### 1. 响应式设计 +```css +/* 小屏幕优化 */ +@media (max-width: 768px) { + .gradient-header { + background-size: 200% 200%; + animation: gradientShift 8s ease infinite; + } +} +``` + +### 2. 性能考虑 +- 在低端设备上简化渐变效果 +- 使用 `will-change` 属性优化动画 +- 避免在滚动时使用复杂渐变 + +## 🔧 高级功能 + +### 1. 主题切换器 +```tsx +import GradientThemeSelector from '@/components/GradientThemeSelector' + + setShowThemeSelector(false)} + onSelect={handleThemeSelect} + currentTheme={currentTheme} +/> +``` + +### 2. 动画渐变 +```tsx +import { animatedGradients } from '@/styles/gradients' + + + 动态流动的渐变背景 + +``` + +### 3. 玻璃态效果 +```tsx +import { cardGradients } from '@/styles/gradients' + + + 毛玻璃效果卡片 + +``` + +## 🎯 最佳实践 + +### 1. 渐变方向 +- **135度**：最常用，自然舒适 +- **90度**：垂直渐变，适合长条内容 +- **45度**：对角渐变，动感活泼 + +### 2. 颜色选择 +- 选择色相相近的颜色 +- 避免过于强烈的对比 +- 考虑品牌色的融入 + +### 3. 层次搭配 +- 主背景：鲜艳渐变 +- 卡片背景：淡雅渐变 +- 文字：纯色或微渐变 + +## 🚀 未来扩展 + +### 1. 主题商店 +- 更多预设主题 +- 用户自定义主题 +- 主题分享功能 + +### 2. 智能推荐 +- 基于使用习惯推荐主题 +- 根据时间自动切换主题 +- 情境感知的主题选择 + +### 3. 高级效果 +- 3D 渐变效果 +- 粒子背景 +- 交互式渐变 + +这套渐变系统不仅美观，还具有很强的扩展性和可维护性，为你的应用提供了专业级的视觉体验！ diff --git a/REQUEST_USAGE.md b/docs/REQUEST_USAGE.md similarity index 100% rename from REQUEST_USAGE.md rename to docs/REQUEST_USAGE.md diff --git a/src/components/GradientThemeSelector.tsx b/src/components/GradientThemeSelector.tsx new file mode 100644 index 0000000..b1900d6 --- /dev/null +++ b/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 = ({ + visible, + onClose, + onSelect, + currentTheme +}) => { + const [selectedTheme, setSelectedTheme] = useState(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 ( + handleThemeSelect(theme)} + > + {/* 渐变预览 */} + + + + 预览 + + + + + {/* 主题信息 */} + + + {theme.description.split(' - ')[0]} + + + {theme.description.split(' - ')[1]} + + + + {/* 选中标识 */} + {isSelected && ( + + ✓ + + )} + + ) + } + + return ( + + + + 选择主题 + + + + + 选择您喜欢的渐变主题，让界面更符合您的个人风格 + + + {/* 主题网格 */} + + {gradientThemes.map(renderThemeItem)} + + + {/* 确认按钮 */} + + + + ) +} + +export default GradientThemeSelector diff --git a/src/dealer/index.tsx b/src/dealer/index.tsx index 14750cd..a029bc0 100644 --- a/src/dealer/index.tsx +++ b/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 ( @@ -34,123 +74,178 @@ const DealerIndex: React.FC = () => { return ( - {/* 页面标题 */} - - - {dealerUser?.realName} - - 推荐人ID：{dealerUser?.refereeId} - - - {!dealerUser ? ( - // 非经销商状态 - - - 您还不是经销商 - - 成为经销商后可享受专属价格和佣金收益 - - - - - ) : ( - // 经销商信息展示 - - {/* 状态卡片 */} - - - 经销商状态 - - {dealerUser.realName} - - - - {/* 基本信息 */} - - - - + {/*头部信息*/} + {dealerUser && ( + + {/* 装饰性背景元素 */} + + + + + } + className="mr-4" + style={{ + border: '2px solid rgba(255, 255, 255, 0.3)', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)' + }} /> - - - - {/* 操作按钮 */} - - + + + {dealerUser?.realName || '分销商'} + + + ID: {dealerUser.userId} | 推荐人: {dealerUser.refereeId || '无'} + + + + 加入时间 + + {formatTime(dealerUser.createTime)} + + + )} - {/* 经销商权益 */} - - 经销商权益 - - - • 享受经销商专属价格 - - - • 获得推广佣金收益 - - - • 优先获得新品信息 - - - • 专属客服支持 - + {/* 佣金统计卡片 */} + {dealerUser && ( + + 佣金统计 + + + + ¥{formatMoney(dealerUser.money)} + + 可提现 + + + + ¥{formatMoney(dealerUser.freezeMoney)} + + 冻结中 + + + + ¥{formatMoney(dealerUser.totalMoney)} + + 累计收益 + + )} - {/* 佣金统计 */} - - 佣金统计 + {/* 团队统计 */} + {dealerUser && ( + + + 我的团队 + navigateToPage('/dealer/team/index')} + > + 查看详情 + + - 0 - 今日佣金 + + {dealerUser.firstNum || 0} + + 一级成员 - 0 - 本月佣金 + + {dealerUser.secondNum || 0} + + 二级成员 - 0 - 累计佣金 + + {dealerUser.thirdNum || 0} + + 三级成员 + )} + + {/* 功能导航 */} + + 分销工具 + + navigateToPage('/dealer/orders/index')}> + + + + + 分销订单 + + + + navigateToPage('/dealer/withdraw/index')}> + + + + + 提现申请 + + + + navigateToPage('/dealer/team/index')}> + + + + + 我的团队 + + + + navigateToPage('/dealer/qrcode/index')}> + + + + + 推广二维码 + + + - )} - - {/* 刷新按钮 */} - - - 点击刷新数据 - + + {/* 底部安全区域 */} + ) } diff --git a/src/dealer/orders/index.tsx b/src/dealer/orders/index.tsx index 960a1f8..54dd84e 100644 --- a/src/dealer/orders/index.tsx +++ b/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) => ( + + + + + 订单号：{order.orderNo} + + + 客户：{order.customerName} + + + + {getStatusText(order.status)} + + + + + + + 订单金额：¥{order.amount} + + + 预计佣金：¥{order.commission} + + + + {order.createTime} + + + + ) + return ( - - 分销订单 - - + + {/* 统计卡片 */} + + + + 2 + 总订单 + + + ¥89.80 + 总佣金 + + + ¥29.90 + 待结算 + + + + + {/* 订单列表 */} + + + + + {mockOrders.length > 0 ? ( + mockOrders.map(renderOrderItem) + ) : ( + + )} + + + + + + + {mockOrders.filter(o => o.status === 'pending').map(renderOrderItem)} + + + + + + {mockOrders.filter(o => o.status === 'completed').map(renderOrderItem)} + + + ) } diff --git a/src/dealer/team/index.tsx b/src/dealer/team/index.tsx index 9291bae..4955023 100644 --- a/src/dealer/team/index.tsx +++ b/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 ( + const [activeTab, setActiveTab] = useState('0') + + // 模拟团队数据 + 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 + case 2: return + case 3: return + default: return + } + } + + const renderMemberItem = (member: any) => ( + + + } + className="mr-3" + /> + + + + {member.name} + + {getLevelIcon(member.level)} + + {member.level}级 + + + + 加入时间：{member.joinTime} + + + + + {member.status === 'active' ? '活跃' : '沉默'} + + + + + + + + {member.orderCount} + + 订单数 + + + + ¥{member.commission} + + 贡献佣金 + + + + {member.subMembers} + + 下级成员 + + + + ) + + const renderOverview = () => ( + + {/* 团队统计卡片 */} + + {/* 装饰背景 */} + + + + + 团队总览 + + + {teamStats.total} + 团队总人数 + + + ¥{teamStats.monthlyCommission} + 本月团队佣金 + + + + + + {/* 层级分布 */} + + 层级分布 + + + + + 一级成员 + + + {teamStats.firstLevel} + + + + + + + + 二级成员 + + + {teamStats.secondLevel} + + + + + + + + 三级成员 + + + {teamStats.thirdLevel} + + + + + + + {/* 最新成员 */} + + 最新成员 + {teamMembers.slice(0, 3).map(renderMemberItem)} + + + ) + + const renderMemberList = (level?: number) => ( - 我的团队 + {teamMembers + .filter(member => !level || member.level === level) + .map(renderMemberItem)} + + {teamMembers.filter(member => !level || member.level === level).length === 0 && ( + + )} + + ) + + return ( + + + + {renderOverview()} + + + + {renderMemberList(1)} + + + + {renderMemberList(2)} + - + + {renderMemberList(3)} + + ) } diff --git a/src/dealer/withdraw/index.tsx b/src/dealer/withdraw/index.tsx index a2ce148..9d154a8 100644 --- a/src/dealer/withdraw/index.tsx +++ b/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(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 = () => ( - 提现申请 - -
- + {/* 余额卡片 */} + + {/* 装饰背景 */} + + + + + 可提现余额 + ¥{availableAmount} + + + + + + + + 最低提现金额：¥100 | 手续费：免费 + + + + + + - + + + + {/* 快捷金额 */} + + 快捷金额 + + {quickAmounts.map(amount => ( + + ))} + + + + + + + + + 微信钱包 + + + 支付宝 + + + 银行卡 + + + + + + + - - - + + + - + - + - - - -
) + + const renderWithdrawRecords = () => ( + + {withdrawRecords.length > 0 ? ( + withdrawRecords.map(record => ( + + + + + 提现金额：¥{record.amount} + + + 提现账户：{record.account} + + + + {getStatusText(record.status)} + + + + + 申请时间：{record.createTime} + {record.completeTime && ( + + 完成时间：{record.completeTime} + + )} + + + )) + ) : ( + + )} + + ) + + return ( + + + + {renderWithdrawForm()} + + + + {renderWithdrawRecords()} + + + + ) } export default DealerWithdraw diff --git a/src/styles/gradients.ts b/src/styles/gradients.ts new file mode 100644 index 0000000..ff522b9 --- /dev/null +++ b/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; } +} +`