parking_h5/pages/payLists/payLists.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" disable-touch>
        <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="pay" v-for="(payItem, index) in payList[index]" :key="index">
                <view v-if="item.index == 0">
                  <view class="pay-top u-flex">
                    <view class="pay-top-left u-flex-1">
                      <view class="car">{{ payItem.vehicleNo }}</view>
                      <view class="addr">{{ payItem.roadName }}</view>
                    </view>
                    <view class="pay-top-right">{{ payItem.orderStatus | filterOrderStatus }} </view>
                  </view>
                  <view class="pay-center">
                    <view class="pay-center-item">订单编号：{{ payItem.orderId }}</view>
                    <view class="pay-center-item" v-if="payItem.deviceType == 1">入场时间：{{ payItem.inTime || '' }} </view>
                    <view class="pay-center-item" v-else>开始计费：{{ payItem.inTime || '' }}</view>
                    <template v-if="payItem.deviceType == 1">
                      <view class="pay-center-item" v-if="payItem.orderStatus == 1 && payItem.outTime"> 出场时间：{{ `未出场` }}</view>
                      <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 出场时间：{{ payItem.outTime || 0 }}</view>
                    </template>
                    <template v-else>
                      <view class="pay-center-item" v-if="payItem.orderStatus == 1 && payItem.outTime"> 结束计费：{{ `未出场` }}</view>
                      <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 结束计费：{{ payItem.outTime || 0 }}</view>
                    </template>
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
                      免费时长：{{ payItem.freeDuration || `0天0时${free_time}分0秒` }}
                    </view>
                    <!-- 计费时长=停车时长－免费时长 -->
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 计费时长：{{ payItem.calcDuration || 0 }} </view>
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 累计停车时长：{{ payItem.duration || 0 }} </view>
                    <view class="pay-center-item" v-if="payItem.orderStatus == 1"
                      >预计金额：<span class="pay-amount">{{ payItem.payAmount || 0 }}</span>
                    </view>
                    <view class="pay-center-item" v-else
                      >应付金额：<span class="pay-amount">{{ payItem.payAmount || 0 }}</span>
                    </view>
                    <view
                      class="pay-center-item"
                      v-if="(payItem.actualAmount || payItem.actualAmount === 0) && payItem.orderStatus !== 2 && payItem.orderStatus !== 1"
                    >
                      实缴金额：<span class="pay-amount">{{ payItem.actualAmount || 0 }}</span>
                    </view>
                    <view class="pay-center-item">泊位号：{{ payItem.spaceName }}</view>
                    <view class="pay-center-item" v-if="payItem.deviceType && payItem.deviceType != 1"> 车位锁设备号：{{ payItem.deviceNo }} </view>
                  </view>
                  <view class="pay-bottom">
                    <u-cell-item title="去支付" @click="choosePayWay(payItem.orderId, payItem)" style="color: #008cff"> </u-cell-item>
                  </view>
                </view>
                <view v-if="item.index == 1">
                  <view class="pay-top u-flex">
                    <view class="pay-top-left u-flex-1">
                      <view class="car">{{ payItem.vehicleNo }}</view>
                      <view class="addr">{{ payItem.parkingName }}</view>
                    </view>
                    <view class="pay-top-right">{{ payItem.orderStatus | filterOrderStatus }} </view>
                  </view>
                  <view class="pay-center">
                    <view class="pay-center-item">订单编号：{{ payItem.orderId }}</view>
                    <view class="pay-center-item">入场通道：{{ payItem.entranceName }}</view>
                    <view class="pay-center-item">入场时间：{{ payItem.inTime || 0 }}</view>
                    <view class="pay-center-item">出场通道：{{ payItem.outEntranceName }}</view>
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 出场时间：{{ payItem.outTime || 0 }} </view>
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
                      免费时长：{{ payItem.freeDuration || `0天0时${free_time}分0秒` }}
                    </view>
                    <!-- 计费时长=停车时长－免费时长 -->
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 计费时长：{{ payItem.calcDuration || 0 }} </view>
                    <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 累计停车时长：{{ payItem.duration || 0 }} </view>
                    <view class="pay-center-item"
                      >应付金额：<span class="pay-amount">{{ payItem.payAmount || 0 }}</span>
                    </view>
                    <view class="pay-center-item" v-if="payItem.deviceType && payItem.deviceType != 1"> 车位锁设备号：{{ payItem.deviceNo }} </view>
                  </view>
                  <view class="pay-bottom">
                    <u-cell-item title="去支付" @click="choosePayWay(payItem.orderId, payItem)" style="color: #008cff"> </u-cell-item>
                  </view>
                </view>
              </view>
              <u-loadmore :status="loadStatus[index]" bg-color="#F6F6FF"></u-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <view class="bottom">
      <view class="bottom-total">
        累计欠费<span class="total">{{ totalCount || 0 }}</span
        >笔,合计<span class="total">{{ totalPayAmount || 0 }}</span
        >元
      </view>
      <view class="button-wrap" v-if="payList.length && payList.length >= 1">
        <button class="button" type="primary" :disabled="!totalPayAmount" @click="confirmPrice()">全部缴费</button>
      </view>
    </view>

    <!-- 缴费提示-->
    <u-modal
      v-model="payTipsPop"
      :title-style="{ color: '#404040' }"
      title="缴费提示"
      :show-confirm-button="true"
      confirm-text="立即缴费"
      :confirm-style="{ backgroundColor: '#3397FA', color: '#fff' }"
      :show-cancel-button="true"
      cancel-text="取消"
      :cancel-style="{ backgroundColor: '#EBF1FF', color: '#3397FA' }"
      @confirm="payTipsPopConfirm"
    >
      <view class="slot-content">
        <view class="pay-tips">
          <text>{{ totalCount || 0 }}</text
          >场停车欠费，共 <text>{{ totalPayAmount || 0 }}</text
          >元
        </view>
      </view>
    </u-modal>
    <!-- 支付方式 -->
    <ChoosePayment
      ref="choosePayment"
      :exportFlag="exportFlag"
      :curOrderList="payOrderIdList"
      :jumpUrl="jumpUrl"
      @closePaymentMethod="closePaymentMethod"
    />
    <u-toast ref="uToast" />
  </view>
