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

<template>
	<view class="container">
		<TopBar></TopBar>
		<view class="line-bar flex-between">
			<view class="span active"></view>
			<view class="span"></view>
			<view class="span"></view>
			<view class="span"></view>
			<view class="span"></view>
		</view>
		<view class="title font44 fw600">
			请选择性别
		</view>
		<view class="tip font28 fw400">
			选择好性别，才好遇见你的那个TA
		</view>
		<view class="img-box" style="margin-top: 104rpx;" @click="sex='Famale'">
			<image :src="`${assetsUrl}info-female-${sex==='Famale'?'on':'off'}.png`" mode="aspectFill" class="img"></image>
			<view class="img-text font28 fw400" :style="{'color':`${sex==='Famale'?'#ffffff':''}`}">
				我是女生
			</view>
		</view>
		<view class="img-box" style="margin-left: 368rpx;" @click="sex='Male'">
			<image :src="`${assetsUrl}info-male-${sex==='Male'?'on':'off'}.png`" mode="aspectFill" class="img"></image>
			<view class="img-text font28 fw400" :style="{'color':`${sex==='Male'?'#ffffff':''}`}">
				我是男生
			</view>
		</view>
		<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,
				sex:'Famale',
			};
		},
		methods:{
			sure(){
				uni.showModal({
					title:'确认性别',
					content:`性别选择后无法修改，当前选择为${this.sex==='Famale'?'女性':'男性'}，请确认！`,
					confirmText:'确认',
					confirmColor:'#6C52F4',
					success:(res)=>{
						if(res.confirm){
							uni.showLoading({
								title:'保存中',
								mask:true
							})
							let user=JSON.parse(uni.getStorageSync('user'));
							user.sex=this.sex;
							this.$api.login.saveSex({
								"completeUser": user,
								"weiXinStatusEnum": 'NoWeiXin',
							}).then(res=>{
								uni.setStorageSync('regStep','SocialImage');
								uni.setStorageSync('LL_Ukn',res.data.ukn);
								uni.setStorageSync('user',JSON.stringify(user));
								uni.hideLoading();
								uni.reLaunch({
									url:`/pages/info/figure`
								})
							}).catch(err=>{})
						}
					}
				})
			}
		}
	}
</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;
	}
	.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>