cbz/page_shop/pages/service/joinPerson.vue

<template>
	<view class="content">
		<view class="" v-if="state == 0 || state == 2">
			<view class="top hflex acenter" v-if="state == 2">
				<image src="https://ship-expert.zhousi.hdlkeji.com/common/person.png" class="top_img"></image>
				<view class="top_text">你已成功加入人才库</view>
			</view>
			<view class="box" style="margin-top: 20rpx;">
				<view class="box_title">基本信息</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">姓名</view>
					<u-input v-model="userInfo.name" placeholder="请输入您的姓名" inputAlign="right" border="none"></u-input>
				</view>
				<picker @change="bindSexChange" :value="index" :range="sexList">
					<view class="hflex acenter jbetween cell">
						<view class="left">性别</view>
						<u-input border="none" v-model="userInfo.sex" disabled disabledColor="#fff" placeholder="请选择您的性别" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7" inputAlign="right"></u-input>
					</view>
				</picker>
				<picker @change="bindAgeChange" :value="index" :range="ageList">
					<view class="hflex acenter jbetween cell">
						<view class="left">年龄</view>
						<u-input border="none" v-model="userInfo.age" disabled disabledColor="#fff" placeholder="请选择您的年龄" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7" inputAlign="right"></u-input>
					</view>
				</picker>
				<view class="hflex acenter jbetween cell">
					<view class="left">籍贯</view>
					<u-input v-model="userInfo.place" placeholder="请输入您的籍贯" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">电话</view>
					<u-input v-model="userInfo.phone" placeholder="请输入您的电话" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">邮箱</view>
					<u-input v-model="userInfo.email" placeholder="请输入您的邮箱" inputAlign="right" border="none"></u-input>
				</view>
				<picker mode="region" @change="changeAddress" :value="index" >
					<view class="hflex acenter jbetween cell">
						<view class="left">所在地区</view>
						<u-input border="none" inputAlign="right" disabled disabledColor="#fff" v-model="userInfo.region" placeholder="请选择省市区" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7"></u-input>
					</view>
				</picker>
				<view class="hflex acenter jbetween cell">
					<view class="left">详细地址</view>
					<u-input v-model="userInfo.address" placeholder="街道,楼牌号等" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">毕业院校</view>
					<u-input v-model="userInfo.school" placeholder="请输入您的毕业院校" inputAlign="right" border="none"></u-input>
				</view>
				<picker @change="bindEduChange" :value="index" :range="educationList">
					<view class="hflex acenter jbetween cell">
						<view class="left">学历</view>
						<u-input border="none" v-model="userInfo.education" disabled disabledColor="#fff" placeholder="请选择您的学历" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7" inputAlign="right"></u-input>
					</view>
				</picker>
				<view class="hflex acenter jbetween cell">
					<view class="left">专业</view>
					<u-input v-model="userInfo.major" placeholder="请输入您的专业" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">工作年限</view>
					<u-input v-model="userInfo.year" placeholder="请输入您的工作年限" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">个人特长</view>
					<u-input v-model="userInfo.specialty" placeholder="请输入您的特长" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">专业技能</view>
					<u-input v-model="userInfo.skill" placeholder="请输入您的技能描述" inputAlign="right" border="none"></u-input>
				</view>
				<picker @change="bindTitleChange" :value="index" :range="titleList" range-key="name">
					<view class="hflex acenter jbetween cell">
						<view class="left">职称选择</view>
						<u-input border="none" disabled disabledColor="#fff" v-model="userInfo.title" placeholder="请选择您的职称" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7" inputAlign="right"></u-input>
					</view>
				</picker>
			</view>
			<view class="box">
				<view class="box_title">简历及相关信息</view>
				<view class="hflex acenter jbetween">
					<view class="box_title">工作经历</view>
					<view class="hflex acenter" @click="perfect(3)">
						<u-icon name="plus-circle-fill" color="#555555" size="12"></u-icon>
						<view class="text_style1">添加</view>
					</view>
				</view>
				<block v-for="(item,index) in userInfo.work" :key="index">
					<view class="padT-26" @click="editInfo(item.id)">
						<view class="hflex acenter jbetween">
							<view class="box_title">{{item.content.company_name}}</view>
							<u-icon name="arrow-right" color="#555555" size="12"></u-icon>
						</view>
						<view class="hflex acenter padT-26">
							<view class="box_subTitle padR-24" style="padding-right: 24rpx;">{{item.content.on_job_start}}-{{item.content.on_job_end}}</view>
							<view class="box_subTitle">{{item.content.position_name}}</view>
						</view>
						<view class="hflex fwrap padT-26 box_subTitle">工作内容：{{item.content.job_description}}</view>
					</view>
				</block>
				<view class="box_title">培训经历</view>
				<view class="box_subTitle">请详细描述您的培训经历</view>
				<u-input v-model="userInfo.train" border="bottom"></u-input>
				<view class="box_title">资质证书</view>
				<view class="box_subTitle">至少上传一张专业证书（包含毕业证书），证书请完整展示姓名，证书名称，证书日期及有效期</view>
				<view class="upload">
					<u-upload :fileList="userInfo.fileList1" @afterRead="afterRead" @delete="deletePic" :maxCount="9" name="1" multiple width="100" height="100">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/upload.png" style="width: 200rpx;height: 200rpx;"></image>
					</u-upload>
				</view>
				<view class="bottom" v-if="state == 0">
					<view class="btn" @click="submit">提交</view>
				</view>
			</view>
		</view>
		<view class="box1 vflex acenter" v-if="state == 1">
			<image src="https://ship-expert.zhousi.hdlkeji.com/common/wait.png" class="box1_img"></image>
			<view class="box1_title">审核中</view>
			<view class="box1_subTitle">预计审核时间3个工作日</view>
			<view class="box1_subTitle">请留意当前页面变动</view>
			<view class="btn" @click="result">返回</view>
		</view>
		<view class="box1 vflex acenter" v-if="state == 3">
			<image src="https://ship-expert.zhousi.hdlkeji.com/common/error.png" class="box1_img"></image>
			<view class="box1_title">审核失败</view>
			<view class="box1_subTitle">驳回原因</view>
			<view class="box1_subTitle">{{reason}}<span style="color: #506dff;margin-left: 8rpx;" @click="edit">立即修改></span></view>
			<view class="btn" @click="result">返回</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				userInfo: {
					id: '',
					name: '',	//姓名
					sex: '',	//性别
					age: '',	//年龄
					place: '',	//籍贯
					phone: '',	//电话
					email: '',	//邮箱
					region: '',	//所在地区
					school: '',
					major: '',
					year: '',
					province: '',
					city:'',
					area: '',
					address: '',	//详细地址
					education: '',	//学历
					specialty: '',	//特长
					skill: '',	//技能
					title: '',	//职称
					title_id: '',
					work: [],	//工作经历
					fileList1: [],	//资质证明
					train: '',	//培训经历
				},
				sexList: ['男','女'],
				ageList: [],
				educationList: ['初中及以下','中专/中技','高中','大专','本科','硕士','博士'],
				titleList: [],
				state: 0,	//0 未加入，1 待审核，2 审核成功， 3审核失败
				reason: '',	//驳回原因
			}
		},
		onLoad() {
			that = this
			that.getzclist()
			that.getageList()
			that.getPrepage()
		},
		onShow() {
			that.getWork()
		},
		methods: {
			getPrepage() {
				var pooltalent = {}
				$api.req({
					url: '/data/api.auth.Center/get',
					method: 'POST',
				}, function(res) {
					if(res.code == 1) {
						pooltalent  = res.data.pooltalent
						if(pooltalent) {
							that.userInfo = {
								name: pooltalent.name,	//姓名
								sex: pooltalent.sex,	//性别
								age: pooltalent.age?pooltalent.age:'',	//年龄
								place: pooltalent.jg,	//籍贯
								phone: pooltalent.phone,	//电话
								email: pooltalent.email,	//邮箱
								region: pooltalent.province? pooltalent.province + pooltalent.city + pooltalent.area:'',	//所在地区
								province: pooltalent.province,
								city:pooltalent.city,
								area: pooltalent.area,
								address: pooltalent.address,	//详细地址
								school: pooltalent.graduate_school,
								major: pooltalent.major,
								year: pooltalent.working_life,
								education: pooltalent.xl,	//学历
								specialty: pooltalent.tc,	//特长
								skill: pooltalent.jn,	//技能
								title: pooltalent.zc?pooltalent.zc.name:'',	//职称
								title_id: pooltalent.zc?pooltalent.zc.id:'',
								work: pooltalent.gzll,	//工作经历
								train: pooltalent.pxjl,
								id: pooltalent.id
							}
							var imgs = pooltalent.zz_imgs
							let obj = {}
							for(let key in imgs) {
								obj[key] = imgs[key]
							}
							var fileList1 = Object.keys(obj).map(item => ({
								url: obj[item]
							}))
							for(let i in fileList1) {
								console.log(fileList1[i].url.length);
								if(fileList1[i].url.length <= 1) {
									console.log(fileList1[i]);
									fileList1.splice(i, 1)
								}
							}
							that.userInfo.fileList1 = fileList1
							console.log(that.userInfo.fileList1);
							that.state = pooltalent.audit
							that.reason = pooltalent.why
						}
					}
				})
				
			},
			getzclist() {
				$api.req({
					url: '/data/api.auth.Center/zclist',
					method: 'POST',
				}, function(res) {
					if(res.code == 1) {
						that.titleList = res.data
					}
				})
			},
			getWork() {
				var data = uni.getStorageSync('work_experience')
				if(!data) {
					return
				}
				var work = {
					content: JSON.parse(data)
				}
				that.userInfo.work.push(work)
				// console.log(that.userInfo.work);
				uni.removeStorageSync('work_experience')
			},
			getageList() {
				for(var i=18;i<=60;i++) {
					that.ageList.push(i)
				}
			},
			// 选择性别
			bindSexChange(e) {
				that.userInfo.sex = that.sexList[e.detail.value]
			},
			// 选择年龄
			bindAgeChange(e) {
				that.userInfo.age = that.ageList[e.detail.value]
			},
			// 选择所在地区
			changeAddress(e) {
				that.userInfo.region = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2]
				that.userInfo.province = e.detail.value[0]
				that.userInfo.city = e.detail.value[1]
				that.userInfo.area = e.detail.value[2]
			},
			// 选择学历
			bindEduChange(e) {
				that.userInfo.education = that.educationList[e.detail.value]
			},
			// 选择职称
			bindTitleChange(e) {
				that.userInfo.title = that.titleList[e.detail.value].name
				that.userInfo.title_id = that.titleList[e.detail.value].id
			},
			// 删除图片
			deletePic(event) {
				this.userInfo[`fileList${event.name}`].splice(event.index, 1)
				this.$forceUpdate()
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.userInfo[`fileList${event.name}`].length
				lists.map((item) => {
					this.userInfo[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.userInfo[`fileList${event.name}`][fileListLen]
					this.userInfo[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					fileListLen++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
				console.log(that.userInfo.fileList1);
				this.$forceUpdate()
			},
			// 上传图片
			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)
						}
					});
				})
			},
			// 立即修改
			edit() {
				that.state = 0
			},
			// 添加或完善
			perfect(index) {
				$api.jump('/page_shop/pages/service/perfect')
			},
			// 修改工作经历
			editInfo(id) {
				$api.jump('/page_shop/pages/service/perfect?id='+ id)
			},
			// 返回
			result() {
				$api.jump(-1)
			},
			// 提交
			submit() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				var u = that.userInfo
				var zz_imgs = ""
				
 				if ($api.formCheck(u.name,'truename') && $api.formCheck(u.sex,'required') && $api.formCheck(u.age,'required') && $api.formCheck(u.phone,'mobile') && $api.formCheck(u.email,'email')) {
					if(u.fileList1.length == 0) {
						$api.info('请上传资质证书！')
						return
					}
					if(u.fileList1.length > 0) {
						for(var i=0;i<u.fileList1.length;i++) {
							if(i == u.fileList1.length - 1) {
								zz_imgs += u.fileList1[i].url
							} else {
								zz_imgs += u.fileList1[i].url + ','
							}
						}
					}
					$api.req({
						url: '/data/api.auth.Center/adduppooltalent',
						method: 'POST',
						data: {
							id: u.id?u.id: '',
							name: u.name,
							sex: u.sex,
							age: u.age,
							jg: u.place,
							phone: u.phone,
							email: u.email,
							province: u.province,
							city: u.city,
							area: u.area,
							address: u.address,
							graduate_school: u.school,
							xl: u.education,
							major: u.major,
							working_life: u.year,
							tc: u.specialty,
							jn: u.skill,
							zc_id: u.title_id,
							gzll: u.work,
							zz_imgs: zz_imgs,
							pxjl: u.train
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info(res.info)
							that.state = 1
							// $api.jump('/pages/tabbar/mine/mine',3)
						}
						uni.hideLoading()
					})
				} else {
					uni.hideLoading()
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background-color: #f4f4f4;
		// padding-top: 20rpx;
		.top {
			width: 100%;
			height: 60rpx;
			background-color: #f8efe2;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			.top_img {
				width: 36rpx;
				height: 36rpx;
			}
			.top_text {
				font-size: 26rpx;
				margin-left: 6rpx;
				color: #330e00;
			}
		}
		.box {
			width: 100%;
			background-color: #fff;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 28rpx 30rpx;
			.box_title {
				font-size: 30rpx;
				color: #222;
				margin: 20rpx 0 32rpx;
			}
			.box_subTitle {
				font-size: 26rpx;
				color: #b7b7b7;
				// margin: ;
			}
			.upload {
				margin-top: 20rpx;
				width: 100%;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f4f4f4;
			}
			.u-input {
				width: 100%;
				// margin-top: 30rpx;
			}
			.cell {
				width: 100%;
				padding: 20rpx 0;
				.left {
					font-size: 28rpx;
					color: #222;
				}
				.u-input {
					font-size: 28rpx;
					color: #222;
				}
			}
			.bottom {
				margin: 80rpx 0 50rpx;
				.btn {
					width: 100%;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					line-height: 88rpx;
					background-color: #506dff;
					font-size: 36rpx;
					color: #fff;
				}
			}
		}
		.box1 {
			width: 100%;
			height: 100vh;
			background-color: #fff;
			.box1_img {
				width: 124rpx;
				height: 124rpx;
				margin: 108rpx 0 40rpx;
			}
			.box1_title {
				font-size: 32rpx;
				color: #222;
				margin-bottom: 24rpx;
			}
			.box1_subTitle {
				margin: 12rpx 0;
				font-size: 26rpx;
				color: #595959;
			}
			.btn {
				width: 530rpx;
				height: 88rpx;
				background-color: #506dff;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 36rpx;
				margin-top: 122rpx;
			}
		}
	}
</style>