微信小程序--个人中心：tab切换-高级版

微信小程序–个人中心

包含功能点：

• tab切换-高级版
• 全部订单-待付款-待收货-退款退货

结构：user.wxml

<view class="user_info_wrap">
  <view class="user_img_wrap" wx:if="{{userinfo.avatarUrl}}">
    <image class="user_bg" src="{{userinfo.avatarUrl}}"></image>
    <view class="user_info">
      <image class="user_icon" src="{{userinfo.avatarUrl}}"></image>
      <view class="user_name">{{userinfo.nickName}}</view>
    </view>
  </view>
  <view class="user_btn" wx:else>
    <navigator url="/pages/login/login" open-type="navigate">登录</navigator>
  </view>
</view>
<view class="user_content">
  <view class="user_main">
    <!-- 历史足迹 -->
    <view class="history_wrap">
      <navigator class="navigator">
        <view class="his_num">0</view>
        <view class="his_name">收藏的店铺</view>
      </navigator>
      <navigator class="navigator" url="/pages/collect/collect">
        <view class="his_num">{{collectNums}}</view>
        <view class="his_name">收藏的商品</view>
      </navigator>
      <navigator class="navigator">
        <view class="his_num">0</view>
        <view class="his_name">关注的商品</view>
      </navigator>
      <navigator class="navigator">
        <view class="his_num">0</view>
        <view class="his_name">我的足迹</view>
      </navigator>
    </view>
    <!-- 我的订单 -->
    <view class="orders_wrap">
      <view class="orders_title">我的订单</view>
      <view class="order_content">
        <navigator url="/pages/order/order?type=1">
          <view class="iconfont  icon-quanbudingdan"></view>
          <view class="order_name">全部订单</view>
        </navigator>
        <navigator url="/pages/order/order?type=2">
          <view class="iconfont icon-daifukuan"></view>
          <view class="order_name">待付款</view>
        </navigator>
        <navigator url="/pages/order/order?type=3">
          <view class="iconfont icon-daishouhuo"></view>
          <view class="order_name">待收货</view>
        </navigator>
        <navigator>
          <view class="iconfont  icon-tuihuotuikuan"></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_content">
        <text>联系客服</text>
        <text>400-628-4000</text>
      </view>
      <navigator url="/pages/feedback/feedback" class="app_info_item">意见反馈</navigator>
      <view class="app_info_item">关于我们</view>
    </view>
    <!-- 推荐 -->
    <view class="recommend_wrap">把应用推荐给其他人</view>
  </view>
</view>

样式：user.less

page {
  background-color: #edece8;
}

.user_info_wrap {
  position: relative;
  height: 45vh;
  // background-color: var(--themeColor);

  .user_img_wrap {
    position: relative;

    .user_bg {
      height: 45vh;
      // 高斯模糊
      filter: blur(10rpx);
    }

    .user_info {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20%;
      text-align: center;

      .user_icon {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }

      .user_name {
        margin-top: 40rpx;
        color: #fff;
        font-size: 40rpx;
      }
    }
  }

  .user_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40%;
    border: 1px solid greenyellow;
    color: greenyellow;
    font-size: 38rpx;
    padding: 30rpx;
    border-radius: 10rpx;
  }
}

.user_content {
  position: relative;

  .user_main {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    top: -40rpx;
    padding-bottom: 100rpx;
    color: #666;

    .history_wrap {
      display: flex;
      background-color: #fff;
      padding: 10rpx 5rpx;

      .navigator {
        flex: 1;
        text-align: center;
        padding: 10rpx 0;

        .his_num {
          color: var(--themeColor);
        }

        .his_name {}
      }
    }

    .orders_wrap {
      background-color: #fff;
      margin-top: 30rpx;

      .orders_title {
        padding: 20rpx;
        border-bottom: 1px solid #ccc;
      }

      .order_content {
        display: flex;

        navigator {
          padding: 20rpx 0;
          flex: 1;
          text-align: center;

          .iconfont {
            color: var(--themeColor);
            font-size: 40rpx;
          }

          .order_name {
            color: #666;
          }
        }
      }
    }

    .address_wrap {
      margin-top: 30rpx;
      background-color: #fff;
      padding: 20rpx;
    }

    .app_info_wrap {
      margin-top: 30rpx;
      background-color: #fff;

      .app_info_item {
        padding: 20rpx;
        border-bottom: 1px solid #ccc;
      }

      .app_info_content {
        display: flex;
        justify-content: space-between;
      }
    }

    .recommend_wrap {
      margin-top: 30rpx;
      background-color: #fff;
      padding: 20rpx;
    }
  }
}

逻辑：user.js文件

// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userinfo: {},
    // 被收藏的商品的数量
    collectNums: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
    const userinfo = wx.getStorageSync("userInfo");

    const collect = wx.getStorageSync("collect") || [];

    this.setData({
      userinfo,
      collectNums: collect.length
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

页面配置文件：user.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "个人中心"
}