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="你期望ta的年龄" style="flex: 1;"
					v-model="age.length==0?'':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="你期望ta的学历" 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="你期望ta的工作性质" style="flex: 1;" v-model="work.name">
				<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="showheight=true">
				<input type="text" :disabled="true" placeholder="你期望ta的身高范围" style="flex: 1;"
					v-model="height.length==0?'':height[0]+'-'+height[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="showmoney=true">
				<input type="text" :disabled="true" placeholder="你期望ta的月收入" style="flex: 1;"
					v-model="money.length==0?'':money[0]+'-'+money[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="showaddress=true">
				<input type="text" :disabled="true" placeholder="你期望ta的现住地" style="flex: 1;"
					v-model="address.length==0?'':address[0].name+'-'+address[1].name">
				<u-icon name="arrow-down"></u-icon>
			</view>

			<view class="publish select" @click="start">
				<!-- <image src="../../static/forum/publish.png" mode=""></image> -->
				开始匹配
			</view>
		</view>
		<u-picker :show="showage" @cancel='showage=false' title="年龄" ref="uPicker" :columns="columns" @confirm="confirm"
			@change="changeHandler">
		</u-picker>
		<u-picker :show="showheight" @cancel='showheight=false' title="身高" ref="uPicker" :columns="heightcolumns"
			@confirm="heightconfirm">
		</u-picker>
		<u-picker :show="showmoney" @cancel='showmoney=false' title="月收入" ref="uPicker" :columns="moneycolumns"
			@confirm="moneyconfirm">
		</u-picker>
		<u-picker :show="showaddress" @cancel='showaddress=false' keyName="name" title="居住地" ref="uPicker"
			:columns="addresscolumns" @confirm="addressconfirm">
		</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.getAddress()
			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)
				}
			}
			for (let i = 159; i < 200; i++) {
				this.heightcolumns[0].push(i + 'cm')
				this.heightcolumns[1].push(i + 'cm')
			}


		},
		data() {
			return {
				showaddress: false,
				showmoney: false,
				showheight: false,
				work: {},
				address: [],
				age: [],
				money: [],
				height: [],
				showEducation: false,
				showage: false,
				showwork: false,
				education: '',
				columns1: [],
				columns: [
					[18],
					[18]
				],
				heightcolumns: [
					['不限'],
					['不限']
				],
				addresscolumns: [
					[{"id": 1,
						"name": "临沂市"}
					],
					[]
				],
				moneycolumns: [
					['不限', '3000元', '5000元', '7000元', '9000元', '11000元', '13000元', '15000元', '17000元', '20000元'],
					['不限', '3000元', '5000元', '7000元', '9000元', '11000元', '13000元', '15000元', '17000元', '20000元'],
				],
				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]
				})
			},
			getAddress() {
				uni.$u.http.post('/api/index/linyi').then(res => {
					this.addresscolumns[1] = res.data
				})
			},
			start() {
				if (this.age.length == 0) {
					this.$u.toast('请选择年龄')
					return
				}
				if (!this.education) {
					this.$u.toast('请选择学历')
					return
				}
				if (Object.keys(this.work).length == 0) {
					this.$u.toast('请选择工作性质')
					return
				}
				if (this.height.length==0) {
					this.$u.toast('请选择身高')
					return
				}
				if (this.money.length==0) {
					this.$u.toast('请选择月收入')
					return
				}
				if (this.address.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,
					height_min:this.height[0],
					height_max:this.height[1],
					income_min:this.money[0],
					income_max:this.money[1],
					area_id:this.address[1].id,
				}
				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
			},
			heightconfirm(e) {
				this.height = e.value
				this.showheight = false
			},
			moneyconfirm(e) {
				this.money = e.value
				this.showmoney = false
			},
			addressconfirm(e){
				console.log(e)
				this.address = e.value
				this.showaddress = false
			},

		}
	}
</script>

<style lang="scss">
	page {
		padding: 40rpx 60rpx;
	}

	.publish {

		width: 630rpx;
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
		background: #D8D8D8;
		border-radius: 52rpx;
		font-size: 36rpx;
		color: #fff;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 5rpx;
			vertical-align: middle;
		}
	}

	.select {
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
	}
</style>