1.2.0版本
This commit is contained in:
@@ -2,10 +2,15 @@ import { View, Text, Image, Input, Button } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import './index.scss'
|
||||
import ThemeToggle from '../../components/ThemeToggle'
|
||||
import { useThemeContext } from '../../context/ThemeContext'
|
||||
import { getUserInfo, setUserInfo, clearUserInfo, getAddressList, getDefaultAddress, type AddressItem } from '../../utils/store'
|
||||
|
||||
const THEME_OPTIONS: { label: string; value: 'light' | 'dark' | 'auto' }[] = [
|
||||
{ label: '浅色模式', value: 'light' },
|
||||
{ label: '深色模式', value: 'dark' },
|
||||
{ label: '跟随系统', value: 'auto' }
|
||||
]
|
||||
|
||||
const MENU = [
|
||||
{ label: '个人信息', icon: '/icon/个人.png', action: (s: any) => s.setShowEdit(true) },
|
||||
{ label: '账号管理', icon: '/icon/账号管理.png', action: () => Taro.navigateTo({ url: '/pages/userDatabase/index' }) },
|
||||
@@ -14,7 +19,7 @@ const MENU = [
|
||||
]
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { theme } = useThemeContext()
|
||||
const { theme, setTheme, resolvedTheme } = useThemeContext()
|
||||
const [user, setUser] = useState<any>({})
|
||||
const [editName, setEditName] = useState('')
|
||||
const [editAvatar, setEditAvatar] = useState('')
|
||||
@@ -56,91 +61,110 @@ export default function SettingsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={`theme-${theme}`} style={{ minHeight: '100vh' }}>
|
||||
<View className={`theme-${resolvedTheme}`} style={{ minHeight: '100vh' }}>
|
||||
<View className='settings-page'>
|
||||
<ThemeToggle />
|
||||
<View className='settings-area'>
|
||||
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<View className='flex-between' style={{ width: '100%' }}>
|
||||
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
|
||||
<Text className='page-title'>设置</Text>
|
||||
<View style={{ width: '60px' }} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 用户卡片 */}
|
||||
<View className='settings-user dashed-card mt-20'>
|
||||
<View className='flex-between' onTap={() => setShowEdit(true)}>
|
||||
<View className='flex-center'>
|
||||
{user.avatarUrl ? (
|
||||
<Image className='settings-avatar' src={user.avatarUrl} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='settings-avatar-placeholder'>
|
||||
<Image className='settings-avatar-icon' src='/icon/个人.png' mode='aspectFit' />
|
||||
</View>
|
||||
)}
|
||||
<View style={{ marginLeft: '20px' }}>
|
||||
<Text className='settings-name'>{user.nickName || '未登录'}</Text>
|
||||
<Text className='settings-id'>ID: {user.openid ? user.openid.slice(-8) : '---'}</Text>
|
||||
</View>
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<View className='flex-between' style={{ width: '100%' }}>
|
||||
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
|
||||
<Text className='page-title'>设置</Text>
|
||||
<View style={{ width: '60px' }} />
|
||||
</View>
|
||||
<Text className='arrow'>›</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 菜单列表 */}
|
||||
<View className='settings-list dashed-card mt-20'>
|
||||
{MENU.map((item, idx) => (
|
||||
<View key={idx} className={`settings-item ${idx < MENU.length - 1 ? 'bordered' : ''}`} onTap={() => item.action({ setShowEdit })}>
|
||||
<Image className='settings-item-icon-img' src={item.icon} mode='aspectFit' />
|
||||
<Text className='settings-item-label'>{item.label}</Text>
|
||||
{/* 用户卡片 */}
|
||||
<View className='settings-user dashed-card mt-20'>
|
||||
<View className='flex-between' onTap={() => setShowEdit(true)}>
|
||||
<View className='flex-center'>
|
||||
{user.avatarUrl ? (
|
||||
<Image className='settings-avatar' src={user.avatarUrl} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='settings-avatar-placeholder'>
|
||||
<Image className='settings-avatar-icon' src='/icon/个人.png' mode='aspectFit' />
|
||||
</View>
|
||||
)}
|
||||
<View style={{ marginLeft: '20px' }}>
|
||||
<Text className='settings-name'>{user.nickName || '未登录'}</Text>
|
||||
<Text className='settings-id'>ID: {user.openid ? user.openid.slice(-8) : '---'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='arrow'>›</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 退出登录 */}
|
||||
{user?.openid && (
|
||||
<View className='mt-20'>
|
||||
<View className='btn-outline logout-btn' onTap={handleLogout}>
|
||||
<Text>退出登录</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={{ height: '40px' }} />
|
||||
|
||||
{/* 编辑弹窗 */}
|
||||
{showEdit && (
|
||||
<View className='modal-overlay'>
|
||||
<View className='modal-card dashed-card'>
|
||||
<View className='star-badge' />
|
||||
<Text className='modal-title'>修改信息</Text>
|
||||
<Button className='avatar-btn' openType='chooseAvatar' onChooseAvatar={onChooseAvatar}>
|
||||
{editAvatar ? (
|
||||
<Image className='avatar-img' src={editAvatar} mode='aspectFill' />
|
||||
) : (
|
||||
<Image className='avatar-placeholder-img' src='/icon/个人.png' mode='aspectFit' />
|
||||
)}
|
||||
</Button>
|
||||
<Input
|
||||
className='nickname-input'
|
||||
placeholder='请输入昵称'
|
||||
value={editName}
|
||||
onInput={(e: any) => setEditName(e.detail.value)}
|
||||
/>
|
||||
<View className='form-actions'>
|
||||
<View className='btn-outline' onTap={() => setShowEdit(false)}>
|
||||
<Text>取消</Text>
|
||||
{/* 主题设置 */}
|
||||
<View className='settings-section dashed-card mt-20'>
|
||||
<Text className='section-label'>外观</Text>
|
||||
<View className='theme-options'>
|
||||
{THEME_OPTIONS.map(opt => (
|
||||
<View
|
||||
key={opt.value}
|
||||
className={`theme-option ${theme === opt.value ? 'active' : ''}`}
|
||||
onTap={() => setTheme(opt.value)}
|
||||
>
|
||||
<Text className='theme-option-text'>{opt.label}</Text>
|
||||
{theme === opt.value && <View className='theme-check' />}
|
||||
</View>
|
||||
<View className='btn-gradient' onTap={handleSaveInfo}>
|
||||
<Text>保存</Text>
|
||||
))}
|
||||
</View>
|
||||
{theme === 'auto' && (
|
||||
<Text className='theme-hint'>当前跟随系统：{resolvedTheme === 'dark' ? '深色模式' : '浅色模式'}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 菜单列表 */}
|
||||
<View className='settings-list dashed-card mt-20'>
|
||||
{MENU.map((item, idx) => (
|
||||
<View key={idx} className={`settings-item ${idx < MENU.length - 1 ? 'bordered' : ''}`} onTap={() => item.action({ setShowEdit })}>
|
||||
<Image className='settings-item-icon-img' src={item.icon} mode='aspectFit' />
|
||||
<Text className='settings-item-label'>{item.label}</Text>
|
||||
<Text className='arrow'>›</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 退出登录 */}
|
||||
{user?.openid && (
|
||||
<View className='mt-20'>
|
||||
<View className='btn-outline logout-btn' onTap={handleLogout}>
|
||||
<Text>退出登录</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={{ height: '40px' }} />
|
||||
|
||||
{/* 编辑弹窗 */}
|
||||
{showEdit && (
|
||||
<View className='modal-overlay'>
|
||||
<View className='modal-card dashed-card'>
|
||||
<Text className='modal-title'>修改信息</Text>
|
||||
<Button className='avatar-btn' openType='chooseAvatar' onChooseAvatar={onChooseAvatar}>
|
||||
{editAvatar ? (
|
||||
<Image className='avatar-img' src={editAvatar} mode='aspectFill' />
|
||||
) : (
|
||||
<Image className='avatar-placeholder-img' src='/icon/个人.png' mode='aspectFit' />
|
||||
)}
|
||||
</Button>
|
||||
<Input
|
||||
className='nickname-input'
|
||||
placeholder='请输入昵称'
|
||||
value={editName}
|
||||
onInput={(e: any) => setEditName(e.detail.value)}
|
||||
/>
|
||||
<View className='form-actions'>
|
||||
<View className='btn-outline' onTap={() => setShowEdit(false)}>
|
||||
<Text>取消</Text>
|
||||
</View>
|
||||
<View className='btn-gradient' onTap={handleSaveInfo}>
|
||||
<Text>保存</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user