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

<template>
	<view>
		<u-navbar title="我的预约">
			<view class="screen">筛选</view>
		</u-navbar>
		<view class="reservation-items">
			<view class="station-name">
				荆鹏软件园充电站/1号桩
				<view class="toBe-confirmed btn">
					待确认
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						0000111122223333
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						30分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						6小时
					</view>
				</view>
				<u-alert-tips type="warning" :show-icon="true" :description="description"></u-alert-tips>
			</view>
			<view class="button">
				<u-button class="cancel" shape="circle">取消预约</u-button>

			</view>
		</view>

		<view class="reservation-items">
			<view class="station-name">
				荆鹏软件园充电站/1号桩
				<view class="confirmed btn">
					已确认
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						0000111122223333
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						30分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						6小时
					</view>
				</view>
				<u-alert-tips type="warning" :show-icon="true" :description="description2"></u-alert-tips>
			</view>
			<view class="button">

				<u-button class="start" shape="circle">开始充电</u-button>
				<u-button class="navigation" shape="circle">导航</u-button>
			</view>
		</view>



		<view class="reservation-items">
			<view class="station-name">
				荆鹏软件园充电站/1号桩
				<view class="confirmed btn">
					已完成
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						0000111122223333
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						30分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						6小时
					</view>
				</view>
				<u-alert-tips type="warning" :show-icon="true" :description="description2"></u-alert-tips>
			</view>
			<view class="button">

				<u-button class="check" shape="circle">查看详情</u-button>
			</view>
		</view>


		<view class="reservation-items">
			<view class="station-name">
				荆鹏软件园充电站/1号桩
				<view class="canceled btn">
					已取消
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						0000111122223333
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						30分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						6小时
					</view>
				</view>
				
				

			</view>
			<view class="button">
                 <u-button class="rebook" shape="circle">重新预约</u-button>
				<u-button class="canc" shape="circle">删除</u-button>
			</view>
		</view>
		
		<view class="reservation-items">
			<view class="station-name">
				荆鹏软件园充电站/1号桩
				<view class="have-expired btn">
					已过期
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						0000111122223333
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						30分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						6小时
					</view>
				</view>
				
				
		
			</view>
			<view class="button">
				<u-button class="canc" shape="circle">删除</u-button>
			</view>
		</view>
		
		<view class="reservation-items">
			<view class="station-name">
				荆鹏软件园充电站/1号桩
				<view class="refused btn">
					已拒绝
				</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预约单号
					</view>
					<view class="items-content">
						0000111122223333
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电类型
					</view>
					<view class="items-content">
						交流充电桩
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约预留时长
					</view>
					<view class="items-content">
						30分钟
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预留截至时间
					</view>
					<view class="items-content">
						2022-05-31 09:30:00
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						预约充电时长
					</view>
					<view class="items-content">
						6小时
					</view>
				</view>
				
				
		
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				description: '等待桩主确认预约单，剩余时间04:59:59',
				description2: '25分19秒后预约授权将超时，如超时授权自动取消。'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	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
		}

		.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>