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[current]" :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" v-if="typeCurrent.value === 'road'">
                  <view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
                  <!-- <view class="order-center-item">入场时间：{{ orderItem.inTime }}</view> -->
                  <view class="order-center-item" v-if="orderItem.deviceType == 1"> 入场时间：{{ orderItem.inTime }}</view>
                  <view class="order-center-item" v-else>开始计费：{{ orderItem.inTime }}</view>
                  <template v-if="orderItem.deviceType == 1">
                    <view class="order-center-item" v-if="orderItem.orderStatus == 1 && orderItem.outTime"> 出场时间：{{ `未出场` }}</view>
                    <view class="order-center-item" v-if="orderItem.orderStatus !== 1"> 出场时间：{{ orderItem.outTime }}</view>
                  </template>
                  <template v-else>
                    <view class="order-center-item" v-if="orderItem.orderStatus == 1 && orderItem.outTime"> 结束计费：{{ `未出场` }}</view>
                    <view class="order-center-item" v-if="orderItem.orderStatus !== 1"> 结束计费：{{ orderItem.outTime }}</view>
                  </template>
                  <!-- <view class="order-center-item">
										停车时长：{{ orderItem.duration || 0 }}</view> -->
                  <!-- <view class="order-center-item" v-if="orderItem.orderStatus !== 1">
										免费时长：{{ orderItem.freeDuration || 0 }}</view> -->
                  <view class="order-center-item" v-if="orderItem.deviceType == 1"> 免费时长：{{ orderItem.freeDuration || `0天0时${free_time}分0秒` }}</view>
                  <!-- <view class="order-center-item" v-if="orderItem.deviceType == 2">
										免费时长：0天0时15分0秒</view> -->
                  <view class="order-center-item" v-if="orderItem.deviceType == 2">
                    免费时长：{{ orderItem.freeDuration || `0天0时${free_time}分0秒` }}</view
                  >
                  <!-- <view class="order-center-item" v-if="orderItem.orderStatus !== 1">
										计费时长：{{ orderItem.calcDuration || 0 }}</view> -->
                  <view class="order-center-item"> 计费时长：{{ orderItem.calcDuration || 0 }}</view>
                  <view class="order-center-item"> 累计停车时长：{{ orderItem.duration || 0 }}</view>
                  <view class="order-center-item" v-if="orderItem.orderStatus == 1">
                    预计金额：
                    <span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
                  </view>
                  <view class="order-center-item" v-else>
                    应付金额：
                    <span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
                  </view>
                  <view
                    class="order-center-item"
                    v-if="(orderItem.actualAmount || orderItem.actualAmount === 0) && orderItem.orderStatus !== 2 && orderItem.orderStatus !== 1"
                  >
                    实缴金额：
                    <span class="pay-amount">{{ orderItem.actualAmount || 0 }}</span>
                  </view>
                  <view class="order-center-item">泊位号：{{ orderItem.spaceName }}</view>
                  <view class="order-center-item" v-if="Number(orderItem.deviceType) !== 1"> 车位锁设备号：{{ orderItem.deviceNo }}</view>
                </view>
                <!-- 停车场显示字段 -->
                <view class="order-center" v-if="typeCurrent.value === 'park'">
                  <view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
                  <view class="order-center-item"> 入场通道：{{ orderItem.roadwayName }}</view>
                  <view class="order-center-item"> 入场时间：{{ orderItem.inTime }}</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.outParkingName }}</view>
                  <view class="order-center-item" v-if="orderItem.orderStatus !== 1"> 出场时间：{{ orderItem.inTime }}</view>
                  <view class="order-center-item"> 免费时长：{{ orderItem.freeDuration || `0天0时${free_time}分0秒` }}</view>
                  <view class="order-center-item"> 计费时长：{{ orderItem.calcDuration || 0 }}</view>
                  <view class="order-center-item"> 累计停车时长：{{ orderItem.duration || 0 }}</view>
                  <view class="order-center-item">
                    应缴金额：
                    <span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
                  </view>
                  <view
                    class="order-center-item"
                    v-if="(orderItem.actualAmount || orderItem.actualAmount === 0) && orderItem.orderStatus !== 2 && orderItem.orderStatus !== 1"
                  >
                    实缴金额：
                    <span class="pay-amount">{{ orderItem.actualAmount || 0 }}</span>
                  </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>

    <!-- 停车场和路段切换 -->
    <view class="type-list">
      <view
        class="type-list-item"
        v-for="(item, index) in typeList"
        :key="index"
        :class="{ 'type-list-item-current': typeCurrent.value === item.value }"
        @click="typeTabClick(item)"
      >
        {{ item.label }}
      </view>
    </view>

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

