sugarpark-mini-program/pages/info/datum.vue

<template>
	<view class="container">
		<TopBar></TopBar>
		<view class="line-bar flex-between">
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span"></view>
			<view class="span"></view>
		</view>
		<view class="title font44 fw600">
			设置你的社交资料
		</view>
		<view class="tip font28 fw400">
			10秒填写基本信息，邂逅你喜欢的新朋友
		</view>
		<view class="select-title font28 fw400">
			你的身高
		</view>
		<picker mode="selector" :range="heights" :value="userInfo.sex==='Male'?'20':'15'" @change="heightsChange">
			<view class="select flex-between">
				<view class="select-val font28 fw400" :style="{'color':`${height==='选择身高'?'':'#ffffff'}`}">
					{{height}}
				</view>
				<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
			</view>
		</picker>
		<view class="select-title font28 fw400">
			你的体重
		</view>
		<picker mode="selector" :range="weights" :value="userInfo.sex==='Male'?'30':'15'" @change="weightsChange">
			<view class="select flex-between">
				<view class="select-val font28 fw400" :style="{'color':`${weight==='选择体重'?'':'#ffffff'}`}">
					{{weight}}
				</view>
				<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
			</view>
		</picker>
		<view class="select-title font28 fw400">
			你的年龄
		</view>
		<picker mode="date" fields="day" start="1963-01-01" end="2004-01-01" value="1993-09-12" @change="agesChange">
			<view class="select flex-between">
				<view class="select-val font28 fw400" :style="{'color':`${age==='选择年龄'?'':'#ffffff'}`}">
					{{age}}
				</view>
				<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
			</view>
		</picker>
		<view class="select-title font28 fw400">
			你的职业
		</view>
		<picker mode="multiSelector" :range="jobs" @change="jobsChange" @columnchange="jobsColumnChange">
			<view class="select flex-between">
				<view class="select-val font28 fw400" :style="{'color':`${job==='选择职业'?'':'#ffffff'}`}">
					{{job}}
				</view>
				<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
			</view>
		</picker>
		<view style="height: 200rpx;"></view>
		<cover-view class="btn font32 fw600" @click="sure">
			下一步
		</cover-view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		components:{TopBar},
		data() {
			return {
				assetsUrl:this.$util.assetsUrl,
				heights:[],
				height:'选择身高',
				weights:[],
				weight:'选择体重',
				age:'选择年龄',
				jobs:[],
				careersData:[],
				job:'选择职业',
				saveOption:{
					birthday:'',
					completeUser:null,
				},
				userInfo:null
			};
		},
		mounted(){
			this.userInfo=JSON.parse(uni.getStorageSync('userInfo'))
			let arr=[];
			for(let i=150;i<210;i++){
				arr.push(`${i}cm`);
			}
			this.heights=arr;
			arr=[];
			for(let i=30;i<200;i++){
				arr.push(`${i}kg`);
			}
			this.weights=arr;
			this.getCareersConfig();
		},
		methods:{
			getCareersConfig(){
				this.$api.public.config({tscsj:['Careers']}).then(res=>{
					this.careersData=res.data.careers;
					let arr=[],arr1=[];
					for(let item in res.data.careers){
						arr1.push(item)
					}
					arr.push(arr1);
					arr.push(res.data.careers[arr1[0]]);
					this.jobs=arr;
				}).catch(err=>{
					console.log(err)
				})
			},
			sure(){
				if(this.height==='选择身高'){uni.showToast({title:'请选择身高',icon:'none'});return;}
				if(this.weight==='选择体重'){uni.showToast({title:'请选择体重',icon:'none'});return;}
				if(this.age==='选择年龄'){uni.showToast({title:'请选择出生年月',icon:'none'});return;}
				if(this.job==='选择职业'){uni.showToast({title:'请选择职业',icon:'none'});return;}
				let user=JSON.parse(uni.getStorageSync('user'));
				user.career=this.job;
				user.height=Number(this.height.substring(0,2));
				user.weight=Number(this.weight.split('kg')[0]);
				this.saveOption.completeUser=user;
				this.saveOption.birthday=this.age;
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				this.$api.login.saveDatum(this.saveOption).then(res=>{
					if(res.data.succ){
						uni.setStorageSync('regStep','CityStay');
						uni.setStorageSync('user',JSON.stringify(user));
						uni.hideLoading();
						uni.reLaunch({
							url:`/pages/info/city`
						})
					}
				}).catch(()=>{})
			},
			heightsChange(e){
				this.height=this.heights[e.detail.value];
			},
			weightsChange(e){
				this.weight=this.weights[e.detail.value];
			},
			agesChange(e){
				this.age=e.detail.value;
			},
			jobsChange(e){
				let str=this.jobs[1][e.detail.value[1]];
				this.job=str;
			},
			jobsColumnChange(e){
				let leftValue=this.jobs[e.detail.column][e.detail.value];
				if(e.detail.column===0){
					this.jobs[1]=this.careersData[leftValue];
					this.$forceUpdate()
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	min-height: 100vh;
	background-color: $bgcolor1;
	.line-bar{
		margin: 0 60rpx;
		margin-top: 30rpx;
		.span{
			width: 120rpx;
			height: 8rpx;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			background-color: $bgcolor4;
		}
		.active{
			background-color: $primary;
		}
	}
	.title{
		color: $fontcolor5;
		padding-left: 60rpx;
		margin-top: 108rpx;
	}
	.tip{
		color: $fontcolor3;
		padding-left: 60rpx;
		margin-top: 8rpx;
	}
	.select-title{
		color: $fontcolor3;
		margin: 0 60rpx;
		margin-top: 56rpx;
	}
	.select{
		background-color: $bgcolor3;
		margin: 0 60rpx;
		margin-top: 16rpx;
		height: 112rpx;
		border-radius: 16px;
		padding: 0 36rpx;
		.select-val{
			color: $fontcolor1;
		}
		.select-icon{
			width: 24rpx;
			height: 24rpx;
		}
	}
	
	.img-box{
		width: 320rpx;
		margin-left: 60rpx;
		
		.img{
			width: 320rpx;
			height: 320rpx;
		}
		.img-text{
			color: $fontcolor3;
			text-align: center;
		}
	}
	.btn{
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 44rpx;
		margin: auto;
		width: 630rpx;
		height: 104rpx;
		border-radius: 52rpx;
		background-color: $primary;
		color: $fontcolor5;
		text-align: center;
		line-height: 104rpx;
	}
}
</style>