jp-xqjy/pages/login/step2.vue

<template>
	<view>
		<u-navbar :background="background" :border-bottom="false"></u-navbar>
		<view class="jpLogin">
			<view class="jpLogin-title">
				<h2>完善个人信息<span>2</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.address" type="select" placeholder="我的出生地" @click="birthdayAddressChange" />
						</u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.registered_residence" type="select" placeholder="我的的户口所在地" @click="registeredResidenceAddressChange"  /></u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.work_address" type="select" placeholder="我的工作所在地" @click="workAddressChange" /></u-form-item>
					</view>
					
					<view class="jpLogin-input" style="margin-top: 38px;">
						<u-form-item required="true"><u-input v-model="form.education" type="select" placeholder="我的学历" @click="show_education = true"/></u-form-item>
						<u-select v-model="show_education" mode="single-column" :list="education_ranges_by_names" @confirm="educationConfirm"></u-select>						
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.profession" type="select" placeholder="我的行业" @click="show_profession = true"/></u-form-item>
						<u-select v-model="show_profession" mode="single-column" :list="profession_ranges_by_names" @confirm="professionConfirm"></u-select>						
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.work_corporation" placeholder="我的工作单位"/></u-form-item>
						<u-icon custom-prefix="custom-icon" name="information-line" class="jpLogin-warn"></u-icon>
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.work_post" placeholder="我的岗位"/></u-form-item>
					</view>
					
					<view class="jpLogin-input" style="margin-top: 38px;">
						<u-form-item><u-input v-model="form.salary_range" type="select" placeholder="我的月薪范围" @click="show_salary = true"/></u-form-item>
						<u-select v-model="show_salary" mode="single-column" :list="salary_ranges_by_names" @confirm="salaryConfirm"></u-select>						
					</view>
					<view class="jpLogin-input">
						<u-form-item><u-input v-model="form.house_status" type="select" placeholder="我的住房情况" @click="show_house = true"/></u-form-item>
						<u-select v-model="show_house" mode="single-column" :list="house_statuses_by_names" @confirm="houseConfirm"></u-select>						
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.marriage_status" type="select" placeholder="我的婚姻状况" @click="show_marriage = true"/></u-form-item>
						<u-select v-model="show_marriage" mode="single-column" :list="marriage_statuses_by_names" @confirm="marriageConfirm"></u-select>						
					</view>
					<view class="jpLogin-input">
						<u-form-item required="true"><u-input v-model="form.children_status" type="select" placeholder="我的子女状况" @click="show_children = true"/></u-form-item>
						<u-select v-model="show_children" mode="single-column" :list="children_statuses_by_names" @confirm="childrenConfirm"></u-select>						
					</view>
					
					<view class="form-tit" style="margin-top: 36px;">
						自我评价
					</view>
					<view class="jpLogin-textarea">
						<u-form-item> 
							<u-input v-model="form.self_assess" type="textarea" placeholder="" />
 
						</u-form-item>
					</view>
					
					<view class="form-tit" style="margin-top: 36px;">
						选中我的兴趣爱好（可多选）
					</view>
					<view class="jpLogin-interest">
						<view class="interest-item active">摄影</view>
						<view class="interest-item">烹饪</view>
						<view class="interest-item">健身</view>
						<view class="interest-item active">看电影</view>
						<view class="interest-item">旅行</view>
						<view class="interest-item">打游戏</view>
						<view class="interest-item">修身养性</view>
						<view class="interest-item">摄影</view>
						<view class="interest-item">烹饪</view>
						<view class="interest-item">健身</view>
						<view class="interest-item">看电影</view>
						<view class="interest-item">旅行</view>
						<view class="interest-item">打游戏</view>
						<view class="interest-item">修身养性</view>
					</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="mpvuebirtydayCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onBirthdayCityConfirm"></mpvue-city-picker>		
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueRegisteredResidenceCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onResidenceRegisteredCityConfirm"></mpvue-city-picker>		
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueWorkCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onWorkCityConfirm"></mpvue-city-picker>		
	</view>
</template>

