P003-WX-HomeTeacher/education_uni/subpkg/teacher/course/teacher_course_add.vue

<template>
	<view class="course-add-container" style="background-color: #F0F0F0;">
		<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px" :rules="rules" labelPosition="top">
			<uni-forms-item label="授课科目:" required>
				<uni-data-picker placeholder="选择授课" popup-title="课程大纲-具体课程" v-model="baseFormData.subject" :clearIcon="false" :localdata="courseTree">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="授课方式:" name="mode" required>
				<uni-data-checkbox v-model="baseFormData.mode" :localdata="modes" />
			</uni-forms-item>
			<uni-forms-item label="授课时间" required>
			</uni-forms-item>
			<view class="tr-container">
				<view class="tr_1">
					<text class="th_0" decode="true">&ensp;&ensp;&ensp;&ensp;</text>
					<text class="th_1">周一</text>
					<text class="th_1">周二</text>
					<text class="th_1">周三</text>
					<text class="th_1">周四</text>
					<text class="th_1">周五</text>
					<text class="th_1">周六</text>
					<text class="th_1">周日</text>
				</view>
				<view class="tr_2">
					<checkbox-group @change="chechboxChangeAM">
						<view class="th2_0">上午</view>
						<label v-for="item in timeAM" :key="item.value">
							<checkbox class="th2_1" :value="item.value" :checked="item.checked"></checkbox>
						</label>
					</checkbox-group>
				</view>
				<view class="tr_2">
					<checkbox-group @change="chechboxChangePM">
						<view class="th2_0">下午</view>
						<label v-for="item in timePM" :key="item.value">
						<checkbox class="th2_1" :value="item.value" :checked="item.checked"></checkbox>
						</label>
					</checkbox-group>
				</view>
				<view class="tr_2">
					<checkbox-group @change="chechboxChangeEvening">
						<view class="th2_0">晚上</view>
						<label v-for="item in timeEvening" :key="item.value">
						<checkbox class="th2_1" :value="item.value" :checked="item.checked"></checkbox>
						</label>
					</checkbox-group>
				</view>
			</view>
			<uni-forms-item label="教龄:" name="teachAge" required>
				<uni-number-box v-model="baseFormData.teachAge" :min="1" ></uni-number-box>
			</uni-forms-item>
			<uni-forms-item label="教员位置:" name="location" required>
				<uni-easyinput type="text" v-model="baseFormData.location" @focus="getLocation" maxlength="250" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="成功经验:" name="experience" required>
				<uni-easyinput type="textarea" v-model="baseFormData.experience" maxlength="250" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="自我介绍:" name="introduce" required>
				<uni-easyinput type="textarea" v-model="baseFormData.introduce" maxlength="250" trim="both" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button class="submitBtn" type="primary"  @click="submit('baseForm')" :disabled="addflag">提交发布</button>
		</view>
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" :confirmText="confirmText" title="温馨提示" :content="authentication" @close="dialogClose" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		computed: {
			...mapState('m_user', ['authentication'])
		},
		data() {
			return {
				addflag: false,
				courseWeekday: [],
				introduce: '',
				courseAM: [],
				coursePM: [],
				courseEV: [],
				confirmText: '',
				// 表单数据
				baseFormData: {
					subject: '',
					mode: [],
					teachTime: [],
					teachAge: 1,
					location: '',
					experience: '',
					introduce: '',
					subjectBig: ''
				},
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1'
							}
						]
					}
				],
				// 单选授课方式数据源
				modes: [{
					text: '教员上门',
					value: '教员上门'
				}, {
					text: '学员上门',
					value: '学员上门'
				}, {
					text: '线上辅导',
					value: '线上辅导'
				}],
				// 上课时间
				// 上午
				timeAM: [{
						value: 'A1',
						name: '1',
						checked: false
						
					},
					{
						name: '2',
						value: 'A2',
						checked: false
					},
					{
						name: '3',
						value: 'A3',
						checked: false
					},
					{
						name: '4',
						value: 'A4',
						checked: false
					},
					{
						name: '5',
						value: 'A5',
						checked: false
					},
					{
						name: '6',
						value: 'A6',
						checked: false
					},
					{
						name: '7',
						value: 'A7',
						checked: false
					}
				],
				// 下午
				timePM: [{
						value: 'P1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'P2',
						checked: false
					},
					{
						name: '3',
						value: 'P3',
						checked: false
					},
					{
						name: '4',
						value: 'P4',
						checked: false
					},
					{
						name: '5',
						value: 'P5',
						checked: false
					},
					{
						name: '6',
						value: 'P6',
						checked: false
					},
					{
						name: '7',
						value: 'P7',
						checked: false
					}
				],
				// 晚上
				timeEvening: [{
						name: '1',
						value: 'E1',
						checked: false
					},
					{
						name: '2',
						value: 'E2',
						checked: false
					},
					{
						name: '3',
						value: 'E3',
						checked: false
					},
					{
						name: '4',
						value: 'E4',
						checked: false
					},
					{
						name: '5',
						value: 'E5',
						checked: false
					},
					{
						name: '6',
						value: 'E6',
						checked: false
					},
					{
						name: '7',
						value: 'E7',
						checked: false
					}
				],
				rules: {
					subject: {
						rules: [{
							required: true,
							errorMessage: '授课科目不能为空',
						}]
					},
					mode: {
						rules: [{
							required: true,
							errorMessage: '授课方式不能为空',
						}]
					},
					location: {
						rules: [{
							required: true,
							errorMessage: '地理位置不能为空',
						}]
					},
					introduce: {
						rules: [{
							required: true,
							errorMessage: '自我介绍不能为空',
						}],
					},
					teachTime: {
						rules: [{
							required: true,
							errorMessage: '授课时间不能为空',
						}]
					},
					experience: {
						rules: [{
							required: true,
							errorMessage: '成功经验不能为空',
						}]
					},
				}
			};
		},
		onLoad(option) {
			this.getPriceAndTree(),
			this.getPersonAuthorize()
			if (option.item !== undefined) {
				let item = JSON.parse(decodeURIComponent(option.item))
				this.formatCourse(item)
			}
		},
		methods: {
			...mapMutations('m_user', ['updateAuthentication']),
			// 格式化传递过来的course信息
			formatCourse(item) {
				
				const arr = item.subject.split("/")
				this.baseFormData.subject = arr[1]
				this.baseFormData.subjectBig = arr[0]
				
				this.baseFormData.mode = item.mode
				this.baseFormData.teachAge = item.teachAge
				this.baseFormData.location = item.location
				this.baseFormData.locationAl = item.locationAl
				this.baseFormData.experience = item.experience
				this.baseFormData.introduce = item.introduce
				this.courseWeekday = item.teachTime.split(",")
				this.baseFormData.teachTime = this.courseWeekday
				
				for (let i = 0; i < this.courseWeekday.length; i++) {
					for (let x = 0; x < this.timeAM.length; x++) {
						if (this.courseWeekday[i] == this.timeAM[x].value) {
							this.timeAM[x].checked = true
							this.courseAM.push(this.courseWeekday[i])
						}
					}
					for (let y = 0; y < this.timePM.length; y++) {
						if (this.courseWeekday[i] == this.timePM[y].value) {
							this.timePM[y].checked = true
							this.coursePM.push(this.courseWeekday[i])
						}
					}
					for (let z = 0; z < this.timeEvening.length; z++) {
						if (this.courseWeekday[i] == this.timeEvening[z].value) {
							this.timeEvening[z].checked = true
							this.courseEV.push(this.courseWeekday[i])
						}
					}
				}
				if (this.courseAM.length > 0) {
					this.courseAM.push(this.courseAM.join().split(','))
				}
				if (this.coursePM.length > 0) {
					this.coursePM.push(this.coursePM.join().split(','))
				}
				if (this.courseEV.length > 0) {
					this.courseEV.push(this.courseEV.join().split(','))
				}
			},
			// 获取认证信息
			async getPersonAuthorize() {
				const { data: result } = await uni.$http.get('/education/teacher-certifications/findVerifyStatus')
				const auth = result.message
				this.updateAuthentication(auth)
				if (auth === '审核中') {
					this.confirmText = '请耐心等待'
					this.$refs.alertDialog.open()
				} else if (auth !== '已通过') {
					this.confirmText = '去认证'
					this.$refs.alertDialog.open()
				}
			},

			// 取消按钮
			dialogClose() {
				this.$refs.alertDialog.close()
				uni.navigateBack()
			},
			// 确定按钮
			dialogConfirm() {
				this.$refs.alertDialog.close()
				if (this.authentication === '审核中') {
					uni.navigateBack()
				} else if (this.authentication !== '已通过'){
					uni.redirectTo({
						url: '/subpkg/teacher/authentication/teacher_authentication'
					})
				}
			},
			// 获取老师地理位置
			getLocation() {
				wx.chooseLocation({
					success: res => {
						if (res.errMsg === 'chooseLocation:ok') {
							this.baseFormData.location = res.address + res.name
							this.baseFormData.locationAl = res.latitude + ',' + res.longitude
						} 
					}
				})
			},
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				this.courseTree = result.data.treeCourse
			},
			// 上午复选框
			chechboxChangeAM(e) {
				this.courseAM.push(e.detail.value)
			},
			// 下午复选框
			chechboxChangePM(e) {
				this.coursePM.push(e.detail.value)
			},
			// 晚上复选框
			chechboxChangeEvening(e) {
				this.courseEV.push(e.detail.value)
			},
			submit(ref) {
				this.baseFormData.teachTime = []
				if (this.courseAM.length === 0 && this.coursePM.length === 0 && this.courseEV.length === 0 ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM[this.courseAM.length - 1] == '' && this.coursePM.length === 0 && this.courseEV.length === 0 ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM.length === 0 && this.coursePM[this.coursePM.length - 1] == '' && this.courseEV.length === 0 ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM.length === 0 && this.coursePM.length === 0 && this.courseEV[this.courseEV.length - 1] == '' ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM[this.courseAM.length - 1] == '' && this.coursePM[this.coursePM.length - 1] == '' && this.courseEV.length === 0 ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM[this.courseAM.length - 1] == '' && this.coursePM.length === 0 && this.courseEV[this.courseEV.length - 1] == '' ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM.length === 0 && this.coursePM[this.coursePM.length - 1] == '' && this.courseEV[this.courseEV.length - 1] == '' ) return uni.$showMsg('请选择授课时间！')
				if (this.courseAM[this.courseAM.length - 1] == '' && this.coursePM[this.coursePM.length - 1] == '' && this.courseEV[this.courseEV.length - 1] == '' ) return uni.$showMsg('请选择授课时间！')
				
				if (this.courseAM.length > 0) {
					this.baseFormData.teachTime.push(this.courseAM[this.courseAM.length - 1])
				}
				if (this.coursePM.length > 0) {
					this.baseFormData.teachTime.push(this.coursePM[this.coursePM.length - 1])
				}
				if (this.courseEV.length > 0) {
					this.baseFormData.teachTime.push(this.courseEV[this.courseEV.length - 1])
				}
				// 上课时间
				this.baseFormData.teachTime = this.baseFormData.teachTime.join()
				// 末尾为，
				if (this.baseFormData.teachTime.slice(-1) === ',') {
					this.baseFormData.teachTime = this.baseFormData.teachTime.substring(0, this.baseFormData.teachTime.length - 1)
				}
				// 开始为，
				if (this.baseFormData.teachTime.slice(0,1) === ',') {
					let temp = this.baseFormData.teachTime.substring(1, this.baseFormData.teachTime.length )
					this.baseFormData.teachTime = temp
				}
				
				if (this.baseFormData.subject === '') {
					return uni.$showMsg('请选择授课科目')
				} 
				
				// 授课科目
				for (let x = 0; x < this.courseTree.length; x++) {
					for (let y = 0; y < this.courseTree[x].children.length; y++) {
						if (this.courseTree[x].children[y].value === this.baseFormData.subject) {
							this.baseFormData.subjectBig = this.courseTree[x].value + '/' + this.baseFormData.subject
						}
					}
				}

				if (this.baseFormData.location === '') return uni.$showMsg('请输入位置！')
				
				this.addflag = true
				this.$refs[ref].validate().then(res => {
					uni.showLoading({
						title: '数据加载中'
					})
					uni.request({
						url: `${uni.$http.baseUrl}/education/teacher-courses/publishCourse`,
						data: JSON.stringify(this.baseFormData),
						header: {
							token: uni.getStorageSync('token')
						},
						method: 'POST',
						success: res => {
							uni.hideLoading()
							uni.$showMsg(res.data.message)
							setTimeout(() => {
								uni.redirectTo({
									url: '/subpkg/teacher/course/teacher_course_pattern'
								})
							}, 1000)
						},
						complete: () => {
							setTimeout(() => {
								this.addflag = false
							}, 1000)
						}
					})
				}).catch(err =>{
					return 
				})
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		//background-color: #D4F5E9;
	}
