項目實戰-點餐小程序-25 我的

一、功能需求

1. 未登錄和登錄界面區別顯示
2. 點擊授權登錄，獲取用戶授權
3. 登錄成功后，將個人信息存入緩存
4. 點擊已登錄成功后用戶的微信頭像，彈出退出登錄
5. 退出登錄后，清空緩存
6. 頁面在onShow的時候，判斷是否有緩存，優先從緩存獲取信息

 

二、代碼實現

1、me.wxml

<!-- 個人信息展示 -->
<!-- 未登錄 -->
<view class="login" wx:if="{{!loginOK}}" bindtap="login">
<image src="/images/me.png"></image>
<text>授權登錄</text>
</view>
<!-- 已登錄 -->
<view class="login" wx:if="{{loginOK}}" bindtap="exit">
<image src="{{avatarUrl}}"></image>
<text>{{nickName}}</text>
</view>
<!-- 服務條目 -->
<view wx:if="{{loginOK}}">
<view class="item">
<text>我的訂單</text>
<image src="/images/right.png"></image>
</view>
<view class="item" >
<text>我的排號</text>
<image src="/images/right.png"></image>
</view>
<view class="item">
<text>我的評價</text>
<image src="/images/right.png"></image>
</view>
</view>
<view class="item">
<text>反饋建議</text>
<image src="/images/right.png"></image>
</view>
<view class="item" >
<text>在線客服</text>
<image src="/images/right.png"></image>
</view>
<!-- 管理員 -->
<view class="admin">
<image src="/images/admin.png"></image>
<view>管理員入口</view>
</view>

2、me.wxss

Page{
  background-color:#F2F2F2;
}

/*未登錄*/
.login{
  background-color: #FF9966;
  width: 100%;
  height: 400rpx;
  /*設置頭像和文字上下居中顯示*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.login text{
  color: #fff;
  font-size: 28rpx;
  margin-top: 20rpx;
}

/*條目*/
.item{
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid gainsboro;
}
.item image{
  width: 40rpx;
  height: 40rpx;
}
/*管理員入口*/
.admin{
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  vertical-align: center;
  text-align: center;
}
.admin image{
  width: 100rpx;
  height: 100rpx;
}

3、me.js

// pages/me/me.js
Page({

  //頁面的初始數據
  data: {
    //用戶登錄狀態
    loginOK:false,
    //用戶的微信頭像、微信名字
    avatarUrl:"/images/me.png",
    nickName:"授權登錄",
  },

  onLoad: function (options) {

  },
  onShow(){
    let userInfo = wx.getStorageSync('userProfile')
    console.log("我的個人信息緩存數據",userInfo);
    if(userInfo){
      this.setData({
        loginOK:true,
        avatarUrl:userInfo.avatarUrl,
        nickName:userInfo.nickName
      })
    }else{
      this.setData({
        loginOK:false
      })
    }
  },
  //授權登錄
  login(){
    console.log("用戶點擊了授權登錄");
    wx.getUserProfile({
      desc: '獲取用戶信息完善會員資料', //聲明獲取用戶個人信息后的用途，不超過30個字符
    }).then(res=>{
      console.log("用戶點擊了允許，獲取用戶個人信息成功",res);
      //個人信息存入緩存
      wx.setStorageSync('userProfile', res.userInfo)
      this.setData({
        loginOK:true,
        avatarUrl:res.userInfo.avatarUrl,
        nickName:res.userInfo.nickName
      })
    }).catch(err=>{
      console.log("用戶點擊了拒絕，獲取用戶個人信息失敗",err);
    })
  },
  //退出登錄
  exit(){
    wx.showModal({
      title:"退出登錄",
      content:"確定要退出登錄嗎？",
    }).then(res=>{
      console.log("用戶確定退出登錄",res);
      if(res.confirm){
        this.setData({
          loginOK:false,
        })
        //清空緩存
        wx.setStorageSync('userProfile', null)
      }else if(res.cancel){
        console.log("用戶取消退出登錄");
      }
    })
  },
  
})

 

三、效果展示