微信小程序-订单页面

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

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>