From 5454ac5f64ca4608b55f277d5198c19e7193bf87 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Fri, 20 Feb 2026 23:10:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(profile):=20=E4=B8=AA=E4=BA=BA=E8=B5=84?=
 =?UTF-8?q?=E6=96=99=E9=A1=B5=E6=8C=89=E8=AE=BE=E8=AE=A1=E5=9B=BE=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 头像居中展示，右下角叠加编辑图标(icon-user-icon-edit.png)
- 昵称改为表单输入框样式，支持直接编辑
- UID只读展示
- 底部橙色保存按钮
- 移除旧的列表式布局和弹窗修改昵称方式
---
 uniapp/pages/mine/profile/index.vue        | 428 +++++++--------------
 uniapp/static/mine/icon-user-icon-edit.png | Bin 0 -> 1281 bytes
 2 files changed, 146 insertions(+), 282 deletions(-)
 create mode 100644 uniapp/static/mine/icon-user-icon-edit.png

diff --git a/uniapp/pages/mine/profile/index.vue b/uniapp/pages/mine/profile/index.vue
index 9661694..36c13ec 100644
--- a/uniapp/pages/mine/profile/index.vue
+++ b/uniapp/pages/mine/profile/index.vue
@@ -2,61 +2,44 @@
   <view class="profile-page">
     <!-- 页面内容 -->
     <view class="page-content">
-      <!-- 头像区域 -->
-      <view class="profile-item avatar-item" @click="handleChangeAvatar">
-        <text class="item-label">头像</text>
-        <view class="item-value">
-          <image 
-            class="avatar" 
-            :src="userInfo.avatar || '/static/logo.png'" 
-            mode="aspectFill" 
+      <!-- 头像区域 - 居中展示，右下角编辑图标 -->
+      <view class="avatar-section" @click="handleChangeAvatar">
+        <view class="avatar-wrapper">
+          <image
+            class="avatar"
+            :src="userInfo.avatar || '/static/mine/icon-user.png'"
+            mode="aspectFill"
           />
-          <text class="arrow">›</text>
+          <image class="edit-icon" src="/static/mine/icon-user-icon-edit.png" mode="aspectFit" />
         </view>
       </view>
 
-      <!-- 昵称区域 -->
-      <view class="profile-item" @click="showNicknamePopup">
-        <text class="item-label">昵称</text>
-        <view class="item-value">
-          <text class="value-text">{{ userInfo.nickname || '未设置' }}</text>
-          <text class="arrow">›</text>
-        </view>
+      <!-- 昵称 -->
+      <view class="form-group">
+        <text class="form-label">昵称</text>
+        <input
+          class="form-input"
+          type="text"
+          v-model="formData.nickname"
+          placeholder="用户昵称"
+          maxlength="20"
+        />
       </view>
 
-      <!-- UID区域（不可修改） -->
-      <view class="profile-item uid-item">
-        <text class="item-label">UID</text>
-        <view class="item-value">
-          <text class="value-text uid-text">{{ userInfo.uid || '--' }}</text>
-        </view>
+      <!-- UID（只读） -->
+      <view class="form-group">
+        <text class="form-label">UID</text>
+        <input
+          class="form-input readonly"
+          type="text"
+          :value="userInfo.uid || '--'"
+          disabled
+        />
       </view>
-    </view>
 
-    <!-- 修改昵称弹窗 -->
-    <view v-if="nicknamePopupVisible" class="popup-mask" @click="hideNicknamePopup">
-      <view class="popup-container nickname-popup" @click.stop>
-        <view class="popup-header">
-          <text class="popup-title">修改昵称</text>
-        </view>
-        <view class="popup-body">
-          <input 
-            class="nickname-input" 
-            type="text" 
-            v-model="newNickname" 
-            placeholder="请输入昵称"
-            maxlength="20"
-            :focus="nicknamePopupVisible"
-          />
-        </view>
-        <view class="popup-footer">
-          <view class="popup-btn cancel" @click="hideNicknamePopup">
-            <text>取消</text>
-          </view>
-          <view class="popup-btn confirm" @click="handleUpdateNickname">
-            <text>确定</text>
-          </view>
-        </view>
+      <!-- 保存按钮 -->
+      <view class="btn-section">
+        <button class="btn-save" :disabled="saving" @click="handleSave">保存</button>
       </view>
     </view>
 
