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

<template>
	<view>
		<ujp-navbar title="预约充电">
			
		</ujp-navbar>
		
		<view class="carNone" v-if="appointmentList.length == 0">
			<img src="@/assets/static/img/暂无数据-缺省页.png" alt="">
			<p>暂无预约</p>
		</view>
		<view class="reservation-items" v-for="(item,index) in appointmentList" :key="item.id" >
			<view class="station-name ellipsis">
				{{item.stationName}}/{{item.deviceName}}
				<view class=" btn" :class="{
					'toBe-confirmed':item.status==0,
						'confirmed':item.status==1,
						'have-expired':item.status==2
				}" >{{item.statusN}}</view>
				
			</view>
			<view class="details-items">
				
				<view class="items">
					<view class="items-name">
						预约启动时间
					</view>
					<view class="items-content">
						{{item.startTime}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						创建时间
					</view>
					<view class="items-content">
						{{item.createTime}}
					</view>
				</view>
				<view class="items" v-if="item.status==2">
					<view class="items-name">
						失败原因
					</view>
					<view class="items-content">
						{{item.remark}}
					</view>
				</view>
			</view>
			<view class="button" v-if="item.status == '0'">
				<u-button class="cancel" shape="circle" @click="refuseClick(item,item.status)">取消预约</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,
				statusList: [
					{id:"",name:"全部预约单"},
					{id:"1",name:"已确认"},
					{id:"0",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.timingList({
					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()
			},
			confirmrefuse(item){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deleteTiming({
					id: item.id,
					status: '3'
				}).then((res) => {
					uni.hideLoading();
					this.getAppointmentList(true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			refuseClick(item,status) {
				uni.showModal({
					title:"提示",
					content: "请确认是否取消预约充电",
				
					success: (res1) => {
						if (res1.confirm) {
								this.confirmrefuse(item)
						} else if (res1.cancel) {
							//('用户点击取消');
						}
					}
				})
				
				
			},
		}
	}
</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: fixed
	
	}
	.preference_group_item {
		padding: 15rpx;
		text-align: center;
		color: #777777;
	}
	.active {
		color: #00B962;
		font-size: 18px;
	}
	.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;
			}

		}

		::v-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;

			::v-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>