个人中心页面实现
（补充前面的取消按钮逻辑）
个人中心用户信息动态显示实现
index.wxml
<view class="user_info">
<!-- 用户背景信息开始 -->
<view class="user_info_bg">
<view class="user_info_wrap">
<image class="user_icon" src="{
{userInfo.avatarUrl}}"></image>
<view class="user_name">{
{
userInfo.nickName}}</view>
</view>
</view>
<!-- 用户背景信息结束 -->
<!-- 用户操作菜单开始 -->
<view class="user_menu">
</view>
<!-- 用户操作菜单结束 -->
</view>
index.less
page{
background-color: #F6F6F4;
}
.user_info{
.user_info_bg{
position: relative;
height: 40vh;
background-color: var(--themeColor);
.user_info_wrap{
position: relative;
top: 30%;
text-align: center;
.user_icon{
width: 150rpx;
height: 150rpx;
border-radius: 50%;
}
.user_name{
color: #fff;
}
}
}
}
index.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 判断缓存中是否有token
const token=wx.getStorageSync('token');
if(!token){
wx.showModal({
title:'友情提示',
content:'微信授权登录后，才可进入个人中心',
success:(res)=>{
Promise.all([getWxLogin(),getUserProfile()]).then((res)=>{
console.log(res[0].code)
console.log(res[1].userInfo.nickName,res[1].userInfo.avatarUrl)
let loginParam={
code:res[0].code,
nickName:res[1].userInfo.nickName,
avatarUrl:res[1].userInfo.avatarUrl
}
console.log(loginParam)
// 把用户信息放到缓存中
wx.setStorageSync('userInfo', res[1].userInfo);
this.wxlogin(loginParam);
this.setData({
userInfo:res[1].userInfo
})
})
}
})
}else{
console.log("token存在"+token);
const userInfo=wx.getStorageSync('userInfo');
this.setData({
userInfo
})
}
},
/**
* 请求后端获取用户token
* @param {
} loginParam
*/
async wxlogin(loginParam){
// 发送请求 获取用户的token
const result=await requestUtil({
url:"/user/wxlogin",data:loginParam,method:"post"});
let token=result.token;
if(result.code==0){
// 存储token到缓存
wx.setStorageSync('token', token);
}
},
