微信小程序商城项目实战(第八篇:我的界面)

分析

• 顶部改为"我的"
• 上方为头像+微信昵称
• 中部为收藏的店铺、商品、关注的商品、我的足迹、我的订单
• 下方为收货地址管理、联系客服、意见反馈、关于我们、分享应用

代码实现

改变顶部导航内容"navigationBarTitleText": "我的"
界面:

下方 意见反馈，分享应用都是通过透明按钮隐藏在它们上方从而实现微信自带的按钮分享功能~ 这是一个值得借鉴的思路

<view class="view_contain" wx:if="{{userInfo.length!=0}}">
  
  <view class="view_1" >
    <view class="view_image_text">
      <image class="image_radius" src="{{userInfo.avatarUrl}}" />
      <text>{{userInfo.nickName}}text>
    view>
  view>
  
  <view class="view_2">
    <view class="view_tupianwenzi">
      <text style="font-size: 45rpx; color: red; text-align: center;">暂无text>
      <text class="text_saoyisao">收藏的店铺text>
    view>
    <navigator url="/pages/collect/collect?curr=0" class="view_tupianwenzi">
        <text style="font-size: 45rpx; color: red; text-align: center;">{{shoucangList.length}}text>
      <text class="text_saoyisao">收藏的商品text>
    navigator>
    <view class="view_tupianwenzi">
        <text style="font-size: 45rpx; color: red; text-align: center;">{{shoucangList.length}}text>
      <text class="text_saoyisao">关注的商品text>
    view>
    <navigator url="/pages/collect/collect?curr=3" class="view_tupianwenzi">
        <text style="font-size: 45rpx; color: red; text-align: center;">{{hostryList.length}}text>
      <text class="text_saoyisao">我的足迹text>
    navigator>

  view>
  <view class="view_2 wo">
  <view class="myorder">我的订单view>
  view>
  <view class="line">view>
  <view class="view_2 myorders">
    <navigator url="/pages/order/order?curr=0" class="view_tupianwenzi">
      <view class="iconfont icon-ding_dan" style="color: red; font-size: 50rpx;">view>
      <text class="text_saoyisao">全部订单text>
    navigator>
    <navigator url="/pages/order/order?curr=1" class="view_tupianwenzi">
        <view class="iconfont icon-fukuantongzhi" style="color: red; font-size: 50rpx;">view>
      <text class="text_saoyisao">待付款text>
    navigator>
    <navigator url="/pages/order/order?curr=2" class="view_tupianwenzi">
        <view class="iconfont icon-gouwuche" style="color: red; font-size: 50rpx;">view>
      <text class="text_saoyisao">待收货text>
    navigator>
    <navigator url="/pages/order/order?curr=3" class="view_tupianwenzi">
        <view class="iconfont icon-tuihuotuikuan_dianpu" style="color: red; font-size: 50rpx;">view>
      <text class="text_saoyisao">退款/退货text>
    navigator>

  view>
  
  <view class="view_3">
    <navigator url="/pages/addressList/addressList" class="list-item">
      <image class="item-image" src="../images/test5.png">image>
      <text class="item-text">收获地址管理<text style="position: relative; left: 450rpx; bottom: 5rpx;">>text>text>
    navigator>
    <view class="line">view>
    <view class="list-item list-item2">
      <image class="item-image" src="">image>
      <text class="item-text">联系客服<text style="position: relative; left: 320rpx; bottom: 5rpx;">400-618-4000text>text>
      <view class="line">view>
      <image class="item-image" src="">image>
      <navigator url="/pages/feedback/feedback"> <text class="item-text">意见反馈<text style="position: relative; left: 520rpx; bottom: 5rpx;">>text>text>navigator>
      <view class="line">view>
      <image class="item-image" src="">image>
      <text class="item-text">关于我们<text style="position: relative; left: 520rpx; bottom: 5rpx;">>text>text>
    view>
    <view class="line">view>
    <view class="list-item">
      <image class="item-image" src="">image>
      <text class="item-text">把应用推荐给其他人<text style="position: relative; left: 350rpx; bottom: 5rpx;">>text>text>
      <button open-type="share" style="position: absolute;bottom: 0; width: 100%;background-color: transparent;border:none">button>
      <image class="image-jiantou" src="../images/jiantou.png">image>
    view>
    <view class="line">view>
  view>
  view>
  <view  wx:else>
  <button type="primary" bindtap="getUserProfile">登陆button>
  view>
  

