realty/virgo.wzfrontend/yui_wx/pages/person/person.vue

<template>
	<view class="my-box">
		<view class="my-content">
			<view class="my-top"></view>
			<avatar class="my-avatar" :user="user" :size="80"></avatar>
			<view class="name">{{user.name}}</view>
			<view class="organization">{{user.organizedName || '-'}}</view>
			<view class="btn-box">
				<view class="my-button my-button-cancel" v-if="isFans === 1" @click="fans">取消关注</view>
				<view class="my-button" v-if="isFans === 2" @click="fans">关注</view>
			</view>
			<view class="my-house">
				<view class="my-house-title">房源列表</view>
				<custom-waterfalls-flow :value="list" @wapperClick="clickItem" @imageClick="clickItem">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="item">
							<view class="title">{{item.title}}</view>
							<view class="desc">{{item.desc}}</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoById,
		isFans,
		attention,
		cancelAttention
	} from '@/request/api/my.js'
	import {
		getHouseListByPage
	} from '@/request/api/house.js'
	import avatar from '@/components/common/avatar.vue';
	export default {
		data() {
			return {
				user: {},
				list: [],
				isFans: 0,
				userId: 4
			}
		},
		onLoad(body) {
			if (body.userId) this.userId = body.userId;
			this.init();
		},
		components: {
			avatar
		},
		methods: {
			init() {
				getUserInfoById(this.userId).then(res => {
					if (res.code === 200) {
						this.user = res.data;
						this.user.organizedName = res.data.mgrOrganization && res.data.mgrOrganization.name;
					}
				})
				getHouseListByPage({
					currPage: 1,
					pageSize: 100,
					chargePersonId: this.userId
				}).then(res => {
					if (res.code === 200) {
						this.list = res.data.dataList.map(node => {
							return {
								houseId: node.id,
								image: this.imageUrl(node.showPicture),
								title: `${node.projectItemName}-${node.projectItemTargetName}-${node.roomNumber}`
							}
						})
					}
				})
				this.initFans();
			},
			initFans() {
				isFans(this.userId).then(res => {
					if (res.code === 200) {
						this.isFans = res.data ? 1 : 2;
					}
				})
			},
			fans() {
				this.isFans === 1 ? cancelAttention(this.userId).then(this.successFans) : attention(this.userId).then(this
					.successFans);
			},
			successFans(res) {
				if (res.code === 200) {
					this.$toast(this.isFans === 1 ? '取消成功' : '关注成功');
					this.initFans();
				}
			},
			clickItem(item) {
				this.$navigateTo('/pages/house/house?houseId=' + item.houseId);
			},
			imageUrl(data) {
				if (!data) return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
				return JSON.parse(data)[0].url;
			}
		}
	}
</script>

<style lang="scss">
	.my-box {
		height: 100vh;
		background: #fff;
		overflow-y: auto;

		.my-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 80rpx;
		}

		.my-top {
			height: 260rpx;
			background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDUzMDJ8MHwxfHNlYXJjaHw1fHxhYnN0cmFjdHxlbnwxfHx8fDE2NTI4OTYzNTU&ixlib=rb-1.2.1&q=80&w=1080');
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
		}

		.my-avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			margin-top: -100rpx;
			border: 6rpx solid #fff;
			overflow: hidden;
		}

		.name {
			font-size: 20px;
			font-weight: 700;
			margin: 10rpx 0;
		}

		.organization {
			color: $uni-secondary-color;
			font-weight: 300;
		}

		.btn-box {
			box-sizing: border-box;
			padding: 30rpx;
			width: 100%;
		}

		.my-button {
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 68rpx;
			border: 1px solid $uni-primary;
			background: $uni-primary;
			text-align: center;
			color: #fff;

			&.my-button-cancel {
				border-color: $uni-secondary-color;
				color: $uni-secondary-color;
				background: #fff;
			}
		}

		.my-house {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.item {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 56rpx;
				background-color: rgba(0, 0, 0, 0.6);
				line-height: 56rpx;
				font-size: 24rpx;
				font-weight: 300;
				padding: 0 20rpx;
				overflow: hidden;
				color: #fff;
			}

			.my-house-title {
				font-weight: 500;
				margin-bottom: 20rpx;
			}
		}
	}
</style>