jp-xqjy/pages/login/step3.vue

<template>
	<view>
		<u-navbar :background="background" :border-bottom="false"></u-navbar>
		<view class="jpLogin">
			<view class="jpLogin-title">
				<h2>我的择偶标准 <span>3</span>/4</h2>
				<p>完善择偶信息，能显著提升成功率哦~</p>
			</view>
			<view class="jpLogin-main">
				<u-form :model="form" ref="uForm">
					<view class="jpLogin-input">
						<u-form-item required="true">
							<u-input v-model="form.age_range" type="select" placeholder="Ta的年龄段范围" @click="ageChange"/>
						</u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-form-item>
							<u-input v-model="form.education" type="select" placeholder="Ta的学历是"  @click="show_education = true" >
							</u-input>
							<u-select v-model="show_education" mode="single-column" :list="education_ranges_by_names" @confirm="educationConfirm"></u-select>						
						</u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-form-item>
							<u-input v-model="form.salary_range" type="select" placeholder="Ta的收入范围" @click="show_salary = true"/>
							<u-select v-model="show_salary" mode="single-column" :list="salary_ranges_by_names" @confirm="salaryRangeConfirm"></u-select>						
						</u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-form-item>
							<u-input v-model="form.profession" placeholder="Ta的职业要求" />
						</u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-form-item>
							<u-input v-model="form.work_address" type="select" placeholder="Ta的工作所在地" @click="workAddressChange"/>
						</u-form-item>
					</view>
					<view class="form-tit">
						其他要求
					</view>
					<view class="jpLogin-textarea">
						<u-form-item> 
							<u-input v-model="form.other" type="textarea" height="140" placeholder="" />
 
						</u-form-item>
					</view>
				</u-form>
			</view>
			<view style="margin-top: 60px;">
				<u-button type="error" shape="circle" :custom-style="customStyle" @click="next">下一步</u-button>
				<view class="step-btn" @click="previous">返回上一步</view>
			</view>
		</view>
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueWorkCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onWorkCityConfirm"></mpvue-city-picker>
		<mpvue-age-picker themeColor="#007AFF" ref="mpvueAgePicker" :pickerValueDefault="agePickerValueDefault" @onConfirm="onAgeConfirm"></mpvue-age-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from "../../components/mpvue-citypicker/mpvueCityPicker.vue";
	import mpvueAgePicker from "../../components/mpvue-agepicker/mpvueAgePicker.vue"
	let _self;
	export default {
		components:{
			mpvueCityPicker,
			mpvueAgePicker
		},
		data() {
			return {
				personal_info:{},
				education_index:0,
				show_age_ranges:false,
				show_education:false,
				show_salary:false,
				show_work_address:false,
				form: { 
					age_range:'',
					height_range:'',
					education:'',
					salary_range:'',
					profession:'',
					work_address:'',
					other:'',
				},
				age_ranges:[],
				height_ranges:[],
				education_ranges_by_names:[],
				education_ranges:['不限','高中中专及以下','大专','本科','双学士','硕士','博士'],
				salary_ranges_by_names:[],
				salary_ranges:['不限','2000元以下','2000-5000元','5000-10000元','10000-20000元','20000-50000元','50000元以上'],				
				value: '0',
				customStyle: {
					background: '#FF5E5E'
				},
				background:{
					background: 'none'
				}
			} 

		},
		methods:{
			get_options(){
				console.log('get options')
				// #ifdef APP-NVUE
				 const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
				 // #endif
				 // #ifndef APP-NVUE
				 const eventChannel = this.getOpenerEventChannel();
				 // #endif
				 eventChannel.on('acceptDataFromOpenerPage', function(data) {
					 _self.personal_info = data;
					 console.log('options'+JSON.stringify(data))
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				//this.index = e.detail.value
			},
			previous(){
				uni.navigateBack({
					deta:1
				})
			},
			next(){
				_self.personal_info.step3= _self.form;
				uni.navigateTo({
					url:'./step4',
					success:function(res){
						res.eventChannel.emit('acceptDataFromOpenerPage', _self.personal_info);
						console.log('send options'+JSON.stringify(_self.personal_info));
					}
				})
			},		
			salaryRangeConfirm(e){
				console.log('e'+JSON.stringify(e))
				this.form.salary_range = '';
				e.map((val, index) => {
					// this.result += this.result == '' ? val.label : '-' + val.label;
					let result = val.label
					this.form.salary_range  += result;
				}) 
			},
			educationConfirm(e){
				console.log('e'+JSON.stringify(e))
				this.form.education = '';
				e.map((val, index) => {
					// this.result += this.result == '' ? val.label : '-' + val.label;
					let result = val.label
					this.form.education  += result;
				}) 
			},
			onWorkCityConfirm(e) {
				_self.form.work_address = e.label;
				console.log('地址选择'+_self.work_address)
			},
			onAgeConfirm(e) {
				_self.form.age_range = e.label;
				console.log('地址选择'+_self.work_address)
			},
			workAddressChange(){
				this.$refs.mpvueWorkCityPicker.show()
			},
			ageChange(){
				this.$refs.mpvueAgePicker.show()
			},
			educationPickerShow(){
				//this.$refs.educationPicker.show();
			}
		},
		onLoad(){
			_self = this;
			for(let i = 18;i<=99;i++)
			{
				this.age_ranges.push(i);
			}
			for(let i = 130;i<=220;i++)
			{
				this.height_ranges.push(i);
			}
			for(let i = 0;i< _self.education_ranges.length;i++)
			{
				let education = {value:i, label:_self.education_ranges[i]};
				_self.education_ranges_by_names.push(education);
			}
			for(let i = 0;i< _self.salary_ranges.length;i++)
			{
				let salary_range = {value:i, label:_self.salary_ranges[i]};
				_self.salary_ranges_by_names.push(salary_range);
			}
			console.log('salary ranges'+JSON.stringify(_self.salary_ranges_by_names))
			_self.get_options();
		},
		onReady(){
			_self.get_options();
		},
	}
</script>

<style lang="scss" scoped>
	.form-tit{
		color: #999;
		margin-bottom: 8px;
	}
	.jpLogin-textarea{
		background: #fff;
		border-radius: 12px;
		border: 1px #EEDCDC solid;
		padding:0 15px;
	}
	.jpLogin {
		background: url(/static/img/loginBg.png) top center no-repeat;
		background-size: 100%;
		min-height: 100vh;
		padding: 50px;
		margin-top: -44px;
	}

	.step-btn {
		text-align: center;
		margin-top: 20px;
		color: #444953;
	}

	.jpLogin-title {
		h2 {
			font-size: 24px;
			font-weight: normal;
		}

		span {
			color: #FF5E5E;
			margin-left: 5px;
		}

		p {
			color: #777;
			font-size: 14px;
			margin-top: 3px;
		}
	}

	.jpLogin-main {
		margin-top: 40px;
	}

	.jpLogin-input {
		height: 48px;
		background-color: #fff;
		border: 1px solid #EEDCDC;
		border-radius: 50px;
		display: flex;
		width: 100%;
		padding: 0 20px;
		margin-bottom: 20px;
		position: relative;

		.u-form-item {
			flex: 1;
		}

		.jpLogin-icon {
			font-size: 20px;
			color: #FFC1C1;
			margin-right: 20px;
			position: relative;

			&:after {
				content: '';
				width: 1px;
				height: 16px;
				background-color: #E6D6D6;
				position: absolute;
				right: -10px;
				top: 15px;
			}
		}

		.jpLogin-warn {
			position: absolute;
			right: 20px;
			top: 14px;
			font-size: 20px;
			color: #FFC1C1;
		}
	}

	.jpLogin-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;

		.jpLogin-link-l {
			display: flex;
			align-items: center;

			p {
				color: #4f4646;
			}
		}

		span {
			color: #1677FF;
		}
	}

	.jpLogin-radio {
		margin-top: 16px;
		text-align: center;

		p {
			font-size: 14px;
			color: #a0a4b8;
		}

		span {
			color: #ff5e5e;
			font-size: 14px;
		}
	}
</style>