deming/pageE/mine/MineConcerns.vue

<template>
	<view class="concerns">
		<view class="tabs-top u-border-bottom">
			<u-tabs ref="uTabs" :show-bar="false" :list="list" font-size="32" :current="current" @change="tabsChange" :is-scroll="false"
			swiperWidth="750" active-color="#FF780F"></u-tabs>
		</view>
		<scroll-view v-if="current==0" scroll-y style="height: 100%;width: 100%;" class="store" @scrolltolower="onreachBottom">
			<storeViwe ref="store"></storeViwe>
		</scroll-view>
		<scroll-view v-else scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
			<view class="concerns-container">
				<view v-for="(info, index) in daren" :key="index">
					<view class="daren-item">
						<image class="head" :src="info.friend_tomavatar" @click="toDetailsPage({ id: info.friend_tomid })"></image>
						<text class="name" @click="toDetailsPage({ id: info.friend_tomid })">{{ info.friend_tomname || '' }}</text>
						<view class="guanzhu" @click="changeType(info.friend_tomid)" v-if="info.friend_followstate == 1">取消关注</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" bg-color="#FFFFFF" v-if="daren.length > 9" @loadmore="loadmore" />
			</view>
			<u-empty mode="list" v-if="!daren.length" color="#000" img-width="200" font-size="30" margin-top="200"></u-empty>
		</scroll-view>
	</view>
</template>
<script>
import storeViwe from './storeConcerns'
export default {
	data() {
		return {
			list: [{ name: "店铺" }, { name: "达人" }],
			daren: [],
			shangjia:[],
			height: 0,
			show: false,
			current: 0,
			page: 1,
			loadStatus: 'loadmore',
			timer: true,
		}
	},
	components: {
		storeViwe,
	},
	onShow() {
		this.loadStatus = "loadmore"
		this.page = 1
		this.getPeopleList();
	},
	onLoad(){
		this.setViewHeight();
	},
	methods: {
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.height = res.windowHeight - (res.windowWidth / 750 * 80) + 'px';
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.current = index;
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			if(this.current == 0) this.$refs.loadmore();
			else if(this.current == 1) this.loadmore();
		},
		loadmore() {
			if(!this.timer) return false;
			this.timer = false;
			this.loadStatus = "loading";
			this.page++;
			this.getPeopleList({ load: 'loadmore' }).then(length => {
				this.loadStatus = "nomore";
				if(length == 0) this.page--;
			}).catch(() => {
				this.loadStatus = "nomore";
				this.page--;
			})
		},
		async getPeopleList({ load = 'reload' } = {}) {
			const res = await this.$u.api.attentionMemberList({
				role: 3,
				page: this.page
			})
			this.timer = true;
			if(res.errCode == 0) {
				if(load == 'reload') this.daren = res.data.data;
				else if(load == 'loadmore') this.daren.push(...res.data.data);
			}
			return res.data.data.length;
		},
		// 取消关注
		changeType(id) {
			// console.log(id);
			this.$u.api.attentionMember({
				member_id: id
			}).then(res => {
				this.$u.toast(res.message);
				this.getPeopleList();
			})
		},
		toDetailsPage(id) {
			this.$u.route('pageB/details/index', {
				id: id
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.concerns {
	background-color: #FFFFFF;
	.store {
		background-color: #FFFFFF;
	}
	.concerns-container {
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		margin-left: -20rpx;
		.daren-item {
			width: 215rpx;
			height: 270rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(35,24,21,0.12);
			.head{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-top: 24rpx;
				background-color: #0f0;
			}
			.name{
				font-size: 26rpx;
				color: #333;
				font-weight: 400;
				margin-top: 23rpx;
			}
			.zhuangtai{
				font-size:22rpx;
				color: #999;
				margin-top: 19rpx;
			}
			.guanzhu{
				width: 130rpx;
				height: 50rpx;
				background-color: #EDEDED;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #fff;
				text-align: center;
				margin-top: 19rpx;
				border-radius: 25rpx;
			}
			.action{
				background: #f3f3f3;
			}
		}
	}
}
</style>