JP-ChargeTeam51/pages/user/myReservation/myReservation.vue

<template>
	<view>
		<u-navbar title="我的预约">
			<view class="screen" @click="screenClick">筛选</view>
		</u-navbar>
		<view>
			<view v-if="screenShow" class="preference" :style="screenShow ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'"
				style="width: 100%;">
				<view class="content-s">
					<view class="preference_group">
						<view class="preference_group_item" :class="statusClass == index ? 'active' : ''" v-for="(item,index) in statusList" :key="item.id" @click="statusClick(index,item)">{{item.name}}</view>
					</view>
				</view>
			</view>
			<u-mask :show="screenShow" @click="screenShow = false" z-index="100"></u-mask>
		</view>
		<view class="carNone" v-if="appointmentList.length == 0">
			<img src="static/img/暂无数据-缺省页.png" alt="">
			<p>暂无预约</p>
		</view>
		<view class="reservation-items" v-for="(item,index) in appointmentList" :key="item.id" @click="gotoUrl('pages/user/myReservation/reservationListDetails?id='+item.id)">
			<view class="station-name ellipsis">
				{{item.stationName}}/{{item.deviceName}}
				<view class="toBe-confirmed btn" v-if="item.status == '0'">{{item.statusText}}</view>
				<view class="confirmed btn" v-if="item.status == '1'">{{item.statusText}}</view>
				<view class="canceled btn" v-if="item.status == '3'">{{item.statusText}}</view>
				<view class="have-expired btn" v-if="item.status == '9'">{{item.statusText}}</view>
				<view class="confirmed btn" v-if="item.status == '2'">{{item.statusText}}</view>
				<view class="refused btn" v-if="item.status == '4'">{{item.statusText}}</view>
				<view class="have-expired btn" v-if="item.status == '5'">已过期</view>
				<view class="have-expired btn" v-if="item.status == '6'">已过期</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						{{item.flowNo}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						{{item.typeText}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						{{item.reserveMinutes}}分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						{{item.endTime}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						{{item.estimateMinutes != null ? (item.estimateMinutes/60).toFixed(1)+'小时' : '0'}}
					</view>
				</view>
<!-- 				<u-alert-tips type="warning" v-if="item.status == '0'" :show-icon="true" :description="description"></u-alert-tips>
				<u-alert-tips type="warning" v-if="item.status == '1'" :show-icon="true" :description="description2"></u-alert-tips> -->
			</view>
			<view class="button" v-if="item.status == '0'">
				<u-button class="cancel" shape="circle" @click="refuseClick(item)">取消预约</u-button>
			</view>
			<view class="button" v-if="item.status == '1'">
				<u-button class="navigation" shape="circle" @click="gotoUrl('pages/searchPile/stationAndPile/stationDetailsMap?stationId='+item.stationId)">导航</u-button>
			</view>
			<view class="button" v-if="item.status == '2'">
				<u-button class="check" shape="circle" @click="gotoUrl('pages/user/myReservation/reservationListDetails?id='+item.id)">查看详情</u-button>
			</view>
			<!-- <view class="button" v-if="item.status == '3'">
				<u-button class="rebook" shape="circle" @click="remakeClick(item)">重新预约</u-button>
				<u-button class="canc" shape="circle">删除</u-button>
			</view> -->
			<!-- <view class="button" v-if="item.status == '9'">
				<u-button class="canc" shape="circle">删除</u-button>
			</view> -->
		</view>
		<u-divider  v-if="appointmentList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px;background-color: #F2F4F4;">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/apointment.js'
	
	import {
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	
	export default {
		data() {
			return {
				screenShow: false,
				navBarHeight:44,
				description: '等待桩主确认预约单，剩余时间04:59:59',
				description2: '后预约授权将超时，如超时授权自动取消。',
				statusList: [
					{id:"",name:"全部预约单"},
					{id:"0",name:"待确认"},
					{id:"1",name:"已预约"},
					{id:"2",name:"已完成"},
					{id:"3",name:"已取消"},
					{id:"4",name:"已拒绝"},
					{id:"9",name:"已过期"},
				],
				statusClass: '',
				pageIndex: 1,
				recordsTotal: 0,
				appointmentList: [],
				status: '',
			}
		},
		onShow() {
			this.getAppointmentList(true);
		},
		onReachBottom() {
			if (this.appointmentList.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			statusClick(index,item) {
				this.statusClass = index;
				this.screenShow = false;
				this.status = item.id;
				this.getAppointmentList(true);
			},
			screenClick() {
				this.screenShow = !this.screenShow;
			},
			getAppointmentList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.appointmentList = [];
					this.pageIndex = 1;
				}
				API.myAppointmentList({
					pageIndex: this.pageIndex,
					status: this.status
				}).then((res) => {
					uni.hideLoading();
					this.appointmentList = [
						...this.appointmentList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
					
					var list = res.data.data;
					for (let i = 0; i < list.length; i++) {
						if(list[i].status == '0') {
							
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getAppointmentList()
			},
			refuseClick(item) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.regChangeStatus({
					id: item.id,
					status: '3'
				}).then((res) => {
					uni.hideLoading();
					this.getAppointmentList(true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	.preference {
		background-color: #ffffff;
		left: 0rpx;
		position: absolute
	
	}
	.preference_group_item {
		padding: 15rpx;
		text-align: center;
		color: #777777;
	}
	.active {
		color: #00B962;
	}
	.preference_group {
		padding-bottom: 20rpx;
	}
	.content-s{
		height: 240px;
		overflow-y:scroll;
	}
	page {
		padding-bottom: 155px;
	}

	.screen {
		margin-left: 85.3%;
		color: rgba(119, 119, 119, 100);
		font-size: 12px
	}

	.btn {
		width: 60px;
		height: 24px;
		line-height: 20px;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 100);
		font-size: 14px;
		text-align: center;
		float: right;
		margin-right: 24px;
		margin-top: 12px;
	}

	// 待确认按钮
	.toBe-confirmed {

		color: rgba(78, 141, 246, 100);
		border: 1px solid rgba(78, 141, 246, 100);

	}

	// 已确认按钮
	.confirmed {
		border: 1px solid rgba(0, 185, 98, 100);
		color: rgba(0, 185, 98, 100);

	}

	// 已取消按钮
	.canceled {
		border: 1px solid rgba(153, 153, 153, 100);
		color: rgba(153, 153, 153, 100);
		;
	}

	// 已过期按钮
	.have-expired {
		color: rgba(162, 169, 181, 100);
		border: 1px solid rgba(162, 169, 181, 100);
	}

	// 已拒绝
	.refused {
		color: rgba(255, 79, 63, 100);
		border: 1px solid rgba(255, 79, 63, 100);
	}

	.reservation-items {
		width: 100%;
		background-color: #fff;
		padding-left: 14px;
		margin-bottom: 12px;

		.station-name {
			line-height: 48px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px
		}
		.ellipsis{
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.details-items {
			border: 1px solid rgba(238, 242, 240, 100);
			border-left: none;
			padding-bottom: 13px;

			.items {
				display: flex;
				justify-content: space-between;
				padding: 12px 14px 0px 0;
				line-height: 20px;
			}

		}

		/deep/.u-alert-tips--bg--warning-light {
			background-color: #fff !important;
			border: none;
			margin-top: 12px;
			padding: 8px 0;

			.u-alert-desc {
				color: #ff7300;
			}
		}

		.button {
			height: 56px;
			padding: 12px 0;

			/deep/.u-btn {
				width: 100px;
				height: 32px;
				line-height: 23px;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(153, 153, 153, 100);
				font-size: 16px;
				text-align: center;
				float: right;
				margin-right: 16px;
			}

			.navigation,
			.start {

				color: rgba(0, 185, 98, 100);

			}

			.check {
				color: rgba(153, 153, 153, 100);
			}

			.canc {
				color: rgba(153, 153, 153, 100);
			}

			.rebook {
				color: rgba(0, 185, 98, 100);
			}
		}
	}
</style>