|
|
@@ -0,0 +1,173 @@
|
|
|
+<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.rows){
|
|
|
+ this.orderList[orderType.index].push(item);
|
|
|
+ }
|
|
|
+ console.log('this.list[orderType.index]',this.list[orderType.index]);
|
|
|
+ this.list[this.current].total = res.data.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: {
|
|
|
+ orderId: 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>
|
