my_loan/htmldev/wxMini/pages/order/order.wxml

<!-- 顶部导航 -->
<view class="nav-wrap">
  <scroll-view
    class="nav"
    scroll-x>
    <view bindtap="changeTabs"
          class="nav-item"
          data-value="{{item.value}}"
          wx:for="{{tabs}}"
          wx:key="value">
      <text class="{{item.value === active ? 'active' : ''}}">{{item.name}}</text>
    </view>
  </scroll-view>
</view>

  <!-- 内容区 -->
<view class="main">
  <swiper style="height:100%"
          current="{{current}}"
          bindchange="handleSwiper">
    <swiper-item wx:for="{{originScrollViewData}}"
                 wx:key="index">
      <scroll-view scroll-y
                   style="height:100%;"
                   refresher-enabled="{{true}}"
                   refresher-threshold="{{refresherThreshold}}"
                   refresher-default-style="none"
                   refresher-background="#FFF"
                   refresher-triggered="{{item.isRefresh}}"
                   bindrefresherpulling="onRefresh"
                   bindscrolltolower="fetOrderList">
        <!-- 下拉刷新 -->
        <view slot="refresher" class="pulldown-wrapper">
          <van-loading
            wx:if="{{item.isRefresh}}"
            size="24px"
            type="spinner">加载中...
          </van-loading>
          <view wx:if="{{!item.isRefresh}}" class="van-loading">
            <text class="van-loading__text">下拉刷新</text>
          </view>
        </view>

        <view class="list"
              wx:for="{{item.list}}"
              wx:for-item="order"
              wx:key="id"
              data-order-id="{{order.id}}"
              bind:tap="jumpOrderDetail">
          <view class="top">
            <view class="add-time">{{order.created_at}}</view>
            <!-- 待支付、待接单、待安排车辆、待出发 -->
            <view
              class="status-text {{order.order_status === 1 || order.order_status === 3 || order.order_status === 4|| order.order_status === 5 ? 'active' : ''}}">
              {{['', '待支付', '已取消', '待接单', '待安排车辆', '待出发', '行驶中', '已完成'][order.order_status]}}
            </view>
          </view>
          <view class="middle">
            <view class="start">
              <text class="label">起</text>
              <text class="value">{{order.start_point.address_name}}{{order.start_point.name}}</text>
            </view>
            <view class="end">
              <text class="label">终</text>
              <text class="value">{{order.end_point.address_name}}{{order.end_point.name}}</text>
            </view>
          </view>
          <view
            class="bottom"
            wx:if="{{order.order_status === 2 || order.order_status === 7 || order.order_status === 3 || (order.order_status !== 2 && order.order_diff_price > 0 && order.order_diff_status === 0)}}">
            <button
              type="primary"
              hover-class="none"
              form-type="submit"
              data-item="{{order}}"
              catch:tap="showDeleteOrder"
              wx:if="{{order.order_status === 2 || order.order_status === 7}}">删除订单
            </button>
            <block>
              <button
                type="primary"
                hover-class="none"
                form-type="submit"
                data-item="{{order}}"
                catch:tap="showCancelOrder"
                wx:if="{{order.order_status === 3}}">取消订单
              </button>
              <button
                class="diff-price"
                type="primary"
                hover-class="none"
                form-type="submit"
                data-item="{{order}}"
                disabled="{{booLock}}"
                catch:tap="showPayment"
                wx:if="{{order.order_status !== 2 && order.order_diff_price > 0 && order.order_diff_status === 0}}">补价
              </button>
            </block>
          </view>
        </view>

        <view class="list-bitmap" wx:if="{{item.finished && item.list.length < 1}}">
          <image src="{{tools.imgFilter('/common/Order_page_default@2x.png')}}"></image>
          <text>暂无订单</text>
        </view>

        <!-- 上拉加载 -->
        <view class="pullup-wrapper" wx:if="{{!item.isRefresh}}">
          <van-loading
            wx:if="{{!item.finished}}"
            size="24px"
            type="spinner">加载中...
          </van-loading>
          <view wx:if="{{item.finished && item.list.length > 0}}" class="van-loading">
            <text class="van-loading__text">没有更多了</text>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

  <!-- 弹窗：删除订单二次确认 -->
