<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.id)" v-for="(orderItem, index) in orderList[index]" :key="orderItem.id"> <view class="order-top u-flex"> <view class="order-top-left u-flex-1"> <view class="car">{{orderItem.vehicleNo}}<span class="invoice-type">电子发票</span></view> <view class="addr">{{orderItem.roadName}}</view> </view> <view class="order-top-right">{{orderItem.orderStatus | verifyStatusFilter}}</view> </view> <view class="order-center"> <view class="order-center-item">订单编号:{{orderItem.orderId}}</view> <view class="order-center-item">入场时间:{{orderItem.inTime}}</view> <view class="order-center-item">出场时间:{{orderItem.outTime}}</view> <view class="order-center-item">停留时间:{{orderItem.duration}}</view> <view class="order-center-item">应付金额:<span class="pay-amount">{{orderItem.payAmount}}</span></view> </view> <view class="order-bottom"> <u-cell-item v-if="orderItem.payStatus==1" value="我要开票" :value-style="{textAlign: 'center',fontSize: '30rpx',color: '#008CFF'}" :arrow="false"></u-cell-item> <u-cell-item v-if="orderItem.payStatus==3" value="重发发票" :value-style="{textAlign: 'center',fontSize: '30rpx',color: '#949494'}" :arrow="false"></u-cell-item> </view> </view> <u-loadmore :status="loadStatus[index]" bgColor="#F6F6FF"></u-loadmore> </view> </scroll-view> </swiper-item> </swiper> </view> <u-toast ref="uToast" /> </view> </template> <script> export default { data() { return { orderList: [[], [], [], []], list: [ {index:0,name: '全部',orderStatu:null,pageNum:1,total:null}, {index:1,name: '已开票',orderStatu:1,pageNum:1,total:null}, {index:2,name: '未开票',orderStatu:2,pageNum:1,total:null}, ], current: 0, swiperCurrent: 0, tabsHeight: 0, dx: 0, loadStatus: ['loadmore','loadmore','loadmore','loadmore'], }; }, onLoad() { this.getOrderList(this.list[0]); // this.getOrderList(this.list[1]); // this.getOrderList(this.list[2]); // this.getOrderList(this.list[3]); }, 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; }; } }, methods: { reachBottom() { // console.log('this.list[this.current]',this.list[this.current]); 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]); }, // 页面数据 getOrderList(orderType) { let param = { pageNum:orderType.pageNum, orderStatus:orderType.orderStatu, }; // 未出场: orderStatu = 1-停放中 // 缴费中: orderStatu = 2-出场中 && payStatus = 2-支付中 // 完成: orderStatu = 4-完成 this.$u.api.getOrderList(param) .then(res=>{ for(let item of res.data.pageInfo.rows){ this.orderList[orderType.index].push(item); } console.log('this.list[orderType.index]',this.list[orderType.index]); 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"); }; console.log(JSON.parse(JSON.stringify(this.orderList[this.swiperCurrent]))); console.log('this.list[this.current]',this.list[this.current]); }).catch(err=>{ this.$refs.uToast.show({ title: err.msg, type: 'error', }); console.log('getOrderList ',err) }); this.loadStatus.splice(this.current,1,"loadmore") }, // tab栏切换 change(index) { // this.swiperCurrent = this.list[index].orderStatu; this.swiperCurrent = index; this.getOrderList(this.list[index]); }, transition({ detail: { dx } }) { this.$refs.tabs.setDx(dx); }, animationfinish({ detail: { current } }) { this.$refs.tabs.setFinishCurrent(current); this.swiperCurrent = current; this.current = current; }, goDetails(id){ this.$u.route({ url: 'pages/center/invoice/makeinvoice/makeinvoice', params: { invoice: id } }); } }, filters:{ verifyStatusFilter(value) { if (value === 0) { return ''; } else if(value === 1){ return '已开票'; } else if(value === 2){ return '未开票'; } else { return ''; } }, } }; </script> <style> /* #ifndef H5 */ page { height: 100%; background-color: #F6F6FF; } /* #endif */ </style> <style lang="scss" scoped> @import "./invoice.scss"; </style>