xiangqin/pages/index/pipei.vue

<template>
	<view>
		<view class="">
			<view class="" style="font-size: 32rpx;">
				年龄
			</view>
			<view class="u-flex" style="width: 630rpx;
			height: 120rpx;
			background: #F1F1F1;
			border-radius: 28rpx;margin: 24rpx 0;box-sizing: border-box;padding: 0 32rpx;" @click="showage=true">
				<input type="text" :disabled="true" placeholder="你期望他的年龄" style="flex: 1;" v-model="age[0]+'-'+age[1]">
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="" style="font-size: 32rpx;">
				学历
			</view>
			<view class="u-flex" style="width: 630rpx;
					height: 120rpx;
					background: #F1F1F1;
					border-radius: 28rpx;margin: 24rpx 0;box-sizing: border-box;padding: 0 32rpx;" @click="showEducation=true">
				<input type="text" :disabled="true" placeholder="你期望他的学历" style="flex: 1;" v-model="education">
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="" style="font-size: 32rpx;">
				工作性质
			</view>
			<view class="u-flex" style="width: 630rpx;
							height: 120rpx;
							background: #F1F1F1;
							border-radius: 28rpx;margin: 24rpx 0;box-sizing: border-box;padding: 0 32rpx;"  @click="showwork=true">
				<input type="text" :disabled="true" placeholder="你期望他的工作性质" style="flex: 1;" v-model="work.name">
				<u-icon name="arrow-down"></u-icon>
			</view>
			<image src="../../static/index/start.png" mode=""
				style="position: fixed;bottom: 184rpx;left: 50%;transform: translateX(-50%);width: 296rpx;height: 296rpx;" @click="start">
			</image>
		</view>
		<u-picker :show="showage" @cancel='showage=false' title="年龄" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler">
		</u-picker>
		<u-picker :show="showEducation" @cancel='showEducation=false' title="学历" ref="uPicker" :columns="columns2" @confirm="confirmEducation">
		</u-picker>
		<u-picker :show="showwork" @cancel='showwork=false' title="工作性质" @confirm='confirmWork' keyName="name"  :columns="columns1"></u-picker>
	</view>
</template>

<script>
	export default {
		onLoad() {
				this.getWork()
				var list=this.columns[0] 
				var list1=this.columns[1] 
				for( let i=1;i<66;i++){
					if(list[list.length-1]<65){
						list.push(list[0]+i)
						list1.push(list1[0]+i)
					}
				}
				
				
		},
		data() {
			return {
				work:{},
				age:[18,36],
				showEducation:false,
				showage: false,
				showwork:false,
				education:'',
				columns1:[],
				columns: [
					[18],
					[18]
				],
				columns2:[['高中','大专','本科','硕士','博士']]
				
			}
		},
		methods: {
			confirmEducation(e){
				this.education=e.value[0]
				this.showEducation=false
			},
			confirmWork(e){
				this.work=e.value[0]
				this.showwork=false
			},
			getWork(){
				uni.$u.http.post('/api/index/WorkNature').then(res => {
				this.columns1=[res.data]
				})
			},
			start(){
				if(!this.education){
					this.$u.toast('请选择学历')
					return
				}
				if(Object.keys(this.work).length==0){
					this.$u.toast('请选择工作性质')
					return
				}
				var data={
					age_min:this.age[0],
					age_max:this.age[1],
					nature:this.work.id,
					education:this.education,
				}
					uni.navigateTo({
						url:'./pipeizhong?info='+JSON.stringify(data)
					})
			},
			changeHandler(e) {
				console.log(11,e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.columns[1]=[...this.columns[0]]
					
					console.log(123,this.columns[1])
					// picker为选择器this实例，变化第二列对应的选项
					// picker.setColumnValues(1, this.columnData[index])
					this.columns[1].splice(0,index)
					this.$set(this.columns,1,this.columns[1])
					
					console.log(456,this.columns[1])
					
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.age=e.value
				this.showage = false
			}
		}
	}
</script>

<style>
	page {
		padding: 40rpx 60rpx;
	}
</style>