feat(dealer): 重构分销中心页面

- 优化了分销中心首页、分销订单、提现申请和团队管理页面的视觉和功能- 新增了渐变设计指南和主题选择器组件
-改进了数据展示、功能导航和用户体验
This commit is contained in:
2025-08-18 21:20:03 +08:00
parent 1403a1888e
commit 8efeb9a5bd
9 changed files with 1481 additions and 134 deletions

View File

@@ -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