blindDate/pages/my/editInfo.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="edit-head">
			<!-- @click="$url('/pages/my/photoImage')" -->
			<view>
				<lf-image :src="member.avatar_url" mode="aspectFill" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"></lf-image>
			</view>
			<!-- <view class="lf-font-32 lf-color-222">
				点击上传形象照
			</view>
			<view class="lf-font-28 lf-color-777 lf-p-l-32 lf-p-r-32">
				确保个人形象照片为本人清晰正脸照，一张良好的形象照更能吸引到别人哦
			</view> -->
		</view>
		<!-- <view class="edit-tag">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">内心独白</view>
				<view class="lf-font-28 lf-color-777" @click="$url('/pages/my/innerMonologue')">去编辑<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
			</view>
			<view class="lf-color-777 lf-font-28">
				了解Ta的购车、住房情况和家庭成员资料成员资料成员资料成员资料成员资料成员资料成员资料
			</view>
		</view> -->
		<view class="edit-tag edit-tag1" v-if="member.base && member.base.length">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">基本资料</view>
				<!-- <view class="lf-font-28 lf-color-777" @click="$url('/pages/my/basicInformation')">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> -->
			</view>
			<view class="lf-color-777 lf-font-28 tag-content">
				<view class="personal-tag" v-for="(item, index) in member.base" :key="index">{{ item }}</view>
			</view>
		</view>
		<view class="edit-tag edit-tag1" v-if="member.work && member.work.length">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">工作经济家庭</view>
				<!-- <view class="lf-font-28 lf-color-777" @click="$url('/pages/my/workEconomy')">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> -->
			</view>
			<view class="lf-color-777 lf-font-28 tag-content">
				<view class="personal-tag" v-for="(item, index) in member.work" :key="index">{{ item }}</view>
			</view>
		</view>
		<view class="edit-tag edit-tag1" v-if="member.require && member.require.length">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">择偶要求</view>
				<!-- <view class="lf-font-28 lf-color-777" @click="$url('/pages/my/matePerfance')">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> -->
			</view>
			<view class="lf-color-777 lf-font-28 tag-content">
				<view class="personal-tag" v-for="(item, index) in member.require" :key="index">{{ item }}</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		  <view style="height: 10rpx;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member: {}
			}
		},
		onLoad(){
			this.getMemberDetail();
		},
		methods: {
			getMemberDetail(){
				this.$http(this.API.API_USER_DETAIL).then(res => {
					let member = res.data.member;
					this.member = member;
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped="scoped">
	.tag-content {
		width: 686rpx;
		flex-wrap: wrap;
		display: flex;
	}
	
	.edit-tag1 {
		height: 100%!important;
	}
	
	.personal-tag {
		width: max-content;
		padding: 8rpx 25rpx;
		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(4n) {
			margin-right: 0;
		}
		&:nth-child(n + 5) {
			margin-top: 20rpx;
		}
	}
	
	.edit-head {
		background-color: white;
		// height: 400rpx;
		height: 200rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.edit-tag {
		width: 686rpx;
		height: 215rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx auto;
		display: flex;
		flex-direction: column;
		/* justify-content: space-around; */
		padding: 30rpx;
	}
	
	.edit-tag1 {
		height: 190rpx!important;
	}
	
	.authen-title {
		position: relative;
	}
	
	.authen-title::after {
		content: '';
		position: absolute;
		left: 0;
		top: 8rpx;
		width: 8rpx;
		height: 30rpx;
		background: #E21196;
		border-radius: 4rpx;
	}
</style>