luoyangCoachApp/pages/recordEntry/operate/mySchedule/mySchedule.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="我的排课"></topNavbar>
		<view class="pad">
			<pickDateTimer @confirmPopup="confirmPopup" :step="step" @cancelChoose="step=1" ref="pickDateRef"/>
			<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>
		<u-popup :show="show" @close="show=false"  mode="center" :round="16">
			<view>
				<mySchedulePopup @confirmClass="confirmClass"/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mySchedulePopup from './comp/mySchedulePopup'
	import pickDateTimer from './comp/pickDateTimer/pickDateTimer'
	import { scheduleClassGetById, scheduleClassGet, scheduleClassCreateByTime } from '@/config/api.js'
	export default {
		components: { mySchedulePopup,pickDateTimer },
		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: []
			}
		},
		onLoad() {
			
		},
		methods: {
			changeStep(val) {
				if(val==1) {
					this.$goPage('/pages/recordEntry/operate/mySchedule/plan/plan')
				}else {
					let pickDateRef = this.$refs.pickDateRef
					if(!pickDateRef.timerArr.length||!pickDateRef.timerArr2.length) return this.$u.toast('没有排课计划，请添加排课计划')
					pickDateRef.radioVal = ''
					this.step = val
				}
				// this.$emit('changeStep', val)
			},
			// 根据时间段排课
			async confirmClass(val, obj) {
				this.show = false
				if(val==0) return
				obj.deptId = this.vuex_deptId
				obj.coachId = this.vuex_coachId
				const res = await scheduleClassCreateByTime(Object.assign(this.pickDate, obj))
				if(res.code==0)  this.$u.toast('发布排课成功')
				this.$refs.pickDateRef.courseIds = []
				// uni.$emit('refreshMySchedule')
				this.step = 1
				this.$refs.pickDateRef.scheduleClassGetFn()
			},
			// 显示弹出框
			confirmPopup(pickDate) {
				if(!pickDate.timeList.length) return this.$u.toast('请选择排课时间')
				this.pickDate = pickDate			
				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;
		padding-bottom: 40rpx;
		.btn {
			width: 47%;
		}
	}
</style>