veterans_H5/h5_web/pages/evaluationIntention/evaluationIntention.vue

<!-- 自我评价和求职意向 -->
<template>
	<view class="evaluate-intention">
		
		<!-- 导航栏 -->
		<u-navbar class="evaluate-intention-bar" back-text="" title="">
			<view class="evaluate-intention-bar-right" slot="right" @click="jumpPage('/pages/myResume/myResume')">跳过</view>
		</u-navbar>
		
		<view class="evaluate-intention-explain">
			<view>继续完善加分项</view>
			<view>据平台数据显示，完善后，被HR查看几率更高</view>
		</view>
		
		<!-- tab页 -->
		<view class="evaluate-intention-tabs">
			<view
				class="evaluate-intention-tabs-item"
				v-for="(item, index) in list"
				:key="index"
				:class="{'evaluate-intention-tabs-active': tabCur === index}"
				@click="tabCur = index"
			>
				{{ item.name }}
			</view>
		</view>
		
		<!-- 工作意向 -->
		<view class="evaluate-intention-intention" v-if="tabCur === 0">
			<u-form
				:model="intentionForm"
				ref="intentionForm"
				label-position="top"
			>
				<u-form-item label="工作城市" prop="cityName" required>
					<u-input v-model="intentionForm.workCity" type="select" @click="workCityClick" placeholder="请选择工作城市"/>
					<!-- <u-select v-model="cityShow" :list="cityList" @confirm="cityConfirm"></u-select> -->
					<city-select-unlimited v-if="cityShow" v-model="cityShow" :default-region="defaultRegion" @city-change="cityConfirm"/>
				</u-form-item>
				<!-- <u-form-item label="期望职位" prop="position" required>
					<u-input v-model="intentionForm.position" type="select" @click="positionShow = true" placeholder="请选择期望职位"/>
					<u-select v-model="positionShow" :list="positionList" @confirm="positionConfirm"></u-select>
				</u-form-item>
				<u-form-item label="期望行业" prop="industry" required>
					<u-input v-model="intentionForm.industry" type="select" @click="industryShow = true" placeholder="请选择期望行业"/>
					<u-select v-model="industryShow" :list="industryList" @confirm="industryConfirm"></u-select>
				</u-form-item> -->
				<u-form-item label="最低薪资要求(k)" prop="expectedLowestSalary" required>
					<u-input v-model="intentionForm.expectedLowestSalary" type="select" @click="lowestsalaryShow = true" placeholder="请选择薪资要求"/>
					<u-select v-model="lowestsalaryShow" :list="salaryList" @confirm="salaryLowestConfirm" :default-value="[Number(intentionForm.expectedLowestSalary) - 1]"></u-select>
				</u-form-item>
				<u-form-item label="最高薪资要求(k)" prop="expectedHighestSalary" required>
					<u-input v-model="intentionForm.expectedHighestSalary" type="select" @click="highestSalaryShow = true" placeholder="请选择薪资要求"/>
					<u-select v-model="highestSalaryShow" :list="salaryList" @confirm="salaryHighestConfirm" :default-value="[Number(intentionForm.expectedHighestSalary) - 1]"></u-select>
				</u-form-item>
			</u-form>
			<view class="evaluate-intention-intention-submit">
				<u-button type="primary" class="btn" @click="submitIntention">开始找工作</u-button>
			</view>
			<view class="evaluate-intention-intention-explain">去完善项目经历，让更多HR看到你</view>
		</view>
		
		<!-- 自我评价 -->
		<view class="evaluate-intention-evaluate" v-else-if="tabCur === 1">
			<u-form
				:model="evaluateForm"
				ref="evaluateForm"
				label-position="top"
			>
				<u-form-item label="自我评价">
					<u-input
						v-model="evaluateForm.content"
						type="textarea"
						:border="true"
						:height="150"
						:auto-height="true"
					/>
				</u-form-item>
			</u-form>
			<view class="evaluate-intention-evaluate-submit">
				<u-button type="primary" class="btn" @click="submitEvaluation">提交</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { industry } from './industry.js';
	import citySelectUnlimited from '../../uview-ui/components/u-city-select-unlimited/u-city-select-unlimited.vue'
	export default {
		components: {
			citySelectUnlimited
		},
		data() {
			return {
				list: [
					{
						name: '期望薪资'
					},
					{
						name: '自我评价'
					}
				],
				tabCur: 0,
				intentionForm: {
					provinceName: '',
					provinceId: '',
					cityName: '',
					cityId: '',
					areaName : '',
					areaId: '',
					// position: '',
					// positionId: '',
					// industry: '',
					// industryId: '',
					expectedLowestSalary: '',
					expectedHighestSalary: '',
					workCity: ''
				},
				defaultRegion: [],
				intentionRules: {
					cityName: [
						{ 
							required: true, 
							message: '请选择您的工作城市', 
							trigger: ['change','blur']
						}
					],
					// position: [
					// 	{
					// 		required: true, 
					// 		message: '请选择您的期望职位', 
					// 		trigger: ['change', 'blur']
					// 	}
					// ],
					// industry: [
					// 	{
					// 		required: true, 
					// 		message: '请选择您的期望行业', 
					// 		trigger: ['change', 'blur']
					// 	}
					// ],
					expectedLowestSalary: [
						{
							required: true,
							message: '请选择您的最低薪资要求', 
							trigger: ['change', 'blur']
						}
					],
					expectedHighestSalary: [
						{
							required: true,
							message: '请选择您的最高薪资要求', 
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return Number(value) >= Number(this.intentionForm.expectedLowestSalary);
							},
							message: '最高薪资要求不能小于最低薪资要求',
							trigger: ['change', 'blur']
						}
					]
				},
				// 城市下拉显示
				cityShow: false,
				// 职位下拉显示
				positionShow: false,
				// 职位列表
				positionList: [
					{
						value: 1,
						label: '保安'
					},
					{
						value: 2,
						label: '服务员'
					},
					{
						value: 3,
						label: '消防员'
					}
				],
				// 行业下拉显示
				industryShow: false,
				// 行业列表
				industryList: industry,
				// 薪资下拉显示
				highestSalaryShow: false,
				lowestsalaryShow: false,
				// 薪资列表
				salaryList: [],
				// 自我评价
				evaluateForm: {
					content: ''
				}
			}
		},
		onLoad(page) {
			this.getMemberinfo()
			if (page.tabCur) {
				this.tabCur = Number(page.tabCur)
			}
			// 设置薪资范围
			let numList = []
			for(let i = 1; i < 51; i++) {
				const obj = {
					value: String(i),
					label: String(i)
				}
				numList.push(obj)
			}
			this.salaryList = numList
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			if (this.tabCur === 0) {
				this.$refs.intentionForm.setRules(this.intentionRules);
			}
		},
		methods: {
			/**
			 * 获取用户基本信息
			 */
			getMemberinfo(){
				this.$u.api.getmemberinfo().then(res => {
					if (res.code === 200){
						const data = res.data;
						this.evaluateForm.content = data.selfAssessment
						// this.intentionForm.position = res.data.expectedPost
						// this.intentionForm.industry = res.data.expectedIndustry
						this.intentionForm.expectedLowestSalary = data.expectedLowestSalary ? String(data.expectedLowestSalary) : ''
						this.intentionForm.expectedHighestSalary = data.expectedHighestSalary ? String(data.expectedHighestSalary) : ''
						if (data.provinceName) {
							this.intentionForm.workCity = data.provinceName + '-' + data.cityName + '-' + data.areaName
						}
						this.intentionForm.provinceId = data.provinceId
						this.intentionForm.provinceName = data.provinceName
						this.intentionForm.cityId = data.cityId
						this.intentionForm.cityName = data.cityName
						this.intentionForm.areaId = data.areaId
						this.intentionForm.areaName = data.areaName
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					})
				})
			},
			/**
			 * 城市下拉
			 * @param { Object } item
			 */
			cityConfirm(item) {
				this.intentionForm.provinceName = item.province.label;
				this.intentionForm.provinceId = item.province.value;
				this.intentionForm.cityName = item.city.label;
				this.intentionForm.cityId = item.city.value;
				this.intentionForm.areaName  = item.area.label;
				this.intentionForm.areaId = item.area.value;
				this.intentionForm.workCity = item.province.label + '-' + item.city.label + '-' + item.area.label
			},
			/**
			 * 职位下拉
			 * @param {Object} item
			 */
			positionConfirm(item) {
				this.intentionForm.position = item[0].label
				this.intentionForm.positionId = item[0].value
			},
			/**
			 * 行业下拉
			 * @param {Object} item
			 */
			industryConfirm(item) {
				this.intentionForm.industry = item[0].label
				this.intentionForm.industryId = item[0].value
			},
			/**
			 * 最低薪资下拉
			 * @param {Object} item
			 */
			salaryLowestConfirm(item) {
				this.intentionForm.expectedLowestSalary = item[0].label
			},
			/**
			 * 最高薪资下拉
			 * @param {Object} item
			 */
			salaryHighestConfirm(item) {
				this.intentionForm.expectedHighestSalary = item[0].label
			},
			/**
			 * 跳转到指定页面
			 */
			jumpPage(url) {
				this.$u.route(url)
			},
			/**
			 * 提交求职意向
			 */
			submitIntention() {
				this.$refs.intentionForm.validate(valid => {
					if (valid) {
						const form = {
							...this.intentionForm
						}
						uni.showLoading({
							title: '数据提交中，请等待'
						})
						this.$u.api.resume.submitJobIntention({
							provinceName: form.provinceName,
							provinceId: form.provinceId,
							cityName: form.cityName,
							cityId: form.cityId,
							areaName : form.areaName ,
							areaId: form.areaId,
							expectedLowestSalary: form.expectedLowestSalary,
							expectedHighestSalary: form.expectedHighestSalary
						}).then(res => {
							if (res.code === 200) {
								this.$refs.uToast.show({
									title: '更新成功',
									type: 'success'
								})
								setTimeout(() => {
									uni.hideLoading()
									this.jumpPage('/pages/myResume/myResume');
								}, 300)
							} else {
								uni.hideLoading();
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						}).catch(() => {
							uni.hideLoading();
							this.$refs.uToast.show({
								title: '系统异常',
								type: 'error'
							})
						})
					}
				})
			},
			/**
			 * 提交自我评价
			 */
			submitEvaluation() {
				if (this.evaluateForm.content) {
					uni.showLoading({
						title: '数据提交中，请等待'
					})
					this.$u.api.resume.submitSelfAssessment({
						selfAssessment: this.evaluateForm.content
					}).then(res => {
						if (res.code === 200) {
							this.$refs.uToast.show({
								title: '更新成功',
								type: 'success'
							})
							setTimeout(() => {
								uni.hideLoading()
								this.jumpPage('/pages/myResume/myResume');
							}, 300)
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					}).catch(() => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: '系统异常',
							type: 'error'
						})
					})
				} else {
					uni.hideLoading()
					this.$refs.uToast.show({
						title: '请输入自我评价',
						type: 'warning'
					})
				}
			},
			/**
			 * 城市下拉
			 */
			workCityClick() {
				this.defaultRegion = [this.intentionForm.provinceName, this.intentionForm.cityName, this.intentionForm.areaName ]
				this.cityShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './evaluationIntention.scss'
</style>