jiangximiniprogramSchool/pages/recordEntry/operate/mySchedule/mySchedule.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="我的排课"></topNavbar>
		<view class="pad">
			<view class="step1">
				<view class="card">
					<view class="dateBox">
						<view class="month-row">
							<view class="month">2032.08</view>
							<view class="arrow">
								<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon>
							</view>
						</view>
						<view class="date_row">
							<view class="icon left">
								<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon>
							</view>
							<view class="dateArr">
								<view class="date" v-for="(item,index) in dateArr" :key="index" :class="{active: index==1}">
									<view class="week">{{ item.week }}</view>
									<view class="num">{{ item.num }}</view>
								</view>
							</view>
							<view class="icon right">
								<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon>
							</view>
						</view>
					</view>
				</view>
				
				<view class="card">
					<view class="timeCon">
						<view class="h2">上午</view>
						<view class="time_box">
							<view class="time_item" v-for="(item, index) in course" :key="index" @click="chooseCourse(item)" :class="{active: courseIds.indexOf(item.time)!=-1}">
								<view class="lab" v-if="item.status==0">未排课</view>
								<view class="lab" v-if="item.status==1">已约满</view>
								<view class="lab" v-if="item.status==2">已过期</view>
								<view class="lab" v-if="item.status==3">
									<view class="text">4/4</view>
									<view class="icon right">
										<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon>
									</view>
								</view>
								<view class="time">{{ item.time }}</view>
							</view>
						</view>
						<view class="h2">下午</view>
						<view class="time_box">
							<view class="time_item" v-for="(item, index) in course" :key="index" @click="chooseCourse(item)" :class="{active: courseIds.indexOf(item.time)!=-1}">
								<view class="lab" v-if="item.status==0">未排课</view>
								<view class="lab" v-if="item.status==1">已约满</view>
								<view class="lab" v-if="item.status==2">已过期</view>
								<view class="lab" v-if="item.status==3">
									<view class="text">4/4</view>
									<view class="icon right" @click="$goPage('/pages/recordEntry/operate/mySchedule/detail/detail')">
										<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon>
									</view>
								</view>
								<view class="time">{{ item.time }}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="btn_row" v-if="step==1">
					<view class="btnBorder btn" @click="changeStep(1)">管理排课计划</view>
					<view class="btnBg btn" @click="changeStep(2)">编辑排课信息</view>
				</view>
				
				<view class="step2" v-if="step==2">
					<view class="">
						<myCheckbox :checkData="checkData" @changeCheck="changeCheck"></myCheckbox>
					</view>
					<view class="btnBg" @click="showPopupFn">确认发布</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show=false"  mode="center" :round="16">
			<view>
				<mySchedulePopup @confirmPopup="confirmPopup"/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mySchedulePopup from './comp/mySchedulePopup'
	export default {
		components: { mySchedulePopup },
		data() {
			return {
				show: false,
				dateArr: [
					{week: '一', num: '08'},
					{week: '二', num: '09'},
					{week: '三', num: '10'},
					{week: '四', num: '11'},
					{week: '五', num: '12'},
				],
				checkData: [
					{name: '全选', id: 0},
					{name: '取消选择', id: 1},
				],
				step: 1,
				course: [
					{status: 0, time: '06:00-07:00'},
					{status: 1, time: '08:00-09:00'},
					{status: 2, time: '09:00-10:00'},
					{status: 3, time: '11:00-12:00'},
					{status: 0, time: '14:00-15:00'},
				],
				courseIds: []
			}
		},
		methods: {
			changeStep(val) {
				if(val==1) {
					this.$goPage('/pages/recordEntry/operate/mySchedule/plan/plan')
				}else {
					this.step = val
				}
				// this.$emit('changeStep', val)
			},
			changeCheck(val) {
				// console.log(val)
				if(val.indexOf(1)!=-1) {
					this.courseIds = []
					this.step = 1
				}else {
					let total = this.course.reduce((pre, item)=>{
						if(item.status==0) {
							pre.push(item.time)
						}
						return pre
					},[])
					console.log(total.length)
					console.log(this.courseIds.length)
					if(total.length==this.courseIds.length) {
						this.courseIds = []
						this.$emit('upDateCheck', [])
					}else {
						this.courseIds = total
					}
				}
			},
			chooseCourse(item) {
				if(this.step==1) return
				if(item.status!=0) return  //如果状态不为未排课
				let index = this.courseIds.indexOf(item.time)
				if(index!==-1) {
					this.courseIds.splice(index, 1)
				}else {
					this.courseIds.push(item.time)
				}
			},
			confirmPopup(val) {
				this.show = false
				
			},
			// 显示弹出框
			showPopupFn() {
				if(!this.courseIds.length) return this.$u.toast('请选择排课时间')
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btnBg {
			width: 310rpx;
		}
	}
	.card {
		width: 100%;
		margin-bottom: 24rpx;
		overflow: hidden;
	  .dateBox {
		  padding: 36rpx 0 40rpx 0;
	    .month-row {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 36rpx;
	      .month {
			font-size: 32rpx;
			color: $themC;
	      }
	
	      .arrow {
	       margin-left: 6rpx;
	      }
	    }
	
	    .date_row {
			width: 100%;
			height: 100rpx;
			position: relative;
	      .icon {
			width: 40rpx;
			height: 40rpx;
			background: rgba(51,51,51,0.18);
			backdrop-filter: blur(4rpx);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			&.left {
				left: 16rpx;
			}
			&.right {
				right: 16rpx;
			}
	      }
	
	      .dateArr {
			  display: flex;
			  padding: 0 70rpx;
			  justify-content: space-between;
	        .date {
				width: 74rpx;
				height: 100rpx;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #333;
				&.active {
					background: rgba(25,137,250,0.1);
					border: 2rpx solid #1989FA;
					color: $themC;
				}
	          .week {
	
	          }
	
	          .num {
				margin-top: 4rpx;
	          }
	        }
	      }
	    }
	  }
	}
	
	.card {
		.timeCon {
			padding: 0 24rpx 40rpx 24rpx;
		}
	  .h2 {
			line-height: 90rpx;
			font-weight: 500;
			color: #333;
	  }
	
	  .time_box {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  &::after {
			  content: "";
			  width: 30%;
		  }
	    .time_item {
			width: 30%;
			height: 120rpx;
			background: #F8F8F8;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
			color: #333;
			margin-bottom: 20rpx;
			&.active {
				background: rgba(25,137,250,0.1);
				border: 2rpx solid #1989FA;
				color: $themC;
			}
			&.disable {
				opacity: 0.5;
			}
	      .lab {
			font-size: 28rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			margin-bottom: 6rpx;
			.icon {
				margin-left: 10rpx;
				background: rgba(51,51,51,0.18);
				border-radius: 50%;
				padding: 6rpx;
			}
	      }
	
	      .time {
			font-size: 24rpx;
			margin-top: 4rpx;
	      }
	    }
	  }
	}
	
	.btn_row {
		display: flex;
		justify-content: space-between;
		.btn {
			width: 47%;
		}
	}
</style>