</template>

<script>
// import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
export default {
  components: {
    // PaymentMethod,
    ChoosePayment
  },
  data() {
    return {
      totalPayAmount: '',
      totalCount: '',
      currentPayUrl: '',
      payList: [[], []],
      list: [
        {
          index: 0,
          name: '路段',
          orderStatus: null,
          pageNum: 1,
          total: null
        },
        {
          index: 1,
          name: '停车场',
          orderStatus: 1,
          pageNum: 1,
          total: null
        }
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
      isLoadMore: false, //是否加载中
      orderList: [],
      exportFlag: false,
      PayUrl: '',
      payTipsPop: false,
      payWayPop: false,
      // 用来筛选已经加入列表中的id集合
      haveIncludesIdList: [],
      // 订单支付id集合
      payOrderIdList: [],
      // 所有订单列表(不分页)
      allOrderList: [],
      code: null,
      jumpUrl: ''
    };
  },
  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;
      };
    }
  },
  onLoad() {
    const href = location.href.split('#');
    this.jumpUrl = href[0] + '#/pages/center/order/order?';
  },
  onShow() {
    this.list[this.current].pageNum = 1;
    this.payList = [[], []];
    this.orderListArr(this.list[this.current], this.swiperCurrent);
    this.getAllOrderList(this.swiperCurrent);
  },
  methods: {
    reachBottom() {
      if (this.payList[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.orderListArr(this.list[this.current], this.swiperCurrent);
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      this.current = index;
      //重新初始化
      this.haveIncludesIdList = [];
      this.payOrderIdList = [];
      this.payList = [[], []];
      this.list[index].pageNum = 1;
      if (index == 1) {
        this.exportFlag = true;
      } else {
        this.exportFlag = false;
      }
      this.orderListArr(this.list[index], index);
      this.getAllOrderList(index);
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    customBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    },
    /**
     * @description: 获取所有订单用于全部缴费
     * @param {*} index
     * @return {*}
     */
    getAllOrderList(index) {
      if (index == 0) {
        this.$u.api
          .getOrderList({
            pageSize: 1000,
            pageNum: 1,
            paying: true
          })
          .then((res) => {
            if (res.code === 200) {
              this.allOrderList = res?.data?.pageInfo?.rows ?? [];
            }
          });
      } else {
        this.$u.api
          .getRoomParkingApi({
            pageSize: 1000,
            pageNum: 1,
            paying: true
          })
          .then((res) => {
            if (res.code === 200) {
              this.allOrderList = res?.data?.pageInfo?.rows ?? [];
            }
          });
      }
    },
    /**
     * @description: 分页订单列表
     * @param {*} orderType
     * @param {*} index
     * @return {*}
     */
    orderListArr(orderType, index) {
      let pageNum = orderType.pageNum; // 页码, 默认从1开始
      if (index == 0) {
        this.$u.api
          .getOrderList({
            pageSize: 10,
            pageNum: pageNum,
            paying: true
          })
          .then((res) => {
            // 判断重复
            let newListFlag = true;
            for (const item of res.data.pageInfo.rows) {
              if (this.haveIncludesIdList.includes(item.orderId)) {
                newListFlag = false;
              } else {
                this.payList[orderType.index].push(item);
              }
            }
            if (newListFlag) {
              this.list[this.current].total = res.data.pageInfo.total;
              this.list[orderType.index].pageNum++;
              if (this.payList[this.current].length >= this.list[this.current].total) {
                this.loadStatus.splice(this.list[orderType.index].index, 1, 'nomore');
              }
              this.totalCount = res.data.costInfo.totalCount;
              this.totalPayAmount = res.data.costInfo.totalPayAmount;
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: err.msg,
              type: 'error'
            });
          });
      } else {
        this.$u.api
          .getRoomParkingApi({
            pageNum: pageNum,
            paying: true
          })
          .then((res) => {
            let newListFlag = true;
            for (const item of res.data.pageInfo.rows) {
              if (this.haveIncludesIdList.includes(item.orderId)) {
                newListFlag = false;
              } else {
                this.payList[orderType.index].push(item);
              }
            }
            if (newListFlag) {
              this.list[this.current].total = res.data.pageInfo.total;
              this.list[orderType.index].pageNum++;
              if (this.payList[this.current].length >= this.list[this.current].total) {
                this.loadStatus.splice(this.list[orderType.index].index, 1, 'nomore');
              }
              this.totalCount = res.data.costInfo.totalCount;
              this.totalPayAmount = res.data.costInfo.totalPayAmount;
            }
          });
      }
    },
    // 去支付,选择支付方式
    choosePayWay(orderId, item) {
      this.payOrderIdList = [];
      this.payOrderIdList.push(orderId);
      this.$nextTick(() => {
        this.$refs['choosePayment'].openPopup(item, 'single', this.current === 0 ? 'road' : 'parking');
      });
    },
    // 全部缴费确认
    confirmPrice() {
      let payOrderIdList = [];
      this.allOrderList.forEach((item) => {
        if (item.orderStatus !== 4 && item.payStatus !== 1) {
          payOrderIdList.push(item.orderId);
        }
      });
      this.payOrderIdList = payOrderIdList;
      if (this.totalCount !== 0 && this.totalPayAmount !== 0) {
        this.payTipsPop = true;
      } else {
        this.$refs.uToast.show({
          title: '没有需要支付的订单',
          type: 'warning'
        });
      }
    },
    // 缴费提示弹框确认
    payTipsPopConfirm() {
      this.$nextTick(() => {
        this.$refs['choosePayment'].openPopup(
          { payAmount: Number(this.totalPayAmount) },
          'multiple',
          this.current === 0 ? 'road' : 'parking'
        );
      });
    },
    closePaymentMethod() {
      this.payWayPop = false;
    }
  }
};
</script>

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

/* #endif */
</style>

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