js

• userInfo：用户信息,判断是否登录
• shoucangList:收藏的商品信息,用于显示收藏数量
• hostryList:历史浏览信息

---

函数:

• onLoad(options)页面加载执行,主要是提供用户信息判断是否登录
• onshow()页面显示时执行,主要是进行获取订单以及历史浏览进行赋值
• getUserProfile():微信自带的用户授权获取信息

// pages/user/user.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      userInfo:null,
      shoucangList:[],
      hostryList:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      console.log(this.data.userInfo);
      //从缓存中获取用户信息
      var userInfo = wx.getStorageSync('userinfo');
      this.setData({
        userInfo:userInfo
      })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },
//用户授权后获取用户信息
getUserProfile: function (e) {
  console.log(e);
  wx.getUserProfile({
    desc:'用于登陆',
    success: (res) => {
      console.log(res);
      const { userInfo } = res;
      wx.setStorageSync("userinfo", userInfo)
      wx.showToast({
        title: '登陆成功...',
        icon: 'success',
        duration: 1000//持续的时间
      })
      this.onLoad();//刷新
    },
    fail:(res)=>{
      //用户按了拒绝按钮
      wx.showToast({
        title: '登陆失败...',
        icon: 'error',
        duration: 1000//持续的时间
      })
    }
  })
  },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
      let shoucang=wx.getStorageSync('shoucang') || [];
      let hostry=wx.getStorageSync('hostry') || [];
      this.setData({
        shoucangList:shoucang,
        hostryList:hostry
      })
    }
})

css样式

.view_contain {
    width: 100%;
    height: 100%;
    background: #f0eeed
  }
  
  /* 第一部分 */
  
  .view_1 {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 400rpx;
    background: #a0deee;
  }
  
  .view_image_text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .view_image_text text{
      margin-top: 30rpx;
  }
  
  .image_radius {
    height: 100px;
    width: 100px;
    border-radius: 50px;
  }
  /* 第二部分 */

.view_2 {
    width: 100%;
    height: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: white;
  }
  .wo{
    margin-top: 20rpx;
  }
  .view_2 .myorder{
    font-size: 35rpx;
    height: 80rpx;
    position: relative;
    left: -300rpx;
  }
  .myorders{
      margin-top: 1rpx;
  }
  .view_tupianwenzi {
    display: flex;
    flex-direction: column;
    width: 150rpx;
    align-items: center;
    margin-left: 25rpx;
    margin-right: 25rpx;
  }
  
  .image_tupian {
    display: flex;
    width: 100rpx;
    height: 100rpx;
  }
  
  /* 第三部分 */
  
  .view_3 {
    width: 100%;
    height: 50%;
    /* background: #f0eeed; */
  }
  
  .list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70rpx;
    margin-top: 20rpx;
    position: relative; /*父元素位置要设置为相对*/
    background: white;
  }
  .list-item2{
    height: 340rpx;
  }
  
  .item-image {
    width: 50rpx;
    height: 50rpx;
    margin: 20rpx;
  }
  
  .item-text {
    color: gray;
    font-size: 35rpx;
    margin-left: 20rpx;
    position: relative;

    bottom: 22rpx;
  }
  
  .image-jiantou {
    width: 20rpx;
    height: 35rpx;
    position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
    right: 0; /* 靠右调节 */
    margin-right: 35rpx;
  }
  
  /* 黑线 使得产生阴影效果 */
  
  .line {
    width: 100%;
    height: 3rpx;
    background: lightgray;
    margin-left: 90rpx;
  }
  

效果图展示

未登录时：

点击登录时:

选择允许成功登录后:

在我的界面中还有诸多功能,后续继续完成~