family/education_uni/subpkg/add_course/add_course.vue

<template>
	<view>
		<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px" :rules="rules" labelPosition="top">
			<uni-forms-item label="授课科目1:" required>
				<uni-data-picker placeholder="选择授课" popup-title="课程大纲-具体课程" v-model="baseFormData.subject[1]" :clearIcon="false" :localdata="courseTree" />
			</uni-forms-item>
			<uni-forms-item v-for="(item, index) in dynamicsLists" :key="item.id" :label="item.label+''+(index+2)+':'" :name="'baseFormData.subject[' + item.id + ']'" >
				<uni-data-picker class="publish-course" placeholder="选择授课" popup-title="课程大纲-具体课程" v-model="baseFormData.subject[item.id]" :clearIcon="false" :localdata="courseTree" />
			</uni-forms-item>
			<uni-forms-item label="授课方式:" name="mode" required>
				<uni-data-checkbox v-model="baseFormData.mode" multiple :localdata="modes" />
			</uni-forms-item>
			<uni-forms-item label="授课时间:" name="teachTime" required>
				<uni-datetime-picker v-model="baseFormData.teachTime" type="datetimerange" rangeSeparator="至" />
			</uni-forms-item>
			<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 type="warn" size="mini" @click="add">新增授课科目</button>
			<button type="primary" size="mini" @click="submit('baseForm')">发布课程</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 {
				confirmText: '',
				// 表单数据
				baseFormData: {
					subject: {
						1: '1',
						2: '1',
						3: '1',
						4: '1'
					},
					mode: [],
					teachTime: '',
					teachAge: 1,
					location: ''
				},
				dynamicsLists: [],
				count: 1,	// 选择课程计数
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1'
							}
						]
					}
				],
				// 多选授课方式数据源
				modes: [{
					text: '老师上门',
					value: '老师上门'
				}, {
					text: '学员上门',
					value: '学员上门'
				}, {
					text: '线上辅导',
					value: '线上辅导'
				}],
				rules: {
					subject: {
						rules: [{
							required: true,
							errorMessage: '授课科目不能为空',
						}]
					},
					mode: {
						rules: [{
							required: true,
							errorMessage: '授课方式不能为空',
						}]
					},
					teachTime: {
						rules: [{
							required: true,
							errorMessage: '授课时间不能为空',
						}]
					},
					location: {
						rules: [{
							require: true,
							errorMessage: '地理位置不能为空',
						}]
					},
					experience: {
						rules: [{
							required: true,
							errorMessage: '成功经验不能为空',
						}]
					},
					introduce: {
						rules: [{
							required: true,
							errorMessage: '自我介绍不能为空',
						}]
					}
				}
			};
		},
		created() {
			this.getPriceAndTree()
		},
		mounted() {
			this.openDialog()
		},
		methods: {
			...mapMutations('m_user', ['updateAuthentication']),
			// 打开对话框
			openDialog() {
				if (this.authentication === '正在审核中…') {
					this.confirmText = '再等等'
					this.$refs.alertDialog.open()
				} else if (this.authentication !== '认证成功,点击前往课程发布' && this.authentication !== '正在审核中…') {
					this.confirmText = '去认证'
					this.$refs.alertDialog.open()
				}
			},
			// 取消按钮
			dialogClose() {
				this.$refs.alertDialog.close()
				uni.navigateBack()
			},
			// 确定按钮
			dialogConfirm() {
				this.$refs.alertDialog.close()
				if (this.authentication === '正在审核中…') {
					uni.navigateBack()
				} else {
					this.updateAuthentication('')
					uni.redirectTo({
						url: '/subpkg/teacher_authorize/teacher_authorize'
					})
				}
			},
			// 获取老师地理位置
			getLocation() {
				wx.choosePoi({
					success: res => {
						console.log(res)
						if (res.type === 0) {
							// 不显示位置
							this.baseFormData.location = ''
						} else if (res.type === 2) {
							// 详细位置
							this.baseFormData.location = res.address
						} else if (res.type === 1) {
							// 概要位置
							this.baseFormData.location = res.city
						}
						
					}
				})
			},
			add() {
				this.count++
				if (this.dynamicsLists.length > 2) return uni.$showMsg('新增授权科目过多！')
				this.dynamicsLists.push({
					label: '授课科目',
					id: this.count
				})
			},
			del(id) {
				let index = this.dynamicsLists.findIndex(v => v.id === id)
				this.dynamicsLists.splice(index, 1)
			},
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				this.courseTree = result.data.treeCourse
			},
			submit(ref) {
				for (let i = 1; i <= this.dynamicsLists.length + 1; i++) {
					if (this.baseFormData.subject[i] === '1') {
						return uni.$showMsg('请选择授课科目' + i)
					} 
				}
				if (this.baseFormData.location === '') return uni.$showMsg('请输入位置！')
				
				this.$refs[ref].validate().then(res => {
					console.log(this.baseFormData)
					uni.request({
						url: 'http://192.168.0.207:8222/education/teacher-courses/publishCourse',
						data: JSON.stringify(this.baseFormData),
						header: {
							token: uni.getStorageSync('token')
						},
						method: 'POST',
						success: res => {
							// this.isLoading = false
							console.log(res)
							uni.$showMsg(res.data.message)
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
}
</style>