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.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.name?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.date_birth" disabled disabledColor="#fff" 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.edu" disabled disabledColor="#fff" border="none" placeholder="如:本科" suffixIcon="arrow-right"></u-input>
					</view>
					<u-picker title="学历" :show="education_show" :columns="educationList" ref="uPicker" @confirm="confirmEdu" @cancel="cancel" ></u-picker>
				</view>
				<view class="cell">
					<view class="label">参加工作时间</view>
					<view @click="open('work_date')">
						<u-input v-model="base_info.start_working_time" disabled disabledColor="#fff"  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" disabled disabledColor="#fff" 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" disabled disabledColor="#fff" 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.content.company_name" border="none" placeholder="请输入"></u-input>
				</view>
				<view class="cell">
					<view class="label">职位名称</view>
					<u-input v-model="experience.content.position_name" 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.content.on_job_start" disabled disabledColor="#fff" 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.content.on_job_end" disabled disabledColor="#fff" 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.content.job_description" 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" disabled disabledColor="#fff" 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" disabled disabledColor="#fff" 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>
					<u-upload :fileList="certificate.certificate_img" @afterRead="afterRead" @delete="deletePic" :maxCount="1" name="1" multiple :previewFullImage="true" width="100" height="100">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/upload.png" style="width: 200rpx;height: 200rpx;"></image>
					</u-upload>
					<!-- <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: '',
					name: '',
					sex: '',
					date_birth: '',
					start_working_time: '',
					phone: '',
					email: '',
					edu: '',
				},
				educationList: [
					['初中及以下','中专/中技','高中','大专','本科','硕士','博士']
				],
				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: {
					content: {
						company_name: '',
						position_name: '',
						on_job_start: '',
						on_job_end: '',
						job_description: '',
					}
					
				},
				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'),
				id: ''
			}
		},
		onLoad(options) {
			that = this
			if(options.id) {
				that.id = options.id
			}
			console.log(that.id);
			that.index = options.index
			that.isInfo(options.index)
			that.getData()
		},
		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
				})
			},
			getData() {
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				that.base_info = prePage.$vm.base_info
				if(!that.base_info.sex) {
					that.base_info.sex = "女"
				}
				that.job_inte = prePage.$vm.job_inte
				var experienceList = prePage.$vm.experience
				for(var i=0;i<experienceList.length;i++) {
					if(that.id == experienceList[i].id) {
						that.experience =experienceList[i]
					}
				}
				console.log(that.experience);
				var skills = prePage.$vm.skills
				var certificate = prePage.$vm.certificate
			},
			// 保存
			save() {
				uni.showLoading({
					title: '保存中',
					mask:true
				})
				if(that.index == '1') {
					if($api.formCheck(that.base_info.avatar,"required") && $api.formCheck(that.base_info.name,"truename") && $api.formCheck(that.base_info.date_birth,"required") && $api.formCheck(that.base_info.edu,"required")
					 && $api.formCheck(that.base_info.start_working_time,"required") && $api.formCheck(that.base_info.phone,"mobile")&& $api.formCheck(that.base_info.email,"email")) {
						$api.req({
							url: '/data/api.auth.DemandLabor/applyjob',
							method: 'POST',
							data: {
								type: that.index,
								head_img: that.base_info.avatar,
								real_name: that.base_info.name,
								sex: that.base_info.sex,
								date_birth: that.base_info.date_birth,
								schooling: that.base_info.edu,
								start_working_time: that.base_info.start_working_time,
								phone: that.base_info.phone,
								email: that.base_info.email
							}
						}, function(res) {
							uni.hideLoading()
							if(res.code == 1) {
								$api.info(res.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.req({
							url: '/data/api.auth.DemandLabor/applyjob',
							method: 'POST',
							data: {
								type: that.index,
								job_application: that.job_inte.post,
								scope_work_area: that.job_inte.work_address,
								monthly_salary: that.job_inte.salary,
								working_time: that.job_inte.work_time,
								work_nature: that.job_inte.work_nature,
							}
						}, function(res) {
							uni.hideLoading()
							if(res.code == 1) {
								$api.info(res.info)
								$api.jump(-1)
							}
						})
					}
				}
				if(that.index == '3') {
					if($api.formCheck(that.experience.content.company_name,"required") && $api.formCheck(that.experience.content.position_name,"required") && $api.formCheck(that.experience.content.on_job_start,"required")
					 && $api.formCheck(that.experience.content.on_job_end,"required") && $api.formCheck(that.experience.content.job_description,"required")) {
						var work_experience = {
							company_name: that.experience.content.company_name,
							position_name: that.experience.content.position_name,
							on_job_start: that.experience.content.on_job_start,
							on_job_end: that.experience.content.on_job_end,
							job_description: that.experience.content.job_description
						}
						work_experience = JSON.stringify(work_experience)
						console.log(that.id);
						$api.req({
							url: '/data/api.auth.DemandLabor/applyjob',
							method: 'POST',
							data: {
								type: that.index,
								child_id: that.id,
								work_experience: work_experience
							}
						}, function(res) {
							uni.hideLoading()
							if(res.code == 1) {
								$api.info(res.info)
								$api.jump(-1)
							}
						})
					}
				}
				if(that.index == '4') {
					if($api.formCheck(that.skills.skills_name,"required") && $api.formCheck(that.skills.skills_degree,"required")) {
						var professional_skills = {
							skill_name: that.skills.skills_name,
							degree: that.skills.skills_degree
						}
						professional_skills = JSON.stringify(professional_skills)
						$api.req({
							url: '/data/api.auth.DemandLabor/applyjob',
							method: 'POST',
							data: {
								type: that.index,
								child_id: that.id,
								professional_skills: professional_skills
							}
						}, function(res) {
							uni.hideLoading()
							if(res.code == 1) {
								$api.info(res.info)
								$api.jump(-1)
							}
						})
					}
				}
				if(that.index == '5') {
					if($api.formCheck(that.certificate.certificate_name,"required") && $api.formCheck(that.certificate.certificate_date,"required")) {
						var certificate = {
							certificate_name: that.certificate.certificate_name,
							gain_time: that.certificate.certificate_date,
							img: that.certificate.certificate_img[0].url
						}
						certificate = JSON.stringify(certificate)
						$api.req({
							url: '/data/api.auth.DemandLabor/applyjob',
							method: 'POST',
							data: {
								type: that.index,
								child_id: that.id,
								certificate: certificate
							}
						}, function(res) {
							uni.hideLoading()
							if(res.code == 1) {
								$api.info(res.info)
								$api.jump(-1)
							}
						})
					}
				}
				// $api.jump(-1)
			},
			// 上传头像
			uploadAvatar() {
				uni.showLoading({
					title: '加载中'
				})
				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.$set(that.base_info,'avatar',data.data.url)
									// that.base_info.avatar = data.data.url
									uni.hideLoading()
								}
							}
						});
					}
				});
			},
			// 删除图片
			deletePic(event) {
				that.certificate.certificate_img.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let imgListLen = that.certificate.certificate_img.length
				lists.map((item) => {
					that.certificate.certificate_img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await that.uploadFilePromise(lists[i].url)
					let item = that.certificate.certificate_img[imgListLen]
					that.certificate.certificate_img.splice(imgListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					imgListLen++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + '/data/api.auth.Center/upload',
						filePath: url,
						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) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			/* // 上传图书照片
			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 = that.sexList[value].name
				console.log(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.date_birth = $api.formatDate(e)
				that.cancel()
			},
			// 确定选择参加工作时间
			confirmWork(e) {
				that.base_info.start_working_time = $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.content.on_job_start = $api.formatDate(e)
				that.cancel()
			},
			// 选择在职时间2
			confirmTime2(e) {
				that.experience.content.on_job_end = $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.edu = e.value[0] 
				} else {
					that.base_info.edu = 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>