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">
			<text class="text1" style="flex: 1;">身高</text>
			<view class=" u-flex">
				<input type="text" v-model='info.height' 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">
			<text class="text1" style="flex: 1;">学历</text>
			<view class=" u-flex"  @click="showEducation=true">
				<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">
			<text class="text1" style="flex: 1;">月收入</text>
			<view class=" u-flex">
				<input type="text" v-model='info.income' style="text-align: right;">
			</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="showEducation" @cancel='showEducation=false' title="学历" ref="uPicker" :columns="educationcolumns" @confirm="confirmEducation">
		</u-picker>
		<u-picker :show="showage" @cancel='showage=false' title="年龄" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler">
		</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)
				}
			}
		},
		data() {
			return {
				showage:false,
				info:{},
				showEducation:false,
				educationcolumns:[['高中','大专','本科','硕士','博士']],
				columns: [
					[18],
					[18]
				],
			}
		},
		methods: {
			storage(){
				var data={
					age_min:this.info.age_min,
					age_max:this.info.age_max,
					height:this.info.height,
					weight:this.info.weight,
					income:this.info.income,
					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
			},
			getInfo(){
				uni.$u.http.post('/api/user/show_appeals').then(res => {
					if(res.code==1){
						this.info=res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.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{
	font-size: 30rpx;
	color: #222222;
	font-weight: 600;
}
</style>