<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>