個人中心頁面-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">關(guān)注的商品</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>
    <!-- 應(yīng)用信息相關(guān) -->
    <view class="app_info_wrap">
      <view class="app_info_item app_info_contact">
        <text>聯(lián)系客服</text>
        <text>400-618-4000</text>
      </view>
      <navigator url="/pages/feedback/index" class="app_info_item">意見反饋</navigator>
      <view class="app_info_item">關(guān)于我們</view>
    </view>
    <!-- 推薦 -->
    <view class="recommend_wrap">
      把應(yīng)用推薦給其他人
    </view>
  </view>
</view>

3.頁面wxss的設(shè)置

（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 ;
}

* 業(yè)務(wù)邏輯

1. 獲取登錄信息

（1）Userinfo：獲取用戶信息
（2）avatarUrl：用戶頭像
（3）nickName：用戶昵稱
（4）zh_CN：簡體中文
（5）注意：這里是獲取兩次用戶頭像，因?yàn)楸尘耙灿玫牡筋^像

<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>

（6）樣式的設(shè)置：

.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;
  }
}

2. 加載收藏信息

（1）收藏的商品數(shù)量

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

js

Page({
data: {
userinfo:{},
// 被收藏的商品的數(shù)量
collectNums:0},
onShow(){
    const userinfo=wx.getStorageSync("userinfo");
    const collect=wx.getStorageSync("collect")||[];
    this.setData({userinfo,collectNums:collect.length});
}
})

3. 查詢訂單狀態(tài)

+ 關(guān)鍵技術(shù)

1.css屬性filter的使?

意思也就是：高斯模糊文章來源地址http://www.zghlxwxcb.cn/news/detail-494140.html

2.獲取用戶的信息

3.對頁面整體布局的掌握

到了這里，關(guān)于微信小程序--個人主頁的制作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！