微信小程序开发一个小型商城（八、个人页面）

蔚落 2023-05-21 10:24 96阅读 0赞

[上一篇文章：微信小程序开发一个小型商城（七、支付页面）][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
在上方还是使用wx:if进行判断是否有登录的数据，有的话将数据当中的图片和名字渲染到页面当中，不存在的话使用一个登录按钮表示需要用户登录。往下分别是一些静态标签，使用view和加上一些样式即可实现。  
在判断是否登录过的时候，在未登录的时候单击登录按钮后会实现跳转到login登录界面，获取用户授权进行登录，给获取登录全希望的按钮加上一个点击事件handleGetUserInfo 表示单击授权，绥江将数据使用缓存写入到userinfo当中，在个人中心当中再一次的获取这个缓存，判断是否有值，最后输出到界面上。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]  
代码分别如下：  
wxml

<view class="user_info_wrap">
        <view wx:if="{ {userinfo.userInfo.avatarUrl}}" class="user_img_wrap">
            <image  class="user_bg" src="{ {userinfo.userInfo.avatarUrl}}" />
            <view class="user_info">
                <image class="user_icon" src="{ {userinfo.userInfo.avatarUrl}}" mode="widthFix" />
                <view class="user_name">{ { userinfo.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_nain">
        
        <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">{ { collectNum}}</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="order_wrap">
            <view class="order_title">我的订单</view>
            <view class="order_content">
                <navigator url="/pages/order/index?type=1">
                    <view class="iconfont icon-quanbudingdan"></view>
                    <view class="order_name">全部订单</view>
                </navigator>
                <navigator url="/pages/order/index?type=2">
                    <view class="iconfont icon-daifukuan"></view>
                    <view class="order_name">待付款</view>
                </navigator>
                <navigator url="/pages/order/index?type=3">
                    <view class="iconfont icon-daishouhuo"></view>
                    <view class="order_name">待收货</view>
                </navigator>
                <navigator >
                    <view class="iconfont icon-tuikuan"></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-8820-400</text>  
            </view>
            <navigator  class="app_info_item" url="/pages/feedback/index">意见反馈
            </navigator>
            <view class="app_info_item">关于我们</view>
        </view>
        
        <view class="recomend_wrap">
            把应用推荐给朋友
        </view>
    </view>
    </view>

less

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

// pages/user/index.js
    Page({ 
      data: { 
        userinfo:{ },
        collectNum:0
      },
      onLoad: function (options) { 
      },
      onShow: function () { 
        const userinfo=wx.getStorageSync("userinfo");
        //获取缓存中的数组
        const collect=wx.getStorageSync('collect')||[]
        this.setData({ userinfo ,collectNum:collect.length})
      },
    })

感谢你的预览，文章持续更新中…  
[下一篇：微信小程序开发一个小型商城（九、意见反馈页面）][Link 2]

[Link 1]: https://blog.csdn.net/qq_44973159/article/details/105644082
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20230521/c56110eba3ad4134987a4d0ef828b512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20230521/bee655585a724435afcde453351a3e74.png
[Link 2]: https://blog.csdn.net/qq_44973159/article/details/105656915