daoshiyuyue-teacher/pages/index/realname.vue

<template>
	<view class="real-name">
		<view class="study" v-if="tea_type==1">
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					姓名
				</view>
				<view class="right" @click="goEdit('姓名',1,type=0)">
					{{form.truename ? form.truename : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					个人照片
				</view>
				<view class="right" @click="goEdit('上传个人照片',2,type=2)">
					{{form.headimg ? '已上传' : '点击上传'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					性别
				</view>
				<view class="right">
					<u-radio-group v-model="form.sex" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list_sex" :key="index" :name="item.label">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					毕业院校
				</view>
				<view class="right" @click="goEdit('毕业院校',3,type=0)">
					{{form.school ? form.school : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					邮箱
				</view>
				<view class="right" @click="goEdit('填写邮箱',4,type=0)">
					{{form.email ? form.email : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>

			<view class="item" v-if="!form.subject">
				<view class="star">
					*
				</view>
				<view class="label">
					学科
				</view>
				<view class="right" @click="goEdit('填写学科',5,type=1)">
					{{form.subject ? '已填写' : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item1" v-if="form.subject">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						学科
					</view>
					<view class="right" @click="goEdit('担任课程',5,type=1)">
						修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
					</view>
				</view>
				<view class="dec">
					{{form.subject}}
				</view>

			</view>
			<!-- <view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					手机号
				</view>
				<view class="right" @click="goEdit('填写手机号',6,type=0)">
					{{form.mobile ? form.mobile : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view> -->
			<view class="item" v-if="pwd_show">
				<view class="star">
					*
				</view>
				<view class="label">
					密码
				</view>
				<view class="right" @click="goEdit('填写密码',20,type=5)">
					{{form.password ? form.password : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item" v-if="!form.class">
				<view class="star">
					*
				</view>
				<view class="label">
					担任课程
				</view>
				<view class="right" @click="goEdit('担任课程',7,type=1)">
					{{form.class ? form.class : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item1" v-if="form.class">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						担任课程
					</view>
					<view class="right" @click="goEdit('担任课程',7,type=1)">
						修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
					</view>
				</view>
				<view class="dec">
					{{form.class}}
				</view>

			</view>
			<view class="item" v-if="!form.direction">
				<view class="star">
					*
				</view>
				<view class="label">
					近年研究方向
				</view>
				<view class="right" @click="goEdit('近年研究方向',8,type=1)">
					<!-- 去填写<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
					<image src="../../static/images/edit.png" mode=""></image>
				</view>
			</view>
			<view class="item1" v-if="form.direction">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						近年研究方向
					</view>
					<view class="right" @click="goEdit('近年研究方向',8,type=1)">
						<!-- 修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
						<image src="../../static/images/edit.png" mode=""></image>
					</view>
				</view>
				<view class="dec">
					{{form.direction}}
				</view>

			</view>
			<view class="item" v-if="!form.project">
				<view class="star">
					*
				</view>
				<view class="label">
					承担项目
				</view>
				<view class="right" @click="goEdit('承担项目',9,type=1)">
					<!-- 去填写<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
					<image src="../../static/images/edit.png" mode=""></image>
				</view>
			</view>
			<view class="item1" v-if="form.project">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						承担项目
					</view>
					<view class="right" @click="goEdit('承担项目',9,type=1)">
						<!-- 修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
						<image src="../../static/images/edit.png" mode=""></image>
					</view>
				</view>
				<view class="dec">
					{{form.project}}
				</view>

			</view>
			<view class="item" v-if="!form.results">
				<view class="star">
					*
				</view>
				<view class="label">
					代表性成果
				</view>
				<view class="right" @click="goEdit('代表性成果',10,type=1)">
					<!-- 去填写<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
					<image src="../../static/images/edit.png" mode=""></image>
				</view>
			</view>
			<view class="item1" v-if="form.results">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						代表性成果
					</view>
					<view class="right" @click="goEdit('代表性成果',10,type=1)">
						<!-- 修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
						<image src="../../static/images/edit.png" mode=""></image>
					</view>
				</view>
				<view class="dec">
					{{form.results}}
				</view>

			</view>
		</view>
		<view class="pengbei" v-if="tea_type !=1">
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					姓名
				</view>
				<view class="right" @click="goEdit('姓名',1,type=0)">
					{{form.truename ? form.truename : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					个人照片
				</view>
				<view class="right" @click="goEdit('上传个人照片',2,type=2)">
					{{form.headimg ? '已上传' : '点击上传'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					性别
				</view>
				<view class="right">
					<u-radio-group v-model="form.sex" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list_sex" :key="index" :name="item.label">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					毕业院校
				</view>
				<view class="right" @click="goEdit('毕业院校',3,type=0)">
					{{form.school ? form.school : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					邮箱
				</view>
				<view class="right" @click="goEdit('填写邮箱',4,type=0)">
					{{form.email ? form.email : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>


		<!-- 	<view class="item">
				<view class="star">
					*
				</view>
				<view class="label">
					手机号
				</view>
				<view class="right" @click="goEdit('填写手机号',6,type=0)">
					{{form.mobile ? form.mobile : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view> -->
			<view class="item" v-if="pwd_show">
				<view class="star">
					*
				</view>
				<view class="label">
					密码
				</view>
				<view class="right" @click="goEdit('填写密码',20,type=5)">
					{{form.password ? form.password : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<!-- <view class="item" v-if="!form.class">
				<view class="star">
					*
				</view>
				<view class="label">
					担任课程
				</view>
				<view class="right" @click="goEdit('担任课程',7,type=1)">
					{{form.class ? form.class : '去填写'}}
					<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
				</view>
			</view>
			<view class="item1" v-if="form.class">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						担任课程
					</view>
					<view class="right" @click="goEdit('担任课程',7,type=1)">
						修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
					</view>
				</view>
				<view class="dec">
					{{form.class}}
				</view>
			
			</view> -->
			<view class="item" v-if="!form.direction">
				<view class="star">
					*
				</view>
				<view class="label">
					特长
				</view>
				<view class="right" @click="goEdit('特长',8,type=1)">
					<!-- 去填写<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
					<image src="../../static/images/edit.png" mode=""></image>
				</view>
			</view>
			<view class="item1" v-if="form.direction">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						特长
					</view>
					<view class="right" @click="goEdit('特长',8,type=1)">
						<!-- 修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
						<image src="../../static/images/edit.png" mode=""></image>
					</view>
				</view>
				<view class="dec">
					{{form.direction}}
				</view>

			</view>
			<view class="item" v-if="!form.project">
				<view class="star">
					*
				</view>
				<view class="label">
					寄语
				</view>
				<view class="right" @click="goEdit('寄语',9,type=1)">
					<!-- 去填写<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
					<image src="../../static/images/edit.png" mode=""></image>
				</view>
			</view>
			<view class="item1" v-if="form.project">
				<view class="star">
					*
				</view>
				<view class="item">
					<view class="label">
						寄语
					</view>
					<view class="right" @click="goEdit('寄语',9,type=1)">
						<!-- 修改<u-icon name="arrow-right" size="20" margin-left="20"></u-icon> -->
						<image src="../../static/images/edit.png" mode=""></image>
					</view>
				</view>
				<view class="dec">
					{{form.project}}
				</view>

			</view>

		</view>

		<u-popup v-model="show" mode="bottom" height="100%">
			<view class="form">
				<view class="back" @click="show=false">
					<u-icon name="arrow-left" size="30"></u-icon>
				</view>
				<u-navbar :is-back="false" title="填写信息"></u-navbar>
				<view class="title">
					{{input_name}}
				</view>
				<view class="input" v-if="type==0">
					<u-input v-model="value" :placeholder=' "请输入" + input_name' />
				</view>
				<view class="input" v-if="type==5">
					<u-input v-model="password" :placeholder=' "请输入" + input_name' type="password" />
				</view>
				<!-- 上传图片 -->
				<view class="upload_image" v-if="item==2&&image_edit==0">
					<u-upload ref="uUpload" :action="action" :auto-upload="true" :form-data='imageDate'
						:file-list="fileList" @on-success='uploadSuccess'></u-upload>
				</view>

				<view class="upload_image" v-if="item==2 && image_edit==1">
					<u-image width="300rpx" height="300rpx" :src="uploadImage"></u-image>
					<text>图片最佳尺寸为150*150</text>
				</view>
				<view class="complate" v-if="item==2 && image_edit==1" @click="reload">
					重新上传
				</view>
				<view class="complate1" v-if="item==2 " @click="complate">
					完成
				</view>
				<!-- textear编辑 -->
				<view class="upload_image" v-if="type==1">
					<u-input v-model="textarea" type="textarea" :border="true" height="400" :auto-height="true" />
				</view>
				<view class="complate" v-if="item!=2" @click="complate">
					完成
				</view>
			</view>
		</u-popup>
		<view class="buttom" @click="mentor" v-if="tea_type==1">
			{{type==1 ? '提交' : '保存编辑'}}
		</view>
		<view class="buttom" @click="mentor1" v-if=" tea_type!==1">
			{{type==1 ? '提交' : '保存编辑'}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				input_name: '',
				item: '',
				image_edit: 0,
				value: '', //输入框的内容
				action: '', //封面图上传地址
				imageDate: {
					file_type: 'img',
					type: 'tearcher_headimg'
				}, //上传图片携带参数
				fileList: [],
				uploadImage: '',
				type: 0, //0input输入框，1textare输入框
				textarea: '',
				form: {
					status: 1,
					sex: 0
				},
				type: 1,
				password: '',
				list_sex: [

					{
						name: '男',
						label: 1
					},
					{
						name: '女',
						label: 2
					},

				],
				pwd_show: true,
				tea_type: 0
			}
		},
		onLoad(options) {
			if (this.is_weixin()) {
				this.navTitle()
			}
			if (options.type == 0) {
				this.type = options.type
			}
			this.getMe(options.type)
		},
		onShow() {

			this.action = '/api/base/common/upload'
		},
		methods: {
			radioGroupChange(e) {
				console.log(e);
				this.form.sex = e
			},
			//判断是否是微信
			is_weixin() {
				let ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') != -1;
			},
			navTitle() {
				let navTitle = document.getElementsByTagName('uni-page-head');
				navTitle[0].style.display = 'none'
			},
			getMe(type) {
				console.log(type, '')
				this.$u.get('/base/auth/me').then(res => {
					console.log(res, 'ppp')
					this.form = res.data.type_model
					this.tea_type = res.data.type_model.type
					if (type == 1) {
						this.uploadImage = ''
						this.form.headimg = ''
					} else {
						this.uploadImage = res.data.type_model.headimg
					}
					if (this.uploadImage) {
						this.image_edit = 1
					}

					if (this.form.is_register == 1) {
						this.pwd_show = false
					}
				})
			},
			//学业导师保存修改
			mentor() {

				if (!this.form.truename) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.headimg) {
					uni.showToast({
						title: '头像不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.sex) {
					uni.showToast({
						title: '性别不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.school) {
					uni.showToast({
						title: '毕业院校不能为空',
						icon: 'none'
					})
					return
				}
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
				if (!reg.test(this.form.email)) {
					uni.showToast({
						title: '您输入的邮箱有误，请检查！',
						icon: 'none'
					})
					return
				}
				if (!this.form.subject) {
					uni.showToast({
						title: '学科不能为空',
						icon: 'none'
					})
					return
				}
				// let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				// if (!myreg.test(this.form.mobile)) {
				// 	uni.showToast({
				// 		title: '您输入的手机号有误，请检查！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.form.password && this.pwd_show == true) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				}


				if (!this.form.class) {
					uni.showToast({
						title: '担任课程不能为空',
						icon: 'none'
					})
					return
				}

				if (!this.form.direction) {
					uni.showToast({
						title: '近年研究方向不能为空',
						icon: 'none'
					})
					return
				}


				if (!this.form.project) {
					uni.showToast({
						title: '承担项目不能为空',
						icon: 'none'
					})
					return
				}

				if (!this.form.results) {
					uni.showToast({
						title: '代表性成果不能为空',
						icon: 'none'
					})
					return
				}
				let id = this.$store.state.vuex_user.type_id
				console.log(this.$store.state.vuex_user)
				// this.form.account=this.$store.state.vuex_user.account
				this.$u.put('/mentor/perfect-teacher-info', this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.switchTab({
								url: './index'
							})
						}, 1500)
					}
				})
			},
			//朋辈导师保存修改
			mentor1() {

				if (!this.form.truename) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.headimg) {
					uni.showToast({
						title: '头像不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.sex) {
					uni.showToast({
						title: '性别不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.school) {
					uni.showToast({
						title: '毕业院校不能为空',
						icon: 'none'
					})
					return
				}
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
				if (!reg.test(this.form.email)) {
					uni.showToast({
						title: '您输入的邮箱有误，请检查！',
						icon: 'none'
					})
					return
				}
				// let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				// if (!myreg.test(this.form.mobile)) {
				// 	uni.showToast({
				// 		title: '您输入的手机号有误，请检查！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.form.password && this.pwd_show == true) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.direction) {
					uni.showToast({
						title: '特长不能为空',
						icon: 'none'
					})
					return
				}

				if (!this.form.project) {
					uni.showToast({
						title: '寄语不能为空',
						icon: 'none'
					})
					return
				}


				let id = this.$store.state.vuex_user.type_id
				console.log(this.$store.state.vuex_user)
				// this.form.account=this.$store.state.vuex_user.account
				this.$u.put('/mentor/perfect-teacher-info', this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.switchTab({
								url: './index'
							})
						}, 1500)
					}
				})
			},

			//上传图片成功
			uploadSuccess(data) {
				console.log(data, 'ppp')
				this.form.headimg = data.data.path
				this.uploadImage = data.data.url
				this.image_edit = 1
			},
			//重新上传
			reload() {
				this.image_edit = 0
				console.log('---------')
				this.fileList = [],
					this.uploadImage = ''
				this.form.headimg = ''
			},
			goEdit(name, item) {
				if (this.uploadImage) {
					this.fileList.push({
						url: this.uploadImage
					})
				}
				switch (item) {
					case 1:
						this.value = this.form.truename
						break
					case 2:

						break
					case 3:
						this.value = this.form.school
						break
					case 4:
						this.value = this.form.email
						break
					case 5:
						this.textarea = this.form.subject
						break
					case 6:
						this.value = this.form.mobile
						break
					case 7:
						this.textarea = this.form.class
						break
					case 8:
						this.textarea = this.form.direction
						break
					case 9:
						this.textarea = this.form.project
						break
					case 10:
						this.textarea = this.form.results
						break
					case 20:
						this.password = this.form.password
						break

				}
				this.show = true
				this.item = item
				this.input_name = name
				// this.textarea = ''
				// this.value = ''

			},
			complate() {
				let item = this.item
				switch (item) {
					case 1:
						this.form.truename = this.value
						break
					case 2:

						break
					case 3:
						this.form.school = this.value
						break
					case 4:
						this.form.email = this.value
						break
					case 5:
						this.form.subject = this.textarea
						break
					case 6:
						this.form.mobile = this.value
						break
					case 7:
						this.form.class = this.textarea
						break
					case 8:
						this.form.direction = this.textarea
						break
					case 9:
						this.form.project = this.textarea
						break
					case 10:
						this.form.results = this.textarea
						break
					case 20:
						this.form.password = this.password
						break

				}
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload_image {
		width: 90%;
		margin: 0 auto;

		text {
			// color: ;
			display: inline-block;
			margin-top: 10px;
		}
	}

	.complate,
	.complate1 {
		width: 50%;
		margin: 0 auto;
		margin-top: 20%;
		line-height: 44px;
		text-align: center;
		height: 44px;
		background: #D12727;
		opacity: 1;
		border-radius: 24px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}

	.complate1 {
		margin-top: 30px;
	}

	.real-name {
		padding: 0 16px;
		padding-bottom: 40px;

		.item {
			display: flex;
			align-items: center;
			height: 46px;
			line-height: 46px;
			position: relative;
			padding-left: 10px;

			.star {
				position: absolute;
				color: red;
				left: 0;
			}


			.label {
				flex: 0 0 30%;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 1;
			}

			.right {
				flex: 1;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: rgba($color: #282828, $alpha: 0.42);
				// opacity: 0.42;
				text-align: right;

				image {
					width: 17px;
					height: 17px;
					opacity: 1;
				}

			}
		}

		.form {
			position: relative;

			.back {
				position: absolute;
				left: 10px;
				top: 0px;
				width: 30px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 9999;
				// background: #18B566;
			}

			.title {
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
			}

			.input {
				margin: 0 20px;
				height: 40px;
				line-height: 40px;
				border-bottom: solid 1px rgba(175, 175, 175, .2);
			}

		}

		.item1 {
			position: relative;

			// padding-left: 10px;
			.star {
				position: absolute;
				color: red;
				left: 0;
				top: 14px;
			}

			.dec {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #AFAFAF;
				opacity: 1;
				padding-bottom: 10px;
				border-bottom: solid 1px rgba(175, 175, 175, .2);
			}
		}

		.buttom {
			width: 229px;
			height: 56px;
			line-height: 56px;
			background: #D12727;
			;
			text-align: center;
			border-radius: 28px;
			margin: 0 auto;
			margin-top: 50px;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			opacity: 1;
		}

	}
</style>