LabCenter/pages/laboratory/table.vue

<template>
	<view :style="{'padding-top':navHeight+ 'px'}" class="index u-skeleton">
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
		<header-nav>
			<view style="font-size:#fff ;font-weight: 550;font-size: 17px;display: inline-block; width:25px"
				@click="backList">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<picker @change="bindPickerChange" :value="value" :range="weekSelectlist" :range-key="'name'" style="display: inline-block;">
				<view style="font-size: #333333; font-weight: 550; font-size: 17px;display: inline-block;">
					第{{ week }}周
				</view>
			</picker>

		</header-nav>
		<view class="room-name">
			{{room_name}}
		</view>

		<view class="table">
			<u-tabs :list="roomList" :current="currentRoom" @change="change"></u-tabs>
			<view class="week">
				<view class="week-item">

				</view>
				<view class="week-item" v-for="(item,index) in weekList" :key='index'>
					<view class="">
						{{item.week_name}}
					</view>
					<view class="week-day">
						{{item.day}}
					</view>
				</view>
			</view>
			<view class="jie" v-for="(item,index) in jieList" :key='index'>
				<view class="jie-item">
					{{item.name}}
				</view>
				<view class="jie-item" v-for="(course,index1) in calendar[index]" :key='index1'>
					<!-- 课程存在时  有课且课程为正常课程-->
					<image src="../../static/image/stop.png" mode="" v-if="course.is_stop_lesson == true"
						class="tags_ting"></image>
					<view v-if="course.is_lesson && !course.is_open_appointment" style="height: 100%; with:100%">
						<!--  有课-->
						<view v-if="!course.is_migrate_lesson" class="course_3"
							@click="showDetail(course.lesson.id,course.is_stop_lesson,weekList[index1], index)">
							<view class="course-item" slot="reference">
								<view>
									{{course.lesson && course.lesson.lesson? course.lesson.lesson.name: '--'}}
								</view>
								<view>
									({{ course.lesson && course.lesson.teacher? course.lesson.teacher.name: '--'}})
								</view>
							</view>
						</view>
						<!-- 补课 -->
						<view v-if=" course.is_migrate_lesson" class="course_4"
							@click="showDetail(course.lesson.id,course.is_stop_lesson,weekList[index1], index)">
							<view class="course-item" slot="reference">
								<view>
									{{course.lesson && course.lesson.lesson? course.lesson.lesson.name: '--'}}
								</view>
								<view>
									({{course.lesson && course.lesson.teacher? course.lesson.teacher.name: '--'}})
								</view>
							</view>
						</view>
					</view>
					<!-- 主库有课开放预约 -->
					<view v-if="!course.is_lesson && course.is_open_appointment" style="height: 100%; with:100%">
						<view class="course_7"
							v-if="$transformAuth('200201') && course.open_appointment.admin_id!==user_id">
							<view class="course-item" slot="reference">
								<view>
									{{course.open_appointment? course.open_appointment.applicant_name: '--' }}
								</view>
								<view>
									({{course.open_appointment? course.open_appointment.department: '--'}})
								</view>
							</view>
						</view>
						<view class="course_5" v-else
							@click="openOrderDetail(course.open_appointment.id,course.is_stop_lesson,weekList[index1], index)">
							<view class="course-item" slot="reference">
								<view>
									{{course.open_appointment? course.open_appointment.applicant_name: '--' }}
								</view>
								<view>
									({{course.open_appointment? course.open_appointment.department: '--'}})
								</view>
							</view>
						</view>
					</view>
					<!-- 停课角标 -->
					<view
						v-if="course.is_stop_lesson == true && !course.is_open_appointment && !course.is_lesson && !course.is_migrate_lesson"
						@click="stop_detail(weekList[index1], index,1)" class="course_8">
						<image src="../../static/image/stop.png" mode="" class="tags_ting"></image>
					</view>
					<!-- 维护中 -->
					<view v-if="course.is_maintain" class="course_6">
						<view class="course-item" @click="repairDetail(course.is_maintain)">
							<view style="text-align: center">
								<view>维护中</view>
								<!-- <view>取消维护</view> -->
							</view>
						</view>
					</view>
					<view v-if="!course.is_lesson && !course.is_maintain" class="course">
						<view class="course-item">
							<!-- @click="orderRoom(item.day)" -->
							<view style="text-align: center"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="change-week">
				<view :class="week==1 ?'disable-buttom':'change-buttom'" @click="lastWeek">
					上一周
				</view>
				<view :class="week==maxWeek ?'disable-buttom':'change-buttom'" @click="nextWeek">
					下一周
				</view>
			</view>
			<!-- 状态提示 -->
			<view class="sort-top">
				<view class="sort_1 sort-item">
					<text class="dian"></text>
					开放预约
				</view>
				<view class="sort_2 sort-item">
					<text class="dian"></text>
					补课
				</view>
				<view class="sort_3 sort-item">
					<text class="dian"></text>
					有课
				</view>
				<view class="sort_4 sort-item">
					<text class="dian"></text>
					维护中
				</view>
			</view>
		</view>

		<!-- 课程详情 -->
		<view class="sel-prop" v-if="show" @click="closeSelsProp">
			<view class="sel-prop-content" @tap.stop.prevent>
				<u-tabs :list="totalCourse" count="type" :offset="[18,0]" v-if="totalCourse.length>1"
					:current="currentName" @change="changName()"></u-tabs>
				<view class="prop-title">
					{{detail.lesson ? detail.lesson.name:'--'}}
				</view>
				<view class="content-item">
					<view class="prop-label">
						授课老师：
					</view>
					<view class="prop-text">
						{{detail.teacher ? detail.teacher.name:'--'}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课实验室：
					</view>
					<view class="prop-text">
						{{room_name}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						授课方式：
					</view>
					<view class="prop-text">
						{{detail.teach_type_name ? detail.teach_type_name :'实验'}}/{{detail.group_name}}
					</view>
				</view>

				<view class="content-item">
					<view class="prop-label">
						上课人数：
					</view>
					<view class="prop-text">
						{{detail.student_nums}}人
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课班级：
					</view>
					<view class="prop-text">
						{{detail.grade ? detail.grade.name:'--'}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课时间：
					</view>
					<view class="prop-text">
						{{ detail.day || '--' }} · 第{{ detail.week || '--' }}周 ·
						{{detail.time_id ? detail.time_id.name : '--'}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课内容：
					</view>
					<view class="prop-text">
						{{ detail.teach_title || '--' }}
					</view>
				</view>
				<view class="pop-btn">

					<view style="background: #3665FF;color: #fff;" @click="show = false,totalCourse=[],currentName=0">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 开放预约 -->
		<view class="sel-prop" v-if="openOrderShow" @click="openOrderShow=false,currentName=0">
			<view class="sel-prop-content" @tap.stop.prevent>
				<u-tabs :list="totalCourse" count="type" :offset="[18,0]" v-if="totalCourse.length>1"
					:current="currentName" @change="changName()"></u-tabs>
				<!-- 开放预约 -->
				<view class="" v-if="currentName==0">
					<view class="prop-title">
						开放预约申请
					</view>
					<!-- <view class="over-scroll"> -->
					<!-- <scroll-view scroll-y="true" style="height: 200px;"> -->
					<view class="content-item">
						<view class="prop-label">
							申请人：
						</view>
						<view class="prop-text">
							{{ open_order_detail.applicant_name }}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							所属部门：
						</view>
						<view class="prop-text">
							{{ open_order_detail.department }}
						</view>
					</view>

					<view class="content-item">
						<view class="prop-label">
							申请实验室：
						</view>
						<view class="prop-text">
							{{room_name}}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							申请原因：
						</view>
						<view class="prop-text">
							{{ open_order_detail.use_need ? open_order_detail.use_need : '暂无' }}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							使用需求：
						</view>
						<view class="prop-text">
							{{ open_order_detail.use_reason }}
						</view>
					</view>
				</view>
				<!-- 停课 -->
				<view class="" v-else>
					<view class="prop-title">
						{{detail.lesson ? detail.lesson.name:'--'}}
					</view>
					<view class="content-item">
						<view class="prop-label">
							授课老师：
						</view>
						<view class="prop-text">
							{{detail.teacher ? detail.teacher.name:'--'}}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							上课实验室：
						</view>
						<view class="prop-text">
							{{room_name}}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							授课方式：
						</view>
						<view class="prop-text">
							{{detail.teach_type_name ? etail.teach_type_name :'实验'}}/{{detail.group_name}}
						</view>
					</view>

					<view class="content-item">
						<view class="prop-label">
							上课人数：
						</view>
						<view class="prop-text">
							{{detail.student_nums}}人
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							上课班级：
						</view>
						<view class="prop-text">
							{{detail.grade ? detail.grade.name:'--'}}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							上课时间：
						</view>
						<view class="prop-text">
							{{ detail.day || '--' }} · 第{{ detail.week || '--' }}周 ·
							{{detail.time_id ? detail.time_id.name : '--'}}
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label">
							上课内容：
						</view>
						<view class="prop-text">
							{{ detail.teach_title || '--' }}
						</view>
					</view>
				</view>
				<view class="pop-btn">
					<view style="background: #3665FF;color: #fff;"
						@click="openOrderShow = false,totalCourse=[],currentName=0">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 维护详情弹框 -->
		<u-popup v-model="repairShow" mode="center" border-radius="24" width="85%">
			<view class="prop-content">
				<image src="../../static/image/index/icon_6.png" mode="" class="prop-image"></image>
				<view class="prop-title">
					维护详情
				</view>
				<view class="content-item">
					<view class="prop-label">
						维护人：
					</view>
					<view class="prop-text">
						{{ repair_detail.admin ? repair_detail.admin.name : '--' }}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						维护实验室：
					</view>
					<view class="prop-text">
						{{room_name}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						维护时间：
					</view>
					<view class="prop-text">
						{{ repair_detail.day }}（第{{ repair_detail.week }}周 {{ repair_detail.week_index }}）
						{{ repair_detail.time ? repair_detail.time.name : '--' }}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						维护内容：
					</view>
					<view class="prop-text">
						<u-parse :html="repair_detail.body" v-if="repair_detail.body"></u-parse>
						<span v-else>暂无内容</span>
					</view>
				</view>
				<view class="prop-srue" @click="repairShow=false,currentName=0">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				show: false,
				showFalse: false,
				openOrderShow: false,
				repairShow: false,

				simpleShow: false,
				repair_detail: '',
				navHeight: app.globalData.navHeight,
				currentRoom: 0,
				open_order_detail: '', //开放预约详情
				detail: '', //课程详情
				list: [{
					id: 1,
					name: '停课'
				}, {
					id: 2,
					name: '调课'
				}],
				roomList: [],
				weekList: [],
				jieList: [],
				calendar: [],
				room_id: 18,
				week: 0,
				// 时间选择简版课表数据开始
				simple_weekList: [],
				simple_jieList: [],
				simple_calendar: [],
				simple_room_id: 18,
				simple_week: 0,
				simple_currentRoom: 0,
				//时间选择简版数据结束
				maxWeek: '',
				today: '', //今日日期
				selected: [], //已选择
				migrate_data: [],
				current_course: '', //当前课程
				type: '', //停调课类型、1停课，2调课
				body: '',
				courser_id: '', //课程id
				room_name: '', //上课实验室
				loading: true,
				currentName: '',
				totalCourse: [],
				weekSelectlist: [],
				value: ''
			}
		},

		onLoad(options) {
			console.log(options, 'opopopo')
			this.room_name = options.room_name
			this.room_id = options.id
			this.maxWeek = Number(this.vuex_term_weeks)
			// this.getRoomList()
			this.getTable()
			this.getWeeks()
			// this.getChangeTime()
		},
		onHide() {
			this.show = false
			this.showFalse = false
			this.openOrderShow = false
			this.repairShow = false
			this.simpleShow = false
		},
		methods: {
			bindPickerChange(e) {
				console.log(e.detail.value, '90')
				let index = e.detail.value
				this.value = index
				this.week = Number(index) + 1
				this.getTable()
			},
			//教学周列表
			getWeeks() {
				console.log(this.weeks, '-------------')
				let weeks = this.vuex_term_weeks
				for (let index = 1; index <= weeks; index++) {
					this.weekSelectlist.push({
						name: '第' + index + '周',
						value: index,
					})
				}
				// this.$set(this.queryForm, 'week', this.weekList[0].value)
			},
			changName(e) {
				console.log(e, 'ppppppppppp')
				this.currentName = e
				this.detail = this.totalCourse[e].detail
			},
			//返回上一页
			backList() {
				uni.navigateBack()
			},
			//匹配节次
			getTime(time) {
				var time1 = ''
				this.jieList.map((item) => {
					if (item.id == time) {
						time1 = item.name
					}
				})
				return time1
			},
			//判断课程是否过期
			checkOld(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ''))
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ''))
				if (nowDay > day2) {
					return true
				} else {
					return false
				}
			},
			//判断是否为当天日期
			checkToday(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ''))
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ''))
				if (nowDay == day2) {
					return true
				} else {
					return false
				}
			},
			//选择时间上一周
			simpleLastWeek() {
				this.simple_week--
				this.getChangeTime()
			},
			//选择时间下一周
			simpleNextWeek() {
				this.simple_week++
				this.getChangeTime()
			},
			//判断是否已选择
			checkIselect(week_index, time_id) {
				var status = false
				if (this.selected.length == 0) return false
				this.selected.map((item) => {
					if (
						this.simple_week == item.week &&
						this.simple_room_id == item.room_id &&
						week_index == item.week_index &&
						time_id == item.time_id
					) {

						status = true
					}
				})

				return status
			},
			//选择时间点
			//选择时间点
			selectTime(row, index1) {
				this.selected = []
				this.migrate_data = []
				let id =
					row.week_index.toString() +
					this.simple_jieList[index1].id.toString() +
					this.simple_room_id.toString()
				let index = false
				this.migrate_data.map((item) => {
					if (item.id == id) index = true
				})
				console.log(index, '000', id)
				if (!index) {
					let arr1 = [{
						id: id,
						week: row.week,
						day: row.day,
						week_index: row.week_index,
						time_id: this.simple_jieList[index1].id,
						time_name: this.simple_jieList[index1].name,
						room_id: this.simple_room_id,
						room_name: this.roomList[this.simple_currentRoom].name,
					}, ]
					this.migrate_data = this.migrate_data.concat(arr1)
					let arr = [{
						id: row.week_index.toString() +
							this.simple_jieList[index1].id.toString() +
							this.simple_room_id.toString(),
						time_id: this.simple_jieList[index1].id,
						week_index: row.week_index,
						week: row.week,
						room_id: this.simple_room_id,
					}, ]
					// this.selected = this.selected.concat(arr) //开放预约可多选

					this.selected = arr
					// this.$forceUpdate()
					// this.$set(this.selected, this.selected.concat(arr))
				} else {
					this.selected = this.selected.filter((item) => {
						return item.id !== id
					})
					this.migrate_data = this.migrate_data.filter((item) => {
						return item.id !== id
					})
				}
			},
			//选择时间切换实验室
			simpleChangeRoom(item) {
				this.simple_currentRoom = item
				this.simple_room_id = this.roomList[item].id
				this.getChangeTime()
			},
			//点击选择时间
			chaneTime() {
				this.simpleShow = true
				this.simple_room_id = this.room_id
				this.simple_week = this.week
				this.simple_currentRoom = this.currentRoom
				this.getChangeTime()
			},
			//取消选择时间
			cancelSelectTime() {
				this.selected = [],
					this.migrate_data = []
				this.simpleShow = false
			},
			//确定选择
			sureSelectTime() {
				this.simpleShow = false
			},
			//切换实验室
			change(item) {
				console.log('item', item);
				this.currentRoom = item
				this.room_id = this.roomList[item].id
				this.getTable()
			},
			// 上一周
			lastWeek() {
				console.log(this.week)
				if (this.week > 1) {
					this.week--
					this.getTable()
				}
			},
			// 下一周
			nextWeek() {
				if (this.week < this.maxWeek) {
					this.week++;
					this.getTable()
				}
			},
			radioGroupChange(e) {
				console.log(e)
			},
			radioChange(e) {
				//单选按钮事件

			},
			//点击查看课程详情
			showDetail(id, stop, item, index) {

				this.$u.get('/school/schedule/info/' + id).then(res => {
					this.detail = res.data
					this.current_course = {
						time_id: res.data.time_id.id,
						week_index: res.data.week_index,
						room_id: this.room_id,
						week: this.week,
					}
					this.courser_id = res.data.id

					this.totalCourse = [{
						name: res.data.lesson ? res.data.lesson.name : '未知',
						type: '',
						detail: res.data
					}]
					this.show = true
					if (stop) {
						this.stop_detail(item, index)
					}

				})
				console.log(item, index)


			},
			//停课详情

			stop_detail(item, index, type) {

				let weekIndex = item.week

				let params = {
					week_index: weekIndex,
					week: this.week,
					room_id: this.room_id,
					time_id: this.jieList[index].id,
				}
				this.$u.post('/school/schedule/history', params).then(res => {
					let data = res.data.list
					let arr = []
					data.map(item => {
						arr.push({
							name: item.lesson ? item.lesson.name : '未知',
							type: '停',
							detail: item
						})
					})
					this.totalCourse = this.totalCourse.concat(arr)
					if (type) {
						this.detail = data[0]
						this.show = true
					}

					console.log(this.totalCourse, 'totalCoursetotalCoursetotalCourse')

				})
			},
			closeSelsProp() {
				this.show = false
				this.totalCourse = []
				this.currentName = 0
			},
			//开放预约查看课程详情
			openOrderDetail(id, stop, item, index) {
				this.$u.get('/lab/open-appointment/info/' + id).then(res => {
					this.open_order_detail = res.data
					this.totalCourse = [{
						name: '开放预约申请',
						type: '',
						detail: res.data
					}]
					this.openOrderShow = true
					if (stop) {
						this.stop_detail(item, index)
					}
				})
			},
			//查看维护相亲
			repairDetail(id) {
				this.$u.get('/lab/maintain/info/' + id).then(res => {
					this.repair_detail = res.data
					this.repairShow = true
				})
			},
			//获取课表
			getTable() {
				this.$u.post('/school/schedule/calendar-cross', {
					// week: 11,
					// room_id: 16
					week: this.week,
					room_id: this.room_id
				}).then(res => {
					console.log(res)
					this.jieList = res.data.times;
					var head = res.data.headers;
					var xingqi = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
					for (var i = 0; i < head.length; i++) {
						head[i].week_name = xingqi[i];
						head[i].day = head[i].day.slice(5, 11).replace("-", "/");
						head[i].week = head[i].week;
					}
					this.weekList = head;
					this.calendar = res.data.calendar;
					this.week = res.data.week;
					this.value = res.data.week - 1
					this.today = res.data.day;
					this.loading = false;
				})
			},
			//获取实验室列表
			getRoomList() {
				this.$u.get('/school/room-select-options', {
					status: 1
				}).then(res => {
					this.roomList = res.data
					this.room_id = res.data[this.currentRoom].id
				})
			},
			//获取时间选择列表
			getChangeTime() {
				this.$u.post('/school/schedule/calendar-simple', {
					room_id: this.simple_room_id,
					// term_id: this.vuex_term_id,
					week: this.simple_week,
				}).then(res => {
					this.simple_jieList = res.data.times;
					var head = res.data.headers;
					var xingqi = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
					for (var i = 0; i < head.length; i++) {
						head[i].week = xingqi[i];
						head[i].day = head[i].day.slice(5, 11).replace("-", "/");
					}
					this.simple_weekList = head;
					this.simple_calendar = res.data.calendar
					this.simple_week = res.data.week
				})
			},
			//确定停调课
			sureHandle() {
				if (!this.type) {
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					})
					return
				}
				if (this.type == 2 && this.migrate_data.length == 0) {
					uni.showToast({
						title: '请选择调课时间',
						icon: 'none'
					})
					return
				}
				if (!this.body) {
					uni.showToast({
						title: '请输入停调课原因',
						icon: 'none'
					})
					return
				}
				let data = {
					type: this.type,
					body: this.body,
					id: this.detail.id,
					migrate_data: this.migrate_data[0]
				}
				this.$u.post('/school/schedule/change', data).then(res => {
					this.show = false
					this.showFalse = false
					this.handleClear()
					uni.showToast({
						title: '提交成功，请等待管理员审核!',
						icon: 'none'
					})
				})

			}, //取消停调可
			cancelHandle() {

				this.showFalse = false
				this.handleClear()
			},
			//清除表单信息
			handleClear() {
				this.selected = []
				this.migrate_data = []
				this.type = ''
				this.body = ''
			}
		},


	}
