授权登录

componets/authorized-login-dialog/authorizedLoginDialog.js

@@ -128,15 +128,14 @@ Component({
         })
       }
     },
-    checkHasUserInfo() { 
+    checkHasUserInfo() {
       var disableCommitBtn = this.data.avatarUrl == defaultAvatarUrl || !this.data.phoneNumber || !this.data.nickName;
-
       this.setData({
         hasUserInfo: this.data.avatarUrl != defaultAvatarUrl && this.data.phoneNumber && this.data.nickName,
         disableCommitBtn: disableCommitBtn
       })
     },
-// 提交
+    // 提交
     handleUserInfo: function (e) {
       if (!this.data.hasUserInfo) {
         wx.showToast({
@@ -149,10 +148,9 @@ Component({
       if (e.detail.userInfo) {
         // 用户点击允许，获取到用户信息  
         this.setData({
-          showLoading:true,
+          showLoading: true,
           disableCommitBtn: true,
         });
-
         wx.request({
           url: `${homeApi_empower}/wxlogin`,
           data: {
@@ -206,7 +204,7 @@ Component({
         // 可以选择在这里处理用户拒绝授权后的逻辑，如跳转到其他页面或显示提示信息  
       }
     },
-// 轮询后台信息
+    // 轮询后台信息
     startInterval: function () {
       var that = this;
       this.data.intervalId = setInterval(() => {
@@ -229,9 +227,20 @@ Component({
             console.log('intervalRes.data=' + JSON.stringify(intervalRes.data));
             //empower.js? [sm]:152 intervalRes.data={"st":"success","status":"0"}
             if (intervalRes.data && intervalRes.data.st && intervalRes.data.status && intervalRes.data.st == 'success' && intervalRes.data.status == '1') {
-              wx.setStorageSync('hasAuth', 'hasAuth');
+              wx.setStorageSync('hasAuth', true);
               wx.setStorageSync('hotelEmpower', intervalRes.data.hotel);
               wx.setStorageSync('roomEmpower', intervalRes.data.room);
+              wx.setStorageSync('userInfo', {
+                hotel: intervalRes.data.hotel,
+                room: intervalRes.data.room,
+                unionid: that.data.unionid,
+                openid: that.data.openid,
+                session_key: that.data.session_key,
+                nickName: that.data.nickName,
+                avatarUrl: that.data.avatarUrl,
+                encryptphone: that.data.encryptphone,
+                phoneNumber: that.data.phoneNumber
+              })
               that.setData({
                 disableCommitBtn: false,
               });

pages/mine/mine.js

@@ -1,19 +1,80 @@
 // pages/mine/mine.js
+const defaultAvatarUrl = "../../static/images/no-login.png"
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    showAuthorizedDialog:false
+    showAuthorizedDialog: false,
+    hasAuth: false,
+    avatarUrl: defaultAvatarUrl,
+    userName: "用户登录",
+    phoneNumber: "",
+    menuList: [{
+      icon: "../../static/mine/smbg.png",
+      title: "睡眠报告",
+      type: "switchTab",
+      url: "/pages/data/data"
+    }, {
+      icon: "../../static/mine/dcwj.png",
+      title: "调查问卷",
+      type: "navigate",
+      url: "/subpages/testSAS/testSAS"
+    }, {
+      icon: "../../static/mine/bzzx.png",
+      title: "帮助中心",
+      type: "navigate",
+      url: ""
+    }, {
+      icon: "../../static/mine/gywm.png",
+      title: "关于我们",
+      type: "navigate",
+      url: ""
+    }]
 
   },
-  showDialog(){
+  showDialog() {
     this.setData({
-      showAuthorizedDialog:true
+      showAuthorizedDialog: true
     })
   },
-
+  onMenuClick(e) {
+    console.log(e.currentTarget.dataset);
+    const { index } = e.currentTarget.dataset;
+    var hasAuth = wx.getStorageSync("hasAuth");
+    switch (index - 0) {
+      case 0:
+      case 1:
+        // need Login
+        if (hasAuth) {
+          this.toPage(index);
+        } else {
+          this.showDialog();
+        }
+        break;
+      default:
+        this.toPage(index);
+        break;
+    }
+    
+  },
+  toPage(index) {
+    const type = this.data.menuList[index].type;
+    const url = this.data.menuList[index].url;
+    if (!url) {
+      return
+    }
+    if (type == 'switchTab') {
+      wx.switchTab({
+        url: url
+      })
+    } else if (type == 'navigate') {
+      wx.navigateTo({
+        url: url
+      })
+    }
+  },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -37,8 +98,29 @@ Page({
     this.getTabBar().setData({
       selected: 3
     })
+  
+    this.checkAuth()
+  },
+  checkAuth() {
+    var hasAuth = wx.getStorageSync("hasAuth");
+    this.setData({
+      hasAuth: hasAuth
+    })
+    if (hasAuth) {
+      var userInfo = wx.getStorageSync("userInfo");
+      this.setData({
+        userName: userInfo.userName || "用户登录",
+        avatarUrl: userInfo.avatarUrl || defaultAvatarUrl,
+        phoneNumber: userInfo.phoneNumber || ""
+      })
+    }
+    return hasAuth;
+  },
+  authorizationSuccessful() {
+    console.log("授权成功");
+    this.setData({ showAuthorizedDialog: false })
+    this.checkAuth();
   },
-
   /**
    * 生命周期函数--监听页面隐藏
    */

pages/mine/mine.wxml

@@ -1,5 +1,34 @@
 <!--pages/mine/mine.wxml-->
 <view class="container">
-    <button style="margin-top: 200rpx;" bindtap="showDialog">点击弹窗</button>
-    <authorized-login-dialog showDialog="{{showAuthorizedDialog}}"></authorized-login-dialog>
+    <view class="top-box" bindtap="showDialog">
+        <image class="top-bg" src="../../static/bg/ic_mine_bg.png" mode="widthFix"></image>
+        <view class="userInfo-box">
+            <view class="user-h-view" style="align-items: center;">
+                <image class="avatar" src="{{avatarUrl}}" mode="widthFix"></image>
+                <view class="user-v-view" style="flex: 1;height: fit-content;margin: 0 30rpx;">
+                    <view class="user-h-view" style="align-items: center;">
+                        <text class="username">{{userName}}</text>
+                        <image wx:if="{{hasAuth}}" class="edit" src="../../static/images/ic_edit.png" mode="widthFix">
+                        </image>
+                    </view>
+                    <text class="phoneNumber">{{phoneNumber}}</text>
+                </view>
+            </view>
+        </view>
+    </view>
+    <image class="ad-banner" src="../../static/bg/mine-ad.png" mode="widthFix"></image>
+    <view class="menu-card">
+        <view class="menu-item" wx:for="{{ menuList }}" wx:key="index" bindtap="onMenuClick" data-index="{{ index }}">
+            <image class="ic-menu" src="{{item.icon}}" mode="widthFix"></image>
+            <text class="menu-title">{{item.title}}</text>
+            <van-icon name="arrow" />
+        </view>
+        <view class="menu-item" style="border: none;">
+            <image class="ic-menu" src="../../static/mine/zxkf.png" mode="widthFix"></image>
+            <text class="menu-title">在线客服</text>
+            <van-icon name="arrow" />
+        </view>
+    </view>
+    <authorized-login-dialog showDialog="{{showAuthorizedDialog}}"
+        bind:authorizationSuccessful="authorizationSuccessful"></authorized-login-dialog>
 </view>

pages/mine/mine.wxss

@@ -6,7 +6,107 @@ page {
 .container {
     min-height: 100vh !important;
     background: #F8F9FA;
+    justify-content: flex-start;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
+}
+
+.top-box {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    position: relative;
+}
+
+.top-bg {
+    width: 100vw;
+    display: block;
+}
+
+.userInfo-box {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.user-h-view {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
+.avatar {
+    width: 128rpx;
+    height: 128rpx;
+    display: block;
+    margin-left: 40rpx;
+    border-radius: 100%;
+    overflow: hidden;
+}
+
+.username {
+    flex: 1;
+    font-size: 36rpx;
+    color: #333333;
+}
+
+.edit {
+    width: 40rpx;
+    height: 40rpx;
+    display: block;
+}
+
+.phoneNumber {
+    margin-top: 16rpx;
+    font-size: 28rpx;
+    color: #666666;
+}
+
+.ad-banner {
+    width: calc(100% - 20rpx);
+    display: block;
+}
+
+.menu-card {
+    background: #FFFFFF;
+    margin-top: 20rpx;
+    width: calc(100% - 60rpx);
+    overflow: hidden;
+    min-height: 600rpx;
+    align-items: center;
+    display: flex;
+    box-shadow: 0rpx 8rpx 20rpx 0rpx #EEEEEE;
+    flex-direction: column;
+    border-radius: 24rpx;
+}
+
+.menu-item {
+    width: calc(100% - 60rpx);
+    display: flex;
+    height: 116rpx;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1rpx solid #EEEEEE;
+}
+
+.ic-menu {
+    width: 36rpx;
+    height: 36rpx;
+}
+
+.menu-title {
+    flex: 1;
+    margin-left: 16rpx;
+}
+
+.menu-item:active {
+    opacity: 0.7;
 }