zhxy-desk/components/courseForm.vue

<template>
	<view class="course-form">
		<view class="course-form-item">
			<view class="course-form-item-left">
				申请课时
			</view>
			<view class="course-form-item-right">
				第十周周一第一节课
			</view>
		</view>
		<!-- <view @click="openPopTea" class="course-form-item">
			<view class="course-form-item-left">
				调换老师
			</view>
			<view class="course-form-item-right">
				{{teacher ==  ''?'请选择':teacher}}
			</view>
		</view> -->
		<view @click="openPopDate" class="course-form-item">
			<view class="course-form-item-left">
				调换时间
			</view>
			<view class="course-form-item-right">
				{{date ==  ''?'请选择':date}}
			</view>
		</view>

		<view class="course-form-btn">
			<view @click="clearBtn" style="margin-right: 16rpx;" class="course-form-btn-content">
				关闭
			</view>
			<view @click="submit" style="margin-left: 16rpx;background-color: #05CCA1;color: #fff;"
				class="course-form-btn-content">
				提交
			</view>
		</view>

		<uni-popup ref="tea" background-color="transparent">
			<view class="popup-content" style="border-radius: 0rpx;width: 770rpx;"
				:class="{ 'popup-height': type === 'left' ||type === 'right' }">
				<SelectClass :active="selectActive" @itemClick='selectItemClick' :list='selectList' />
			</view>
		</uni-popup>
		<uni-popup ref="course" background-color="transparent">
			<view class="popup-content" style="border-radius: 0rpx;width: 770rpx;"
				:class="{ 'popup-height': type === 'left' ||type === 'right' }">

				<view class="select-course">
					<view style="font-size: 32rpx;" class="select-course-title">
						<view class="">
							本周 <uni-icons type="right" size="14"></uni-icons>
						</view>
						<view style="font-size: 28rpx;" class="">
							可申请时间
						</view>
					</view>
					<view class="">
						<CourseList @itemClick="itemClick" :list='CourseInfo' />
					</view>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SelectClass from '@/components/selectClass.vue'
	import CourseList from '@/components/CourseList.vue'
	export default {
		components: {
			SelectClass,
			CourseList
		},
		props: {

		},
		data() {
			return {
				teacher: '',
				date: '',
				type: '',
				selectActive: 0,
				selectList: [{
					class_name: '无尘',
					id: 0
				}, {
					class_name: '沈秒',
					id: 1
				}],
				CourseInfo: [{
					arr: [{
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, ]
				}, {
					arr: [{
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, ]
				}, {
					arr: [{
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, ]
				}, {
					arr: [{
						class: '第一节课',
						type: 1,
					}, {
						class: '第一节课',
						type: 2,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, {
						class: '第一节课',
						type: 0,
					}, ]
				}]
			};
		},
		methods: {
			clearBtn() {
				this.$emit('clear')
			},
			openPopTea() {
				this.type = 'bottom'
				this.$refs.tea.open('bottom')
			},
			selectItemClick(item) {
				this.selectActive = item.id
				this.teacher = item.class_name
				this.$refs.tea.close()
			},
			openPopDate() {
				this.type = 'bottom'
				this.$refs.course.open('bottom')
			},
			itemClick(item) {

				this.date = item.class
				this.$refs.course.close()
			},
			submit() {
				if (this.teacher == '') {
					uni.showToast({
						title: '请选择教师',
						'icon': 'none',
						duration: 2000
					});
					return
				}
				if (this.date == '') {
					uni.showToast({
						title: '请选择调换时间',
						'icon': 'none',
						duration: 2000
					});
					return
				}

			}
		},
		computed: {


		},
	}
</script>

<style lang="scss" scoped>
	.select-course-title {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #f2f2f2;
		margin-bottom: 32rpx;
	}

	.select-course {
		padding: 32rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.course-form {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx;

		.course-form-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #f2f2f2;

			.course-form-item-right {
				color: #999;
			}
		}
	}

	.course-form-btn {
		display: flex;
		margin-top: 32rpx;

		.course-form-btn-content {
			flex: 1;
			text-align: center;
			height: 72rpx;
			border-radius: 36rpx;
			line-height: 72rpx;
			border: 1px solid #f2f2f2;
			font-size: 32rpx;
			color: #999;
		}
	}
</style>