parking_h5/pages/payLists/payLists.vue

<template>
  <view>
    <u-navbar
      title-color="#fff"
      :custom-back="customBack"
      :bpay-bottom="false"
      back-icon-color="#CCE8FF"
      :background="{ background: '#008CFF' }"
      title="停车缴费"
    ></u-navbar>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <scroll-view scroll-y style="height: 100%; width: 100%">
        <view class="page-box">
          <view class="pay" v-for="(payItem, index) in payList" :key="payItem.id">
            <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 }}</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 }}</view>
              </template>
              <view class="pay-center-item" v-if="payItem.orderStatus !== 1"> 免费时长：{{ payItem.freeDuration }} </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)" style="color: #008cff"> </u-cell-item>
            </view>
          </view>
        </view>
      </scroll-view>
    </mescroll-body>
    <view class="bottom">
      <view class="bottom-total">
        累计欠费<span class="total">{{ totalCount }}</span
        >笔,合计<span class="total">{{ totalPayAmount }}</span
        >元
      </view>
      <view class="button-wrap" v-if="payList.length && payList.length >= 1">
        <!-- <button class="button" type="primary" @click="all()">全部缴费</button> -->
        <button class="button" type="primary" @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>{{ payTipsItem.num || 0 }}</text
          >场停车欠费，共 <text>{{ payTipsItem.price || 0 }}</text
          >元
        </view>
      </view>
    </u-modal>
    <!-- 支付方式 -->
    <PaymentMethod :payWayPop="payWayPop" :curOrderList="currentItem" :jumpUrl="jumpUrl" @closePaymentMethod="closePaymentMethod"></PaymentMethod>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import getUrlParams from '../../utils/getUrlParams.js';
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    PaymentMethod
  },
  data() {
    return {
      totalPayAmount: '',
      totalCount: '',
      currentPayUrl: '',
      payList: [],
      list: [],
      orderList: [],
      PayUrl: '',
      payTipsPop: false,
      payWayPop: false,
      // 选中去支付的单条条目
      currentItem: [],
      // 缴费提示类目
      payTipsItem: {
        num: '',
        price: ''
      },
      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() {
    // onShow 刷新数据
    if (this.mescroll) {
      this.mescroll.triggerDownScroll();
    }
  },
  methods: {
    customBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    },
    /*下拉刷新的回调*/
    downCallback() {
      // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
      this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
    },
    /*上拉加载的回调*/
    upCallback(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      // this.getMessageList()
      this.$u.api
        .getOrderList({
          pageSize: pageSize,
          pageNum: pageNum,
          paying: true
        })
        .then((res) => {
          // 接口返回的当前页数据列表 (数组)
          let curPageData = res.data.pageInfo.rows;
          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
          let curPageLen = curPageData.length;
          // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
          let totalPage = res.data.pageInfo.pages;
          // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
          let totalSize = res.data.pageInfo.total;
          // 接口返回的是否有下一页 (true/false)
          // let hasNext = data.pages;

          //设置列表数据
          if (page.num == 1) this.payList = []; //如果是第一页需手动置空列表
          this.payList = this.payList.concat(curPageData); //追加新数据
          this.totalCount = res.data.costInfo.totalCount;
          this.totalPayAmount = res.data.costInfo.totalPayAmount;
          // 请求成功,隐藏加载状态
          //方法一(推荐): 后台接口有返回列表的总页数 totalPage
          this.mescroll.endByPage(curPageLen, totalPage);
          setTimeout(() => {
            this.mescroll.endSuccess(curPageLen);
          }, 20);
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    paythis(orderId) {
      let orderList = [];
      orderList.push(orderId);
      this.$u.api
        .payGzbank({
          orderList: orderList
        })
        .then((res) => {
          let payUrl = res.data.url;
          this.currentPayUrl = encodeURIComponent(res.data.url);
          // return;
          this.$u.route({
            url: 'pages/payLists/pay',
            params: {
              currentPayUrl: this.currentPayUrl
            }
          });
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    all() {
      this.payList.forEach((item, index, arr) => {
        console.log(item);
        if (item.orderId) {
          this.orderList.push(item.orderId);
        }
      });

      this.$u.api
        .payGzbank({
          orderList: this.orderList
        })
        .then((res) => {
          let payUrl = res.data.url;
          this.currentPayUrl = encodeURIComponent(res.data.url);
          // console.log('this.currentPayUrl',this.currentPayUrl);
          // return;
          this.$u.route({
            url: 'pages/payLists/pay',
            params: {
              currentPayUrl: this.currentPayUrl
            }
          });
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    // 去支付,选择支付方式
    choosePayWay(item) {
      this.currentItem = [];
      this.currentItem.push(item);
      this.payWayPop = true;
    },
    // 全部缴费确认
    confirmPrice() {
      let orderNum = 0,
        price = 0;
      this.currentItem = [];
      this.payList.forEach((item) => {
        if (item.orderStatus !== 4 && item.payStatus !== 1) {
          price += Number(item.payAmount);
          orderNum++;
          this.currentItem.push(item.orderId);
        }
      });
      this.payTipsItem.num = orderNum;
      this.payTipsItem.price = price.toFixed(2);
      if (orderNum !== 0 && price !== 0) {
        this.payTipsPop = true;
      } else {
        this.$refs.uToast.show({
          title: '没有需要支付的订单',
          type: 'warning'
        });
      }
    },
    // 缴费提示弹框确认
    payTipsPopConfirm() {
      this.payWayPop = true;
    },
    handleGetOrderinfo(orderId) {
      this.$u.api
        .getOrderinfo({
          id: orderId
        })
        .then((res) => {
          this.orderInfo = res.data;
          console.log('handleGetOrderinfo', JSON.parse(JSON.stringify(res)));
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    closePaymentMethod() {
      this.payWayPop = false;
    }
  }
};
</script>

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

/* #endif */
</style>

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