cbz/page_mine/pages/service/perfect.vue

<template>
	<view class="content vflex jbetween">
		<view >
			<view class="box">
				<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.postion_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" 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" 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.company_content" border="none" placeholder="请详细描述你在公司的主要工作内容以及…" suffixIcon="arrow-right"></u-input>
				</view>
			</view>
		</view>
		<view class="hflex acenter jcenter">
			<view class="save del" @click="del">删除</view>
			<view class="save" @click="save">保存</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				
				experience: {
					content: {
						company_name: '',
						postion_name: '',
						on_job_start: '',
						on_job_end: '',
						company_content: '',
					}
					
				},
				
				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
				that.getData()
			}
			console.log(that.id);
			
			
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			
			getData() {
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				
				var experienceList = prePage.$vm.userInfo.work
				for(var i=0;i<experienceList.length;i++) {
					if(that.id == experienceList[i].id) {
						that.experience =experienceList[i]
					}
				}
				console.log(that.experience);
				
			},
			// 保存
			save() {
				if($api.formCheck(that.experience.content.company_name,"required") && $api.formCheck(that.experience.content.postion_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.company_content,"required")) {
					var work_experience = {
						company_name: that.experience.content.company_name,
						postion_name: that.experience.content.postion_name,
						on_job_start: that.experience.content.on_job_start,
						on_job_end: that.experience.content.on_job_end,
						company_content: that.experience.content.company_content
					}
					work_experience = JSON.stringify(work_experience)
					console.log(that.id);
					$api.req({
						url: '/data/api.auth.Center/adduppooltalentchild',
						method: 'POST',
						data: {
							id: that.id,
							content: work_experience
						}
					}, function(res) {
						if(res.code == 1) {
							if(that.id) {
								var pages = getCurrentPages()
								var prePage = pages[pages.length - 2]
								var list = prePage.$vm.userInfo.work
								for(var i=0;i<list.length;i++) {
									if(list[i].id == that.id) {
										list[i] = work_experience
									}
								}
								prePage.$vm.userInfo.work=list
							} else {
								var pages = getCurrentPages()
								var prePage = pages[pages.length - 2]
								prePage.$vm.userInfo.work.push(work_experience)
							}
							$api.info(res.info)
							$api.jump(-1)
						}
					})
				}
				
			},
			del() {
				$api.req({
					url: '/data/api.auth.Center/delpooltalentchild',
					method: 'POST',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						var pages = getCurrentPages()
						var prePage = pages[pages.length - 2]
						var list = prePage.$vm.userInfo.work
						for(var i=0;i<list.length;i++) {
							if(list[i].id == that.id) {
								list.splice(i,1)
							}
						}
						prePage.$vm.userInfo.work=list
						$api.info(res.info)
						$api.jump(-1)
					}
				})
			},
			// 打开
			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: 45%;
			height: 84rpx;
			background: #506DFF;
			border-radius: 42rpx;
			font-size: 36rpx;
			text-align: center;
			margin: 56rpx auto;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 84rpx;
		}
		.del {
			background: #fff;
			border: 1rpx solid #506DFF;
			color: #506DFF;
			margin-right: 40rpx;
		}
	}
</style>