zc_saas_h5/pages2/appointment/order.vue

<template>
	<view class="safeArea">
		<view class="appointment">
			<view class="appointmentItem">
				<view class="title">考试地点：</view>
				<view class="place" @click="showAddress">
					<view class="name">{{addressName}}</view>
					<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
				</view>
			</view>
			<view class="appointmentItem">
				<view class="title">考试时间：</view>
				<view class="main">
					<view v-for="(item,index) in list" class="item" :key="index" @click="choItem(index)">
						<view class="checkbox"><u-checkbox v-if="item.status===1" v-model="item.checked" shape="circle"></u-checkbox></view>
						<view class="box">
							<view :class="['time',{'active':item.checked},{'no':item.status!==1}]">{{item.time}}</view>
							<view class="statusInfo" v-if="item.status !==1">
								<template v-if="item.status===2">预约名额已满</template>
								<template v-if="item.status===3">此时段您已经有其他考试预约</template>
							</view>
						</view>
						<view class="num">已报：{{item.appoint}}/{{item.total}}</view>
					</view>
				</view>
			</view>
			<view class="btnMain">
				<view class="return">上一步</view>
				<view class="sure" @click="sureOppoint">确定预约</view>
			</view>
		</view>
		<!-- 弹框-->
		<u-popup v-model="address_show" mode="bottom" class="addModel">
			<view class="tipBox safeArea">
				<view class="line"></view>
				<view class="title">温馨提示</view>
				<u-line color="#EEEEEE" />
				<scroll-view class="addressList" :scroll-y="true">
					<view class="item" v-for="(item,index) in addressList" :key="index" @click="choAddress(index)">
						<u-checkbox class="checkbox" v-model="item.checked" shape="circle"></u-checkbox>
						<view :class="['address',{'active': item.checked}]">{{item.address}}</view>
					</view>
				</scroll-view>
				<u-line color="#EEEEEE" />
				<view class="btn" @click="sureAddress">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			address_show: false,
			addressName: '广州市天可区燕岭路建设大厦3楼',
			addressList:[{checked:true,address: '广州市天可区燕岭路建设大厦3楼'},{checked:false,address: '广州市海珠区广州塔3楼'},{checked:false,address: '深圳市企鹅大厦附近的写字楼'}],
			list: [{
					time: '2021/10/23  10:00 ~ 11:00',
					total: 100,
					appoint: 100,
					checked: true,
					status: 1, // 1:可报 2：预约名额已满 3：此时段您已经有其他考试预约
				},
				{
					time: '2021/10/23  10:00 ~ 11:00',
					total: 100,
					appoint: 20,
					status: 2,
				},
				{
					time: '2021/10/23  10:00 ~ 11:00',
					total: 100,
					appoint: 20,
					status: 3
				},
				{
					time: '2021/10/23  10:00 ~ 11:00',
					total: 100,
					appoint: 20,
					status: 1
				}
			]
		};
	},
	onLoad(option) {},
	methods: {
		showAddress(){
			this.address_show = true
		},
		choAddress(index){
			this.addressList.forEach((item,idx)=>{
				item.checked = false
				this.$set(item, 'checked',false)
				if(idx === index){
					this.$set(item, 'checked',true)
				}
			})
			console.log(this.addressList)
		},
		sureAddress(){
			const index = this.addressList.findIndex(item => item.checked)
			this.addressName = this.addressList[index].address
			this.address_show = false
		},
		choItem(index){
			const item = this.list[index]
			if(item.status!==1){
				return
			}
			this.list.forEach((item,idx)=>{
				item.checked = false
				if(idx === index){
					item.checked = true
				}
			})
		},
		sureOppoint(){
			this.$navTo.togo('/pages2/order/confirm_list');
		}
	},

};
</script>
<style >
page{
	background-color: #EAEEF1;
}
.addModel .u-drawer-bottom{
	box-shadow: 0px 0px 16px 4px rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0px 0px;
}
</style>
<style scoped lang="scss">
.appointment{
	padding:0 8rpx;
	.appointmentItem{
		margin: 24rpx 0 40rpx;
		.title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 1;
			margin-bottom: 16rpx;
			padding-left: 24rpx;
		}
		.place{
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
		}
	}
	.main{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 16rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			.statusInfo{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF3B30;
				padding-left:24rpx;
			}
			.checkbox {
				width:32rpx;
				height:32rpx;
				display: flex;
				align-items: center;
			}
			.time{
				width: 430rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #F5F5F5;
				border: 2rpx solid #F5F5F5;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				text-align: center;
				color: #333333;
				margin: 0 18rpx 0 8rpx;
				&.active{
					background: #EBF5FF;
					border: 2px solid #007AFF;
				}
				&.no{
					background: #FFDDDB;
					border: 2px solid #FFDDDB;
				}
			}
		}
	}
	.btnMain{
		display: flex;
		justify-content: center;
		text-align: center;
		.return{
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #F5F5F5;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #007AFF;
		}
		.sure{
			width: 438rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #007AFF;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			margin-left:24rpx;
		}
	}
}
.tipBox{
	width: 100%;
	font-family: PingFang SC;
	.line{
		width: 80rpx;
		height: 8rpx;
		background: #999999;
		border-radius: 4rpx;
		margin: 8rpx auto;
	}
	.title{
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 15rpx 0;
	}
	.main{
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
		line-height: 48rpx;
		margin-bottom: 40rpx;
	}
	.addressList{
		height: 500rpx;
		.item{
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			.checkbox{
				width:32rpx;
				height:32rpx;
				display: flex;
				align-items: center;
				margin-right: 8rpx;
			}
			.address{
				width: 654rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding: 0 24rpx;
				&.active{
					background: #EBF5FF;
					border: 2rpx solid #007AFF;
				}
			}
		}
	}
	.btn{
		width: 200rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: linear-gradient(0deg, #015EEA, #00C0FA);
		border-radius: 32rpx;
		margin: 17rpx auto;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
	}
}
</style>