微信小程序商项目(篇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

(0)
上一篇 2022年3月22日
下一篇 2022年3月22日

相关推荐