family-education/education_uni/subpkg/student/require/student_require_add.vue

<template>
	<view class="stu-require-container" style="background-color: #f0f0f0;">
		<uni-forms ref="baseForm" :model="baseFormData" labelWidth="75px" :rules="rules" validateTrigger="bind">
			<uni-forms-item label="姓名" name="name" required>
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" maxlength="4" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone" required>
				<uni-row>
					<uni-col :span="14">
						<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" :disabled="disabledPhone" trim="both" />
					</uni-col>
					<uni-col :span="8" :offset="2">
						<view class="phoneClass">
							<button class="getPhone" open-type="getPhoneNumber" type="primary" size="mini"
								@getphonenumber="getPhoneNumber">一键获取</button>
						</view>
					</uni-col>
				</uni-row>
			</uni-forms-item>
			<uni-forms-item label="微信号" name="wxid" required>
				<uni-easyinput v-model="baseFormData.wxid" placeholder="微信号(不便接听电话时微信沟通)" maxlength="25"
					trim="both" />
			</uni-forms-item>
			<uni-forms-item label="地址:" name="locationStr" required>
				<uni-easyinput type="text" v-model="baseFormData.locationStr" @focus="getLocation" maxlength="250" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="选择课程" required>
				<uni-data-picker placeholder="请选择课程" popup-title="课程大纲-具体课程" v-model="baseFormData.subjectSmall" :clearIcon="false"
					:localdata="courseTree" />
			</uni-forms-item>
			<uni-forms-item label="辅导方式" required>
				<uni-data-checkbox v-model="baseFormData.mode" :localdata="modes" />
			</uni-forms-item>
			<uni-forms-item label="学员性别" required>
				<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="上传头像" required>
				<uni-file-picker fileMediatype="image" :sizeType="sizeType" v-model="hhPhoto" :fileExtname="fileExtname" :imageStyles="listStyle" limit="1" @select="selectProfilePhoto" @delete="deletePhoto('profilePhoto', $event)" />
			</uni-forms-item>
			<uni-forms-item label="课时费" name="salary" required :errorMessage="errorPrice">
				<uni-easyinput v-model="baseFormData.salary" type="number" placeholder="请输入课时金额" />
			</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="goal">
				<uni-easyinput type="textarea" v-model="baseFormData.goal" maxlength="100" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="教员身份" required>
				<uni-data-checkbox v-model="baseFormData.teacherType" :localdata="identifies" />
			</uni-forms-item>
			<uni-forms-item label="教员学历" required>
				<uni-data-select v-model="baseFormData.teacherEdu" :localdata="educations" />
			</uni-forms-item>
			<uni-forms-item label="教员性别" required>
				<uni-data-checkbox v-model="baseFormData.teacherGender" :localdata="sexsTeacher" />
			</uni-forms-item>
			<uni-forms-item label="教员照片" required>
				<uni-data-checkbox v-model="baseFormData.teacherProfilePhoto" :localdata="hasPhotoes" />
			</uni-forms-item>
			<uni-forms-item label="对教员要求" name="teacherDemanded">
				<uni-easyinput type="textarea" v-model="baseFormData.teacherDemanded" maxlength="100" trim="both" />
			</uni-forms-item>
		</uni-forms>

		<view class="submitBtnWrapper">
			<button class="submitBtn" type="primary" @click="submit" :disabled="addflag">提交需求</button>
		</view>
		
		<!-- 裁剪图片的插件 -->
		<ksp-cropper mode="fixed" :width="160" :height="160" :maxWidth="1024" :maxHeight="1024" :url="profilePhotoUrl" @cancel="profilePhotoUrloncancel" @ok="profilePhotoUrlonok"></ksp-cropper>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
				disabledPhone: true,
				listStyle: {
					"height": 100,	// 边框高度
					"width": 100,	// 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#ccc",		// 边框颜色
						"width":"1px",		// 边框宽度
						"style":"solid", 	// 边框样式
					}
				},
				addflag: false,
				profilePhotoUrl: '',
				fileExtname: 'png,jpg',
				sizeType: ['compressed'],
				hhPhoto: [{
					url: '',
					extname: '',
					name: ''
				}],
				loading: false,
				errorPrice: '',
				courseAM: [],
				coursePM: [],
				courseEV: [],
				courseWeekday: [],
				// 表单数据
				baseFormData: {
					name: '',
					phone: '',
					wxid: '',
					subjectSmall: '1-1',
					mode: '教员上门',
					sex: '男',
					profilePhoto: '',
					salary: 0,
					courseWeekday: [],
					goal: '',
					teacherType: '专职教员',
					teacherEdu: '',
					teacherGender: '男',
					teacherProfilePhoto: '有',
					teacherDemanded: '',
					locationStr: '',
					locationAl: ''
				},
				coursePrice: [],
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1-1'
							}
						]
					}
				],
				// 单选辅导方式数据源
				modes: [{
						text: '教员上门',
						value: '教员上门'
					}, 
					{
						text: '学员上门',
						value: '学员上门'
					}, 
					{
						text: '线上辅导',
						value: '线上辅导'
				}],
				// 单选性别数据源
				sexs: [{
						text: '男',
						value: '男'
					}, 
					{
						text: '女',
						value: '女'
				}],
				// 单选老师身份
				identifies: [{
						text: '专职教员',
						value: '专职教员'
					}, {
						text: '学生教员',
						value: '学生教员'
					}],
					educations: [{
						value: '专科在读',
						text: '专科在读及以上'
					}, 
					{
						value: '专科毕业',
						text: '专科毕业及以上'
					}, 
					{
						value: '本科在读',
						text: '本科在读及以上'
					}, 
					{
						value: '本科毕业',
						text: '本科毕业及以上'
					}, 
					{
						value: '硕士在读',
						text: '硕士在读及以上'
					}, 
					{
						value: '硕士毕业',
						text: '硕士毕业及以上'
					}, 
					{
						value: '博士在读',
						text: '博士在读及以上'
					}, 
					{
						value: '博士毕业',
						text: '博士毕业及以上'
					}, 
					{
						value: '不限',
						text: '不限'
				}],
				// 单选老师性别
				sexsTeacher: [{
						text: '男',
						value: '男'
					}, 
					{
						text: '女',
						value: '女'
				}],
				// 单选老师有无照片
				hasPhotoes: [{
						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: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					wxid: {
						rules: [{
							required: true,
							errorMessage: '请输入微信号',
						}, {
							errorMessage: '请输入正确的微信号',
							pattern: '^[a-zA-Z][a-zA-Z\\d_-]{5,19}$',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							errorMessage: '请输入正确的手机号',
							pattern: '^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\\d{8}$',
						}]
					},
					salary: {
						rules: [{
							required: true,
							errorMessage: '请输入课时费'
						}]
					},
				}
			};
		},
		onLoad(option) {
			if (option.item) {
				let item = JSON.parse(decodeURIComponent(option.item))
				this.formatStuNeed(item)
			} else {
				this.hhPhoto = []
			}
			this.getPriceAndTree()
		},
		methods: {
			deletePhoto(item, e) {
				this.baseFormData[item] = ''
			},
			selectProfilePhoto(e) {
				this.hhPhoto = []
				this.profilePhotoUrl = e.tempFilePaths[0]
			},
			profilePhotoUrlonok(ev) {
				const evPath = ev.path
				this.hhPhoto = {
					url: evPath
				}
				this.profilePhotoUrl = ''
				this.upload(evPath, 'profilePhoto')
			},
			profilePhotoUrloncancel() {
				this.hhPhoto = null
				// url设置为空，隐藏控件
				this.profilePhotoUrl = "";
			},
			upload(path, item) {
				wx.uploadFile({
					url: uni.$http.baseUrl + '/file/uploading',
					filePath: path,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						const result = JSON.parse(res.data)
						this.baseFormData[item] = result.data.url
					},
					fail: res => {
						if (res.errno === 1001) {
							uni.$showMsg('只能选择.jpg或者.png的图片')
						}
					}
				})
			},
			// 格式化传递过来的stuneed信息
			formatStuNeed(item) {
				item.datetime = null
				item.deal = null
				item.deleted = null
				item.display = null
				item.id = null
				item.locked = null
				item.requireId = null
				item.uid = null
				item.verifyRefuseReason = null
				item.verifyStatus = null
				
				this.baseFormData = item
				this.courseWeekday = item.courseWeekday.split(",")
				this.baseFormData.courseWeekday = 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(','))
				}
				
				this.hhPhoto[0].url = this.baseFormData.profilePhoto
				this.hhPhoto[0].name = 'profilePhoto'
			},
			// 手机号
			async getPhoneNumber(e) {
				if (e.detail.code === undefined) return uni.$showMsg('获取手机号失败！')
				const query = {
					code: e.detail.code
				}
				const {
					data: result
				} = await uni.$http.get('/ucenter/mini-program-openid-uid/wxGetPhone', query)
				if (result.data.phone === '' || result.data.phone === null) {
					this.disabledPhone = false
					return uni.$showMsg('手机号获取失败,请手动输入')
				} else {
					this.baseFormData.phone = result.data.phone
					return uni.$showMsg('获取手机成功！')
				}
			},
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				this.courseTree = result.data.treeCourse
				this.coursePrice = result.data.coursePrice
			},
			// 上午复选框
			chechboxChangeAM(e) {
				this.courseAM.push(e.detail.value)
			},
			// 下午复选框
			chechboxChangePM(e) {
				this.coursePM.push(e.detail.value)
			},
			// 晚上复选框
			chechboxChangeEvening(e) {
				this.courseEV.push(e.detail.value)
			},
			// 获取老师地理位置
			getLocation() {
				wx.chooseLocation({
					success: res => {
						if (res.errMsg === 'chooseLocation:ok') {
							this.baseFormData.locationStr = res.address + res.name
							this.baseFormData.locationAl = res.latitude + ',' + res.longitude
						} 
					}
				})
			},
			// 提交
			submit() {
				if (this.isLoading) {
					return uni.$showMsg('操作过快,请耐心等待…')
				}
				this.isLoading = true
				
				this.baseFormData.courseWeekday = []
				this.$refs.baseForm.validate().then(res => {
					if (this.baseFormData.phone === '') return uni.$showMsg('手机号未获取！')
					if (this.baseFormData.locationStr === '') return uni.$showMsg('请选择地址！')
					if (this.baseFormData.profilePhoto === undefined || this.baseFormData.profilePhoto === '') return uni.$showMsg('头像未上传！')
					if (this.baseFormData.subjectSmall === '1-1' || this.baseFormData.subjectSmall === '') return uni.$showMsg('请选择课程')
					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.courseWeekday.push(this.courseAM[this.courseAM.length - 1])
					}
					if (this.coursePM.length > 0) {
						this.baseFormData.courseWeekday.push(this.coursePM[this.coursePM.length - 1])
					}
					if (this.courseEV.length > 0) {
						this.baseFormData.courseWeekday.push(this.courseEV[this.courseEV.length - 1])
					}
					// 上课时间
					this.baseFormData.courseWeekday = this.baseFormData.courseWeekday.join()
					// 末尾为，
					if (this.baseFormData.courseWeekday.slice(-1) === ',') {
						this.baseFormData.courseWeekday = this.baseFormData.courseWeekday.substring(0, this.baseFormData.courseWeekday.length - 1)
					}
					// 开始为，
					if (this.baseFormData.courseWeekday.slice(0,1) === ',') {
						let temp = this.baseFormData.courseWeekday.substring(1, this.baseFormData.courseWeekday.length )
						this.baseFormData.courseWeekday = temp
					}
					
					// 教员学历
					if (this.baseFormData.teacherEdu === '') return uni.$showMsg('请选择教员学历！')
					
					// 课时费
					let city = this.userinfo.city
					for(let i = 0; i < this.coursePrice.length; i++) {
						if(this.coursePrice[i].courseName === this.baseFormData.subjectSmall) {
							// console.log(this.coursePrice[i].priceMapping.stu_price_2_l)
							// 二线城市
							if (city != '北京' || city != '上海' || city != '广州' || city != '深圳') {
								// 学生
								if (this.baseFormData.teacherType === '学生教员') {
									if (this.coursePrice[i].priceMapping.stu_price_2_l > this.baseFormData.salary || this.baseFormData.salary > this.coursePrice[i].priceMapping.stu_price_2_h) {
										this.errorPrice = '价格在' + this.coursePrice[i].priceMapping.stu_price_2_l + '~' + this.coursePrice[i].priceMapping.stu_price_2_h + '之间'
										return uni.$showMsg('请合理选择课时费')
									}
								} else {
									if (this.coursePrice[i].priceMapping.fulltime_price_2_l > this.baseFormData.salary || this.baseFormData.salary > this.coursePrice[i].priceMapping.fulltime_price_2_h) {
										this.errorPrice = '价格在' + this.coursePrice[i].priceMapping.fulltime_price_2_l + '~' + this.coursePrice[i].priceMapping.fulltime_price_2_h + '元之间'
										return uni.$showMsg('请合理选择课时费')
									}
								}
							} else {
								// 学生
								if (this.baseFormData.teacherType === '学生教员') {
									if (this.coursePrice[i].priceMapping.stu_price_1_l > this.baseFormData.salary || this.baseFormData.salary > this.coursePrice[i].priceMapping.stu_price_1_h) {
										this.errorPrice = '价格在' + this.coursePrice[i].priceMapping.stu_price_1_l + '~' + this.coursePrice[i].priceMapping.stu_price_1_h + '之间'
										return uni.$showMsg('请合理选择课时费')
									}
								} else {
									if (this.coursePrice[i].priceMapping.fulltime_price_1_l > this.baseFormData.salary || this.baseFormData.salary > this.coursePrice[i].priceMapping.fulltime_price_1_h) {
										this.errorPrice = '价格在' + this.coursePrice[i].priceMapping.fulltime_price_1_l + '~' + this.coursePrice[i].priceMapping.fulltime_price_1_h + '之间'
										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.subjectSmall) {
								this.baseFormData.subjectBig = this.courseTree[x].value
							}
						}
					}
					this.addflag = true
					uni.request({
						url: `${uni.$http.baseUrl}/education/student-requirements/publishRequirements`,
						data: this.baseFormData,
						header: {
							token: uni.getStorageSync('token')
						},
						method: 'POST',
						success: res => {
							uni.$showMsg(res.data.message)
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						},
						complete: () => {
							setTimeout(() => {
								this.addflag = false
							}, 1000)
						}
					})
				}).catch(err => {
					this.isLoading = false
				})
				this.isLoading = false
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.stu-require-container{
		width: 96%;
		height: 100%;
		padding-left: 20rpx;
	}
	
	.tr-container{
	    display: flex;
	    position: relative;
	    width: 96%;
	    flex-direction: column;
	    font-size: 26rpx;
	    /* 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; */
	}

	// 提交按钮样式
	.submitBtnWrapper{
		height: 140rpx;
		align-items: center;
	}
	.submitBtn{
		width: 300rpx;
		border-radius: 50rpx;
		// margin-bottom: 40rpx;
		background-color: #35b882;
	}
	// 获取手机号按钮背景颜色
	.getPhone{
		background-color: #35b882;
	}
	
	.profilePhotoClass {
		position: absolute;
		left:-6000px;
		top:-6000px;
	}
	
	.phoneClass {
		margin-top: 6rpx;
	}
	
</style>