uniProject/pages/admin/Jiazheng/qiuzhiXinxi.vue

<template>
	<view class="jz-content-box">
		<view class="form-label-radio form-top-margin flex-start-row">
			<view class="phone-form-label"> <text class="form-label-require">*</text>类型</view>
			<dataChecked :list="typeList" mode="multiple" :defaultCount="9" @change="selectChangeType" @add="addType" />
		</view>
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require">*</text>经验</view>
			<picker :range="jingyanList" mode='selector' :value="jingyanIndex" range-key="name"
				@change="jingyanChange" @cancel="jingyanCancel">
				<view class="form-radio-select">
					<view>{{ jingyan }}</view>
					<icon></icon>
				</view>
			</picker>
		</view>
		<view class="form-label-radio flex-start-row">
			<view class="phone-form-label"><text class="form-label-require">*</text>技能</view>
			<dataChecked :list="skillList" mode="multiple" :defaultCount="9" @change="selectChangeSkill"
				@add="addSkill" />
		</view>
		<view class="form-label-radio form-top-margin flex-start-row">
			<view class="phone-form-label"><text class="form-label-require">*</text>状态</view>
			<dataChecked :list="zhuangtaiList" mode="single" :showAdd="false" @change="selectChangeZhuangtai" />
		</view>
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require"></text>薪资级别</view>
			<picker :range="xinziJibieList" mode='selector' @change="xinziJibieChange" @cancel="xinziJibieCancel">
				<view class="form-radio-select">
					<view>{{jibiexinzi}}</view><icon></icon>
				</view>
			</picker>
		</view>
		
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require"></text>期望薪资</view>
			<input v-model="qiwangxinzi"  placeholder="请输入期望薪资" />
		</view>	
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require"></text>工作经历</view>
			<input v-model="jingli"  placeholder="请填写工作经历" />
		</view>
		<view class="page-btn-box">
			<button type="default" @click="goUp" class="phone-white-btn">上一步</button>
			<button type="default"  @click="goNext" class="phone-green-btn">下一步</button>
		</view>
	</view>
</template>

<script>
	import dataChecked from './common/dataChecked.vue';
	import {
		getJiazhengLeixing,
		getJiazhengJineng,
		getJiazhengZhuangtai,
		
	} from "@/api/jiazheng.js";

	export default {
		components: {
			dataChecked
		},
		// onLoad 是 uni-app 的页面生命周期钩子，不需要导入
		created() {
			this.getLeixing()
			this.getJineng()
			this.getZhuangtai()
		},
		data() {
			return {
				formData:{},
				// 从后端获取的技能列表
				skillList: [],
				typeList: [],
				leixing:"",
				jineng:"",
				zhuangtaiList: [],
				zhuangtai:'',
				jingyan:"",
				jingyanIndex:0,
				qiwangxinzi: '面议',
				jingli: '',
				xinziJibieList: ["一级", "二级","三级","四级","五级",],
				jibiexinzi:"",
				jingyanList: Array.from({length: 51}, (_, i) => i + '年'),
			};
		},
		methods: {
			// 点击完成按钮的时候触发，
			xinziJibieChange(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				const index = e.detail.value
				this.jibiexinzi = this.xinziJibieList[index]
				console.log('jibiexinzi',this.jibiexinzi);
			},
			xinziJibieCancel(e) {
				console.log("您已取消选择");
			},
			jingyanChange(e){
				const index = e.detail.value
				this.jingyan = this.jingyanList[index]
			},
			jingyanCancel(){
				this.jingyanIndex = 0
			},
			getLeixing() {
				getJiazhengLeixing({}).then(res => {
					this.skillList = this.dataConversionObject(res.data)
					console.log('this.skillList', this.skillList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getJineng() {
				getJiazhengJineng({}).then(res => {
					this.typeList = this.dataConversionObject(res.data)
					console.log('this.typeList', this.typeList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getZhuangtai() {
				getJiazhengZhuangtai({}).then(res => {
					console.log('res', res);
					this.zhuangtaiList = res.data
					// this.typeList = this.dataConversionObject(res.data)
					// console.log('this.typeList', this.typeList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			dataConversionObject(data) {
				let newList
				newList = data.map((name, index) => ({
					id: index,
					name: name
				}));
				return newList
			},
			dataConversionArray(data) {
				let newList
				newList = data.map((item, index) => {
					return item.name
				});
				return newList
			},
			selectChangeType(data) {
			//	console.log('typeData', data);
				this.leixing =this.dataConversionArray(data).join(',') 
				console.log('this.leixing',this.leixing);
			},
			addType(newType) {
				this.typeList.push({
					...newType,
				});
			},
			selectChangeSkill(data) {
				this.jineng =this.dataConversionArray(data).join(',')
				console.log('this.jineng',this.jineng);
			},
			addSkill(newSkill) {
				this.skillList.push({
					...newSkill,
				});
			},
			selectChangeZhuangtai(data) {
				console.log('zhuangtaiData', data);
				this.zhuangtai  =data[0].id
				console.log('zhuangtai', this.zhuangtai);
				// const index = e.detail.value
				// this.jingyan = this.jingyanList[index]
			},
			
			goNext() {
				this.formData = {
					leixing:this.leixing,
					jingyan:this.jingyan,
					jineng:this.jineng,
					zhuangtai:this.zhuangtai,
					jibiexinzi:this.jibiexinzi,
					qiwangxinzi:this.qiwangxinzi,
					jingli:this.jingli,
					
				}
				console.log('this.formData',this.formData);
				// if(!this.formData.agree){
				// 	uni.showToast({
				// 		title: "请勾选本人同意！",
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return false
				// }
				this.$emit('goNext',{},1);
			},
			goUp() {
				// if(!this.formData.agree){
				// 	uni.showToast({
				// 		title: "请勾选本人同意！",
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return false
				// }
				this.$emit('goUp',{},1);
			},
		}
	};
</script>