app/pages/search/user.vue

<template>
	<view class="wrap">
		<view v-if="flowList.length">
			<view
				class="flex-box"
				v-for="i in flowList"
				v-if="i.id != id"
				:key="i.id"
			>
				<u-image
					@click="tozuozhe(i.id)"
					:src="i.face"
					class="flxleft"
					width="120"
					height="120"
					shape="circle"
					loading-icon="/static/missing-face.png"
					error-icon="/static/missing-face.png"
					style="display: flex; align-items: center"
				></u-image>

				<view
					class="flxcenter"
					@click="tozuozhe(i.id)"
				>
					<view class="nkname">{{ i.nickname }}</view>
					<view
						class="fans"
						v-if="i.myFansCounts"
					>
						粉丝：{{ getGraceNumber(i.myFansCounts || 0) }}
					</view>
					<view
						class="fans"
						v-if="i.totalLikeMeCounts"
					>
						获赞：{{ getGraceNumber(i.totalLikeMeCounts || 0) }}
					</view>
				</view>
				<view class="flxright">
					<u-button
						type="error"
						@click="follow(i)"
						v-if="i.followStatus == '未关注'"
					>
						关注
					</u-button>
					<u-button
						v-else
						type="plain"
						@click="cancelFollow(i)"
					>
						{{ i.followStatus }}
					</u-button>
				</view>
			</view>
			<u-loadmore
				style="padding: 10px 0"
				bg-color="#f8f8f8"
				:status="loadStatus"
				@loadmore="getData"
			></u-loadmore>
		</view>
		<u-empty
			v-else
			style="margin-top: 20%"
			text="暂无数据"
			mode="data"
		></u-empty>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
import { vlogSearchUser, vlogFansFollow, vlogFansCancel, vlogQueryDoIFollowVloger } from '@/api/vlog';
import { clickFeedBack, graceNumber } from '@/utils/tools.js';
export default {
	props: {
		keywords: {
			default: ''
		}
	},
	data() {
		return {
			flag: 2, // 在tabs中的索引
			loadStatus: 'loadmore',
			flowList: [],
			page: 0,
			totalPage: 0,
			search: '',
			id: '',
			channelComment: null
		};
	},
	destroyed() {
		console.log('查询用户组件销毁');
		// 销毁时关闭 BroadcastChannel
		if (this.channelComment) {
			this.channelComment.close();
		}
	},
	created() {
		this.initData();
		this.channelComment = new BroadcastChannel('comment-counts');
	},
	methods: {
		// 把超过1000或10000的数字调整, 比如1.3k/6.8w
		getGraceNumber(num) {
			return graceNumber(num);
		},
		tozuozhe(userId) {
			uni.navigateTo({
				url: '/pages/me/vlogerInfo?userPageId=' + userId
			});
		},
		async getData() {
			if (this.loadStatus !== 'loadmore') return;
			var info = storage.getVlogUserInfo();
			var id = '';
			if (info != null) {
				id = info.id;
			}
			this.id = id;
			this.loadStatus = 'loading';
			this.page += 1;
			console.log('加载用户数据');

			var params = {
				id: id,
				nickname: this.search,
				page: this.page,
				pageSize: 10
			};
			console.log(params);
			var result = await vlogSearchUser(params);
			console.log(result);
			if (result.data.status == 200) {
				var data = result.data.data || [];
				if (!data.length) {
					this.loadStatus = 'nomore';
				} else {
					if (data.length < 10) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
					data.forEach((i) => {
						i.doIflow = false;
						if (i.followStatus == null) {
							// 处理未登录时的状态
							i.followStatus = '未关注';
						}
						this.flowList.push(i);
					});
					// this.flowList.push(...data);
				}
			}
		},
		initData() {
			this.search = this.keywords;
			this.page = 0;
			this.totalPage = 0;
			this.flowList = [];
			this.loadStatus = 'loadmore';
			console.log('初始化用户数据');
			this.getData();
		},
		async follow(item) {
			clickFeedBack();
			let userInfo = storage.getVlogUserInfo();
			if (userInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			let data = {
				myId: userInfo.id,
				vlogerId: item.id
			};
			var result = await vlogFansFollow(data);
			console.log(result);
			if (result.data.status == 200) {
				var bothFrd = await vlogQueryDoIFollowVloger({ myId: item.id, vlogerId: userInfo.id });
				if (bothFrd.data.data) {
					item.followStatus = '互相关注';
				} else {
					item.followStatus = '已关注';
				}
				console.log(bothFrd);
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { flag: true, from: 'refresh', vlogerId: item.id, vlogId: item.vlogId }
				});
				item.myFansCounts++;
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},
		async cancelFollow(item) {
			clickFeedBack();
			let userInfo = storage.getVlogUserInfo();
			if (userInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			let data = {
				myId: userInfo.id,
				vlogerId: item.id
			};
			var result = await vlogFansCancel(data);
			console.log(result);
			if (result.data.status == 200) {
				item.followStatus = '未关注';
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { flag: false, from: 'refresh', vlogerId: item.id, vlogId: item.vlogId }
				});
				item.myFansCounts--;
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.flex-box {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
	padding: 10rpx 20rpx;
}
.flxleft {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}
.flxcenter {
	flex: 1;
}
.nkname {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	font-weight: 500;
	font-size: 32rpx;
}
.fans {
	font-size: 26rpx;
	color: #000;
}
.flxright {
	margin-left: 10px;
}
</style>