我的

<view class="userinfo">
    <view wx:if="{{userInfo.nickName}}" class="user_info">
        <image src="{{userInfo.avatarUrl}}"></image>
        <view>{{userInfo.nickName}}</view>
    </view>
    <navigator wx:else url="/pages/login/login">登录</navigator>
</view>
<view class="hist">
    <view class="hist_item">
        <view class="num">0</view>
        <view class="desc">收藏的店铺</view>
    </view>
    <view class="hist_item">
        <view class="num">2</view>
        <view class="desc">收藏的商品</view>
    </view>
    <view class="hist_item">
        <view class="num">0</view>
        <view class="desc">关注的商品</view>
    </view>
    <view class="hist_item">
        <view class="num">0</view>
        <view class="desc">我的足迹</view>
    </view>
</view>
<view class="myorder">
    <view class="title">我的订单</view>
    <view class="order_menu">
        <view class="order_item">
            <text class="iconfont icon-dingdan"></text>
            <view>全部订单</view>
        </view>
        <view class="order_item">
            <text class="iconfont icon-daifukuan"></text>
            <view>待付款</view>
        </view>
        <view class="order_item">
            <text class="iconfont icon-daifukuan01"></text>
            <view>待收款</view>
        </view>
        <view class="order_item">
            <text class="iconfont icon-tuikuantuihuo"></text>
            <view>退款/退货</view>
        </view>
    </view>
</view>
<view class="address">
    <view>收货地址管理</view>
    <text class="iconfont icon-arrow-right"></text>
</view>
<view class="address addr1" >
    <view>联系客服</view>
    <view>400-618-4000</view>
</view>
<view class="address addr1">
    <view>意见反馈</view>
</view>
<view class="address addr1">
    <view>关于我们</view>
</view>
<view class="address">
    <view>把应用推荐给其他人</view>
</view>

// pages/user/user.js
Page({
  data: {
      userInfo:{}
  },

  onLoad(options) {

  },
  onShow(){
      let userInfo = wx.getStorageSync( 'userInfo')
      this.setData({
          userInfo
      })
  }
      


})

page{
  background-color: rgb(236,232,232);
}
.userinfo{
  height: 40vh;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.userinfo navigator{
  width: 160rpx;
  height:90rpx;
  color:gold;
  border: 2rpx solid gold;
  text-align: center;
  line-height: 90rpx;
  border-radius: 10rpx;
}
.user_info image{
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
}
.user_info view{
  text-align: center;
  color:gold;
}
.hist{
  margin-top: -60rpx;
  background-color: #fff;
  height: 110rpx;
  display: flex;
  width: 92%;
  transform: translateX(4%);
}
.hist_item{
  flex: 1;
}
.num{
  color: red;
  text-align: center;
}
.desc{
  text-align: center;
  font-size: 30rpx;
}
.myorder{
  background-color: #fff;
  
  width: 92%;
  transform: translateX(4%);
  margin-top: 20rpx;
}
.title{
  padding-left: 20rpx;
  border-bottom: 2rpx solid rgb(236, 232, 232);
  height: 70rpx;
  line-height: 70rox;
  font-size: 30rpx;
}
.order_menu{
  display: flex;
}
.order_item{
  height: 100rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.order_item text{
  color: red;
  font-size: larger;
}
.order_item view{
  font-size: 30rpx;
}
.address{
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  width: 92%;
  transform: translateX(4%);
  background-color: #fff;
  margin-top: 20rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
}
.addr1{
  margin-bottom: -18rpx;
}