cbz/page_index/pages/demand/perfect.vue

<template>
	<view class="content vflex jbetween">
		<view >
			<view class="box" v-show="index == '1'">
				<view class="hflex acenter jbetween cell">
					<view class="label">头像</view>
					<u-avatar :src="base_info.avatar" @click="uploadAvatar"></u-avatar>
				</view>
				<view class="cell">
					<view class="label">真实姓名</view>
					<u-input v-model="base_info.real_name" border="none" placeholder="请填写你的真实姓名"></u-input>
				</view>
				<view class="cell">
					<view class="label">性别</view>
					<view class="hflex">
						<view v-for="(item,index) in sexList" :key="index" style="padding-right: 52rpx;">
							<radio :value="item.value" :checked="base_info.sex == item.value?true:false" color="#506dff" @click="selectSex(item.value)" />{{item.name}}
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="label">出生年月</view>
					<view @click="open('birthday')">
						<u-input v-model="base_info.birthday" border="none" placeholder="请选择你的出生年月" suffixIcon="arrow-right"></u-input>
					</view>
					<u-datetime-picker :minDate="minDate" title="生日" :show="birthday_show" v-model="newDate" ref="datetimePicker" @confirm="confirmAge" @cancel="cancel" :formatter="formatter" mode="date"></u-datetime-picker>
				</view>
				<view class="cell">
					<view class="label">学历</view>
					<view @click="open('education')">
						<u-input v-model="base_info.education" border="none" placeholder="如:本科" suffixIcon="arrow-right"></u-input>
					</view>
					<u-picker title="学历" :show="education_show" :columns="educationList" ref="uPicker" @confirm="confirmEdu" @change="changeHandler" @cancel="cancel" ></u-picker>
				</view>
				<view class="cell">
					<view class="label">参加工作时间</view>
					<view @click="open('work_date')">
						<u-input v-model="base_info.work_date" border="none" placeholder="请选择参加工作的时间" suffixIcon="arrow-right"></u-input>
					</view>
					<u-datetime-picker :minDate="minDate" title="参加工作时间" :show="work_show" v-model="newDate" ref="datetimePicker" @confirm="confirmWork" @cancel="cancel" :formatter="formatter" mode="year-month"></u-datetime-picker>
				</view>
				<view class="cell">
					<view class="label">手机号码</view>
					<u-input v-model="base_info.phone" border="none" placeholder="请填写你的手机号码"></u-input>
				</view>
				<view class="cell">
					<view class="label">邮箱</view>
					<u-input v-model="base_info.email" border="none" placeholder="用于接收面试邮件"></u-input>
				</view>
			</view>
			<view class="box" v-if="index == '2'">
				<view class="cell">
					<view class="label">应聘岗位</view>
					<u-input v-model="job_inte.post" border="none" placeholder="请填写你应聘的岗位"></u-input>
				</view>
				<view class="cell">
					<view class="label">可工作地区范围</view>
					<u-input v-model="job_inte.work_address" border="none" placeholder="请填写工作地区范围"></u-input>
				</view>
				<view class="cell">
					<view class="label">期望薪资</view>
					<view @click="open('salary')">
						<u-input v-model="job_inte.salary" border="none" placeholder="请选择期望薪资" suffixIcon="arrow-right"></u-input>
					</view>
					<u-picker :show="salary_show" title="期望薪资" ref="uPicker" :columns="salaryList" @confirm="confirmSalary" @cancel="cancel"></u-picker>
				</view>
				<view class="cell">
					<view class="label">可工作时间</view>
					<u-input v-model="job_inte.work_time" border="none" placeholder="请输入工作时间比如12小时/天"></u-input>
				</view>
				<view class="cell">
					<view class="label">工作性质</view>
					<view @click="open('work_nature')">
						<u-input v-model="job_inte.work_nature" border="none" placeholder="请选择用工性质" suffixIcon="arrow-right"></u-input>
					</view>
					<u-picker :show="nature_show" title="工作性质" ref="uPicker" :columns="natureList" @confirm="confirmNature" @cancel="cancel"></u-picker>
				</view>
			</view>
			<view class="box" v-if="index == '3'">
				<view class="cell">
					<view class="label">公司名称</view>
					<u-input v-model="experience.company_name" border="none" placeholder="请输入"></u-input>
				</view>
				<view class="cell">
					<view class="label">职位名称</view>
					<u-input v-model="experience.company_position" border="none" placeholder="请输入"></u-input>
				</view>
				<view class="cell">
					<view class="label">在职时间</view>
					<view class="hflex acenter jbetween">
						<view @click="open('time1')">
							<u-input v-model="experience.company_time1" border="none" placeholder="入职时间"></u-input>
						</view>
						<u-datetime-picker :minDate="minDate" title="入职时间" :show="show_time1" v-model="newDate" ref="datetimePicker" @confirm="confirmTime1" @cancel="cancel" :formatter="formatter" mode="year-month"></u-datetime-picker>
						<view style="margin: 0 20rpx;">-</view>
						<view @click="open('time2')">
							<u-input v-model="experience.company_time2" border="none" placeholder="离职时间"></u-input>
						</view>
						<u-datetime-picker :minDate="minDate" title="离职时间" :show="show_time2" v-model="newDate" ref="datetimePicker" @confirm="confirmTime2" @cancel="cancel" :formatter="formatter" mode="year-month"></u-datetime-picker>
					</view>
				</view>
				<view class="cell">
					<view class="label">工作内容</view>
					<u-input v-model="experience.company_content" border="none" placeholder="请详细描述你在公司的主要工作内容以及…" suffixIcon="arrow-right"></u-input>
				</view>
			</view>
			<view class="box" v-if="index == '4'">
				<view class="cell">
					<view class="label">技能名称</view>
					<u-input v-model="skills.skills_name" border="none" placeholder="掌握的技能名称"></u-input>
				</view>
				<view class="cell">
					<view class="label">掌握程度</view>
					<view @click="open('skills_degree')">
						<u-input v-model="skills.skills_degree" border="none" placeholder="如:精通" suffixIcon="arrow-right"></u-input>
					</view>
					<u-picker :show="degree_show" title="掌握程度" ref="uPicker" :columns="degreeList" @confirm="confirmSkill" @cancel="cancel"></u-picker>
				</view>	
			</view>
			<view class="box" v-if="index == '5'">
				<view class="cell">
					<view class="label">证书名称</view>
					<u-input v-model="certificate.certificate_name" border="none" placeholder="获得的证书名称"></u-input>
				</view>
				<view class="cell">
					<view class="label">获得时间</view>
					<view @click="open('certificate_date')">
						<u-input v-model="certificate.certificate_date" border="none" placeholder="年/月" suffixIcon="arrow-right"></u-input>
					</view>
					<u-datetime-picker :minDate="minDate" title="获得时间" :show="certificate_show" v-model="newDate" ref="datetimePicker" @confirm="confirmDate" @cancel="cancel" :formatter="formatter" mode="year-month"></u-datetime-picker>
				</view>
				<view class="cell">
					<view class="hflex acenter">
						<view class="label">上传图片</view>
						<view class="hflex acenter" style="padding-bottom: 20rpx;">
							<u-icon name="info-circle-fill" color="#FFA446" size="10"></u-icon>
							<view class="label2">只能上传一张</view>
						</view>
					</view>
					<view class="upload vflex acenter jcenter" @click="uploadImg" v-if="certificate.certificate_img == ''">
						<u-icon name="plus" color="#CACACA" size="25"></u-icon>
						<view class="text_style1">添加图片</view>
					</view>
					<view v-else>
						<image :src="certificate.certificate_img" mode="aspectFill" class="upload"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="save" @click="save">保存</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				index: '0',
				base_info: {
					avatar: '',
					real_name: '',
					sex: '',
					birthday: '',
					work_date: '',
					phone: '',
					email: '',
					education: '',
				},
				educationList: [
					['小学','初中','高中','本科','硕士']
				],
				educationList2: [
					['统招','非统招']
				],
				sexList: [
					{
						value: '0',
						name: '男',
					},
					{
						value: '1',
						name: '女'
					}
				],
				job_inte: {
					post: '',
					work_address: '',
					salary: '',
					work_time: '',
					work_nature: '',
				},
				salaryList: [
					['1k','2k','3k','4k','5k','6k','7k','8k'],
					['3k','4k','5k','6k','7k','8k','9k','10k']
				],
				natureList: [
					['兼职','全职']
				],
				experience: {
					company_name: '',
					company_position: '',
					company_time1: '',
					company_time2: '',
					company_content: '',
				},
				certificate: {
					certificate_name: '',
					certificate_date: '',
					certificate_img: [],
				},
				skills: {
					skills_name: '',
					skills_degree:'',
				},
				degreeList: [
					['熟悉','掌握','精通']
				],
				salary_show: false,
				birthday_show: false,
				work_show: false,
				nature_show: false,
				show_time1: false,
				show_time2: false,
				degree_show: false,
				education_show: false,
				certificate_show: false,
				newDate: Number(new Date()),
				minDate: new Date('1980-01-01')
			}
		},
		onLoad(options) {
			that = this
			that.index = options.index
			that.isInfo(options.index)
			// if(options.id) {
			// }
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			// 判断要修改的信息
			isInfo(index) {
				var text = ''
				switch(index) {
					case '1' : 
						text = '基本信息';
						break;
					case '2' :
						text = '求职意向';
						break;
					case '3' :
						text = '工作经历';
						break;
					case '4' :
						text = '专业技能';
						break;
					case '5' :
						text = '资质证书';
						break;
				}
				uni.setNavigationBarTitle({
					title: text
				})
			},
			// 保存
			save() {
				if(that.index == '1') {
					if($api.formCheck(that.base_info.avatar,"required") && $api.formCheck(that.base_info.real_name,"truename") && $api.formCheck(that.base_info.birthday,"required") && $api.formCheck(that.base_info.education,"required")
					 && $api.formCheck(that.base_info.work_date,"required") && $api.formCheck(that.base_info.phone,"mobile")&& $api.formCheck(that.base_info.email,"email")) {
						$api.info('保存成功')
						$api.jump(-1)
					}
				}
				if(that.index == '2') {
					if($api.formCheck(that.job_inte.post,"required") && $api.formCheck(that.job_inte.work_address,"required") && $api.formCheck(that.job_inte.salary,"required")
					 && $api.formCheck(that.job_inte.work_time,"required") && $api.formCheck(that.job_inte.work_nature,"required")) {
						$api.info('保存成功')
						$api.jump(-1)
					}
				}
				if(that.index == '3') {
					if($api.formCheck(that.experience.company_name,"required") && $api.formCheck(that.experience.company_position,"required") && $api.formCheck(that.experience.company_time1,"required")
					 && $api.formCheck(that.experience.company_time2,"required") && $api.formCheck(that.experience.company_content,"required")) {
						$api.info('保存成功')
						$api.jump(-1)
					}
				}
				if(that.index == '4') {
					if($api.formCheck(that.skills.skills_name,"required") && $api.formCheck(that.skills.skills_degree,"required")) {
						$api.info('保存成功')
						$api.jump(-1)
					}
				}
				if(that.index == '5') {
					if($api.formCheck(that.certificate.certificate_name,"required") && $api.formCheck(that.certificate.certificate_date,"required")) {
						$api.info('保存成功')
						$api.jump(-1)
					}
				}
				// $api.jump(-1)
			},
			// 上传头像
			uploadAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(res.tempFilePaths);
						// that.base_info.avatar = res.tempFilePaths[0]
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'api-token': uni.getStorageSync('token').token?uni.getStorageSync('token').token:'',
								'api-name': 'wxapp'
							},
							formData: {
								'user': 'test'
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								if (data.code == 1) {
									that.base_info.avatar = data.data.url
								}
							}
						});
					}
				});
			},
			// 上传图书照片
			uploadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(res.tempFilePaths);
						that.certificate.certificate_img = res.tempFilePaths[0]
					},
				})
			},
			// 选择性别
			selectSex(value) {
				that.base_info.sex = value
			},
			// 打开
			open(e) {
				console.log(e);
				switch(e) {
					case 'birthday' : 
						that.birthday_show = true;
						break;
					case 'work_date' :
						that.work_show = true;
						break;
					case 'salary' :
						that.salary_show = true;
						break;
					case 'work_nature' :
						that.nature_show = true;
						break;
					case 'time1' :
						that.show_time1 = true;
						break;
					case 'time2' :
						that.show_time2 = true;
						break;
					case 'skills_degree' :
						that.degree_show = true;
						break;
					case 'certificate_date' :
						that.certificate_show = true;
						break;
					case 'education' :
						that.education_show = true;
						break;
				}
			},
			// 格式化日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 确定选择生日
			confirmAge(e) {
				that.base_info.birthday = $api.formatDate(e)
				that.cancel()
			},
			// 确定选择参加工作时间
			confirmWork(e) {
				that.base_info.work_date = $api.formatDate(e)
				that.cancel()
			},
			confirmSalary(e) {
				console.log(e);
				var index1 = e.indexs[0]
				var index2 = e.indexs[1]
				if (index1 - index2 > 2) {
					$api.info('请选择正确的薪资范围')
				} else {
					that.job_inte.salary = e.value[0] + '-' + e.value[1]
					that.cancel()
				}
				
			},
			// 选择工作性质
			confirmNature(e) {
				console.log(e);
				that.job_inte.work_nature = e.value[0]
				that.cancel()
			},
			// 选择在职时间1
			confirmTime1(e) {
				that.experience.company_time1 = $api.formatDate(e)
				that.cancel()
			},
			// 选择在职时间2
			confirmTime2(e) {
				that.experience.company_time2 = $api.formatDate(e)
				that.cancel()
			},
			// 选择技能掌握程度
			confirmSkill(e) {
				that.skills.skills_degree = e.value[0]
				that.cancel()
			},
			// 选择证书获得时间
			confirmDate(e) {
				that.certificate.certificate_date = $api.formatDate(e)
				that.cancel()
			},
			// 选择学历
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				console.log(e);
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (e.index == 3 || e.index == 4) {
					// picker为选择器this实例，变化第二列对应的选项
					console.log(this.educationList2);
					picker.setColumnValues(1, this.educationList2[0])
				}
			},
			// 选择学历
			confirmEdu(e) {
				console.log(e);
				if(e.indexs.length > 1) {
					that.base_info.education = e.value[1] + e.value[0] 
				} else {
					that.base_info.education = e.value[0]
				}
				that.cancel()
			},
			// 关闭选择器
			cancel() {
				that.birthday_show = false
				that.work_show = false
				that.salary_show = false
				that.nature_show = false
				that.show_time1 = false
				that.show_time2 = false
				that.degree_show = false
				that.certificate_show = false
				that.education_show = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F4F4;
		padding: 20rpx 30rpx 0;
		.box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.cell {
				width: 100%;
				padding: 28rpx 0;
				border-bottom: 1rpx solid #F4F4F4;
				.label {
					font-size: 26rpx;
					font-weight: 400;
					color: #888888;
					padding-bottom: 28rpx;
					margin-right: 14rpx;
				}
				.label_img {
					width: 20rpx;
					height: 20rpx;
					margin: 0 4rpx 0 14rpx;
				}
				.label2 {
					font-size: 20rpx;
					font-weight: 400;
					color: #B1B1B1;
				}
				.upload {
					width: 200rpx;
					height: 200rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					.text_style1 {
						margin-top: 18rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #ADADAD;
					}
				}
			}
			.cell:nth-last-child(1) {
				border: none;
			}
		}
		.save {
			width: 100%;
			height: 84rpx;
			background: #506DFF;
			border-radius: 42rpx;
			font-size: 36rpx;
			text-align: center;
			margin: 56rpx auto;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 84rpx;
		}
	}
</style>