微信小程序商城15天从零实战视频课程-订单列表

js代码

//获取应用实例  
var app = getApp()
 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /**  * 页面配置  */
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,
  },

  /*** 生命周期函数--监听页面加载*/
  onLoad: function (options) {
    var that = this;
    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },


  /**  * 滑动切换tab   */
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /**  * 点击tab切换  */
  swichNav: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

wxml代码

<!--index.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">全部订单</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">待支付</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">待收货</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

  <!-- 全部订单 -->
  <swiper-item>
    
    <scroll-view class="chanpins" scroll-y="true">

        <view class="danhao">
           单号：201808081102 | 时间：2018/9/10 11:44:19
        </view>   
        <view class="chanpin">
          <image class="chanpin-img" src="/img/cp01.jpg"></image>
          <view class="chanpin-info">
            <view class="name">珀莱雅水动力护肤品套装</view>
            <view class="sales">月售：11 件 / 库存：121件
            </view>
            <view class="price">￥：129.00</view>
          </view>
          <view class="chanpin-num">
            <text class="mytext" hidden=""> 2 件 </text>
          </view>
        </view>
        <view class="chanpin">
          <image class="chanpin-img" src="/img/cp02.jpg"></image>
          <view class="chanpin-info">
            <view class="name">HFP秋冬季补水保湿亮肤套装</view>
            <view class="sales">月售：231 件 / 库存：11件
            </view>
            <view class="price">￥：329.00</view>
          </view>
          <view class="chanpin-num">
            <text class="mytext" hidden=""> 1 件 </text>
          </view>
        </view>
   
        <view class="jiesuan" >
           <text>【待付款】共1件商品， 产品金额：¥150 (运费￥6) </text>
        </view>   
        <view class="caozuo">
             <button  size='mini'>取消订单</button>
            <button  size='mini' >去付款</button>
        </view>   

    </scroll-view>
 
  </swiper-item>

  <!-- 待支付 -->
  <swiper-item>
    <view>待支付</view>
  </swiper-item>

  <!-- 待收货 -->
  <swiper-item>
    <view>待收货</view>
  </swiper-item>


</swiper>

wxss代码

.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #da7c0c;
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-list{  font-size: 30rpx;  
    display: inline-block;  
    width:33%;  
    color: #777777;  
}  
.on{ color: #da7c0c;  
    border-bottom: 5rpx solid #da7c0c;}  
  
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper-box view{  
    text-align: center;  
}
/*全部订单*/
.chanpins{
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background:  white;
}
.danhao{ 
  font-size: 12px; color: gray;
  height: 100rpx; margin-left: 20rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
  display: flex;
  align-items: center;   
}
.chanpin{
  display: flex;
  padding: 15rpx;
  height: 130rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white; 
}
.chanpin-img{
  width: 120rpx;
  height: 120rpx;
}
.chanpin-info{
  display: flex;
  flex-direction:  column;
  align-items:  flex-start;
  flex: 1;
  margin-left: 20rpx;
}
.name{
  font-size: 30rpx; 
}
.sales{
  font-size: 25rpx;
  color: #ACACAC;text-align: left;
}
.price{
  font-size: 30rpx;
  color: red;text-align: left;
}
.chanpin-num{
  height: 50rpx;
  display: flex;
  margin-top: 30rpx;
  margin-right: 30rpx;
  line-height: 50rpx;
  font-size: 40rpx; 
}
.jiesuan{
  font-size: 13px; color: gray;
  height: 100rpx; margin-left: 20rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
  display: flex;
  align-items: center;   
}
.caozuo{
  height: 100rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
  display: flex;
  align-items: center;   
}

/*灰色的空白横线*/
.graySpace{ 
  padding-left: 40rpx;
  background: #eee;
  font-size: 12px;
  min-height: 30rpx;
}
.bt01{right:1px; }

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