针对个人主页与照片显示做了修改

2026-07-27 21:47:14 +08:00
parent 4d086758e8
commit fa781cc6a6
60 changed files with 2770 additions and 683 deletions
@@ -0,0 +1,144 @@
+import { View, Text, Image, Input, Button } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useState, useEffect } from 'react'
+import './index.scss'
+import ThemeToggle from '../../components/ThemeToggle'
+import { useThemeContext } from '../../context/ThemeContext'
+import { getUserInfo, setUserInfo, clearUserInfo } from '../../utils/store'
+
+export default function SettingsPage() {
+  const { theme } = useThemeContext()
+  const [user, setUser] = useState<any>({})
+  const [editName, setEditName] = useState('')
+  const [editAvatar, setEditAvatar] = useState('')
+  const [showEdit, setShowEdit] = useState(false)
+
+  const loadUser = () => {
+    const u = getUserInfo() || {}
+    setUser(u)
+    setEditName(u.nickName || '')
+    setEditAvatar(u.avatarUrl || '')
+  }
+
+  useEffect(() => {
+    loadUser()
+  }, [])
+
+  const handleSaveInfo = () => {
+    setUserInfo({ ...user, nickName: editName, avatarUrl: editAvatar })
+    Taro.showToast({ title: '修改成功', icon: 'success' })
+    setShowEdit(false)
+    loadUser()
+  }
+
+  const handleLogout = () => {
+    Taro.showModal({
+      title: '确认退出',
+      content: '退出后将清空当前登录状态，确定吗？',
+      success: (res) => {
+        if (res.confirm) {
+          clearUserInfo()
+          Taro.switchTab({ url: '/pages/index/index' })
+        }
+      }
+    })
+  }
+
+  const onChooseAvatar = (e: any) => {
+    setEditAvatar(e.detail.avatarUrl || '')
+  }
+
+  const MENU = [
+    { label: '个人信息', icon: '👤', action: () => setShowEdit(true) },
+    { label: '定制协议', icon: '📋', action: () => Taro.navigateTo({ url: '/pages/agreement/index' }) },
+    { label: '关于我们', icon: 'ℹ️', action: () => Taro.showToast({ title: '智绘微刻 v1.0', icon: 'none' }) }
+  ]
+
+  return (
+    <View className={`theme-${theme}`}>
+      <View className='settings-page'>
+        <ThemeToggle />
+
+        <View className='page-header dashed-card mt-20'>
+          <View className='star-badge' />
+          <View className='flex-between' style={{ width: '100%' }}>
+            <Text className='back-btn' onClick={() => 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' onClick={() => setShowEdit(true)}>
+            <View className='flex-center'>
+              {user.avatarUrl ? (
+                <Image className='settings-avatar' src={user.avatarUrl} mode='aspectFill' />
+              ) : (
+                <View className='settings-avatar-placeholder'><Text>👤</Text></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>
+
+        {/* 菜单列表 */}
+        <View className='settings-list dashed-card mt-20'>
+          {MENU.map((item, idx) => (
+            <View key={idx} className={`settings-item ${idx < MENU.length - 1 ? 'bordered' : ''}`} onClick={item.action}>
+              <Text className='settings-item-icon'>{item.icon}</Text>
+              <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' onClick={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' />
+                ) : (
+                  <Text className='avatar-placeholder'>点击选择头像</Text>
+                )}
+              </Button>
+              <Input
+                className='nickname-input'
+                placeholder='请输入昵称'
+                value={editName}
+                onInput={(e: any) => setEditName(e.detail.value)}
+              />
+              <View className='form-actions'>
+                <View className='btn-outline' onClick={() => setShowEdit(false)}>
+                  <Text>取消</Text>
+                </View>
+                <View className='btn-gradient' onClick={handleSaveInfo}>
+                  <Text>保存</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}