</style>

<style lang="scss" scoped>
	.course-add-container{
		width: 96%;
		padding-left: 20rpx;
	}
	
	.tr-container{
	    display: flex;
	    position: relative;
	    width: 96%;
	    flex-direction: column;
	     /* border: 1rpx solid gray; */
	    margin: -10px 20rpx;
		margin-bottom: 20px;
	}
	
	.tr_1 {
	    display: flex;
	    position: relative;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	.tr_2{
	    display: block;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	
	.th_0,
	.th_1,
	.th_2,
	.th2_0,
	.th2_1,
	.th2_2{
	    width: 12%;
	    height: 80rpx;
	    line-height: 80rpx;
	    border-right: 1rpx solid gray;
	    border-bottom: 1rpx solid gray;
	    text-align: center;
	}
	
	.th_0,
	.th_1,
	.th_2{
	    border-top: 1rpx solid gray;
	}
	
	.th_0,
	.th2_0{
	    border-left: 1rpx solid gray;
	}
	
	.th2_0{
	    float: left;
	    width: 12%;
	    height: 80rpx;
	    line-height: 80rpx;
	    text-align: center;
	    /* background-color: greenyellow; */
	}
	
	.button-group{
		padding-left: -20rpx;
		margin-bottom: 40rpx;
		height: 140rpx;
	}
	
	// 发布课程按钮
	.publishBtn{
		width: 260rpx;
		border-radius: 50rpx;
		background-color: #35b882;
	}
	
	// 提交按钮样式
	.submitBtnWrapper{
		margin-top: 30rpx;
		height: 140rpx;
		align-items: center;
	}
	.submitBtn{
		width: 300rpx;
		border-radius: 50rpx;
		// margin-bottom: 40rpx;
		background-color: #35b882;
		font-size: 30rpx;
	}
	

</style>