xiangqin/pages/profile/suqiu.vue

<template>
	<view>
		<view class="title">
			基本条件
		</view>
		<view class="item-box u-flex u-col-center u-row-between">
			<text class="text1" style="flex: 1;">年龄</text>
			<view class=" u-flex"  @click="showage=true">
				{{info.age_min?info.age_min+'-':'请选择年龄'}}{{info.age_max?info.age_max:''}}<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="item-box u-flex u-col-center u-row-between" @click="showheight=true">
			<text class="text1" style="flex: 1;">身高</text>
			<view class=" u-flex">
				<input type="text" :disabled="true" placeholder="" v-model="getheight" style="text-align: right;">
				<!-- <text class="text_50">cm</text> -->
				<!-- {{info.height}}cm -->
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	<!-- 	<view class="item-box u-flex u-col-center u-row-between">
			<text class="text1" style="flex: 1;">体重</text>
			<view class=" u-flex">
				<input type="text" v-model='info.weight' style="text-align: right;">
				<text class="text_50">kg</text>
			</view>
		</view> -->
		<view class="item-box u-flex u-col-center u-row-between" @click="showEducation=true">
			<text class="text1" style="flex: 1;">学历</text>
			<view class=" u-flex"  >
				<text class="text_50">{{info.education}}</text>
				<u-icon name="arrow-right"></u-icon>
				</view>
		</view>
		<view class="item-box u-flex u-col-center u-row-between" @click="showIncome=true">
			<text class="text1" style="flex: 1;">月收入</text>
			<view class=" u-flex"  >
				<text class="text_50">{{info.income}}</text>
				<u-icon name="arrow-right"></u-icon>
				</view>
		</view>
		<view class="item-box u-flex u-col-center u-row-between">
			<text class="text1" style="flex: 1;">工作地区</text>
			<view class=" u-flex">
				<AddressPicker  @change="change" :level="3">{{info.address}} </AddressPicker>
				<u-icon name="arrow-right"></u-icon>
				
			</view>
		</view>
		<view class="publish" @click="storage">
			保存
		</view>
		<u-picker :show="showIncome" :immediateChange='true' @cancel='showIncome=false' title="收入" ref="uPicker" :columns="incomecolumns" @confirm="confirmIncome">
		</u-picker>
		<u-picker :show="showEducation" :immediateChange='true' @cancel='showEducation=false' title="学历" ref="uPicker" :columns="educationcolumns" @confirm="confirmEducation">
		</u-picker>
		<u-picker :show="showage" :immediateChange='true' @cancel='showage=false' title="年龄" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler">
		</u-picker>
		<u-picker :immediateChange='true' :show="showheight" @cancel='showheight=false' title="身高" ref="uPicker" :columns="heightcolumns"
			@confirm="heightconfirm">
		</u-picker>
	</view>
</template>

<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		components: {
			AddressPicker
		},
		onLoad() {
			this.getInfo()
			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 = 150; i < 200; i++) {
				this.heightcolumns[0].push(i + 'cm')
				this.heightcolumns[1].push(i + 'cm')
			}
		},
		computed:{
				getheight(){
					console.log(this.info)
					if(this.info.height_min){
						return (this.info.height_min+'-'+this.info.height_max)
					}else{
						return '请选择身高'
					}
				}
		},
		data() {
			return {
				heightcolumns: [
					['不限'],
					['不限']
				],
				showheight: false,
				incomeIndex:'',
				showage:false,
				info:{
				},
				showEducation:false,
				showIncome:false,
				incomecolumns:[['3000-6000','6000-10000','1万以上','不限']],
				educationcolumns:[['高中','大专','本科','硕士','博士','不限']],
				columns: [
					[18],
					[18]
				],
			}
		},
		methods: {
			heightconfirm(e) {
				this.$set(this.info,'height_min',e.value[0])
				this.$set(this.info,'height_max',e.value[1])
				// this.info.height_min = e.value[0]
				// this.info.height_max = e.value[1]
				this.showheight = false
			},
			storage(){
				var data={
					age_min:this.info.age_min,
					age_max:this.info.age_max,
					height_min:this.info.height_min,
					height_max:this.info.height_max,
					weight:this.info.weight,
					income:this.incomeIndex,
					province_id:this.info.province_id,
					city_id:this.info.city_id,
					area_id:this.info.area_id,
					education:this.info.education
				}
				uni.$u.http.post('/api/user/appeals',data).then(res => {
					if(res.code==1){
						this.$u.toast(res.msg)
					}
				})
			},
			confirm(e) {
				this.info.age_min=e.value[0]
				this.info.age_max=e.value[1]
				this.showage = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.columns[1]=[...this.columns[0]]
					
					// picker为选择器this实例，变化第二列对应的选项
					// picker.setColumnValues(1, this.columnData[index])
					this.columns[1].splice(0,index)
					this.$set(this.columns,1,this.columns[1])
					
					
				}
			},
			change(result) {
					this.info.province_id=result.data[0].id
					this.info.city_id=result.data[1].id
					this.info.area_id=result.data[2].id
				this.info.address = '';
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.info.address += item.name
					} else {
						this.info.address += '-' + item.name
					}
				});
				let arr = this.info.address.split('-');
			},
			confirmEducation(e){
				this.info.education=e.value[0]
				this.showEducation=false
			},
			confirmIncome(e){
				console.log(121,e)
				this.info.income=e.value[0]
				this.incomeIndex=e.indexs[0]+1
				this.showIncome=false
			},
			getInfo(){
				uni.$u.http.post('/api/user/show_appeals').then(res => {
					if(res.code==1){
						this.info=res.data
						if(this.info.income){
							if(this.info.income[0]=='3000'){
								this.info.income='3000-6000'
								this.incomeIndex=1
							}
							if(this.info.income[0]=='6000'){
								this.info.income='6000-10000'
								this.incomeIndex=2
							}
							if(this.info.income[0]=='10000'){
								this.info.income='1万以上'
								this.incomeIndex=3
							}
							if(this.info.income[0]=='不限'){
								this.info.income='不限'
								this.incomeIndex=4
							}
						}
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 30rpx 0;
	}
	.publish{
		position: fixed;
		bottom: 84rpx;
		left: 50rpx;
		right: 50rpx;
		margin: 0 auto;
		width: 650rpx;
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		border-radius: 52rpx;
		font-size: 36rpx;
		color: #fff;
		
	}
	.item-box {
		background-color: #fff;
		padding: 30rpx 36rpx;
	
		.text1 {
			white-space: nowrap;
			font-size: 28rpx;
			font-family: SF Pro;
			font-weight: 500;
			color: #333333;
		}
	
		image {
			width: 116rpx;
			height: 116rpx;
			border-radius: 100rpx;
		}
	
		input {
			flex: 1;
			text-align: right;
		}
	}
.title{
	margin-left: 36rpx;
	font-size: 30rpx;
	color: #222222;
	font-weight: 600;
}
</style>