cbz/page_mine/pages/service/joinPerson.vue

<template>
	<view class="content">
		<view class="" v-if="state == 0 || state == 1">
			<view class="top hflex acenter" v-if="state == 1">
				<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="sexList[userInfo.sex]" 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="ageList[userInfo.age]" 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="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="educationList[userInfo.education]" 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">
					<view class="hflex acenter jbetween cell">
						<view class="left">职称选择</view>
						<u-input border="none" v-model="titleList[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 == 2">
			<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: {
					name: '',	//姓名
					sex: '',	//性别
					age: '',	//年龄
					place: '',	//籍贯
					phone: '',	//电话
					email: '',	//邮箱
					region: '',	//所在地区
					address: '',	//详细地址
					education: '',	//学历
					specialty: '',	//特长
					skill: '',	//技能
					title: '',	//职称
					work: '',	//工作经历
					imgList: [],	//资质证明
					train: '',	//培训经历
				},
				sexList: ['男','女'],
				ageList: ['18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50'],
				educationList: ['初中','高中','专科','本科','研究生','博士'],
				titleList: ['初级','中级','高级','特级'],
				state: 3,	//0 未加入，1 已加入，2 审核中， 3审核失败
				reason: '资料填写不完整',	//驳回原因
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 选择性别
			bindSexChange(e) {
				that.userInfo.sex = e.detail.value
			},
			// 选择年龄
			bindAgeChange(e) {
				that.userInfo.age = e.detail.value
			},
			// 选择所在地区
			changeAddress(e) {
				console.log(e);
				that.userInfo.region = e.detail.value[0] + '-' + e.detail[1] + '-' + e.detail[2]
			},
			// 选择学历
			bindEduChange(e) {
				that.userInfo.education = e.detail.value
			},
			// 选择职称
			bindTitleChange(e) {
				that.userInfo.title = e.detail.value
			},
			// 删除图片
			deletePic(event) {
				that.userInfo.imgList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let imgListLen = this.userInfo.imgList.length
				lists.map((item) => {
					this.userInfo.imgList.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.imgList[imgListLen]
					this.userInfo.imgList.splice(imgListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					imgListLen++
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			// 立即修改
			edit() {
				that.state = 0
			},
			// 返回
			result() {
				$api.jump(-1)
			},
			// 提交
			submit() {
				var u = that.userInfo
				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')) {
					$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>