|
|
<template>
|
|
|
<view>
|
|
|
<!-- <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
|
|
|
<view class="userinfo u-flex-1" @click="getUserInfo">
|
|
|
<view class="img-container">
|
|
|
<image class="uimage" :src='avatarUrl'></image>
|
|
|
</view>
|
|
|
<u-divider>{{nickName}}</u-divider>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<view>
|
|
|
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
|
<image class="uimage" :src="avatarUrl"></image>
|
|
|
</button>
|
|
|
<input id="nickname-input" type="nickname" style="text-align: center;" class="weui-input"
|
|
|
placeholder="请选择昵称" v-model="nickName" @blur="onNickName" />
|
|
|
</view>
|
|
|
<view class="u-m-t-20">
|
|
|
<u-cell-group>
|
|
|
<u-cell-item @click="toOrder" icon="star" title="我的订单"></u-cell-item>
|
|
|
<u-cell-item icon="photo" title="我的收藏"></u-cell-item>
|
|
|
<u-cell-item icon="coupon" title="我的地址"></u-cell-item>
|
|
|
</u-cell-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
onShow
|
|
|
} from '@dcloudio/uni-app';
|
|
|
import {
|
|
|
ref,
|
|
|
onMounted,
|
|
|
getCurrentInstance,
|
|
|
computed
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
userLogin,
|
|
|
uploadImageApi,
|
|
|
saveOrUpdateApi
|
|
|
} from '../../api/user.js'
|
|
|
import http from '../../common/http.js'
|
|
|
import {
|
|
|
userStore
|
|
|
} from '../../store/user.js';
|
|
|
const ustore = userStore()
|
|
|
// 获取当前组件实例
|
|
|
const instance = getCurrentInstance();
|
|
|
//昵称
|
|
|
const nickName = computed(() => {
|
|
|
if (ustore.nickName) {
|
|
|
return ustore.nickName
|
|
|
} else {
|
|
|
return ''
|
|
|
}
|
|
|
})
|
|
|
//头像
|
|
|
//const avatarUrl = ref('/static/user.jpg')
|
|
|
const avatarUrl = computed(() => {
|
|
|
if (ustore.avatarUrl) {
|
|
|
return http.baseUrl + ustore.avatarUrl
|
|
|
} else {
|
|
|
return '/static/user.jpg'
|
|
|
}
|
|
|
})
|
|
|
// 页面加载时从缓存读取用户信息
|
|
|
onMounted(() => {
|
|
|
loadUserInfoFromStorage();
|
|
|
})
|
|
|
|
|
|
const loadUserInfoFromStorage = () => {
|
|
|
const storedAvatar = uni.getStorageSync('avatarUrl')
|
|
|
const storedNickName = uni.getStorageSync('nickName')
|
|
|
|
|
|
if (storedAvatar && storedNickName) {
|
|
|
nickName.value = storedNickName
|
|
|
avatarUrl.value = storedAvatar
|
|
|
console.log('从缓存加载用户信息:', storedNickName, storedAvatar)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const onChooseAvatar = (e) => {
|
|
|
console.log(e)
|
|
|
avatarUrl.value = e.detail.avatarUrl
|
|
|
//上传服务器
|
|
|
uploadImageApi({
|
|
|
url: "/api/upload/uploadImage",
|
|
|
filePath: e.detail.avatarUrl
|
|
|
}).then((res) => {
|
|
|
//图片上传成功，存到数据库
|
|
|
console.log(res)
|
|
|
let result = JSON.parse(res)
|
|
|
saveOrUpdateApi({
|
|
|
openid: uni.getStorageSync('openid'),
|
|
|
avatarUrl: result.data
|
|
|
}).then(res => {
|
|
|
console.log(res)
|
|
|
ustore.avatarUrl = result.data
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
const onNickName = (e) => {
|
|
|
console.log(e)
|
|
|
uni.createSelectorQuery().in(instance) // 注意这里要加上 in(this)
|
|
|
.select("#nickname-input")
|
|
|
.fields({
|
|
|
properties: ["value"],
|
|
|
})
|
|
|
.exec((res) => {
|
|
|
console.log(res)
|
|
|
nickName.value = res?.[0]?.value
|
|
|
console.log('昵称', nickName.value)
|
|
|
saveOrUpdateApi({
|
|
|
openid: uni.getStorageSync('openid'),
|
|
|
nickName: res?.[0]?.value
|
|
|
}).then(res => {
|
|
|
console.log(res)
|
|
|
ustore.nickName = res?.[0]?.value
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//获取头像点击事件
|
|
|
const getUserInfo = () => {
|
|
|
console.log('获取用户信息')
|
|
|
|
|
|
// 检查是否已授权
|
|
|
uni.getSetting({
|
|
|
success: (res) => {
|
|
|
if (res.authSetting['scope.userInfo']) {
|
|
|
// 显示加载提示
|
|
|
uni.showLoading({
|
|
|
title: '获取用户信息中...'
|
|
|
})
|
|
|
// 已授权，直接获取用户信息
|
|
|
uni.getUserInfo({
|
|
|
success: (res) => {
|
|
|
console.log('已授权用户信息:', res)
|
|
|
// 确保使用正确的数据路径
|
|
|
const userInfo = res.userInfo || {}
|
|
|
nickName.value = userInfo.nickName || '未知用户'
|
|
|
|
|
|
// 处理头像URL，添加时间戳避免缓存
|
|
|
let avatar = userInfo.avatarUrl || '/static/user.jpg'
|
|
|
if (avatar !== '/static/user.jpg') {
|
|
|
// 添加时间戳参数避免缓存
|
|
|
avatar += (avatar.includes('?') ? '&' : '?') + 't=' +
|
|
|
new Date().getTime()
|
|
|
}
|
|
|
avatarUrl.value = avatar
|
|
|
|
|
|
// 存储到本地
|
|
|
uni.setStorageSync('avatarUrl', avatar);
|
|
|
uni.setStorageSync('nickName', nickName.value);
|
|
|
|
|
|
console.log('更新后的用户信息:', nickName.value, avatarUrl.value)
|
|
|
// 显示成功提示
|
|
|
uni.showToast({
|
|
|
title: '信息更新成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
uni.hideLoading()
|
|
|
console.log('获取用户信息失败:', err)
|
|
|
uni.showToast({
|
|
|
title: '获取信息失败',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
// 未授权，弹出授权窗口
|
|
|
uni.showModal({
|
|
|
title: '用户信息授权',
|
|
|
content: '需要获取您的头像和昵称',
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
// 用户点击确定
|
|
|
uni.getUserProfile({
|
|
|
desc: '用于完善会员资料',
|
|
|
success: (res) => {
|
|
|
console.log('授权成功:', res)
|
|
|
// 确保使用正确的数据路径
|
|
|
const userInfo = res.userInfo || {}
|
|
|
nickName.value = userInfo.nickName ||
|
|
|
'未知用户'
|
|
|
|
|
|
// 处理头像URL，添加时间戳避免缓存
|
|
|
let avatar = userInfo.avatarUrl ||
|
|
|
'/static/user.jpg'
|
|
|
if (avatar !== '/static/user.jpg') {
|
|
|
// 添加时间戳参数避免缓存
|
|
|
avatar += (avatar.includes('?') ? '&' :
|
|
|
'?') + 't=' + new Date()
|
|
|
.getTime()
|
|
|
}
|
|
|
avatarUrl.value = avatar
|
|
|
|
|
|
// 存储到本地
|
|
|
uni.setStorageSync('avatarUrl', avatar);
|
|
|
uni.setStorageSync('nickName', nickName
|
|
|
.value);
|
|
|
|
|
|
console.log('更新后的用户信息:', nickName.value,
|
|
|
avatarUrl.value)
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.log('授权失败:', err)
|
|
|
uni.showToast({
|
|
|
title: '授权失败',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.log('检查授权设置失败:', err)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//跳转详情
|
|
|
const toOrder = () => {
|
|
|
// getUserInfo()
|
|
|
//在起始页面跳转到details.vue页面并传递参数
|
|
|
uni.navigateTo({
|
|
|
url: '../order/order'
|
|
|
});
|
|
|
}
|
|
|
onShow(() => {
|
|
|
userLogin()
|
|
|
// getUserInfo()
|
|
|
// 只从存储加载，不再调用getUserInfo
|
|
|
loadUserInfoFromStorage();
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background-color: #ededed;
|
|
|
}
|
|
|
|
|
|
.userinfo {
|
|
|
margin: 30rpx 0rpx;
|
|
|
}
|
|
|
|
|
|
.img-container {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.uimage {
|
|
|
height: 50px;
|
|
|
width: 50px;
|
|
|
border-radius: 50%;
|
|
|
margin: 5px 0px;
|
|
|
}
|
|
|
|
|
|
.camera {
|
|
|
width: 54px;
|
|
|
height: 44px;
|
|
|
|
|
|
&:active {
|
|
|
background-color: #ededed;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.user-box {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
</style> |
