【愚公系列】2022年11月 微信小程序-优购电商项目-个人中心页面

---

前言

个人中心的信息复杂度与产品本身有关。体系越庞大的产品，对应个人中心页面需要承载的内容越多，结构势必复杂。

一般平台型电商的个人中心页面必须涵盖：用户基础信息、全局性操作（设置）、关键数据记录、购买激励（会员、红包）、核心业务（订单信息）、工具集合（工具箱）等。

一、个人中心页面

1. 业务逻辑

1. 获取登录信息
2. 加载收藏信息
3. 查询订单状态

2.涉及的接口数据

1. 获取登录信息
2. 加载收藏信息
3. 查询订单状态

3. 关键技术

1. css属性filter的使⽤

二、个人中心页面代码

1.页面代码

<view class="user_info_wrap">
  <view wx:if="{{userinfo.avatarUrl}}" class="user_img_wrap">
    <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 wx:else class="user_btn">
    <navigator url="/pages/login/index" >登录</navigator>
  </view>
</view>
<view class="user_content">
  
  <view class="user_main">
    <!-- 历史足迹 -->
    <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">{{collectNums}}</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="orders_wrap">
      <view class="orders_title">我的订单</view>
      <view class="order_content">
        <navigator url="/pages/order/index?type=1">
          <view class="iconfont icon-ding_dan"></view>
          <view class="order_name">全部订单</view>
        </navigator>
        <navigator url="/pages/order/index?type=2">
          <view class="iconfont icon-fukuantongzhi"></view>
          <view class="order_name">待付款</view>
        </navigator>
        <navigator url="/pages/order/index?type=3">
          <view class="iconfont icon-receipt-address"></view>
          <view class="order_name">待收货</view>
        </navigator>
        <navigator>
          <view class="iconfont icon-tuihuotuikuan_dianpu"></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-618-4000</text>
      </view>
      <navigator url="/pages/feedback/index" class="app_info_item">意见反馈</navigator>
      <view class="app_info_item">关于我们</view>
    </view>
    <!-- 推荐 -->
    <view class="recommend_wrap">
      把应用推荐给其他人
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

// pages/user/index.js
Page({
  data: {
    userinfo:{},
    // 被收藏的商品的数量
    collectNums:0
  },
  onShow(){
    const userinfo=wx.getStorageSync("userinfo");
    const collect=wx.getStorageSync("collect")||[];
      
    this.setData({userinfo,collectNums:collect.length});
      
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

2.效果