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

<template>
	<view class="attention">
		<uv-tabs :list="tabList" @click="clickTab" :scrollable="false"></uv-tabs>
		<mescroll-body top="120" bottom="40" @init="mescrollInit" @down="downCallback" @up="upCallback" :option="{}">
			<view class="fans-list" v-if="type === 1">
				<view class="fans-item" v-for="(item,index) in list" :key="item.id"
					@click="$navigateTo('/pages/person/person?userId='+item.userId)">
					<image class="fans-avatar" :src="item.fansUserPortrait" mode="">
					</image>
					<view class="fans-content">
						<view class="fans-name">{{item.fansUserName}}</view>
						<view class="fans-organization">{{item.date}}</view>
					</view>
				</view>
			</view>
			<view class="house-list" v-else-if="type === 2">
				<house-item v-for="(item,index) in list" :house="item" :key="item.id"></house-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getFansAttentionListByPage
	} from '@/request/api/my.js'
	import {
		getCollectionHouseListByPage
	} from '@/request/api/house.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import houseItem from "@/components/house/houseItem.vue";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				tabList: [{
					id: 1,
					name: '关注用户',
				}, {
					id: 2,
					name: '关注房源',
				}],
				type: 1
			}
		},
		onLoad() {

		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				if (this.type === 1) {
					getFansAttentionListByPage(page.num, 10).then(res => {
						if (res.code === 200) {
							this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
							if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
							let data = res.data.dataList;
							this.list = this.list.concat(data); //追加新数据
						} else {
							this.mescroll.endErr();
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				} else {
					getCollectionHouseListByPage(page.num, 10).then(res => {
						if (res.code === 200) {
							this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
							if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
							let data = res.data.dataList;
							this.list = this.list.concat(data); //追加新数据
						} else {
							this.mescroll.endErr();
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}
			},
			clickTab(item) {
				this.type = item.id;
				this.list = [];
				this.mescroll.resetUpScroll();
			}
		},
		components: {
			houseItem
		}
	}
</script>

<style lang="scss">
	.attention {
		.uv-tabs {
			position: fixed;
			top: 0;
			width: 100%;
			background: #ffffff;
			border-top: 2rpx solid $uni-border-1;
			z-index: 99999;
		}

		.house-list {
			padding: 0 30rpx;
		}
	}

	.fans-list {
		padding: 0 30rpx;
		box-sizing: border-box;

		.fans-item {
			height: 140rpx;
			background-color: #ffffff;
			border-radius: 8px;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
		}

		.fans-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}

		.fans-content {
			flex: 1;
			width: 0;
			margin-left: 20rpx;
		}

		.fans-name {
			font-size: 32rpx;
		}

		.fans-organization {
			color: $uni-secondary-color;
			font-weight: 300;
			margin-top: 4rpx;
			font-size: 24rpx;
		}

		.fans-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: $uni-primary;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>