blindDate/pages/register/basicInfo.vue

<template>
	<view>
		<view class="up-the-wall">
			<view class="lf-row-between">
				<view class="lf-font-32 lf-color-black">上传照片</view>
			</view>
			<scroll-view class="scroll-bar" :scroll-x="true">
				<view class="lf-flex lf-row-between lf-h-100 border-register">
					<view class="user-item" @click="$url('/pages/upTheWall/upTheWall')">
						<lf-image class="add-icon" src="../../static/images/add_icon.png"></lf-image>
					</view>
					<!-- <view class="user-item" v-for="item in 6" :key="item">
						<image class="avatar" src="https://picsum.photos/200"></image>
						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号 73949</view>
					</view> -->
					<view class="lf-color-777">
						上传近期美照可更引人关注哦~
					</view>
				</view>
			</scroll-view>
			<view class="lf-row-between">
				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>微信号</view>
				<view class="lf-font-28 lf-color-333">_abcaca</view>
			</view>
			<view class="lf-p-t-30 lf-p-b-30 lf-font-24 lf-flex-column lf-color-777 border-register">
				<view>1.提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示</view>
				<view class="lf-m-t-10">2.提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示</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-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>
			
			<button class="btn" hover-class="lf-opacity">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				marriage: ['已婚', '未婚'],
				marriage_index: null,
				birth_date: ''
			}
		},
		onLoad(){
			
		},
		methods: {
			getValue(current, event){
				this[current +'_index'] = event.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.border-register {
		border-bottom: 1px solid #f5f5f5;
	}
	.up-the-wall{
		width: 750rpx;
		height: max-content;
		padding: 21rpx 32rpx 0;
		.scroll-bar{
			width: 100%;
			height: 164rpx;
			padding: 30rpx 0;
			.user-item{
				width: 136rpx;
				margin-right: 40rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				&:last-child{
					margin-right: 0rpx;
				}
			}
			.add-icon{
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
			.avatar{
				width: 110rpx;
				height: 110rpx;
				border: 5rpx solid #E21196;
				border-radius: 50%;
				box-sizing: border-box;
			}
		}
	}
	.btn{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 60rpx;
		padding-bottom: 10rpx;
		background: #E21196;
		border-radius: 46rpx;
		color: #FFFFFF;
	}
</style>