微信小程序商项目（篇9）用户页面实现

用户背景区域

<!-- 背景 -->
<block wx:if="{{userInfo.userInfo}}">
    <view class="myBackground" >
        <image mode="widthFix" class="headPic" src="{{userInfo.userInfo.avatarUrl}}" />
        <view class="userName" >{{userInfo.userInfo.nickName}}</view>
    </view>
</block>
<block wx:else>
    <view class="noBackground">
        <button class="loginBtn" type="primary" plain="{{true}}" bindtap="getQuan">登录</button>
    </view>
</block>

收藏区域

<view class="collect">
    <view class="collect1">
        <view>0</view>
        <view class="collectBottom">收藏的店铺</view>
    </view>
    <view class="collect2">
        <view>0</view>
        <view class="collectBottom"> 收藏的商品</view>
    </view>
    <view class="collect3">
        <view>0</view>
        <view class="collectBottom">关注的商品</view>
    </view>
    <view class="collect4">
        <view>0</view>
        <view class="collectBottom">我的足迹</view>
    </view>
</view>

订单区域

<view class="orderTitle">我的订单</view>
<view class="myOrder">
    <view class="myOrderTop">全部订单</view>
    <view class="myOrderTop">待付款</view>
    <view class="myOrderTop">待收货</view>
    <view class="myOrderTop">退款/退货</view>
</view>

其他

<view class="item">收货地址管理</view>
<view  class="item">联系客服</view>
<view  class="item"> 意见反馈</view>
<view  class="item">关于我们</view>

获取用户信息

  onShow: function () {
    wx.login({
      timeout:10000,
      success: (result)=>{
        // console.log(result)
        wx.setStorageSync("token", result.code);
      },
      fail: ()=>{},
      complete: ()=>{}
    });
    const userInfo=wx.getStorageSync("userInfo");
    // console.log(userInfo)
    this.setData({
      userInfo:userInfo
    })
  }

去登录页面

  getQuan(){
    wx.navigateTo({
      url: '/pages/login/login'
    });
  }

登录页面

<button type="primary" 
plain="{{true}}" class="loginBtn" 
open-type="getUserInfo"  
bindgetuserinfo="getQuan">授权</button>

  getQuan(e){
    console.log(e)
    const userInfo=e.detail
    wx.setStorage({
      key: 'userInfo',
      data: userInfo
    });
    wx.navigateBack({
      delta: 1
    });
  }

本文地址：https://blog.csdn.net/weixin_40119412/article/details/108568612