cbz/page_mine/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="/static/images/comment/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" 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>
				<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.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" 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="box_title">工作履历</view>
				<view class="box_subTitle">请填写您近年来的工作经历</view>
				<u-input v-model="userInfo.work" border="bottom"></u-input>
				<view class="box_title">资质证书</view>
				<view class="box_subTitle">至少上传一张专业证书（包含毕业证书），证书请完整展示姓名，证书名称，证书日期及有效期</view>
				<view class="upload">
					<u-upload :fileList="userInfo.imgList" @afterRead="afterRead" @delete="deletePic" :maxCount="10" name="1" multiple :previewFullImage="true" width="110" height="110">
						<image src="/static/images/comment/upload.png" style="width: 220rpx;height: 220rpx;"></image>
					</u-upload>
				</view>
				<view class="box_title">培训经历</view>
				<view class="box_subTitle">请详细描述您的培训经历</view>
				<u-input v-model="userInfo.train" border="bottom"></u-input>
				<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="/static/images/comment/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="/static/images/comment/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: '',	//所在地区
					province: '',
					city:'',
					area: '',
					address: '',	//详细地址
					education: '',	//学历
					specialty: '',	//特长
					skill: '',	//技能
					title: '',	//职称
					title_id: '',
					work: '',	//工作经历
					imgList: [],	//资质证明
					train: '',	//培训经历
				},
				sexList: ['男','女'],
				ageList: [],
				educationList: ['初中及以下','中专/中技','高中','大专','本科','硕士','博士'],
				titleList: [],
				state: 0,	//0 未加入，1 待审核，2 审核成功， 3审核失败
				reason: '资料填写不完整',	//驳回原因
			}
		},
		onLoad() {
			that = this
			that.getPrepage()
			that.getzclist()
			that.getageList()
		},
		methods: {
			getPrepage() {
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				var pooltalent = prePage.$vm.user.pooltalent
				if(pooltalent) {
					that.userInfo = {
						name: pooltalent.name,	//姓名
						sex: pooltalent.sex,	//性别
						age: pooltalent.age,	//年龄
						place: pooltalent.jg,	//籍贯
						phone: pooltalent.phone,	//电话
						email: pooltalent.email,	//邮箱
						region: pooltalent.province + pooltalent.city + pooltalent.area,	//所在地区
						province: pooltalent.province,
						city:pooltalent.city,
						area: pooltalent.area,
						address: pooltalent.address,	//详细地址
						education: pooltalent.xl,	//学历
						specialty: pooltalent.tc,	//特长
						skill: pooltalent.jn,	//技能
						title: pooltalent.zc.name,	//职称
						title_id: pooltalent.zc.id,
						work: pooltalent.gzll,	//工作经历
						train: pooltalent.pxjl,
						id: pooltalent.id
					}
					var imgs = pooltalent.zz_imgs.split(',')
					let obj = {}
					for(let key in imgs) {
						obj[key] = imgs[key]
					}
					var imgList = Object.keys(obj).map(item => ({
						url: obj[item]
					}))
					for(let i in imgList) {
						console.log(imgList[i].url.length);
						if(imgList[i].url.length <= 1) {
							console.log(imgList[i]);
							imgList.splice(i, 1)
						}
					}
					that.userInfo.imgList = imgList
					
					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
					}
				})
			},
			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) {
				console.log(event);
				that.userInfo.imgList.splice(event.index, 1)
				console.log(that.userInfo.imgList);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let imgListLen = that.userInfo.imgList.length
				lists.map((item) => {
					that.userInfo.imgList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await that.uploadFilePromise(lists[i].url)
					let item = that.userInfo.imgList[imgListLen]
					that.userInfo.imgList.splice(imgListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					imgListLen++
				}
			},
			// 上传图片
			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
			},
			// 返回
			result() {
				$api.jump(-1)
			},
			// 提交
			submit() {
				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.imgList.length > 0) {
						for(var i=0;i<u.imgList.length;i++) {
							if(i == u.imgList.length - 1) {
								zz_imgs += u.imgList[i].url
							} else {
								zz_imgs += u.imgList[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,
							xl: u.education,
							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)
						}
					})
				} 
			}
		},
	}
</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>