</script>

<style lang="scss" scoped>
	//弹框样式
	.prop-image {
		// position: absolute;
		// top: -50px;
		height: 68px;
		width: 90px;
		margin-top: -54px;
		position: fixed;
	}

	.prop-content {
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.prop-title {
			text-align: center;
			font-size: 18px;
			margin-bottom: 5px;
			font-weight: bold;
			color: #333333;
			margin-top: 30px;
		}

		.content-item {
			display: flex;
			color: #333333;
			margin-top: 8px;
			width: 100%;

			.prop-label {
				flex: 0 0 90px;
				font-size: 15px;
				font-weight: 550;
			}

			.prop-text {
				flex: 1;

				.change-time {
					display: inline-block;
					padding: 0 8px;
					line-height: 30px;
					height: 30px;
					font-size: 12px;
					color: #FFFFFF;
					background-color: #3665FF;
					border-radius: 5px;
				}

				.table-title {
					display: flex;
					border-left: solid 1px#b3b3b3;

					.title-item {
						flex: 1;
						padding: 5px 0;
						text-align: center;
						border-right: solid 1px #b3b3b3;
						border-bottom: solid 1px#b3b3b3;
					}
				}

				.table-title:first-child {
					background-color: #e3e3e3;
					border-top: solid 1px #b3b3b3;

				}
			}

			.prop-content {
				font-size: 15px;
			}
		}

		.prop-srue {
			width: 279px;
			height: 44px;
			background: #3665FF;
			text-align: center;
			margin-top: 30px;
			line-height: 44px;
			color: #FFFFFF;
			border-radius: 22px 22px 22px 22px;
			font-size: 16px;
			margin-bottom: 5px;
		}

		.pop-btn {
			margin-top: 40px;
			width: 84%;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			justify-content: center;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 130px;
				height: 44px;
				font-size: 16px;
				font-weight: bold;
				border-radius: 22px 22px 22px 22px;
				opacity: 1;
			}
		}

	}

	.room-name {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		background-color: #3665FF;
		padding: 10px 0;
	}

	.table {

		// background-color: #18B566;
		padding-bottom: 85px;

		.week {
			display: flex;
			padding: 8px;
			color: #333333;
			font-size: 12px;
			border-bottom: solid 1px #F2F2F2;
			border-top: solid 1px #F2F2F2;
			background-color: #FBFCFF;

			.week-item {
				flex: 1;
				text-align: center;

				.week-day {
					margin-top: 3px;
				}
			}
		}

		.jie {
			display: flex;
			text-align: center;
			min-height: 65px;


			.jie-item:first-child {
				background-color: #FBFCFF;
				border-right: dashed 1px #e4e4e4;
				// border: none;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.jie-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px dashed #F2F2F2;
				border-top: none;
				border-left: none;
				text-align: center;
				position: relative;
			}
		}

		.jie:nth-of-type(even) {
			background-color: #FBFCFF;
		}

	}

	.change-week {
		position: fixed;
		bottom: 60px;
		right: 0;
		display: flex;

		.change-buttom,
		.disable-buttom {
			padding: 7px 16px;
			background-color: #3665FF;
			color: #FFFFFF;
			margin-left: 10px;
			border-radius: 15px;
		}

		.disable-buttom {
			background-color: #dddcdc;
			color: #7c7b7b;
		}
	}

	.sort-top {
		position: fixed;
		bottom: 0;
		display: flex;
		height: 45px;
		line-height: 45px;
		background-color: #F2F2F2;
		justify-content: center;
		width: 100%;

		.sort-item,
		.sort_1,
		.sort_2,
		.sort_3,
		.sort_4 {
			// flex: 1;
			margin-right: 10px;

			.dian {
				display: inline-block;
				height: 10px;
				width: 10px;
				margin-right: 5px;
			}
		}

		.sort_1 {
			color: #30D143;

			.dian {
				background-color: #30D143;
			}
		}

		.sort_2 {
			color: #FE6F0F;

			.dian {
				background-color: #FE6F0F;
			}
		}

		.sort_3 {
			color: #3665FF;

			.dian {
				background-color: #3665FF;
			}
		}

		.sort_4 {
			color: #868686;

			.dian {
				background-color: #e5e5e5;
			}
		}
	}

	.pop-bj {
		width: 100vw;
		height: 100vh;
		background: #000000;
		opacity: 0.6;
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
	}

	.pop {
		width: 327px;
		height: 395px;
		background: #FFFFFF;
		border-radius: 12px;
		opacity: 1;
		position: fixed;
		transform: translate(-50%, -50%);
		background: white;
		z-index: 2;
		top: 56%;
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;

		u-radio-group {
			width: 150px;
			margin-left: 15px;
		}

		.txt1 {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			padding-top: 16px;
			padding-bottom: 8px;
		}

		.msg {
			display: flex;
			align-items: center;
			margin-top: 8px;
			width: 86%;
		}

		.txt2 {
			flex: 0 0 90px;
			font-size: 16px;
			color: #333;

			font-weight: bold;

		}

		.txt3 {
			font-size: 15px;
			color: #333;
			font-weight: 400;
		}

		textarea {
			width: 287px;
			height: 100px;
			background: #F8F8F8;
			border-radius: 4px;
			opacity: 1;
			padding-left: 12px;
			padding-top: 12px;
			box-sizing: border-box;
			font-size: 16px;
			margin-top: 4px;
		}

		.pop-btn {
			margin-top: 40px;
			width: 84%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 130px;
				height: 44px;
				font-size: 16px;
				font-weight: bold;
				border-radius: 22px 22px 22px 22px;
				opacity: 1;
			}
		}

	}

	.course-item {
		word-break: break-all;



	}

	.tags_ting {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0%;
		left: 0;
	}

	//有课
	.course_1,
	.course_2,
	.course_3,
	.course_4,
	.course_5,
	.course_6,
	.course_7,
	.course_8 {
		// background-color: #3665FF;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 10px 1px;
		width: 100%;
		font-size: 13px;


	}

	.course_2 {
		background-color: #FCBD12;
		color: #FFFFFF;
	}

	.course_3 {
		background-color: #3665FF;
		color: #FFFFFF;
	}

	.course_4 {
		background-color: #FE6F0F;
		color: #FFFFFF;
	}

	.course_5 {
		background-color: #30D143;
		color: #FFFFFF;
	}

	.course_7 {
		background-color: #77cf87;
		color: #FFFFFF;
	}

	.course_6 {
		background-color: #e5e5e5;
		color: #868686;
		justify-content: center;

	}


	.over-scroll {
		height: 200px;
		overflow-y: scroll !important;
		background-color: #00b315;
		width: 100%;
	}

	//时间选择弹框
	.change-time-prop {
		height: 100%;
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999999;

		.table_1 {
			.simple-week {
				text-align: right;
				padding: 10px;
				background-color: #fff;
				border-bottom: solid 1px #dddcdc;

				.change-buttom,
				.disable-buttom {
					display: inline-block;
					padding: 8px 30px;
					background-color: #3665FF;
					color: #FFFFFF;
					// margin-left: 10px;
					border-radius: 18px;
				}

				.week-text {
					display: inline-block;
					font-size: 15px;
					margin: 0 10px;
					font-weight: bold;
				}

				.disable-buttom {
					background-color: #dddcdc;
					color: #7c7b7b;
				}
			}

			.sure-buttom {
				text-align: center;
				margin-top: 20px;

				.cancel {
					display: inline-block;

					width: 150px;
					height: 45px;
					line-height: 45px;
					border: solid 1px #3665FF;
					color: #3665FF;
					border-radius: 22px;
				}

				.sure {
					display: inline-block;
					width: 150px;
					height: 45px;
					line-height: 45px;
					background-color: #3665FF;
					color: #FFFFFF;
					margin-left: 10px;
					border-radius: 22px;
				}
			}

			.table-border {
				display: flex;

				.week {
					display: flex;
					padding: 8px;
					color: #333333;
					font-size: 12px;
					border-bottom: solid 1px #F2F2F2;
					border-top: solid 1px #F2F2F2;
					background-color: #FBFCFF;

					.week-item {
						flex: 1;
						text-align: center;

						.week-day {
							margin-top: 3px;
						}
					}
				}

				.jie {
					text-align: center;
					background-color: #FBFCFF;
				}

				.jie-item:first-child {
					background-color: #FBFCFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.jie-item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px dashed #F2F2F2;
					border-right: none;
					border-top: none;
					height: 50px;
					border-left: none;
					text-align: center;
				}

				.kong {
					text-align: center;
					// background-color: #0077ff;
					color: #0077ff;
					cursor: pointer;
					// border-bottom: solid 1px #fff;
				}

				.course {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50px;
					border-left: none;
					text-align: center;
					width: 100%;
				}

				.current-course {
					text-align: center;
					background-color: #0077ff;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.xuan {
					text-align: center;
					background-color: #00b315;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.jie-item:last-child {
					border-bottom: none;
				}

				.day {
					flex: 1;
					display: flex;
					text-align: center;

					.day-item {
						flex: 1;

						.time {
							border-bottom: 1px dashed #F2F2F2;
							background-color: #FBFCFF;
						}

						.today {
							color: #df4d76;
						}

						background-color: #fff;
						border: 1px dashed #F2F2F2;
					}

					.day-item-1 {
						background-color: #cdced0;
					}

				}
			}
		}

	}

	.sel-prop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100vh;

		.sel-prop-content {
			margin: 0 auto;
			background-color: #fff;
			margin-top: 22vh;
			border-radius: 12px;
			padding: 15px;
			width: 90vw;

			.prop-title {
				text-align: center;
				font-size: 18px;
				margin-bottom: 5px;
				font-weight: bold;
				color: #333333;
				margin-top: 15px;
			}

			.content-item {
				display: flex;
				color: #333333;
				margin-top: 8px;
				width: 100%;

				.prop-label {
					flex: 0 0 90px;
					font-size: 15px;
					font-weight: 550;
				}

				.prop-text {
					flex: 1;

					.change-time {
						display: inline-block;
						padding: 0 8px;
						line-height: 30px;
						height: 30px;
						font-size: 12px;
						color: #FFFFFF;
						background-color: #3665FF;
						border-radius: 5px;
					}

					.table-title {
						display: flex;
						border-left: solid 1px#b3b3b3;

						.title-item {
							flex: 1;
							padding: 5px 0;
							text-align: center;
							border-right: solid 1px #b3b3b3;
							border-bottom: solid 1px#b3b3b3;
						}
					}

					.table-title:first-child {
						background-color: #e3e3e3;
						border-top: solid 1px #b3b3b3;

					}

					textarea {
						border: solid 1px #b3b3b3;
						width: auto;
						border-radius: 8px;
						padding: 8px;
						height: 100px;
					}
				}

				.prop-content {
					font-size: 15px;
				}
			}

			.prop-srue {
				width: 279px;
				height: 44px;
				background: #3665FF;
				text-align: center;
				margin-top: 30px;
				line-height: 44px;
				color: #FFFFFF;
				border-radius: 22px 22px 22px 22px;
				font-size: 16px;
				margin-bottom: 5px;
			}

			.pop-btn {
				width: 84%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				margin-top: 40px;

				view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 130px;
					height: 44px;
					font-size: 16px;
					font-weight: bold;
					border-radius: 22px 22px 22px 22px;
					opacity: 1;
				}
			}
		}
	}
</style>