微信小程序项目_秋泊优选54

50、个人中心_背景展示

pages\user\index.json

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

pages\user\index.wxml

<view class="user_info_wrap">
    <view 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"></view>
       </view>
    </view>
</view>

pages\user\index.js

// pages/user/index.js
Page({
    
    
  data: {
    
    
    userinfo:{
    
    }
  },
  onShow(){
    
    
    const userinfo=wx.getStorageSync( "userinfo");
    this.setData({
    
    userinfo})
  }
})

pages\user\index.wxml

<view class="user_info_wrap">
    <view 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"></view>
       </view> -->
    </view>
</view>

pages\user\index.less

.user_info_wrap{
    
    
    height: 45vh;
    overflow: hidden;
    background-color: var(--themeColor);
    .user_img_wrap{
    
    
        .user_bg{
    
    
            height: 50vh;
            //css3的filter: blur高斯模糊
            filter: blur(10rpx);
        }
    }
}

pages\user\index.wxml

<view class="user_info_wrap">
    <view 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>

pages\user\index.less

.user_info_wrap{
    
    
    height: 45vh;
    overflow: hidden;
    background-color: var(--themeColor);
    .user_img_wrap{
    
    
        //位置：相对
        position: relative;
        .user_bg{
    
    
            height: 50vh;
            //css3的filter: blur高斯模糊
            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: 30rpx;
            }
        }
    }
}

个人中心 当缓存存在用户信息就显示图片和名字 否则 显示登录按钮
pages\user\index.wxml

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

按钮样式
pages\user\index.less

.user_info_wrap{
    
    
    height: 45vh;
    overflow: hidden;
    background-color: var(--themeColor);
    position: relative;
    .user_img_wrap{
    
    ...}
    .user_btn{
    
    
        position:absolute;
        left:50%;
        transform: translatex(-50%);
        top:40%;
        border: 1rpx solid greenyellow;
        color:#ffffff;
        font-size: 38rpx;
        padding: 30rpx;
        border-radius: 10rpx;
    }
}

清全部缓存——>点登录——>跳转登录页面_登录——>微信授权允许