设置页面修改昵称和头像
This commit is contained in:
WindowBird
parent
14e9e126bd
commit
1e9088bf2b
|
|
@ -112,6 +112,23 @@ export function updateUserInfo(data) {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新用户昵称
|
||||
* @param {string} nickName - 新的昵称
|
||||
* @returns {Promise} 返回更新结果
|
||||
*/
|
||||
export function updateNickName(nickName) {
|
||||
return request({
|
||||
url: '/app/user/updateNickName',
|
||||
method: 'PUT',
|
||||
params: { nickName },
|
||||
showLoading: true,
|
||||
}).catch(error => {
|
||||
console.warn('更新昵称API调用失败:', error)
|
||||
throw error
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户头像
|
||||
* @param {string} userId - 用户ID
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<view class="user-details">
|
||||
<text class="user-name">{{ userInfo.nickName || '昵称' }}</text>
|
||||
<text class="user-id">{{ formatPhone(userInfo.phonenumber) || '123****8912' }}</text>
|
||||
<view class="settings-icon" @click="gotoPage('/pages/set/set')">
|
||||
<view class="settings-icon" @click="goToSettings">
|
||||
<image :src="commonEnum.SET" class="settings-img" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -162,6 +162,14 @@ export default {
|
|||
// 页面显示时刷新数据
|
||||
this.fetchUserData()
|
||||
},
|
||||
mounted() {
|
||||
// 监听用户信息更新事件
|
||||
uni.$on('userInfoUpdated', this.handleUserInfoUpdate)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 移除事件监听
|
||||
uni.$off('userInfoUpdated', this.handleUserInfoUpdate)
|
||||
},
|
||||
methods: {
|
||||
// 获取用户数据
|
||||
async fetchUserData() {
|
||||
|
|
@ -181,6 +189,11 @@ export default {
|
|||
...userInfoRes.value.data,
|
||||
}
|
||||
console.log('用户信息获取成功:', this.userInfo)
|
||||
console.log('用户昵称:', this.userInfo.nickName || this.userInfo.nickname)
|
||||
console.log('用户头像:', this.userInfo.avatar)
|
||||
} else {
|
||||
console.log('用户信息获取失败，使用默认值')
|
||||
console.log('当前用户信息:', this.userInfo)
|
||||
}
|
||||
|
||||
// 处理财务数据
|
||||
|
|
@ -282,6 +295,31 @@ export default {
|
|||
gotoPage(url) {
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
|
||||
// 跳转到设置页面，传递用户信息
|
||||
goToSettings() {
|
||||
console.log('准备跳转到设置页面，当前用户信息:', this.userInfo)
|
||||
|
||||
// 将当前用户信息存储到本地，供设置页面使用
|
||||
try {
|
||||
const userInfoToStore = {
|
||||
nickName: this.userInfo.nickName || this.userInfo.nickname || '昵称',
|
||||
avatar: this.userInfo.avatar || '',
|
||||
userId: this.userInfo.userId || '',
|
||||
phonenumber: this.userInfo.phonenumber || ''
|
||||
}
|
||||
|
||||
uni.setStorageSync('userInfo', userInfoToStore)
|
||||
console.log('用户信息已存储到本地:', userInfoToStore)
|
||||
} catch (error) {
|
||||
console.error('存储用户信息失败:', error)
|
||||
}
|
||||
|
||||
// 跳转到设置页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/set/set'
|
||||
})
|
||||
},
|
||||
goToAgentApply() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/agents/agents',
|
||||
|
|
@ -319,6 +357,24 @@ export default {
|
|||
url: '/pages/agents/requestAgent',
|
||||
})
|
||||
},
|
||||
|
||||
// 处理用户信息更新事件
|
||||
handleUserInfoUpdate(updatedUserInfo) {
|
||||
// 更新本地用户信息
|
||||
this.userInfo = {
|
||||
...this.userInfo,
|
||||
...updatedUserInfo
|
||||
}
|
||||
|
||||
// 更新本地存储
|
||||
try {
|
||||
uni.setStorageSync('userInfo', this.userInfo)
|
||||
} catch (error) {
|
||||
console.error('更新本地用户信息失败:', error)
|
||||
}
|
||||
|
||||
console.log('用户信息已更新:', this.userInfo)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="info">
|
||||
<view v-for="(item, index) in userInfoSettings" :key="index" class="info-row">
|
||||
<view v-for="(item, index) in userInfoSettings" :key="index" class="info-row" @click="handleItemClick(item)">
|
||||
<view class="label">{{ item.label }}</view>
|
||||
<view class="value">{{ item.value }} ></view>
|
||||
<view class="value">
|
||||
<image
|
||||
v-if="item.type === 'avatar' && item.value"
|
||||
:src="item.value"
|
||||
class="avatar-preview"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else-if="item.type === 'avatar'">点击设置头像</text>
|
||||
<text v-else>{{ item.value }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="log-out" @click="handleLogout">退出登录</view>
|
||||
|
|
@ -12,6 +22,7 @@
|
|||
|
||||
<script>
|
||||
import { userLogout } from '@/api/auth/auth.js'
|
||||
import { updateNickName } from '@/api/user/user.js'
|
||||
import { clearToken } from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
|
|
@ -20,8 +31,7 @@ export default {
|
|||
userInfoSettings: [
|
||||
{
|
||||
label: '头像',
|
||||
value: '', // 实际项目中这里可能是图片URL
|
||||
icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
|
||||
value: '', // 头像URL，从个人中心传递过来
|
||||
type: 'avatar',
|
||||
},
|
||||
{
|
||||
|
|
@ -32,7 +42,181 @@ export default {
|
|||
],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log('设置页面开始加载...')
|
||||
console.log('初始userInfoSettings:', this.userInfoSettings)
|
||||
|
||||
// 页面加载时获取用户信息
|
||||
this.loadUserInfo()
|
||||
|
||||
console.log('设置页面加载完成')
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时重新加载用户信息，确保数据最新
|
||||
this.loadUserInfo()
|
||||
},
|
||||
methods: {
|
||||
// 加载用户信息
|
||||
loadUserInfo() {
|
||||
console.log('开始加载用户信息...')
|
||||
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
console.log('从本地存储获取的用户信息:', userInfo)
|
||||
|
||||
// 检查用户信息是否存在且格式正确
|
||||
if (!userInfo) {
|
||||
console.log('本地存储中没有用户信息')
|
||||
this.setDefaultValues()
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof userInfo !== 'object') {
|
||||
console.log('用户信息格式不正确，不是对象类型')
|
||||
this.setDefaultValues()
|
||||
return
|
||||
}
|
||||
|
||||
// 更新昵称显示
|
||||
const nicknameItem = this.userInfoSettings.find(item => item.type === 'nickname')
|
||||
if (nicknameItem) {
|
||||
const nickName = userInfo.nickName || userInfo.nickname || '昵称'
|
||||
nicknameItem.value = nickName
|
||||
console.log('设置昵称显示:', nickName)
|
||||
}
|
||||
|
||||
// 更新头像显示
|
||||
const avatarItem = this.userInfoSettings.find(item => item.type === 'avatar')
|
||||
if (avatarItem) {
|
||||
const avatar = userInfo.avatar || ''
|
||||
avatarItem.value = avatar
|
||||
console.log('设置头像显示:', avatar)
|
||||
}
|
||||
|
||||
console.log('用户信息加载成功')
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载用户信息时发生错误:', error)
|
||||
this.setDefaultValues()
|
||||
}
|
||||
},
|
||||
|
||||
// 设置默认值
|
||||
setDefaultValues() {
|
||||
console.log('设置默认值...')
|
||||
|
||||
const nicknameItem = this.userInfoSettings.find(item => item.type === 'nickname')
|
||||
if (nicknameItem) {
|
||||
nicknameItem.value = '昵称'
|
||||
}
|
||||
|
||||
const avatarItem = this.userInfoSettings.find(item => item.type === 'avatar')
|
||||
if (avatarItem) {
|
||||
avatarItem.value = ''
|
||||
}
|
||||
|
||||
console.log('默认值设置完成')
|
||||
},
|
||||
|
||||
// 处理设置项点击
|
||||
handleItemClick(item) {
|
||||
if (item.type === 'nickname') {
|
||||
this.showNicknameInput()
|
||||
} else if (item.type === 'avatar') {
|
||||
// 头像修改逻辑可以在这里添加
|
||||
uni.showToast({
|
||||
title: '头像修改功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 显示昵称输入框
|
||||
showNicknameInput() {
|
||||
const currentNickname = this.userInfoSettings.find(item => item.type === 'nickname').value
|
||||
|
||||
uni.showModal({
|
||||
title: '修改昵称',
|
||||
content: '请输入新的昵称',
|
||||
editable: true,
|
||||
placeholderText: '请输入昵称',
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
success: async (res) => {
|
||||
if (res.confirm && res.content) {
|
||||
const newNickname = res.content.trim()
|
||||
if (newNickname) {
|
||||
await this.updateNickname(newNickname)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '昵称不能为空',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 更新昵称
|
||||
async updateNickname(newNickname) {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '更新中...'
|
||||
})
|
||||
|
||||
const response = await updateNickName(newNickname)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (response.code === 200) {
|
||||
// 更新本地显示
|
||||
const nicknameItem = this.userInfoSettings.find(item => item.type === 'nickname')
|
||||
if (nicknameItem) {
|
||||
nicknameItem.value = newNickname
|
||||
}
|
||||
|
||||
// 更新本地存储的用户信息
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo') || {}
|
||||
userInfo.nickName = newNickname
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
} catch (error) {
|
||||
console.error('更新本地用户信息失败:', error)
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '昵称更新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 通知个人中心页面更新用户信息
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo') || {}
|
||||
uni.$emit('userInfoUpdated', {
|
||||
nickName: newNickname,
|
||||
avatar: userInfo.avatar || ''
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error)
|
||||
uni.$emit('userInfoUpdated', {
|
||||
nickName: newNickname,
|
||||
avatar: ''
|
||||
})
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.msg || '更新失败')
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
console.error('更新昵称失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 退出登录处理
|
||||
async handleLogout() {
|
||||
try {
|
||||
|
|
@ -118,6 +302,12 @@ export default {
|
|||
width: 646rpx;
|
||||
padding: 40rpx 0;
|
||||
margin: 0 34rpx;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
|
|
@ -130,6 +320,21 @@ export default {
|
|||
text-align: right;
|
||||
color: #bbbbbb;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.avatar-preview {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 10rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -153,5 +358,65 @@ export default {
|
|||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.debug-btn {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 98rpx;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
width: 710rpx;
|
||||
height: 98rpx;
|
||||
background: #e0e0e0;
|
||||
border-radius: 24.5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: #d0d0d0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 98rpx;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
width: 710rpx;
|
||||
height: 98rpx;
|
||||
background: #e0e0e0;
|
||||
border-radius: 24.5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: #d0d0d0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.validate-btn {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 98rpx;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
width: 710rpx;
|
||||
height: 98rpx;
|
||||
background: #e0e0e0;
|
||||
border-radius: 24.5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: #d0d0d0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user