微信小程序--个人主页的制作_amdroid个人主页小程序

个人中心页面-user

- 页面效果

1. 效果图：

2.页面wxml的布局逻辑

（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

3.页面wxss的设置

（1）代码：

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

* 业务逻辑

1. 获取登录信息

（1）Userinfo：获取用户信息
（2）avatarUrl：用户头像
（3）nickName：用户昵称
（4）zh_CN：简体中文
（5）注意：这里是获取两次用户头像，因为背景也用的到头像

<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>
1
2
3
4
5
6
7
8

（6）样式的设置：

.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  background-color: var(--themeColor);
  position: relative;
  .user_img_wrap {
    position: relative;
    .user_bg {
      height: 50vh;
      // 高斯模糊
      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{
        color: #fff;
        margin-top: 40rpx;
        // font-size: 40rpx;
      }
    }
  }
  .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;
  }
}
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

2. 加载收藏信息

（1）收藏的商品数量

      <navigator url="/pages/collect/index">
        <view class="his_num">{{collectNums}}</view>
        <view class="his_name">收藏的商品</view>
      </navigator>
1
2
3
4

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

3. 查询订单状态

+ 关键技术

1.css属性filter的使⽤

意思也就是：高斯模糊

2.获取用户的信息

3.对页面整体布局的掌握