Browse Source

个人中心头像修改

master
ZhaoYang 2 months ago
parent
commit
64e287bcf5
  1. 147
      pages/personal/personal.js
  2. 4
      pages/personal/personal.wxml

147
pages/personal/personal.js

@ -4,13 +4,13 @@ const baseUrl = require('../../utils/baseUrl')
Page({
data: {
// 用户信息
avatarUrl: '', // 原始头像路径(相对路径)
avatarFullUrl: '', // 完整的头像URL(用于显示)
avatarUrl: '', // 原始头像路径(相对路径)
avatarFullUrl: '', // 完整的头像URL(用于显示)
userInfo: {
user: {}
},
baseUrl: baseUrl,
displayNickName: '', // 显示用的昵称
displayNickName: '', // 显示用的昵称
// 弹窗状态
showFeedbackModal: false,
@ -45,8 +45,7 @@ Page({
onLoad() {
this.gettoday()
// 初始化时从缓存加载用户信息
this.loadUserInfoFromCache()
},
onShow() {
@ -57,37 +56,6 @@ Page({
this.gettoday()
},
// 从缓存加载用户信息(用于快速显示)
loadUserInfoFromCache() {
const cachedUserInfo = wx.getStorageSync('userInfo')
if (cachedUserInfo) {
const avatarFullUrl = this.buildAvatarUrl(cachedUserInfo.user?.avatar)
this.setData({
userInfo: cachedUserInfo,
avatarUrl: cachedUserInfo.user?.avatar || '',
avatarFullUrl: avatarFullUrl,
displayNickName: cachedUserInfo.user?.nickName || '微信用户'
})
}
},
// 构建完整的头像URL
buildAvatarUrl(avatarPath) {
if (!avatarPath) {
return '/pages/images/tx.png'
}
// 如果已经是完整URL,直接返回
if (avatarPath.startsWith('http')) {
return avatarPath
}
// 如果是相对路径,拼接baseUrl
// 确保路径格式正确
let cleanPath = avatarPath
if (cleanPath.startsWith('/')) {
cleanPath = cleanPath.substring(1)
}
return baseUrl + '/' + cleanPath
},
// 获取用户信息
getUserInfo() {
@ -95,26 +63,19 @@ Page({
data: {},
success: (res) => {
console.log('获取用户信息成功', res)
if (res.data && res.data.user) {
// 构建完整的头像URL
const avatarFullUrl = this.buildAvatarUrl(res.data.user?.avatar)
// 更新数据
this.setData({
userInfo: res.data,
avatarUrl: res.data.user?.avatar || '',
avatarFullUrl: avatarFullUrl,
displayNickName: res.data.user?.nickName || '微信用户'
})
// 更新数据
this.setData({
userInfo: res.data,
displayNickName: res.data.user.nickName,
avatarUrl: baseUrl + res.data.user.avatar
})
// 更新缓存
wx.setStorageSync('userInfo', res.data)
// 更新缓存
wx.setStorageSync('userInfo', res.data)
}
},
fail: (err) => {
console.error('获取用户信息失败:', err)
// 使用缓存的用户信息
this.loadUserInfoFromCache()
}
})
},
@ -139,19 +100,24 @@ Page({
// 选择头像
onChooseAvatar(e) {
console.log(7788, e);
// 防止重复上传
if (this.data.isUploadingAvatar) {
this.showToast('正在上传中...')
return
}
const { avatarUrl } = e.detail
const {
avatarUrl
} = e.detail
if (!avatarUrl) {
this.showToast('选择头像失败')
return
}
this.setData({ isUploadingAvatar: true })
this.setData({
isUploadingAvatar: true
})
wx.showLoading({
title: '上传中...',
@ -167,44 +133,33 @@ Page({
filePath: avatarUrl,
name: 'file',
success: (uploadRes) => {
try {
const result = JSON.parse(uploadRes.data)
console.log('上传结果', result)
if (result && result.fileName) {
// 获取上传后的文件路径
const uploadedFilePath = result.fileName
// 构建完整的头像URL
const fullAvatarUrl = this.buildAvatarUrl(uploadedFilePath)
console.log('上传成功,新头像路径:', uploadedFilePath)
console.log('完整头像URL:', fullAvatarUrl)
// 1. 立即更新本地显示
this.setData({
avatarUrl: uploadedFilePath,
avatarFullUrl: fullAvatarUrl,
'userInfo.user.avatar': uploadedFilePath
})
// 2. 更新缓存中的用户信息
// 更新缓存中的用户信息
const cachedUserInfo = wx.getStorageSync('userInfo') || {}
if (!cachedUserInfo.user) {
cachedUserInfo.user = {}
}
cachedUserInfo.user.avatar = uploadedFilePath
wx.setStorageSync('userInfo', cachedUserInfo)
console.log(3435353,uploadedFilePath);
// 3. 单独调用更新头像的API
// 更新头像的API
http.revise({
data: { avatar: uploadedFilePath },
data: {
avatar: uploadedFilePath
},
success: (res) => {
console.log('头像更新成功')
wx.hideLoading()
this.showToast('头像更新成功')
// 4. 重新获取用户信息以确保数据同步
setTimeout(() => {
this.getUserInfo()
@ -216,15 +171,9 @@ Page({
this.showToast('头像保存失败,请重试')
}
})
} else {
throw new Error('上传失败:返回数据格式错误')
}
} catch (error) {
console.error('解析上传结果失败:', error)
wx.hideLoading()
this.showToast('上传失败,请重试')
}
},
fail: (err) => {
wx.hideLoading()
@ -232,7 +181,9 @@ Page({
this.showToast('上传失败,请检查网络')
},
complete: () => {
this.setData({ isUploadingAvatar: false })
this.setData({
isUploadingAvatar: false
})
}
})
},
@ -246,11 +197,15 @@ Page({
},
hideNicknameModal() {
this.setData({ showNicknameModal: false })
this.setData({
showNicknameModal: false
})
},
onNicknameInput(e) {
this.setData({ newNickname: e.detail.value })
this.setData({
newNickname: e.detail.value
})
},
saveNickname() {
@ -273,7 +228,9 @@ Page({
return
}
this.setData({ isUpdatingNickname: true })
this.setData({
isUpdatingNickname: true
})
// 立即更新本地显示
this.setData({
@ -292,7 +249,9 @@ Page({
// 更新到服务器
http.revise({
data: { nickName: newNickname },
data: {
nickName: newNickname
},
success: (res) => {
console.log('昵称更新成功')
this.setData({
@ -309,7 +268,9 @@ Page({
},
fail: (err) => {
console.error('昵称更新失败:', err)
this.setData({ isUpdatingNickname: false })
this.setData({
isUpdatingNickname: false
})
this.showToast('修改失败,请重试')
}
})
@ -378,7 +339,9 @@ Page({
return
}
this.setData({ isSubmitting: true })
this.setData({
isSubmitting: true
})
http.feedback({
data: {
@ -399,18 +362,24 @@ Page({
fail: (err) => {
console.error('反馈失败:', err)
this.showToast('反馈失败,请重试')
this.setData({ isSubmitting: false })
this.setData({
isSubmitting: false
})
}
})
},
// 退出登录相关
showLogoutConfirm() {
this.setData({ showLogoutModal: true })
this.setData({
showLogoutModal: true
})
},
hideLogoutModal() {
this.setData({ showLogoutModal: false })
this.setData({
showLogoutModal: false
})
},
doLogout() {
@ -432,7 +401,9 @@ Page({
})
setTimeout(() => {
this.setData({ showToast: false })
this.setData({
showToast: false
})
}, 2000)
},

4
pages/personal/personal.wxml

@ -2,9 +2,9 @@
<!-- 用户信息区域 -->
<view class="user-section fade-in">
<view class="user-card">
<!-- 头像 - 修复显示问题 -->
<!-- 头像 -->
<button class="avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarFullUrl || '/pages/images/tx.png'}}" mode="aspectFill"></image>
<image class="avatar" src="{{avatarUrl || '/pages/images/tx.png'}}" mode="aspectFill"></image>
<view class="avatar-edit-tip">点击修改</view>
</button>

Loading…
Cancel
Save