專案實戰-點餐小程式-20 我的

阿新 • • 發佈：2021-08-06

一、功能需求

未登入和登入介面區別顯示
點選授權登入，獲取使用者授權
登入成功後，將個人資訊存入快取
點選已登入成功後用戶的微信頭像，彈出退出登入
退出登入後，清空快取
頁面在onShow的時候，判斷是否有快取，優先從快取獲取資訊

二、程式碼實現

1、me.wxml

 1 <!-- 個人資訊展示 -->
 2 <!-- 未登入 -->
 3 <view class="login" wx:if="{{!loginOK}}" bindtap="login">
 4 <image src="/images/me.png"></image> 

 5 <text>授權登入</text>
 6 </view>
 7 <!-- 已登入 -->
 8 <view class="login" wx:if="{{loginOK}}" bindtap="exit">
 9 <image src="{{avatarUrl}}"></image>
10 <text>{{nickName}}</text>
11 </view>
12 <!-- 服務條目 -->
13 <view wx:if="{{loginOK}}">
14 
 <view class="item">
15 <text>我的訂單</text>
16 <image src="/images/right.png"></image>
17 </view>
18 <view class="item" >
19 <text>我的排號</text>
20 <image src="/images/right.png"></image>
21 </view>
22 <view class="item">
23 <text> 
我的評價</text>
24 <image src="/images/right.png"></image>
25 </view>
26 </view>
27 <view class="item">
28 <text>反饋建議</text>
29 <image src="/images/right.png"></image>
30 </view>
31 <view class="item" >
32 <text>線上客服</text>
33 <image src="/images/right.png"></image>
34 </view>
35 <!-- 管理員 -->
36 <view class="admin">
37 <image src="/images/admin.png"></image>
38 <view>管理員入口</view>
39 </view>

2、me.wxss

 1 Page{
 2   background-color:#F2F2F2;
 3 }
 4 
 5 /*未登入*/
 6 .login{
 7   background-color: #FF9966;
 8   width: 100%;
 9   height: 400rpx;
10   /*設定頭像和文字上下居中顯示*/
11   display: flex;
12   flex-direction: column;
13   justify-content: center;
14   align-items: center;
15 }
16 .login image{
17   width: 150rpx;
18   height: 150rpx;
19   border-radius: 50%;
20 }
21 .login text{
22   color: #fff;
23   font-size: 28rpx;
24   margin-top: 20rpx;
25 }
26 
27 /*條目*/
28 .item{
29   background-color: #fff;
30   padding: 30rpx;
31   display: flex;
32   justify-content: space-between;
33   border-bottom: 1rpx solid gainsboro;
34 }
35 .item image{
36   width: 40rpx;
37   height: 40rpx;
38 }
39 /*管理員入口*/
40 .admin{
41   background-color: #fff;
42   margin: 20rpx;
43   padding: 20rpx;
44   border-radius: 10rpx;
45   vertical-align: center;
46   text-align: center;
47 }
48 .admin image{
49   width: 100rpx;
50   height: 100rpx;
51 }

3、me.js

 1 // pages/me/me.js
 2 Page({
 3 
 4   //頁面的初始資料
 5   data: {
 6     //使用者登入狀態
 7     loginOK:false,
 8     //使用者的微信頭像、微信名字
 9     avatarUrl:"/images/me.png",
10     nickName:"授權登入",
11   },
12 
13   onLoad: function (options) {
14 
15   },
16   onShow(){
17     let userInfo = wx.getStorageSync('userProfile')
18     console.log("我的個人資訊快取資料",userInfo);
19     if(userInfo){
20       this.setData({
21         loginOK:true,
22         avatarUrl:userInfo.avatarUrl,
23         nickName:userInfo.nickName
24       })
25     }else{
26       this.setData({
27         loginOK:false
28       })
29     }
30   },
31   //授權登入
32   login(){
33     console.log("使用者點選了授權登入");
34     wx.getUserProfile({
35       desc: '獲取使用者資訊完善會員資料', //宣告獲取使用者個人資訊後的用途，不超過30個字元
36     }).then(res=>{
37       console.log("使用者點選了允許，獲取使用者個人資訊成功",res);
38       //個人資訊存入快取
39       wx.setStorageSync('userProfile', res.userInfo)
40       this.setData({
41         loginOK:true,
42         avatarUrl:res.userInfo.avatarUrl,
43         nickName:res.userInfo.nickName
44       })
45     }).catch(err=>{
46       console.log("使用者點選了拒絕，獲取使用者個人資訊失敗",err);
47     })
48   },
49   //退出登入
50   exit(){
51     wx.showModal({
52       title:"退出登入",
53       content:"確定要退出登入嗎？",
54     }).then(res=>{
55       console.log("使用者確定退出登入",res);
56       if(res.confirm){
57         this.setData({
58           loginOK:false,
59         })
60         //清空快取
61         wx.setStorageSync('userProfile', null)
62       }else if(res.cancel){
63         console.log("使用者取消退出登入");
64       }
65     })
66   },
67   
68 })