parking_h5/pages/center/order/order.vue

<template>
  <view>
    <view class="swiper-wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#008CFF"
          ref="tabs"
          :list="list"
          :current="current"
          @change="change"
          :is-scroll="false"
          swiperWidth="100%"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view
                class="order"
                @click="goDetails(orderItem)"
                v-for="(orderItem, index) in  orderList[index]"
                :key="'o-' + index"
              >
                <view class="order-top u-flex">
                  <view class="order-top-left u-flex-1">
                    <view class="car">{{ orderItem.vehicleNo }}</view>
                    <view class="addr">{{ orderItem.roadName }}</view>
                  </view>
                  <!--
                    显示申请退款按钮满足一下条件:
                    1.允许退款allowRefund等于1 并且
                    2.退款状态auditStatus等于2 已驳回 或者
                    3.退款状态auditStatus不能为空 并且不能等于0
                  -->
                  <view
                    class="order-top-right apply-refund"
                    v-show="orderItem.allowRefund == 1 &&
                    (orderItem.auditStatus == 2 || !orderItem.auditStatus && orderItem.auditStatus != 0)"
                    @click.stop="applyRefund(orderItem)"
                  >申请退款</view>
                  <!--
                    显示申请状态满足以下条件
                    申请状态存在或者审核状态存在(由于0比较特殊,所以单独拉出来判断)
                  -->
                  <view
                    class="order-top-right apply-refund"
                    @click.stop="applyRefundDetails(orderItem)"
                    v-if="orderItem.refundStatus ||
                    orderItem.refundStatus == 0 ||
                    orderItem.auditStatus ||
                    orderItem.auditStatus == 0"
                  >{{ orderItem | verifyRefundStatus }}</view>
                  <view
                    class="order-top-right"
                    v-else
                    :class="{ 'order-top-right-finished': orderItem.orderStatus == '4' }"
                  >{{ orderItem.orderStatus | verifyStatusFilter }}</view>
                </view>
                <view class="order-center">
                  <view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
                  <view class="order-center-item">入场时间：{{ orderItem.inTime }}</view>
				  <view
				    class="order-center-item"
				    v-if="orderItem.orderStatus == 1 && orderItem.outTime"
				  >预计出场时间：{{orderItem.outTime}}</view>
				  <view
				    class="order-center-item"
				    v-if="orderItem.orderStatus !== 1"
				  >出场时间：{{ orderItem.outTime }}</view>
                  <view
                    class="order-center-item"
                    v-if="orderItem.orderStatus !== 1"
                  >停留时间：{{ orderItem.duration }}</view>
				  <view
					class="order-center-item"
					v-if="orderItem.orderStatus == 1"
				  >
				    预计金额：
				    <span class="pay-amount">{{ orderItem.payAmount }}</span>
				  </view>
                  <view class="order-center-item" v-else>
                    应付金额：
                    <span class="pay-amount">{{ orderItem.payAmount }}</span>
                  </view>
                  <view
                    class="order-center-item"
                    v-if="(orderItem.actualAmount || orderItem.actualAmount === 0) && orderItem.orderStatus !== 2"
                  >
                    实缴金额：
                    <span class="pay-amount">{{ orderItem.actualAmount }}</span>
                  </view>
					<view class="order-center-item">泊位号：{{ orderItem.spaceName }}</view>
					<view class="order-center-item" v-if="orderItem.deviceType !=1">车位锁设备号：{{ orderItem.deviceNo }}</view>
                </view>
                <view class="order-bottom">
                  <u-cell-item title="收费标准" @click.native.stop="jumpChargeStandard(orderItem)"></u-cell-item>
                </view>
              </view>
              <u-loadmore :status="loadStatus[index]" bg-color="#F6F6FF"></u-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data () {
    return {
      orderList: [[], [], [], []],
      list: [
        { index: 0, name: '全部', orderStatu: null, pageNum: 1, total: null },
        { index: 1, name: '停放中', orderStatu: 1, pageNum: 1, total: null },
        { index: 2, name: '欠费未缴', orderStatu: 2, pageNum: 1, total: null },
        { index: 3, name: '已完成', orderStatu: 4, pageNum: 1, total: null }
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
    }
  },
  onShow () {
    // onShow 刷新数据
    this.list[this.current].pageNum = 1
    this.orderList = [[], [], [], []]
    this.getOrderList(this.list[this.current])
  },
  computed: {
    // 价格小数
    priceDecimal () {
      return val => {
        if (val !== parseInt(val)) return val.slice(-2)
        else return '00'
      }
    },
    // 价格整数
    priceInt () {
      return val => {
        if (val !== parseInt(val)) return val.split('.')[0]
        else return val
      }
    }
  },
  methods: {
    reachBottom () {
      // console.log('this.list[this.current]',this.list[this.current]);
      if (this.orderList[this.current].length >= this.list[this.current].total) {
        this.loadStatus.splice(this.list[this.current].index, 1, 'nomore')
        return
      };
      this.loadStatus.splice(this.list[this.current].index, 1, 'loading')
      this.getOrderList(this.list[this.current])
    },
    // 页面数据

    getOrderList (orderType) {
      const param = {
        pageNum: orderType.pageNum,
        orderStatus: orderType.orderStatu
      }
      // 未出场: orderStatu = 1-停放中
      // 缴费中: orderStatu = 2-出场中  && payStatus = 2-支付中
      // 完成:   orderStatu = 4-完成
      this.$u.api.getOrderList(param)
        .then(res => {
          for (const item of res.data.pageInfo.rows) {
            this.orderList[orderType.index].push(item)
          }
          this.list[this.current].total = res.data.pageInfo.total
          this.list[orderType.index].pageNum++
          if (this.orderList[this.current].length >= this.list[this.current].total) {
            this.loadStatus.splice(this.list[orderType.index].index, 1, 'nomore')
          };
        }).catch(err => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          })
          // console.log('getOrderList ',err)
        })

      this.loadStatus.splice(this.current, 1, 'loadmore')
    },
    // tab栏切换
    change (index) {
      // this.swiperCurrent = this.list[index].orderStatu;
      this.swiperCurrent = index
      this.getOrderList(this.list[index])
    },
    transition ({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish ({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    /**
     * 跳转详情
     * 未发起退款或者未退款成功的
     * */
    goDetails (item) {
      this.$u.route({
        url: 'pages/center/order/orderDetails/orderDetails',
        params: {
          orderId: item.id
        }
      })
    },
    jumpChargeStandard (item) {
      this.$u.route({
        url: 'pages/chargeStandard/chargeStandard',
        params: {
          roadNo: item.roadNo
        }
      })
    },
    // 申请退款
    applyRefund (item) {
      this.$u.route('pages/applyRefund/applyRefund', {
        orderId: item.orderId,
        payAmount: item.actualAmount
      })
    },
    /**
     * 申请退款详情
     * 只要申请退款状态等于1并且审批状态等于1跳转到退款完成详情页
     *  否则跳转到退款过程页
     * */
    applyRefundDetails (item) {
      if (item.refundStatus === 1 && item.auditStatus === 1) {
        this.$u.route('pages/applyRefundDetails/applyRefundAchieveDetails', {
          orderId: item.orderId
        })
      } else {
        this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
          orderId: item.orderId
        })
      }
    }
  },
  filters: {
    verifyStatusFilter (value) {
      if (value === 0) {
        return ''
      } else if (value === 1) {
        return '停放中'
      } else if (value === 2) {
        return '欠费未缴'
      } else if (value === 4) {
        return '已完成'
      } else {
        return ''
      }
    },
    verifyRefundStatus (item) {
      if (item.auditStatus === 0) {
        return '申请退款中'
      } else if (item.auditStatus === 1) {
        if (item.refundStatus === 0) {
          return '退款失败'
        } else if (item.refundStatus === 1) {
          return '退款成功'
        }
      } else if (item.auditStatus === 2) {
        return '已驳回'
      }
    }
  }
}
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f6f6ff;
}
/* #endif */
</style>

<style lang="scss" scoped>
@import "./order.scss";
</style>