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.shipcc.cn/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" :class="state != 2 ? 'required' : ''">姓名</view>
					<view class="left" v-if="state == 2">{{userInfo.name}}</view>
					<u-input v-model="userInfo.name" v-if="state != 2" placeholder="请输入您的姓名" inputAlign="right" border="none"></u-input>
				</view>
				<picker @change="bindSexChange" :value="index" :range="sexList" :disabled="state == 2 ? true: false">
					<view class="hflex acenter jbetween cell">
						<view class="left " :class="state != 2 ? 'required' : ''">性别</view>
						<view class="left" v-if="state == 2">{{userInfo.sex}}</view>
						<u-input border="none" v-model="userInfo.sex" v-if="state != 2" disabled disabledColor="#fff" placeholder="请选择您的性别" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7" inputAlign="right"></u-input>
					</view>
				</picker>
				<picker @change="bindAgeChange" :value="index" :range="ageList" :disabled="state == 2 ? true: false">
					<view class="hflex acenter jbetween cell">
						<view class="left " :class="state != 2 ? 'required' : ''">年龄</view>
						<view class="left" v-if="state == 2">{{userInfo.age}}</view>
						<u-input border="none" v-model="userInfo.age" v-if="state != 2" 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 " :class="state != 2 ? 'required' : ''">籍贯</view>
					<view class="left" v-if="state == 2">{{userInfo.place}}</view>
					<u-input v-model="userInfo.place" v-if="state != 2" placeholder="请输入您的籍贯" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left " :class="state != 2 ? 'required' : ''">电话</view>
					<view class="left" v-if="state == 2">{{userInfo.phone}}</view>
					<u-input v-model="userInfo.phone" v-if="state != 2" placeholder="请输入您的电话" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left " :class="state != 2 ? 'required' : ''">邮箱</view>
					<view class="left" v-if="state == 2">{{userInfo.email}}</view>
					<u-input v-model="userInfo.email" v-if="state != 2" placeholder="请输入您的邮箱" inputAlign="right" border="none"></u-input>
				</view>
				<picker mode="region" @change="changeAddress" :value="index"  :disabled="state == 2 ? true: false">
					<view class="hflex acenter jbetween cell">
						<view class="left " :class="state != 2 ? 'required' : ''">所在地区</view>
						<view class="left" v-if="state == 2">{{userInfo.region}}</view>
						<u-input border="none" v-if="state != 2" 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 " :class="state != 2 ? 'required' : ''">详细地址</view>
					<view class="left" v-if="state == 2">{{userInfo.address}}</view>
					<u-input v-model="userInfo.address" v-if="state != 2" placeholder="街道,楼牌号等" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left " :class="state != 2 ? 'required' : ''">毕业院校</view>
					<view class="left" v-if="state == 2">{{userInfo.school}}</view>
					<u-input v-model="userInfo.school" v-if="state != 2" placeholder="请输入您的毕业院校" inputAlign="right" border="none"></u-input>
				</view>
				<picker @change="bindEduChange" :value="index" :range="educationList" :disabled="state == 2 ? true: false">
					<view class="hflex acenter jbetween cell">
						<view class="left " :class="state != 2 ? 'required' : ''">学历</view>
						<view class="left" v-if="state == 2">{{userInfo.education}}</view>
						<u-input border="none" v-if="state != 2" 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 " :class="state != 2 ? 'required' : ''">专业</view>
					<view class="left" v-if="state == 2">{{userInfo.major}}</view>
					<u-input v-model="userInfo.major" v-if="state != 2" placeholder="请输入您的专业" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left " :class="state != 2 ? 'required' : ''">工作年限</view>
					<view class="left" v-if="state == 2">{{userInfo.year}}</view>
					<u-input v-model="userInfo.year" v-if="state != 2" placeholder="请输入您的工作年限" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">个人特长</view>
					<view class="left" v-if="state == 2">{{userInfo.specialty?userInfo.specialty: '-'}}</view>
					<u-input v-model="userInfo.specialty" v-if="state != 2" placeholder="请输入您的特长" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">专业技能</view>
					<view class="left" v-if="state == 2">{{userInfo.skill?userInfo.skill: '-'}}</view>
					<u-input v-model="userInfo.skill" v-if="state != 2" placeholder="请输入您的技能描述" inputAlign="right" border="none"></u-input>
				</view>
				<picker @change="bindTitleChange" :value="index" :range="titleList" range-key="name" :disabled="state == 2 ? true: false">
					<view class="hflex acenter jbetween cell">
						<view class="left">职称选择</view>
						<view class="left" v-if="state == 2">{{userInfo.title?userInfo.title: '-'}}</view>
						<u-input border="none" v-if="state != 2" disabled disabledColor="#fff" v-model="userInfo.title" placeholder="请选择您的职称" suffixIcon="arrow-right" suffixIconStyle="color: #b7b7b7" inputAlign="right"></u-input>
					</view>
				</picker>
			</view>
			<view class="box" style="margin-bottom: 108rpx;">
				<view class="box_title">简历及相关信息</view>
				<view class="hflex acenter jbetween">
					<view class="box_title " :class="state != 2 ? 'required' : ''">工作经历</view>
					<view class="hflex acenter" @click="perfect(3)" v-if="state != 2">
						<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" v-if="state != 2"></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" :class="state == 2 ? 'line' : ''">培训经历</view>
				<view class="box_subTitle"  v-if="state != 2">请详细描述您的培训经历</view>
				<view class="box_subTitle" v-if="state == 2">{{userInfo.train?userInfo.train:'-'}}</view>
				<u-input v-model="userInfo.train" v-if="state != 2" border="bottom"></u-input>
				<view class="box_title" :class="state == 2 ? 'line' : ''">资质证书</view>
				<view class="box_subTitle" v-if="state != 2">至少上传一张专业证书（包含毕业证书），证书请完整展示姓名，证书名称，证书日期及有效期</view>
				<view class="upload">
					<view class="hflex acenter fwrap" v-if="state == 2">
						<image :src="item.url" v-for="(item,index) in userInfo.fileList1" style="width: 200rpx;height: 200rpx;margin: 0 20rpx 20rpx 0;" :key="index"></image>
					</view>
					<u-upload v-if="state != 2" :fileList="userInfo.fileList1" @afterRead="afterRead" @delete="deletePic" :maxCount="9" name="1" multiple width="100" height="100">
						<!-- <image src="https://ship.shipcc.cn/common/upload.png" style="width: 200rpx;height: 200rpx;"></image> -->
						<view class="vflex acenter jcenter upload_bg" style="background: #F4F4F4;border-radius: 16rpx;width: 200rpx;height: 200rpx;">
							<u-icon name="plus" color="#ADADAD" size="32"></u-icon>
							<view class="" style="font-size: 26rpx;padding-top: 8px;color: #ADADAD;">
								上传图片
							</view>
						</view>
					</u-upload>
				</view>
				
			</view>
			<view class="bottom" v-if="state == 0">
				<view class="btn" @click="submit">提交</view>
			</view>
		</view>
		<view class="box1 vflex acenter" v-if="state == 1">
			<image src="https://ship.shipcc.cn/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.shipcc.cn/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) {
								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<=65;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) {
				if(that.state == 2) {
					return
				}
				$api.jump('/page_shop/pages/service/perfect')
			},
			// 修改工作经历
			editInfo(id) {
				if(that.state == 2) {
					return
				}
				$api.jump('/page_shop/pages/service/perfect?id='+ id)
			},
			// 返回
			result() {
				$api.jump(-1)
			},
			// 提交
			submit() {
				var u = that.userInfo
				var zz_imgs = ""
				if(u.name == '') {
					$api.info('请输入真实姓名')
					return
				}
				if(u.sex == '') {
					$api.info('请选择性别')
					return
				}
				if(u.age == '') {
					$api.info('请选择年龄')
					return
				}
				if(u.place == '') {
					$api.info('请输入籍贯')
					return
				}
				if(u.phone == '') {
					$api.info('请输入电话')
					return
				}
				if(u.email == '') {
					$api.info('请输入邮箱')
					return
				}
				if(u.city == '') {
					$api.info('请选择所在地区')
					return
				}
				if(u.address == '') {
					$api.info('请输入详细地址')
					return
				}
				if(u.school == '') {
					$api.info('请输入毕业院校')
					return
				}
				if(u.education == '') {
					$api.info('请选择学历')
					return
				}
				if(u.major == '') {
					$api.info('请输入专业')
					return
				}
				if(u.year == '') {
					$api.info('请输入工作年限')
					return
				}
				if(u.work.length == 0) {
					$api.info('请添加工作经历')
					return
				}
 				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')) {
					/* uni.showLoading({
						title: '上传中',
						mask: true
					}) */
					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) {
						$api.info(res.info)
						if(res.code == 1) {
							that.state = 1
							// $api.jump('/pages/tabbar/mine/mine',3)
						}
					})
				} else {
				}
			}
		},
	}
</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;
			}
		}
		.required {
			position: relative;
			padding-left: 15rpx;
		}
		.required::after {
			content: '*';
			position: absolute;
			top: 5rpx;
			left: 0;
			font-size: 26rpx;
			font-weight: 400;
			color: #FF3232;
		}
		.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;
			}
			.line {
				padding-top: 20rpx;
				border-top: 1px solid #F4F4F4;
			}
			.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 {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			padding: 24rpx;
			z-index: 99;
			// 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>