<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="payItem.id"> <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">停车泊位:{{payItem.spaceName}}</view> <view class="pay-center-item">入场时间:{{payItem.inTime || 0}}</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}} </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)" 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}} </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)" 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}}</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" :exportFlag="exportFlag" :curOrderList="currentItem" :jumpUrl="jumpUrl" @closePaymentMethod="closePaymentMethod"></PaymentMethod> <u-toast ref="uToast" /> </view> </template> <script> import getUrlParams from "../../utils/getUrlParams.js"; import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue' export default { components: { PaymentMethod }, 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, // 选中去支付的单条条目 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() { this.list[this.current].pageNum = 1 this.orderList = [ [], [], [], [] ] this.orderListArr(this.list[this.current], 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.payList = [ [], [], [], [] ] this.list[index].pageNum = 1 if (index == 1) { this.exportFlag = true } else { this.exportFlag = false } this.orderListArr(this.list[index], 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' }); }, orderListArr(orderType, index) { let pageNum = orderType.pageNum; // 页码, 默认从1开始 let pageSize = orderType.total; // 页长, 默认每页10条 if (index == 0) { this.$u.api.getOrderList({ // pageSize: pageSize, pageNum: pageNum, paying: true }) .then(res => { for (const item of res.data.pageInfo.rows) { this.payList[orderType.index].push(item) } 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 => { for (const item of res.data.pageInfo.rows) { this.payList[orderType.index].push(item) } 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; }) } }, /*下拉刷新的回调*/ // downCallback() { // // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可 // this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 ) // }, 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) => { 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[this.current].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>