微信小程序开发一个小型商城（八、个人页面）

上一篇文章：微信小程序开发一个小型商城（七、支付页面）

在上方还是使用wx:if进行判断是否有登录的数据，有的话将数据当中的图片和名字渲染到页面当中，不存在的话使用一个登录按钮表示需要用户登录。往下分别是一些静态标签，使用view和加上一些样式即可实现。
在判断是否登录过的时候，在未登录的时候单击登录按钮后会实现跳转到login登录界面，获取用户授权进行登录，给获取登录全希望的按钮加上一个点击事件handleGetUserInfo 表示单击授权，绥江将数据使用缓存写入到userinfo当中，在个人中心当中再一次的获取这个缓存，判断是否有值，最后输出到界面上。

代码分别如下：
wxml

<!--上方登录界面-->
<view class="user_info_wrap">
    <view wx:if="{{userinfo.userInfo.avatarUrl}}" class="user_img_wrap">
        <image  class="user_bg" src="{{userinfo.userInfo.avatarUrl}}" />
        <view class="user_info">
            <image class="user_icon" src="{{userinfo.userInfo.avatarUrl}}" mode="widthFix" />
            <view class="user_name">{{userinfo.userInfo.nickName}}</view>
        </view>
    </view>
    <view wx:else class="user_btn">
        <navigator  url="../../pages/login/index">
            登录
        </navigator>
    </view>
</view>
<view class="user_content">
<view class="user_nain">
    <!--历史足迹-->
    <view class="history_wrap">
        <navigator>
            <view class="his_num">0</view>
            <view class="his_name">收藏的店铺</view>
        </navigator> 
        <navigator url="/pages/collect/index">
            <view class="his_num">{{collectNum}}</view>
            <view class="his_name">收藏的商品</view>
        </navigator> 
        <navigator>
            <view class="his_num">0</view>
            <view class="his_name">关注的商品</view>
        </navigator> 
        <navigator>
            <view class="his_num">0</view>
            <view class="his_name">我的足迹</view>
        </navigator> 
    </view>
    <!--订单-->
    <view class="order_wrap">
        <view class="order_title">我的订单</view>
        <view class="order_content">
            <navigator url="/pages/order/index?type=1">
                <view class="iconfont icon-quanbudingdan"></view>
                <view class="order_name">全部订单</view>
            </navigator>
            <navigator url="/pages/order/index?type=2">
                <view class="iconfont icon-daifukuan"></view>
                <view class="order_name">待付款</view>
            </navigator>
            <navigator url="/pages/order/index?type=3">
                <view class="iconfont icon-daishouhuo"></view>
                <view class="order_name">待收货</view>
            </navigator>
            <navigator >
                <view class="iconfont icon-tuikuan"></view>
                <view class="order_name">退款/售后</view>
            </navigator>
        </view>
    </view>
    <!--收货地址管理-->
    <view class="address_wrap">
        收货地址管理
    </view>
    <!--剩下的一堆管理-->
    <view class="app_info_wrap">
        <view class="app_info_item app_info_contact">
            <text>联系客服</text><text>400-8820-400</text>  
        </view>
        <navigator  class="app_info_item" url="/pages/feedback/index">意见反馈
        </navigator>
        <view class="app_info_item">关于我们</view>
    </view>
    <!--推荐app-->
    <view class="recomend_wrap">
        把应用推荐给朋友
    </view>
</view>
</view>

less

/* pages/user/index.wxss */
page{
  color: #edece8;
}
.user_info_wrap {
  height: 45vh;
  background-color: var(--themeColor);
  overflow: hidden;
  position: relative;
  .user_img_wrap {
    position: relative;
    .user_bg {
      height: 50vh;
      filter: blur(10rpx);
    }
    .user_info {
      position: absolute;
      transform: translateX(-50%);
      top: 20%;
      left: 50%;
      text-align: center;
      .user_icon {
        width: 150rpx;
        height: 150px;
        border-radius: 50%;
      }
      .user_name {
        color: #000;
        margin-top: 40rpx;
        font-size: 40rpx;
      }
    }
  }
  .user_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40%;
    border: 1rpx solid green;
    color: green;
    font-size: 38rpx;
    padding: 30rpx;
    border-radius: 10%;
  }
}
.user_content {
  position: relative;
  .user_nain {
    color: #666;
    padding-bottom: 100rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    top: -40rpx;
    .history_wrap{
        background-color: #fff;
        display: flex;
        navigator{
            flex: 1;
            text-align: center;
            padding: 10rpx 0;
            .his_num{
                color: var(--themeColor);
            }
        }
    }
    .order_wrap{
        background-color: #fff;
        margin-top: 30rpx;
        .order_title{
            padding: 20rpx;
            border-bottom: 1px solid #ccc;
        }
        .order_content{
            display: flex;
            navigator{
                padding: 15rpx 0;
                flex: 1;
                text-align: center;
                .iconfont{
                    color: var(--themeColor);
                    font-size: 40rpx;
                }
            }
        }
    }
    .address_wrap{
      margin-top: 30rpx;
      background-color: #fff;
      padding: 20rpx 0;
    }
    .app_info_wrap{
      background-color: #fff;
      margin-top: 30rpx;
      .app_info_item{
        padding: 20rpx 0;
        border-bottom: 1px solid #ccc;
      }
      .app_info_contact{
        display: flex;
        justify-content: space-between;
      }
    }
    .recomend_wrap{
      margin-top: 30rpx;
      background-color: #fff;
      padding: 20rpx 0;
    }
  }
}

js

// pages/user/index.js
Page({
  data: {
    userinfo:{},
    collectNum:0
  },
  onLoad: function (options) {
  },
  onShow: function () {
    const userinfo=wx.getStorageSync("userinfo");
    //获取缓存中的数组
    const collect=wx.getStorageSync('collect')||[]
    this.setData({userinfo ,collectNum:collect.length})
  },
})

感谢你的预览，文章持续更新中…
下一篇：微信小程序开发一个小型商城（九、意见反馈页面）