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="'o-' + index">
								<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" v-if="typeCurrent.value === 'road'">
									<view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
									<!-- <view class="order-center-item">入场时间：{{ orderItem.inTime }}</view> -->
									<view class="order-center-item" v-if="orderItem.deviceType == 1">
										入场时间：{{ orderItem.inTime }}</view>
									<view class="order-center-item" v-else>开始计费：{{ orderItem.inTime }}</view>
									<template v-if="orderItem.deviceType == 1">
										<view class="order-center-item"
											v-if="orderItem.orderStatus == 1 && orderItem.outTime">
											出场时间：{{ `未出场` }}</view>
										<view class="order-center-item" v-if="orderItem.orderStatus !== 1">
											出场时间：{{ orderItem.outTime }}</view>
									</template>
									<template v-else>
										<view class="order-center-item"
											v-if="orderItem.orderStatus == 1 && orderItem.outTime">
											结束计费：{{ `未出场` }}</view>
										<view class="order-center-item" v-if="orderItem.orderStatus !== 1">
											结束计费：{{ orderItem.outTime }}</view>
									</template>
									<!-- <view class="order-center-item">
										停车时长：{{ orderItem.duration || 0 }}</view> -->
									<!-- <view class="order-center-item" v-if="orderItem.orderStatus !== 1">
										免费时长：{{ orderItem.freeDuration || 0 }}</view> -->
									<view class="order-center-item" v-if="orderItem.deviceType == 1">
										免费时长：{{ orderItem.freeDuration || 0 }}</view>
									<view class="order-center-item" v-if="orderItem.deviceType == 2">
										免费时长：0天0时15分0秒</view>
									<!-- <view class="order-center-item" v-if="orderItem.orderStatus !== 1">
										计费时长：{{ orderItem.calcDuration || 0 }}</view> -->
									<view class="order-center-item">
										计费时长：{{ orderItem.calcDuration || 0 }}</view>
									<view class="order-center-item">
										累计停车时长：{{ orderItem.duration || 0 }}</view>
									<view class="order-center-item" v-if="orderItem.orderStatus == 1">
										预计金额：
										<span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
									</view>
									<view class="order-center-item" v-else>
										应付金额：
										<span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
									</view>
									<view class="order-center-item"
										v-if="(orderItem.actualAmount || orderItem.actualAmount === 0) && orderItem.orderStatus !== 2 && orderItem.orderStatus !== 1">
										实缴金额：
										<span class="pay-amount">{{ orderItem.actualAmount || 0 }}</span>
									</view>
									<view class="order-center-item">泊位号：{{ orderItem.spaceName }}</view>
									<view class="order-center-item" v-if="Number(orderItem.deviceType) !== 1">
										车位锁设备号：{{ orderItem.deviceNo }}</view>
								</view>
								<!-- 停车场显示字段 -->
								<view class="order-center" v-if="typeCurrent.value === 'park'">
									<view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
									<view class="order-center-item">
										入场通道：{{ orderItem.inTime }}</view>
									<view class="order-center-item">
										入场时间：{{ orderItem.inTime }}</view>
									<view class="order-center-item">
										出场通道：{{ orderItem.inTime }}</view>
									<view class="order-center-item">
										出场时间：{{ orderItem.inTime }}</view>
									<view class="order-center-item">
										免费时长：{{ orderItem.freeDuration || 0 }}</view>
									<view class="order-center-item">
										计费时长：{{ orderItem.calcDuration || 0 }}</view>
									<view class="order-center-item">
										累计停车时长：{{ orderItem.duration || 0 }}</view>
									<view class="order-center-item">
										应付金额：
										<span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
									</view>
									<view class="order-center-item">
										实缴金额：
										<span class="pay-amount">{{ orderItem.actualAmount || 0 }}</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]" bg-color="#F6F6FF"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 停车场和路段切换 -->
		<view class="type-list">
			<view class="type-list-item" v-for="(item, index) in typeList" :key="index"
				:class="{'type-list-item-current':  typeCurrent.value === item.value}" @click="typeTabClick(item)">
				{{ item.label }}
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// 订单状态orderStatus: 1-停放中 2-出场中 3-欠费 4-完成
	export default {
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[]
				],
				list: [{
						index: 0,
						name: '全部',
						orderStatus	: null,
						pageNum: 1,
						total: null
					},
					{
						index: 1,
						name: '停放中',
						orderStatus	: 1,
						pageNum: 1,
						total: null
					},
					{
						index: 2,
						name: '欠费未缴',
						orderStatus	: 2,
						pageNum: 1,
						total: null
					},
					{
						index: 3,
						name: '已完成',
						orderStatus	: 4,
						pageNum: 1,
						total: null
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				// 停车类型
				typeList: [{
						label: '路段',
						value: 'road'
					},
					{
						label: '停车场',
						value: 'park'
					}
				],
				typeCurrent: {}
			}
		},
		onShow() {
			this.typeCurrent = this.typeList[0]
			// 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
				}
			}
		},
		onBackPress(e) {
			// 返回主页面tabBar
			uni.switchTab({
				url: "../../center/index"
			})
			// 此处一定要return为true，否则页面不会返回到指定路径
			return true;
		},
		methods: {
			reachBottom() {
				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) {
				const param = {
					pageNum: orderType.pageNum,
					orderStatus: orderType.orderStatus	
				}
				// 未出场: orderStatus	 = 1-停放中
				// 缴费中: orderStatus	 = 2-出场中  && payStatus = 2-支付中
				// 完成:   orderStatus	 = 4-完成
				this.$u.api.getOrderList(param)
					.then(res => {
						for (const item of res.data.pageInfo.rows) {
							this.orderList[orderType.index].push(item)
						}
						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')
						};
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error'
						})
					})

				this.loadStatus.splice(this.current, 1, 'loadmore')
			},
			// tab栏切换
			change(index) {
				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,
						type: this.typeCurrent.value
					}
				})
			},
			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
					})
				}
			},
			/**
			 * 类型切换
			 * @param {Object} item
			 */
			typeTabClick(item) {
				// this.typeCurrent = item
			}
		},
		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>