<van-popup
  custom-class="customer-van-model"
  show="{{ booDeleteOrder }}"
  bind:close="hideDeleteOrder">
  <view class="customer-van-model_body">
    <view class="content">订单删除后将无法恢复，您也无法再对它进行投诉。</view>
  </view>
  <view class="customer-van-model_footer">
    <button class="customer-van-model_cancel"
            hover-class="none"
            type="default"
            bind:tap="hideDeleteOrder">取消
    </button>
    <button class="customer-van-model_confirm"
            hover-class="none"
            type="primary"
            disabled="{{booLock}}"
            bind:tap="confirmDeleteOrder">确定
    </button>
  </view>
</van-popup>

  <!-- 弹窗：取消订单二次确认 -->
<van-popup
  custom-class="customer-van-model"
  show="{{ booCancelOrder }}"
  bind:close="hideCancelOrder">
  <view class="customer-van-model_body">
    <view class="content cancel-order" wx:if="{{itemData.order_status === 5}}">
      <text wx:for="{{'司机车辆已安排，订单取消将'}}" wx:for-index="index" wx:key="index">{{item}}</text>
      <text wx:for="{{'扣除定金'}}" wx:for-index="idx" wx:key="idx" style="color:#FD6600;">{{item}}</text>
    </view>
    <view class="content" wx:else>确认取消订单吗？</view>
  </view>
  <view class="customer-van-model_footer">
    <button class="customer-van-model_cancel"
            hover-class="none"
            type="default"
            disabled="{{booLock}}"
            bind:tap="confirmCancelOrder">仍要取消
    </button>
    <button class="customer-van-model_confirm"
            hover-class="none"
            type="primary"
            bind:tap="hideCancelOrder">继续用车
    </button>
  </view>
</van-popup>
  <!--弹窗：补价-->
<van-popup
  custom-class="customer-van-popup customer-van-popup-diff-price"
  show="{{ booPayment }}"
  close-on-click-overlay="{{false}}"
  round
  position="bottom"
  bind:close="hidePayment">
  <view style="right:0;top:0;"
        class="close-icon"
        bind:tap="hidePayment">
    <image class="image" src="{{tools.imgFilter('/common/Popup_bus_icon_close@2x.png')}}"></image>
  </view>
  <view class="title">补价</view>
  <view class="customer-van-popup-diff-price-body">
    <view class="alert">
      <view>根据商定的实际需支付金额，调整订单总金额及增付相应定金。平台定价系统升级前，暂时需人工调整合理价格，敬请谅解~</view>
    </view>
    <view class="amount">
      <view class="label">
        <view>订单总金额</view>
        <view>(调整后)</view>
      </view>
      <view class="value">{{tools.fen2Yuan(itemData.order_price)}}元</view>
    </view>
    <view class="diff-price">
      <text class="label">¥</text>
      <text class="value">{{tools.fen2Yuan(itemData.order_diff_price)}}</text>
    </view>
    <view class="diff-price-text">需增付定金</view>
    <view class="wechat">
      <view class="name">
        <image class="logo"
               src="{{tools.imgFilter('/createOrder/Popup_defray_logo_wechat@2x.png')}}"></image>
        <text>微信支付</text>
      </view>
      <image class="checked"
             src="{{tools.imgFilter('/createOrder/Reason_btn_check@2x.png')}}"></image>
    </view>
  </view>
  <button class="customer-picker_footer"
          style="background-color: #FD6600;"
          hover-class="none"
          type="primary"
          disabled="{{booLock}}"
          bind:tap="handleOrderDiffPay">立即支付
  </button>
</van-popup>
<wxs src="../../components/wxs/index.wxs" module="tools"></wxs>