@@ -76,19 +59,23 @@
  * 展示和修改用户头像、昵称
  * UID 仅展示不可修改
  */
-import { ref, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { useUserStore } from '@/store/user.js'
-import { getProfile, updateProfile, updateAvatar } from '@/api/user.js'
+import { updateProfile, updateAvatar } from '@/api/user.js'
 import config from '@/config/index.js'
 
 const userStore = useUserStore()
 
 // 状态
 const loading = ref(false)
+const saving = ref(false)
 const loadingText = ref('加载中...')
-const nicknamePopupVisible = ref(false)
-const newNickname = ref('')
+
+// 表单数据
+const formData = reactive({
+  nickname: ''
+})
 
 // 用户信息
 const userInfo = computed(() => ({
@@ -99,26 +86,10 @@ const userInfo = computed(() => ({
 }))
 
 /**
- * 获取用户资料
+ * 初始化表单数据
  */
-async function fetchProfile() {
-  try {
-    loading.value = true
-    loadingText.value = '加载中...'
-    
-    const res = await getProfile()
-    if (res.code === 0 && res.data) {
-      userStore.updateUserInfo(res.data)
-    }
-  } catch (error) {
-    console.error('获取用户资料失败:', error)
-    uni.showToast({
-      title: '获取资料失败',
-      icon: 'none'
-    })
-  } finally {
-    loading.value = false
-  }
+function initFormData() {
+  formData.nickname = userStore.nickname || ''
 }
 
 /**
@@ -135,10 +106,7 @@ function handleChangeAvatar() {
     },
     fail: (err) => {
       if (err.errMsg && !err.errMsg.includes('cancel')) {
-        uni.showToast({
-          title: '选择图片失败',
-          icon: 'none'
-        })
+        uni.showToast({ title: '选择图片失败', icon: 'none' })
       }
     }
   })
@@ -152,8 +120,7 @@ async function uploadAvatar(filePath) {
   try {
     loading.value = true
     loadingText.value = '上传中...'
-    
-    // 上传图片到服务器
+
     const uploadRes = await new Promise((resolve, reject) => {
       uni.uploadFile({
         url: `${config.API_BASE_URL}/upload/image`,
@@ -165,8 +132,7 @@ async function uploadAvatar(filePath) {
         success: (res) => {
           if (res.statusCode === 200) {
             try {
-              const data = JSON.parse(res.data)
-              resolve(data)
+              resolve(JSON.parse(res.data))
             } catch (e) {
               reject(new Error('解析响应失败'))
             }
@@ -177,18 +143,14 @@ async function uploadAvatar(filePath) {
         fail: (err) => reject(err)
       })
     })
-    
+
     if (uploadRes.code === 0 && uploadRes.data) {
-      // 更新头像
       const avatarUrl = uploadRes.data.url || uploadRes.data
       const updateRes = await updateAvatar(avatarUrl)
-      
+
       if (updateRes.code === 0) {
         userStore.updateUserInfo({ avatar: avatarUrl })
-        uni.showToast({
-          title: '头像更新成功',
-          icon: 'success'
-        })
+        uni.showToast({ title: '头像更新成功', icon: 'success' })
       } else {
         throw new Error(updateRes.message || '更新头像失败')
       }
@@ -197,253 +159,159 @@ async function uploadAvatar(filePath) {
     }
   } catch (error) {
     console.error('上传头像失败:', error)
-    uni.showToast({
-      title: error.message || '上传失败',
-      icon: 'none'
-    })
+    uni.showToast({ title: error.message || '上传失败', icon: 'none' })
   } finally {
     loading.value = false
   }
 }
 
 /**
- * 显示修改昵称弹窗
+ * 保存资料（昵称）
  */
-function showNicknamePopup() {
-  newNickname.value = userInfo.value.nickname || ''
-  nicknamePopupVisible.value = true
-}
+async function handleSave() {
+  const nickname = formData.nickname.trim()
 
-/**
- * 隐藏修改昵称弹窗
- */
-function hideNicknamePopup() {
-  nicknamePopupVisible.value = false
-  newNickname.value = ''
-}
-
-/**
- * 更新昵称
- */
-async function handleUpdateNickname() {
-  const nickname = newNickname.value.trim()
-  
   if (!nickname) {
-    uni.showToast({
-      title: '请输入昵称',
-      icon: 'none'
-    })
+    uni.showToast({ title: '请输入昵称', icon: 'none' })
     return
   }
-  
-  if (nickname === userInfo.value.nickname) {
-    hideNicknamePopup()
+
+  if (nickname === userStore.nickname) {
+    uni.showToast({ title: '资料未修改', icon: 'none' })
     return
   }
-  
+
   try {
+    saving.value = true
     loading.value = true
     loadingText.value = '保存中...'
-    hideNicknamePopup()
-    
+
     const res = await updateProfile({ nickname })
-    
+
     if (res.code === 0) {
       userStore.updateUserInfo({ nickname })
-      uni.showToast({
-        title: '昵称更新成功',
-        icon: 'success'
-      })
+      uni.showToast({ title: '保存成功', icon: 'success' })
     } else {
-      throw new Error(res.message || '更新失败')
+      throw new Error(res.message || '保存失败')
     }
   } catch (error) {
-    console.error('更新昵称失败:', error)
-    uni.showToast({
-      title: error.message || '更新失败',
-      icon: 'none'
-    })
+    console.error('保存资料失败:', error)
+    uni.showToast({ title: error.message || '保存失败', icon: 'none' })
   } finally {
+    saving.value = false
     loading.value = false
   }
 }
 
-/**
- * 页面显示时刷新数据
- */
+// Lifecycle
 onShow(() => {
-  userStore.restoreFromStorage()
+  initFormData()
 })
 
-/**
- * 页面加载
- */
 onMounted(() => {
   userStore.restoreFromStorage()
-  fetchProfile()
+  initFormData()
 })
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/variables.scss';
 
+// 保存按钮橙色（设计图配色）
+$save-btn-color: #F5A623;
+$save-btn-active: #E09518;
+
 .profile-page {
   min-height: 100vh;
   background-color: $bg-color;
 }
 
-// 页面内容
 .page-content {
-  padding: $spacing-lg;
+  padding: $spacing-lg $spacing-xl;
 }
 
-// 资料项
-.profile-item {
+// 头像区域 - 居中
+.avatar-section {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $bg-white;
-  padding: $spacing-lg;
-  margin-bottom: 2rpx;
-  
-  &:first-child {
-    border-radius: $border-radius-lg $border-radius-lg 0 0;
+  justify-content: center;
+  padding: $spacing-xl 0;
+
+  .avatar-wrapper {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+
+    .avatar {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+      background-color: $bg-gray;
+    }
+
+    .edit-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 48rpx;
+      height: 48rpx;
+    }
   }
-  
-  &:last-child {
-    border-radius: 0 0 $border-radius-lg $border-radius-lg;
-    margin-bottom: 0;
-  }
-  
-  &:active {
-    background-color: $bg-gray;
-  }
-  
-  .item-label {
+}
+
+// 表单组
+.form-group {
+  margin-bottom: $spacing-lg;
+
+  .form-label {
+    display: block;
     font-size: $font-size-md;
     color: $text-color;
+    margin-bottom: $spacing-sm;
   }
-  
-  .item-value {
-    display: flex;
-    align-items: center;
-    
-    .value-text {
-      font-size: $font-size-md;
-      color: $text-secondary;
-      margin-right: $spacing-sm;
-    }
-    
-    .uid-text {
+
+  .form-input {
+    width: 100%;
+    height: 88rpx;
+    padding: 0 $spacing-lg;
+    font-size: $font-size-md;
+    color: $text-color;
+    background-color: $bg-white;
+    border: 2rpx solid $border-color;
+    border-radius: $border-radius-md;
+    box-sizing: border-box;
+
+    &.readonly {
       color: $text-placeholder;
-    }
-    
-    .arrow {
-      font-size: 36rpx;
-      color: $text-placeholder;
-    }
-  }
-  
-  // 头像项
-  &.avatar-item {
-    .avatar {
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 50%;
-      margin-right: $spacing-sm;
       background-color: $bg-gray;
     }
   }
-  
-  // UID项不可点击
-  &.uid-item {
+}
+
+// 保存按钮
+.btn-section {
+  margin-top: $spacing-xl;
+
+  .btn-save {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    background-color: $save-btn-color;
+    border-radius: 44rpx;
+    font-size: $font-size-lg;
+    color: $text-white;
+    border: none;
+    font-weight: $font-weight-medium;
+
+    &::after {
+      border: none;
+    }
+
     &:active {
-      background-color: $bg-white;
+      background-color: $save-btn-active;
     }
-  }
-}
 
-// 修改昵称弹窗
-.popup-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: $bg-mask;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.popup-container {
-  width: 600rpx;
-  background-color: $bg-white;
-  border-radius: $border-radius-lg;
-  overflow: hidden;
-}
-
-.nickname-popup {
-  .popup-header {
-    padding: $spacing-lg;
-    text-align: center;
-    border-bottom: 1rpx solid $border-light;
-    
-    .popup-title {
-      font-size: $font-size-lg;
-      font-weight: $font-weight-medium;
-      color: $text-color;
-    }
-  }
-  
-  .popup-body {
-    padding: $spacing-lg;
-    
-    .nickname-input {
-      width: 100%;
-      height: 80rpx;
-      padding: 0 $spacing-md;
-      font-size: $font-size-md;
-      color: $text-color;
-      background-color: $bg-gray;
-      border-radius: $border-radius-md;
-      box-sizing: border-box;
-    }
-  }
-  
-  .popup-footer {
-    display: flex;
-    border-top: 1rpx solid $border-light;
-    
-    .popup-btn {
-      flex: 1;
-      height: 100rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
-      &:active {
-        background-color: $bg-gray;
-      }
-      
-      text {
-        font-size: $font-size-lg;
-      }
-      
-      &.cancel {
-        border-right: 1rpx solid $border-light;
-        
-        text {
-          color: $text-secondary;
-        }
-      }
-      
-      &.confirm {
-        text {
-          color: $primary-color;
-        }
-      }
+    &[disabled] {
+      background-color: $text-disabled;
     }
   }
 }
@@ -469,7 +337,7 @@ onMounted(() => {
   padding: $spacing-xl;
   background-color: $bg-white;
   border-radius: $border-radius-lg;
-  
+
   .loading-spinner {
     width: 60rpx;
     height: 60rpx;
@@ -478,7 +346,7 @@ onMounted(() => {
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
-  
+
   .loading-text {
     margin-top: $spacing-md;
     font-size: $font-size-sm;
@@ -487,11 +355,7 @@ onMounted(() => {
 }
 
 @keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 </style>
diff --git a/uniapp/static/mine/icon-user-icon-edit.png b/uniapp/static/mine/icon-user-icon-edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..6670c702bffda4dee4fd9c26c4a105e79e955853
GIT binary patch
literal 1281
zcmV+c1^)VpP)<h;3K|Lk000e1NJLTq001fg001fo1^@s6#ly*400009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1eQreK~#7F?U+q$
z8$}ey|Faw0RZv`mT8Yx4I#iX?RHz{wXb}geLi7NK_Kq5#sZa?iq^*!_AE10yNhQRU
zRB$H1sT@MgDO5;pav*U((kx9W60K0`sJMyOJG@!P_U?Liy}NFEY5tO}otZbYzkRdw
z_RRnrdP2p}rudnjB%(;sQ2VHqpb?YR2DVK98W^8}UYTVdUYkK13I)nXlL;7|?-9fx
z_&QkYJ81-e9*Qx}h6)-2DiCM`5XZsEd*L+(g`W!o>>HGS(UXFzOtcATy|V_RGQ>_?
z{lSm9;>U=e?ae}AQx6T&9F$%ercUs)Jy}2IEj?;Nf@knZ#dB=9koB_g1bsY^^}Bh(
zx`NV_q^bEEJWd&WfPGNN%bKL1e3W7%7w@Dz^zc|0^!}r$^d13^KL_c+#lH~y>0Pip
z1^AX&V65~K8`74YP4dNLC>dAC_;#$m{XO*k$6O(6b_V_GN}U9#A9fvtdndZ5vFSLZ
z&)~Eb-Za=ET(oxR6Y}I?^IE+=31wkYYR6WKP#1ow7N`&Q9&R*VI1S9XMx|varEaHJ
zJDSW4Wl%htOu|bw$jJ0p==kkxw3HK4Xn?#c9&mL<)+4d*)tt4mdFmNY!$p;?J@spK
z&PSY<K?=p<^y~8I$kNUl8z>*$-RJr3whYdSw-E|b=)x($yMK~@xo4-f!ante+Gi_w
zM1W_u0r4%sQ=5SuFE-kqC-44qlcw)K1csdZ5v|2j^mkqkYNl%I+P13-BVcP%qp*RB
zU-2$*?NS5yp+E{0*5?6A(;n*tcK27k=tsit<u`yOikH1deL<EF95WYYB!7mY!-~tm
z_PoLl+8Iw^&wiM&L6!Ol*xHX)kOEM|VDsjGOn}|`UEasBR_vgAU!%AaMPS8W@CDh9
z?BOXA(GW)QZh3t>kc`^`z8#dYWrUINs8elwQqim>`_xzXEG5VYteQvl2NVTv(3Wnh
z{pmJX-dePSDm))*zjyUJf-DiFB}EWnO)n#~bYs?9v`sxb@R<g&#dTAqRKGO3EbryN
zb9P9fs6295Gb;Dc1dW}tZ~U6S^$H({i`11HU}AbnYsoh$FZI|$Sw9r(5}~Pl=;JCR
z<*Tl_D(6{eRdbqmIg>!Cyhy7~N})gdD#|<Gs+X0bOGbE~)}^jD#@*BfZb@pQKc99_
zY}R<U)1&eX|KiCEz06s-NZ)Y~<?XK{jKp+{6j8nWt((ah8=fC(>L;^o<yF%r_B8Y@
z{qpG--~D@co2r#NSICPKp6@1kbHM3MS5OmVdL%_dPa%v%R(1Un0!yzPVI%Sb3D*M%
ziU4_9SXqS8Qh*IzT|DasDdc%l!e03_7Z~<tL7t;}iXevzIWLQrM>>IE@81J%1@&fY
zNRtCT#V6lMqjR%3HAzYh#NxSfG04|QoSmlG`-NZq7zaCcoE}M1myB)mCBSYk1n{It
ze2g&^ADm-3&36(M?jW}cJcz#+(^#5M`t+hkJ;#Fr*3|yd_~*T}w=w#l@_pb+5@KIo
rZPCn}lCc?)39%FNe_}%$3a<YF?C!d*Htl}|00000NkvXXu0mjfk7-|l

literal 0
HcmV?d00001