9 changed files with 1478 additions and 131 deletions
@ -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. 性能优化 |
||||
|
- 列表虚拟化（大量数据时） |
||||
|
- 图片懒加载 |
||||
|
- 缓存策略优化 |
||||
|
|
||||
|
## 📱 移动端适配 |
||||
|
|
||||
|
- 响应式设计确保各种屏幕尺寸下的良好体验 |
||||
|
- 触摸友好的交互元素 |
||||
|
- 合适的字体大小和间距 |
||||
|
- 底部安全区域处理 |
||||
|
|
||||
|
这次优化大幅提升了分销中心的用户体验和功能完整性，为后续的功能扩展奠定了良好基础。 |
||||
@ -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 渐变效果 |
||||
|
- 粒子背景 |
||||
|
- 交互式渐变 |
||||
|
|
||||
|
这套渐变系统不仅美观，还具有很强的扩展性和可维护性，为你的应用提供了专业级的视觉体验！ |
||||
@ -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 |
||||
@ -1,35 +1,239 @@ |
|||||
import React from 'react' |
|
||||
|
import React, { useState, useRef } from 'react' |
||||
import { View, Text } from '@tarojs/components' |
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 = () => { |
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"> |
<View className="p-4"> |
||||
<Text className="text-lg font-bold mb-4">提现申请</Text> |
|
||||
|
{/* 余额卡片 */} |
||||
|
<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> |
||||
|
|
||||
<Form> |
|
||||
<Cell.Group> |
|
||||
|
<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> |
<Form.Item name="amount" label="提现金额" required> |
||||
<Input placeholder="请输入提现金额" type="number" /> |
|
||||
|
<Input |
||||
|
placeholder="请输入提现金额" |
||||
|
type="number" |
||||
|
clearable |
||||
|
/> |
||||
</Form.Item> |
</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> |
||||
|
|
||||
<Form.Item name="remark" label="备注"> |
<Form.Item name="remark" label="备注"> |
||||
<Input placeholder="请输入备注信息" /> |
|
||||
|
<Input placeholder="请输入备注信息（可选）" /> |
||||
</Form.Item> |
</Form.Item> |
||||
</Cell.Group> |
|
||||
|
</CellGroup> |
||||
|
|
||||
<View className="mt-4"> |
|
||||
<Button block type="primary"> |
|
||||
|
<View className="mt-6 px-4"> |
||||
|
<Button block type="primary" nativeType="submit"> |
||||
申请提现 |
申请提现 |
||||
</Button> |
</Button> |
||||
</View> |
</View> |
||||
</Form> |
</Form> |
||||
</View> |
</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 |
export default DealerWithdraw |
||||
|
|||||
@ -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; } |
||||
|
} |
||||
|
` |
||||
Loading…
Reference in new issue