forked from gxwebsoft/mp-10550
feat(dealer): 重构分销中心页面
- 优化了分销中心首页、分销订单、提现申请和团队管理页面的视觉和功能- 新增了渐变设计指南和主题选择器组件 -改进了数据展示、功能导航和用户体验
This commit is contained in:
137
docs/DEALER_OPTIMIZATION.md
Normal file
137
docs/DEALER_OPTIMIZATION.md
Normal file
@@ -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. 性能优化
|
||||
- 列表虚拟化（大量数据时）
|
||||
- 图片懒加载
|
||||
- 缓存策略优化
|
||||
|
||||
## 📱 移动端适配
|
||||
|
||||
- 响应式设计确保各种屏幕尺寸下的良好体验
|
||||
- 触摸友好的交互元素
|
||||
- 合适的字体大小和间距
|
||||
- 底部安全区域处理
|
||||
|
||||
这次优化大幅提升了分销中心的用户体验和功能完整性，为后续的功能扩展奠定了良好基础。
|
||||
206
docs/GRADIENT_DESIGN_GUIDE.md
Normal file
206
docs/GRADIENT_DESIGN_GUIDE.md
Normal file
@@ -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'
|
||||
|
||||
// 使用预设的业务渐变
|
||||
<View style={{ background: businessGradients.dealer.header }}>
|
||||
内容
|
||||
</View>
|
||||
|
||||
// 使用卡片渐变
|
||||
<View style={cardGradients.elevated}>
|
||||
卡片内容
|
||||
</View>
|
||||
```
|
||||
|
||||
### 2. 动态主题
|
||||
|
||||
```tsx
|
||||
import { gradientUtils } from '@/styles/gradients'
|
||||
|
||||
// 根据用户ID获取主题
|
||||
const userTheme = gradientUtils.getThemeByUserId(userId)
|
||||
|
||||
<View style={{ background: userTheme.background }}>
|
||||
个性化内容
|
||||
</View>
|
||||
```
|
||||
|
||||
### 3. 自定义渐变
|
||||
|
||||
```tsx
|
||||
import { gradientUtils } from '@/styles/gradients'
|
||||
|
||||
// 创建自定义渐变
|
||||
const customGradient = gradientUtils.createGradient('#ff6b6b', '#4ecdc4', '45deg')
|
||||
|
||||
<View style={{ background: customGradient }}>
|
||||
自定义内容
|
||||
</View>
|
||||
```
|
||||
|
||||
## 🎨 设计原则
|
||||
|
||||
### 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'
|
||||
|
||||
<GradientThemeSelector
|
||||
visible={showThemeSelector}
|
||||
onClose={() => setShowThemeSelector(false)}
|
||||
onSelect={handleThemeSelect}
|
||||
currentTheme={currentTheme}
|
||||
/>
|
||||
```
|
||||
|
||||
### 2. 动画渐变
|
||||
```tsx
|
||||
import { animatedGradients } from '@/styles/gradients'
|
||||
|
||||
<View style={animatedGradients.flowing}>
|
||||
动态流动的渐变背景
|
||||
</View>
|
||||
```
|
||||
|
||||
### 3. 玻璃态效果
|
||||
```tsx
|
||||
import { cardGradients } from '@/styles/gradients'
|
||||
|
||||
<View style={cardGradients.glass}>
|
||||
毛玻璃效果卡片
|
||||
</View>
|
||||
```
|
||||
|
||||
## 🎯 最佳实践
|
||||
|
||||
### 1. 渐变方向
|
||||
- **135度**：最常用，自然舒适
|
||||
- **90度**：垂直渐变，适合长条内容
|
||||
- **45度**：对角渐变，动感活泼
|
||||
|
||||
### 2. 颜色选择
|
||||
- 选择色相相近的颜色
|
||||
- 避免过于强烈的对比
|
||||
- 考虑品牌色的融入
|
||||
|
||||
### 3. 层次搭配
|
||||
- 主背景：鲜艳渐变
|
||||
- 卡片背景：淡雅渐变
|
||||
- 文字：纯色或微渐变
|
||||
|
||||
## 🚀 未来扩展
|
||||
|
||||
### 1. 主题商店
|
||||
- 更多预设主题
|
||||
- 用户自定义主题
|
||||
- 主题分享功能
|
||||
|
||||
### 2. 智能推荐
|
||||
- 基于使用习惯推荐主题
|
||||
- 根据时间自动切换主题
|
||||
- 情境感知的主题选择
|
||||
|
||||
### 3. 高级效果
|
||||
- 3D 渐变效果
|
||||
- 粒子背景
|
||||
- 交互式渐变
|
||||
|
||||
这套渐变系统不仅美观，还具有很强的扩展性和可维护性，为你的应用提供了专业级的视觉体验！
|
||||
83
docs/REQUEST_USAGE.md
Normal file
83
docs/REQUEST_USAGE.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# Request 工具使用说明
|
||||
|
||||
## 概述
|
||||
|
||||
`src/utils/request.ts` 已经适配了后台生成的 API 代码格式，支持两种使用方式：
|
||||
|
||||
## 1. 标准方式（适配后台生成代码）
|
||||
|
||||
后台生成的代码使用 `request.get<ApiResult>` 格式，返回完整的 `ApiResult` 响应：
|
||||
|
||||
```typescript
|
||||
// 后台生成的代码格式
|
||||
export async function pageCmsNavigation(params: CmsNavigationParam) {
|
||||
const res = await request.get<ApiResult<PageResult<CmsNavigation>>>(
|
||||
'/cms/cms-navigation/page',
|
||||
params
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
```
|
||||
|
||||
## 2. 便捷方式（自动提取数据）
|
||||
|
||||
如果你想要自动提取 `data` 字段，可以使用 `getData` 系列方法：
|
||||
|
||||
```typescript
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 自动提取 data 字段
|
||||
const data = await request.getData<CmsNavigation[]>('/cms/cms-navigation');
|
||||
|
||||
// 等价于
|
||||
const res = await request.get<ApiResult<CmsNavigation[]>>('/cms/cms-navigation');
|
||||
const data = res.data;
|
||||
```
|
||||
|
||||
## 可用方法
|
||||
|
||||
### 标准方法（返回完整 ApiResult）
|
||||
- `request.get<T>(url, params?, config?)`
|
||||
- `request.post<T>(url, data?, config?)`
|
||||
- `request.put<T>(url, data?, config?)`
|
||||
- `request.del<T>(url, data?, config?)`
|
||||
- `request.patch<T>(url, data?, config?)`
|
||||
|
||||
### 便捷方法（自动提取 data）
|
||||
- `request.getData<T>(url, params?, config?)`
|
||||
- `request.postData<T>(url, data?, config?)`
|
||||
- `request.putData<T>(url, data?, config?)`
|
||||
- `request.delData<T>(url, data?, config?)`
|
||||
|
||||
## 配置选项
|
||||
|
||||
```typescript
|
||||
interface RequestConfig {
|
||||
url: string;
|
||||
method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
|
||||
data?: any;
|
||||
header?: Record<string, string>;
|
||||
timeout?: number;
|
||||
retry?: number;
|
||||
showLoading?: boolean;
|
||||
showError?: boolean;
|
||||
returnRaw?: boolean; // 内部使用，控制返回格式
|
||||
}
|
||||
```
|
||||
|
||||
## 错误处理
|
||||
|
||||
所有请求都会自动处理：
|
||||
- 网络错误
|
||||
- 超时错误
|
||||
- 认证错误（自动清除登录信息并跳转）
|
||||
- 业务错误（显示错误提示）
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **后台生成的代码无需修改**，直接使用 `request.get<ApiResult>` 格式
|
||||
2. **新写的代码**可以选择使用 `getData` 系列方法来简化代码
|
||||
3. 所有方法都支持自动重试、错误处理、认证等功能
|
||||
Reference in New Issue
Block a user