微信小程序商城15天从零实战视频课程-会员首页

js代码

// pages/huiyuan/index2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  tuichu:function(){
    wx.clearStorage()
    //wx.switchTab({
    //  url: '/pages/huiyuan/index',
    //})
    wx.reLaunch({
      url: '/pages/huiyuan/index',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml代码

<!--头部信息--> 
<view class='toubu'>
  <view class='toubu-zuo'>
    <open-data type="userAvatarUrl" class="toubu-zuo-touxiang"></open-data>
  </view>
  <view class='toubu-you'>
    <view class='toubu-you-txt1'>
      <open-data type="userNickName"></open-data>
    </view>
    <view class='toubu-you-txt2'>等级：普通会员</view>
    <view class='toubu-you-txt3'>手机：【绑定手机号码】</view>
  </view>
</view>

<navigator url='/pages/huiyuan/dingdan/dingdan_list' class='caidan'>
  <image class='caidan-icon' src='/img/sys01.png'></image>
  <text class='caidan-text'>我的订单</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/dizhi/dizhi_list' class='caidan'>
  <image class='caidan-icon' src='/img/sys02.png'></image>
  <text class='caidan-text'>收货地址管理</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/shoucang/sc_list' class='caidan'>
  <image class='caidan-icon' src='/img/sys03.png'></image>
  <text class='caidan-text'>我的收藏</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/index/index' open-type='switchTab' class='caidan'>
  <image class='caidan-icon' src='/img/sys04.png'></image>
  <text class='caidan-text'>回到首页</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<view class='caidan'  bindtap='tuichu'>
  <image class='caidan-icon' src='/img/sys04.png'></image>
  <text class='caidan-text'>退出登录</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</view>

wxss代码

/*头部信息*/
.toubu {
  display: flex;
  margin: 1px;
  padding: 10px;
  background-color: crimson;
}
.toubu-zuo {}
.toubu-zuo-touxiang {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 3px 3px 10px gainsboro;
  display: block;
  overflow: hidden;
}
.toubu-you {
  padding-left: 10px;
}
.toubu-you-txt1 {
  color: white;
}
.toubu-you-txt2 {
  background-color: darkorange;
  color: white;
  margin: 6px 0 10px 0px;
}
.toubu-you-txt3 {
  color: white;
}


.caidan{
  display: flex;
  padding: 10px; 
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  margin-top: 10px;
}
.caidan-icon{
  width: 20px; height: 20px;
}
.caidan-text{
  flex-grow: 1;
  margin-left: 10px;
}
.caidan-arrow{
  width: 16px; height: 16px;
}

欢迎大家收看我的****：微信小程序商城15天从零实战视频课程
https://edu.****.net/course/detail/19437