微信小程序-订单页面

说明：头部有一个三种预约状态的切换

wxml页面：

<!-- 切换栏 -->
<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
  <!-- 完成 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view  class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" ">
        <view class="orderListTitle">
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">预定时间: {{item.time}}</view>
            <text class="productPrice">当前状态：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合计：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 待付款 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" ">
        <view class="orderListTitle">
           <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">预定时间: {{item.time}}</view>
            <text class="productPrice">当前状态：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
             <text>合计：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 取消 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" ">
        <view class="orderListTitle">
         <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">预定时间: {{item.time}}</view>
            <text class="productPrice">当前状态：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
             <text>合计：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>

</swiper>

wxss样式：

/*切换栏*/
.swiper-tab {
  height: 40px;
  line-height: 40px;
  background: #3B3B3B;
  color:#fff ;
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom:1px solid black;
}

.swiper-tab-list {
  margin: 0 30px;
  padding: 0 4px;
  font-size: 15px;
}

.on {
  border-bottom:2px solid #fff;
  color: #f5f5f5;
}

.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #BEBEBE	;
  margin-top:5px;
}

.navTopList .order-info {
  text-align: center;
}

.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}

.navTopList .order-info text {
  font-size: 34rpx;
}

.navTopList .order-info text.active {
  color: #ff6662;
}

.navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
  flex: 1;
}


/*订单列表*/
.orderDetails {
  background: #fff;
  border-bottom: 20rpx solid #f5f5f5;
}

.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #BEBEBE;
}

.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left:10px;
}

.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}

.orderListDetails {
  display: flex;
  height: 200rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.orderListDetails .productImg {
  flex: 1;
  height:180rpx;
  width:120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}

.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size:15px;

}

.orderListDetails .productInfo .productTitle {
  font-size:15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom:10px;
}

.productCount {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.productCount>view {
  float: right;
  margin-right: 30rpx;
}

js：主要是在data中给切换栏配置参数，和默认显示第几个栏；

// pages/order/order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currtab: 0,
    swipertab: [{ name: '已完成', index: 0 }, { name: '待付款', index: 1 }, { name: '已取消', index: 2 }],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

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

  getDeviceInfo: function () {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          deviceW: res.windowWidth,
          deviceH: res.windowHeight
        })
      }
    })
  },

  /**
  * @Explain：选项卡点击切换
  */
  tabSwitch: function (e) {
    var that = this
    if (this.data.currtab === e.target.dataset.current) {
      return false
    } else {
      that.setData({
        currtab: e.target.dataset.current
      })
    }
  },

  tabChange: function (e) {
    this.setData({ currtab: e.detail.current })
    this.orderShow()
  },

  orderShow: function () {
    let that = this
    switch (this.data.currtab) {
      case 0:
        that.alreadyShow()
        break
      case 1:
        that.waitPayShow()
        break
      case 2:
        that.lostShow()
        break
    }
  },
  alreadyShow: function(){
    this.setData({
      alreadyOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已结束", url: "../../images/bad0.png", money: "132" }, { name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未开始", url: "../../images/bad3.jpg", money: "205" }]
    })
  },

  waitPayShow:function(){
    this.setData({
      waitPayOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未开始", url: "../../images/bad1.jpg", money: "186" }],
    })
  },

  lostShow: function () {
    this.setData({
      lostOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未开始", url: "../../images/bad1.jpg", money: "122" }],
    })
  },

  
})