parking_h5/pages/center/order/order.vue

<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)" 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}}</view>
										<view class="addr">{{orderItem.roadName}}</view>
									</view>
									<!-- 
									    显示申请退款按钮满足一下条件:
										1.允许退款allowRefund等于1 并且
										2.退款状态auditStatus等于2 已驳回 或者
										3.退款状态auditStatus不能为空 并且不能等于0
									-->
									<view
										class="order-top-right apply-refund"
										v-show="orderItem.allowRefund == 1 &&
										(orderItem.auditStatus == 2 || !orderItem.auditStatus && orderItem.auditStatus != 0)"
										@click.stop="applyRefund(orderItem)"
										>申请退款</view>
									<!--
									    显示申请状态满足以下条件
										申请状态存在或者审核状态存在(由于0比较特殊,所以单独拉出来判断)
									-->
									<view
										class="order-top-right apply-refund"
										@click.stop="applyRefundDetails(orderItem)"
										v-if="orderItem.refundStatus ||
										orderItem.refundStatus == 0 ||
										orderItem.auditStatus ||
										orderItem.auditStatus == 0">
										{{orderItem | verifyRefundStatus}}
									</view>
									<view
										class="order-top-right"
										v-else
										:class="{'order-top-right-finished': orderItem.orderStatus == '4'}">
										{{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" v-if="orderItem.orderStatus !== 1">出场时间：{{orderItem.outTime}}</view>
									<view class="order-center-item" v-if="orderItem.orderStatus !== 1">停留时间：{{orderItem.duration}}</view>
									<view class="order-center-item">应付金额：<span class="pay-amount">{{orderItem.payAmount}}</span></view>
									<view class="order-center-item" v-if="orderItem.actualAmount">实际金额：<span class="pay-amount">{{orderItem.actualAmount}}</span></view>
								</view>
								<view class="order-bottom">
									<u-cell-item title="收费标准" @click.native.stop="jumpChargeStandard(orderItem)"></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},
				{index:3,name: '已完成',orderStatu:4,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]);
	},
	onShow(){
		// onShow 刷新数据
		this.list[this.current].pageNum = 1;
		this.orderList=[[], [], [], []];
		this.getOrderList(this.list[this.current]);
	},
	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(item){
			this.$u.route({
				url: 'pages/center/order/orderDetails/orderDetails',
				params: {
					orderId: item.id
				}
			});
		},
		jumpChargeStandard(item) {
			this.$u.route({
				url: 'pages/chargeStandard/chargeStandard',
				params: {
					roadNo: item.roadNo
				}
			});
		},
		// 申请退款
		applyRefund(item) {
			this.$u.route('pages/applyRefund/applyRefund', {
				orderId: item.orderId,
				payAmount: item.actualAmount
			})
		},
		/**
		 * 申请退款详情
		 * 只要申请退款状态等于1并且审批状态等于1跳转到退款完成详情页
		 * 否则跳转到退款过程页
		 * */
		applyRefundDetails(item) {
			if (item.refundStatus === 1 && item.auditStatus === 1) {
				this.$u.route('pages/applyRefundDetails/applyRefundAchieveDetails', {
					orderId: item.orderId
				})
			} else {
				this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
					orderId: item.orderId
				})
			}
		}
	},
	filters:{
		verifyStatusFilter(value) {
			if (value === 0) {
			  return '';
			} else if(value === 1){
				return '停放中';				
			} else if(value === 2){
				return '欠费未缴';				
			} else if(value === 4){
				return '已完成';		
			} else {
			  return '';
			}
		},
		verifyRefundStatus(item) {
			if (item.auditStatus === 0) {
				return '申请退款中';
			} else if (item.auditStatus === 1) {
				if (item.refundStatus === 0) {
					return '退款失败'
				} else if (item.refundStatus === 1) {
					return '退款成功'
				}
			} else if (item.auditStatus === 2) {
				return '已驳回'
			}
		}
	}
};
</script>

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

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