<script>
// 订单状态orderStatus: 1-停放中 2-出场中 3-欠费 4-完成
export default {
  data() {
    return {
      orderList: [[], [], [], []],
      list: [
        {
          index: 0,
          name: '全部',
          orderStatus: null,
          pageNum: 1,
          total: null
        },
        {
          index: 1,
          name: '停放中',
          orderStatus: 1,
          pageNum: 1,
          total: null
        },
        {
          index: 2,
          name: '欠费未缴',
          orderStatus: 2,
          pageNum: 1,
          total: null
        },
        {
          index: 3,
          name: '已完成',
          orderStatus: 4,
          pageNum: 1,
          total: null
        }
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
      // 停车类型
      typeList: [
        {
          label: '路段',
          value: 'road'
        },
        {
          label: '停车场',
          value: 'park'
        }
      ],
      typeCurrent: {
        //设置停车类型默认值
        label: '路段',
        value: 'road'
      }
    };
  },
  onShow() {},
  onLoad(options) {
    let questCurrent = options.orderStatus;
    if (questCurrent) {
      this.current = questCurrent;
      this.change(questCurrent);
    } else {
      this.list[this.current].pageNum = 1;
      this.orderList = [[], [], [], []];
      this.getOrderList(this.list[this.current], this.typeCurrent);
    }
  },
  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;
      };
    }
  },
  onBackPress(e) {
    // 返回主页面tabBar
    uni.switchTab({
      url: '../../center/index'
    });
    // 此处一定要return为true，否则页面不会返回到指定路径
    return true;
  },
  methods: {
    reachBottom() {
      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], this.typeCurrent);
    },
    // 页面数据

    getOrderList(orderType, typeCurrent) {
      //初始化订单列表
      const param = {
        pageNum: orderType.pageNum,
        orderStatus: orderType.orderStatus
      };

      // 未出场: orderStatus	 = 1-停放中
      // 缴费中: orderStatus	 = 2-出场中  && payStatus = 2-支付中
      // 完成:   orderStatus	 = 4-完成
      if (typeCurrent.value == 'road') {
        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'
            });
          });
      } else {
        this.$u.api
          .getRoomParkingApi(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'
            });
          });
      }

      this.loadStatus.splice(this.current, 1, 'loadmore');
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      //重新初始化
      this.orderList = [[], [], [], []];
      this.list[index].pageNum = 1;
      this.getOrderList(this.list[index], this.typeCurrent);
    },
    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,
          orderType: this.typeCurrent.value
        }
      });
    },
    jumpChargeStandard(item) {
      let roadNo = item?.roadNo;
      if (this.typeCurrent.value === 'park') {
        roadNo = item?.parkingNo;
      }
      this.$u.route({
        url: 'pages/chargeStandard/chargeStandard',
        params: {
          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
        });
      }
    },
    /**
     * 类型切换
     * @param {Object} item
     */
    typeTabClick(item) {
      this.typeCurrent = item;
      //重新初始化
      this.orderList = [[], [], [], []];
      this.list[this.current].pageNum = 1;
      this.getOrderList(this.list[this.current], this.typeCurrent);
    }
  },
  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>