developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

feat(theme): 实现主题切换系统并优化经销商相关页面

Browse Source 
- 新增主题切换系统，支持智能主题和手动选择
- 更新经销商首页、团队、订单、提现等页面样式
- 添加主题相关的Hook和样式工具函数
- 优化部分组件样式以适配新主题
This commit is contained in:
赵忠林
2025-08-19 00:08:26 +08:00
parent 8efeb9a5bd
commit 9d9762ef17
23 changed files with 739 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/dealer/index.tsx
View File

@@ -1,34 +1,28 @@
import React from 'react'
import {View, Text} from '@tarojs/components'
import {Button, Cell, CellGroup, Tag, Grid, Avatar, Divider} from '@nutui/nutui-react-taro'
import {ConfigProvider, Button, Grid, Avatar} 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 { useThemeStyles } from '@/hooks/useTheme'
import {businessGradients, cardGradients, gradientUtils} 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 themeStyles = useThemeStyles()
// 导航到各个功能页面
const navigateToPage = (url: string) => {
@@ -59,6 +53,8 @@ const DealerIndex: React.FC = () => {
return userTheme.background
}
console.log(getGradientBackground(),'getGradientBackground()')
if (error) {
return (
<View className="p-4">
@@ -77,46 +73,45 @@ const DealerIndex: React.FC = () => {
<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 className="px-4 py-6 relative overflow-hidden" style={themeStyles.primaryBackground}>
{/* 装饰性背景元素 - 小程序兼容版本 */}
<View className="absolute w-32 h-32 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.1)',
top: '-16px',
right: '-16px'
}}></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 className="absolute w-24 h-24 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.08)',
bottom: '-12px',
left: '-12px'
}}></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 className="absolute w-16 h-16 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
top: '60px',
left: '120px'
}}></View>
<View className="flex items-center justify-between relative z-10">
<View className="flex items-center justify-between relative z-10 mb-4">
<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)'
border: '2px solid rgba(255, 255, 255, 0.3)'
}}
/>
<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)'
<View className="flex-1 flex-col">
<View className="text-white text-lg font-bold mb-1" style={{
}}>
{dealerUser?.realName || '分销商'}
</Text>
<Text className="text-sm" style={{
</View>
<View className="text-sm" style={{
color: 'rgba(255, 255, 255, 0.8)'
}}>
ID: {dealerUser.userId} | 推荐人: {dealerUser.refereeId || '无'}
</Text>
</View>
</View>
<View className="text-right">
<View className="text-right hidden">
<Text className="text-xs" style={{
color: 'rgba(255, 255, 255, 0.9)'
}}>加入时间</Text>
@@ -133,34 +128,33 @@ const DealerIndex: React.FC = () => {
{/* 佣金统计卡片 */}
{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="mb-4">
<Text className="font-semibold text-gray-800">佣金统计</Text>
</View>
<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%)'
background: businessGradients.money.available
}}>
<Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
<Text className="text-2xl font-bold mb-1 text-white">
¥{formatMoney(dealerUser.money)}
</Text>
<Text className="text-xs text-white text-opacity-90">可提现</Text>
<Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>可提现</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%)'
background: businessGradients.money.frozen
}}>
<Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
<Text className="text-2xl font-bold mb-1 text-white">
¥{formatMoney(dealerUser.freezeMoney)}
</Text>
<Text className="text-xs text-white text-opacity-90">冻结中</Text>
<Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>冻结中</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%)'
background: businessGradients.money.total
}}>
<Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
<Text className="text-2xl font-bold mb-1 text-white">
¥{formatMoney(dealerUser.totalMoney)}
</Text>
<Text className="text-xs text-white text-opacity-90">累计收益</Text>
<Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>累计收益</Text>
</View>
</View>
</View>
@@ -171,27 +165,28 @@ const DealerIndex: React.FC = () => {
<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"
<View
className="text-gray-400 text-sm flex items-center"
onClick={() => navigateToPage('/dealer/team/index')}
>
查看详情 <ArrowRight size="12"/>
</Text>
<Text>查看详情</Text>
<ArrowRight size="12"/>
</View>
</View>
<View className="grid grid-cols-3 gap-4">
<View className="text-center">
<View className="text-center grid">
<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">
<View className="text-center grid">
<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">
<View className="text-center grid">
<Text className="text-xl font-bold text-pink-500 mb-1">
{dealerUser.thirdNum || 0}
</Text>
@@ -203,44 +198,45 @@ const DealerIndex: React.FC = () => {
{/* 功能导航 */}
<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 className="font-semibold mb-4 text-gray-800">分销工具</View>
<ConfigProvider>
<Grid columns={4}>
<Grid.Item text="分销订单" 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>
</View>
<Text className="text-xs text-gray-600">分销订单</Text>
</View>
</Grid.Item>
</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"/>
<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>
<Text className="text-xs text-gray-600">提现申请</Text>
</View>
</Grid.Item>
</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"/>
<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>
<Text className="text-xs text-gray-600">我的团队</Text>
</View>
</Grid.Item>
</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"/>
<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>
<Text className="text-xs text-gray-600">推广二维码</Text>
</View>
</Grid.Item>
</Grid>
</Grid.Item>
</Grid>
</ConfigProvider>
</View>
</View>