254 lines
9.7 KiB
TypeScript
254 lines
9.7 KiB
TypeScript
import React from 'react'
|
|
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 = () => {
|
|
const {
|
|
dealerUser,
|
|
loading,
|
|
error,
|
|
refresh,
|
|
} = useDealerUser()
|
|
|
|
// 跳转到申请页面
|
|
const navigateToApply = () => {
|
|
Taro.navigateTo({
|
|
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">
|
|
<View className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
|
|
<Text className="text-red-600">{error}</Text>
|
|
</View>
|
|
<Button type="primary" onClick={refresh}>
|
|
重试
|
|
</Button>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View className="bg-gray-50 min-h-screen">
|
|
<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>
|
|
)}
|
|
|
|
{/* 佣金统计卡片 */}
|
|
{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="font-semibold text-gray-800">我的团队</Text>
|
|
<Text
|
|
className="text-blue-500 text-sm"
|
|
onClick={() => navigateToPage('/dealer/team/index')}
|
|
>
|
|
查看详情 <ArrowRight size="12"/>
|
|
</Text>
|
|
</View>
|
|
<View className="grid grid-cols-3 gap-4">
|
|
<View className="text-center">
|
|
<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-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-xl font-bold text-pink-500 mb-1">
|
|
{dealerUser.thirdNum || 0}
|
|
</Text>
|
|
<Text className="text-xs text-gray-500">三级成员</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* 功能导航 */}
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default DealerIndex
|