<script>
	import mpvueCityPicker from "../../components/mpvue-citypicker/mpvueCityPicker.vue";
	let _self;
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				personal_info:{},
				form: { 
					address:'',
					registered_residence:'',
					work_address:'',
					work_corporation:'',
					work_post:'',
					education:'',
					profession:'',
					salary_range:'',
					house_status:'',
					marriage_status:'',
					children_status:'',
					self_assess:'',
				},
				salary_ranges:['2000元以下','2000-5000元','5000-10000元','10000-20000元','20000-50000元','50000元以上'],
				education_ranges:['高中中专及以下','大专','本科','双学士','硕士','博士'],
				profession_ragnes:['在校学生','人力资源/行政/后勤','高级管理','生产/加工/制造','质控/安检','工程机械','技工','财会/审计/统计','金融/证券/投资/保险','房地产/装修/物业','仓储/物流','计算机/互联网/IT','普通劳动力/家政服务','普通服务行业','航空服务业','教育/培训','咨询/顾问','学术/科研','法律','设计/创意','文学/传媒/影视','餐饮/旅游','电子/半导体/仪表仪器','化工','能源/地质勘察','医疗/护理','保健/美容','生物/制药/医疗器械','体育工作者','翻译','公务员/国家干部','私营业主','农/林/牧/渔业','通信技术','自由职业者','其他'],
				marriage_statuses:['未婚','离异','丧偶'],
				house_statuses:['已购住房','与人合租','独自租房','与父母同住','住亲朋家','住单位房','需要时购房'],
				corportation_types:['世界500强','上市公司','国有企业','私营企业','自有公司'],
				children_statuses:['没有孩子','有孩子跟着自己','有孩子跟着对方','有孩子但已独立'],
				value:'0',
				customStyle: {
					background: '#FF5E5E'
				}, 
				salary_ranges_by_names:[],
				education_ranges_by_names:[],
				profession_ranges_by_names:[],
				marriage_statuses_by_names:[],
				house_statuses_by_names:[],
				corportation_types_by_names:[],
				children_statuses_by_names:[],
				show_salary:false,
				show_profession:false,
				show_education:false,
				show_house:false,
				show_marriage:false,
				show_children:false,
				
				background:{
					background: 'none'
				} 
			}
		},
		onLoad(){
			_self = this;
			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);
			}
			for(let i = 0;i< _self.education_ranges.length;i++)
			{
				let education_range = {value:i, label: _self.education_ranges[i]};
				_self.education_ranges_by_names.push(education_range);
			}
			for(let i = 0;i< _self.profession_ragnes.length;i++)
			{
				let profession_range = {value:i, label: _self.profession_ragnes[i]};
				_self.profession_ranges_by_names.push(profession_range);
			}
			for(let i = 0;i< _self.marriage_statuses.length;i++)
			{
				let marriage_range = {value:i, label: _self.marriage_statuses[i]};
				_self.marriage_statuses_by_names.push(marriage_range);
			}
			for(let i = 0;i< _self.house_statuses.length;i++)
			{
				let house_range = {value:i, label: _self.house_statuses[i]};
				_self.house_statuses_by_names.push(house_range);
			}
			for(let i = 0;i< _self.corportation_types.length;i++)
			{
				let corportation_range = {value:i, label: _self.corportation_types[i]};
				_self.corportation_types_by_names.push(corportation_range);
			}
			for(let i = 0;i< _self.children_statuses.length;i++)
			{
				let children_range = {value:i, label: _self.children_statuses[i]};
				_self.children_statuses_by_names.push(children_range);
			}
			_self.get_options();
		},
		onReady(){
			_self.get_options();
		},
		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))
				});
			},
			childrenConfirm(e){
				console.log('e'+JSON.stringify(e))
				this.form.children_status = '';
				e.map((val, index) => {
					// this.result += this.result == '' ? val.label : '-' + val.label;
					let result = val.label
					this.form.children_status  += result;
				}) 
			},
			marriageConfirm(e){
				console.log('e'+JSON.stringify(e))
				this.form.marriage_status = '';
				e.map((val, index) => {
					// this.result += this.result == '' ? val.label : '-' + val.label;
					let result = val.label
					this.form.marriage_status  += result;
				}) 
			},
			houseConfirm(e){
				console.log('e'+JSON.stringify(e))
				this.form.house_status = '';
				e.map((val, index) => {
					// this.result += this.result == '' ? val.label : '-' + val.label;
					let result = val.label
					this.form.house_status  += 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;
				}) 
			},
			professionConfirm(e){
				console.log('e'+JSON.stringify(e))
				this.form.profession = '';
				e.map((val, index) => {
					// this.result += this.result == '' ? val.label : '-' + val.label;
					let result = val.label
					this.form.profession  += result;
				}) 
			},
			salaryConfirm(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;
				}) 
			},
			previous(){
				uni.navigateBack({
					deta:1
				})
			},
			next(){
				_self.personal_info.step2= _self.form;
				uni.navigateTo({
					url:'./step3',
					success:function(res){
						res.eventChannel.emit('acceptDataFromOpenerPage', _self.personal_info);
						console.log('send options'+JSON.stringify(_self.personal_info));
					}
				})
			},
			onBirthdayCityConfirm(e) {
				_self.form.address = e.label;
				console.log('地址选择'+_self.address)
			},
			onResidenceRegisteredCityConfirm(e) {
				_self.form.registered_residence = e.label;
				console.log('地址选择'+_self.registered_residence)
			},
			onWorkCityConfirm(e) {
				_self.form.work_address = e.label;
				console.log('地址选择'+_self.work_address)
			},
			birthdayAddressChange(){
				this.$refs.mpvuebirtydayCityPicker.show()
			},
			registeredResidenceAddressChange(){
				this.$refs.mpvueRegisteredResidenceCityPicker.show()
			},
			workAddressChange(){
				this.$refs.mpvueWorkCityPicker.show()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jpLogin-interest{
		display: flex;
		flex-wrap: wrap;
		.interest-item{
			padding: 4px 10px;
			background-color: #E5E7EA;
			border-radius: 4px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.active{
			background-color: #FFC1BC;
		}
	}
	.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>