blindDate/pages/register/chooseMate.vue

<template>
	<view class="lf-p-30">
		<view class="up-the-wall">
			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>婚史要求</view>
				<view class="lf-font-28 lf-color-333">
					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
						<text>{{ marriage[marriage_index] || '请选择' }}</text>
					</picker>
				</view>
			</view>
			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低身高</view>
				<view class="lf-font-28 lf-color-333">
					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
						<text>{{ marriage[marriage_index] || '请选择' }}</text>
					</picker>
				</view>
			</view>
			
			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低学历要求</view>
				<view class="lf-font-28 lf-color-333">
					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
						<text>{{ marriage[marriage_index] || '请选择' }}</text>
					</picker>
				</view>
			</view>
			
			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
				<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>最低年薪要求</view>
				<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-333">
					请选择
				</view>
			</view>
			<view class="tag-content">
				<view class="personal-tag" :class="item.hot?'personal-special1':'personal-active1'" v-for="item of chooseList">{{item.name}}</view>
			</view>
			
			<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
				<view class="cu-dialog">
					<view class="lf-p-b-30 lf-font-32" style="color: #E21196;">
						请选择你的家庭成员
					</view>
					
					<view class="tag-content1">
						<view class="personal-tag1" :class="item.checked?'personal-active':''" :data-value="item.value" v-for="(item,index) of checkbox" @tap.stop="ChooseCheckbox">{{item.name}}</view>
					</view>
					
					<view class="lf-row-center">
						<view class="work-btn1 work-btn"  @click.stop="makeSure()">
							确认选择
						</view>
					</view>
				</view>
			</view>
			<button class="btn" hover-class="lf-opacity">最后一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				marriage: ['已婚', '未婚'],
				marriage_index: null,
				birth_date: '',
				modalName: null,
				checkbox: [{
					value: 0,
					name: '父亲',
					checked: true,
					hot: false,
				}, {
					value: 1,
					name: '母亲',
					checked: true,
					hot: false,
				}, {
					value: 2,
					name: '哥哥',
					checked: false,
					hot: false,
				}, {
					value: 3,
					name: '姐姐',
					checked: false,
					hot: false,
				}, {
					value: 4,
					name: '儿子',
					checked: false,
					hot: false,
				}, {
					value: 5,
					name: '儿子(离异归对方)',
					checked: false,
					hot: true,
				}],
				chooseList: []
			}
		},
		onLoad(){
			
		},
		methods: {
			getValue(current, event){
				this[current +'_index'] = event.detail.value;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			makeSure(e) {
				this.chooseList = [];
				this.checkbox.forEach(item => {
					if(item.checked == true) {
						this.chooseList.push(item)
					}
				});
				this.modalName = null
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.perfance-area {
		background-color: #F5F5F5;
		width: 560rpx;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	.up-the-wall {
		width: 100%;
		height: max-content;
		padding: 21rpx 32rpx 21rpx;
		background-color: white;
		border-radius: 10rpx;
	}
	/deep/.input-placeholder {
		/* placeholder颜色  */
		color: #777777;
		/* placeholder字体大小  */
		font-size: 28rpx;
	}
	.border-register {
		border-bottom: 1px solid #f5f5f5;
	}
	.btn{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx;
		padding-bottom: 10rpx;
		background: #E21196;
		border-radius: 46rpx;
		color: #FFFFFF;
	}
	
	.tag-content {
		width: 600rpx;
		flex-wrap: wrap;
		display: flex;
		margin-top: 10rpx;
	}
	
	.personal-tag {
		margin: 10rpx 4rpx;
		width: max-content;
		padding: 2rpx 20rpx;
		height: 55rpx;
		border-radius: 28rpx;
		border: 1rpx solid #E21196;
		color: #E21196;
		font-size: 28rpx;
		margin-right: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&:nth-child(5n) {
			margin-right: 0;
		}
		&:nth-child(n + 6) {
			margin-top: 20rpx;
		}
	}
	
	.tag-content1 {
		width: 600rpx;
		flex-wrap: wrap;
		display: flex;
	}
	
	.personal-tag1 {
		width: max-content;
		padding: 8rpx 25rpx;
		height: 55rpx;
		border-radius: 10rpx;
		border: 1rpx solid #ccc;
		color: #969090;
		font-size: 28rpx;
		margin-right: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&:nth-child(5n) {
			margin-right: 0;
		}
		&:nth-child(n + 6) {
			margin-top: 20rpx;
		}
	}
	
	.personal-active {
		border: 1rpx solid #E21196!important;
		color: #E21196!important;
	}
	
	.personal-special {
		border: 1rpx solid orange!important;
		color: orange!important;
	}
	
	.personal-active1 {
		border: none!important;
		background-color: #E21196!important;
		color: #fff!important;
	}
	
	.personal-special1 {
		border: none!important;
		background-color: orange!important;
		color: #fff!important;
	}
	
	.work-btn1 {
		border-radius: 10rpx!important;
	}
	.work-btn {
		width: 626rpx;
		height: 90rpx;
		background: #E21196;
		border-radius: 45rpx;
		color: white;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		margin-top: 60rpx;
	}
	
	.work-tag {
		height: 100%!important;
	}
	.work-tag {
		width: 686rpx;
		height: 215rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx auto;
		display: flex;
		flex-direction: column;
		/* justify-content: space-around; */
		padding: 30rpx;
	}
	
	//窗口
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	
	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
		padding: 30rpx;
	}
	
	.cu-modal.bottom-modal::before {
		vertical-align: bottom;
	}
	
	.cu-modal.bottom-modal .cu-dialog {
		width: 100%;
		border-radius: 0;
	}
	
	.cu-modal.bottom-modal {
		margin-bottom: -1000upx;
	}
	
	.cu-modal.bottom-modal.show {
		margin-bottom: 0;
	}
	
	.cu-modal.drawer-modal {
		transform: scale(1);
		display: flex;
	}
	
	.cu-modal.drawer-modal .cu-dialog {
		height: 100%;
		min-width: 200upx;
		border-radius: 0;
		margin: initial;
		transition-duration: 0.3s;
	}
	
	.cu-modal.drawer-modal.justify-start .cu-dialog {
		transform: translateX(-100%);
	}
	
	.cu-modal.drawer-modal.justify-end .cu-dialog {
		transform: translateX(100%);
	}
	
	.cu-modal.drawer-modal.show .cu-dialog {
		transform: translateX(0%);
	}
	.cu-modal .cu-dialog>.cu-bar:first-child .action{
	  min-width: 100rpx;
	  margin-right: 0;
	  min-height: 100rpx;
	}
</style>