小程序OFO编写登录/未登录页

编写登录/未登录页

1.页面结构（wx:if 是条件语句）
<!--pages/my/index.wxml-->
<view class="container">
    <view class="user-info">
    <!-- 用户未登录就没有头像-->
    <block wx:if="{{userInfo.avatarUrl != ''}}">
        <image src="{{userInfo.avatarUrl}}"></image>
    </block>
        <text>{{userInfo.nickName}}</text>
    </view>
    <!-- 用户未登录就没有钱包按钮-->
    <block wx:if="{{userInfo.avatarUrl != ''}}">
    <view class="my-wallet tapbar" bindtap="movetoWallet">
        <text>我的钱包</text>
        <text>></text>
    </view>
    </block>
    <button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>
</view>
2.页面样式
/* pages/my/index.wxss */
.user-info{
    background-color: #fff;
    padding-top: 60rpx;
}
.user-info image{
    display: block;
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    margin: 0 auto 40rpx;
    Box-shadow: 0 0 20rpx rgba(0,.2)
}
.user-info text{
    display: block;
    text-align: center;
    padding: 30rpx 0;
    margin-bottom: 30rpx;
}
.btn-login{
    position: absolute;
    bottom: 60rpx;
    width: 90%;
    left: 50%;
    margin-left: -45%;
}
.gray{
    background-color: #ccc;
}
3.页面数据逻辑
// pages/my/index.js
Page({
  data:{
    // 用户信息
    userInfo: {
      avatarUrl: "",      nickName: "未登录"
    },    bType: "primary", // 按钮类型
    actionText: "登录", // 按钮文字提示
    lock: false //登录按钮状态，false表示未登录
  },// 页面加载
  onLoad:function(){
    // 设置本页导航标题
    wx.setNavigationBarTitle({
      title: '个人中心'
    })
    // 获取本地数据-用户信息
    wx.getStorage({
      key: 'userInfo',      // 能获取到则显示用户信息，并保持登录状态，不能就什么也不做
      success: (res) => {
        wx.hideLoading();
        this.setData({
          userInfo: {
            avatarUrl: res.data.userInfo.avatarUrl,            nickName: res.data.userInfo.nickName
          },          bType: res.data.bType,          actionText: res.data.actionText,          lock: true
        })
      }
    });
  },// 登录或退出登录按钮点击事件
  bindAction: function(){
    this.data.lock = !this.data.lock
    // 如果没有登录，登录按钮操作
    if(this.data.lock){
      wx.showLoading({
        title: "正在登录"
      });
      wx.login({
        success: (res) => {
          wx.hideLoading();
          wx.getUserInfo({
            withCredentials: false,            success: (res) => {
              this.setData({
                userInfo: {
                  avatarUrl: res.userInfo.avatarUrl,                  nickName: res.userInfo.nickName
                },                bType: "warn",                actionText: "退出登录"
              });
              // 存储用户信息到本地
              wx.setStorage({
                key: 'userInfo',                data: {
                  userInfo: {
                    avatarUrl: res.userInfo.avatarUrl,                    nickName: res.userInfo.nickName
                  },                  bType: "warn",                  actionText: "退出登录"
                },                success: function(res){
                  console.log("存储成功")
                }
              })
            }     
          })
        }
      })
    // 如果已经登录，退出登录按钮操作     
    }else{
      wx.showModal({
        title: "确认退出?",        content: "退出后将不能使用ofo",        success: (res) => {
          if(res.confirm){
            console.log("确定")
            // 退出登录则移除本地用户信息
            wx.removeStorageSync('userInfo')
            this.setData({
              userInfo: {
                avatarUrl: "",                nickName: "未登录"
              },              bType: "primary",              actionText: "登录"
            })
          }else {
            console.log("cancel")
            this.setData({
              lock: true
            })
          }
        }
      })
    }   
  },// 跳转至钱包
  movetoWallet: function(){
    wx.navigateto({
      url: '../wallet/index'
    })
  }
})