app/pages/me/vlogerInfo.nvue

<template>
	<view class="page">
		<scroll-view
			class="isLogin-info-wrapper"
			:style="{ height: screenHeight + 'px' }"
			scroll-y="true"
			@scrolltolower="loadMore"
		>
			<image
				class="mybg"
				:src="pageUserInfo.bgImg"
				mode="aspectFill"
			/>

			<view
				class="header"
				:style="{ marginTop: statusBarHeight + 'px' }"
			>
				<image
					class="header-right-search"
					src="../../static/images/icon-back.png"
					@click="back()"
				/>
			</view>
			<view class="my-info-wrapper">
				<view class="my-info">
					<image
						:src="pageUserInfo.face"
						mode="aspectFill"
						class="my-face"
					/>
					<view class="info-wrapper">
						<text class="nickname">
							{{ pageUserInfo.nickname }}
						</text>
						<view class="tiktok-num-wrapper">
							<text class="tiktok-num">视频号：</text>
							<text class="tiktok-num">
								{{ pageUserInfo.imoocNum }}
							</text>
						</view>
						<view class="location">
							<text class="location-text">所在地：</text>
							<text class="location-text">
								{{ pageUserInfo.city == '' ? '中国' : '' + pageUserInfo.city }}{{ pageUserInfo.district == '' ? '' : '·' + pageUserInfo.district }}
							</text>
						</view>
						<view class="sex-wrapper">
							<view class="constellation">
								<image
									class="sex-img"
									v-if="pageUserInfo.sex == 1"
									src="/static/images/icon-sex-boy.png"
								/>
								<image
									class="sex-img"
									v-if="pageUserInfo.sex == 0"
									src="/static/images/icon-sex-girl.png"
								/>
								<image
									class="sex-img"
									v-if="pageUserInfo.sex == 2"
									src="/static/images/icon-sex-secret.png"
								/>
								<text class="astro">{{ astro }}座</text>
							</view>
							<view class="animal">
								<text class="animal-text">
									{{ animal }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<text class="desc">
				{{ pageUserInfo.description }}
			</text>

			<view class="bottom-wrapper">
				<view class="bottom">
					<view
						class="bottom-item"
						@click="goMyFollows(pageUserInfo.id)"
					>
						<text class="item-num">
							{{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
						</text>
						<text class="item-text">关注</text>
					</view>
					<view
						class="bottom-item"
						@click="goMyFans(pageUserInfo.id)"
					>
						<text class="item-num">
							{{ getGraceNumber(pageUserInfo.myFansCounts) }}
						</text>
						<text class="item-text">粉丝</text>
					</view>
					<view class="bottom-item">
						<text class="item-num">
							{{ getGraceNumber(pageUserInfo.totalLikeMeCounts) }}
						</text>
						<text class="item-text">获赞</text>
					</view>
				</view>

				<view class="edit">
					<view
						v-if="isFollow && !isFan"
						@click="cancelFollow()"
						class="follow-btn"
					>
						<text class="follow-text">已关注</text>
					</view>
					<view
						v-if="isFollow && isFan"
						@click="cancelFollow()"
						class="follow-btn"
					>
						<text class="follow-text">相互关注</text>
					</view>
					<view
						v-if="!isFollow"
						@click="followMe()"
						class="follow-btn"
						style="background-color: #ef274d"
					>
						<text class="follow-text">关注我</text>
					</view>
					<view
						v-if="block"
						class="follow-btn"
						@click="quxiaolahei"
					>
						<text class="follow-text">解除拉黑</text>
					</view>
					<view
						@click="lahei"
						v-if="!block"
						class="follow-btn"
					>
						<text class="follow-text">拉黑</text>
					</view>
				</view>
			</view>

			<view
				class="tab-wrapper"
				v-if="!block"
			>
				<view
					class="tab-item"
					@click="switchTab(0)"
				>
					<text
						class="tab-normal"
						:class="{ 'tab-selected': currentTab == 0 }"
					>
						作品
					</text>
					<view
						v-if="currentTab == 0"
						class="selected-tab"
					></view>
				</view>
				<!--       <view class="tab-item" @click="switchTab(1)">
          <text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
            私密
          </text>
          <view v-if="currentTab == 1" class="selected-tab"></view>
        </view> -->
				<view
					class="tab-item"
					@click="switchTab(1)"
				>
					<text
						class="tab-normal"
						:class="{ 'tab-selected': currentTab == 1 }"
					>
						赞过
					</text>
					<view
						v-if="currentTab == 1"
						class="selected-tab"
					></view>
				</view>
			</view>

			<view
				class="vlog-list"
				v-if="!block"
			>
				<view
					class="vlogBox"
					v-for="(vlog, index) in vlogList"
					:key="index"
				>
					<image
						class="vlog-cover"
						:src="vlog.cover || vlog.firstFrameImg"
						@click="goToVlog(vlog)"
						mode="aspectFill"
					></image>
					<view class="rightLike">
						<image
							src="/static/images/icon-unlike.png"
							style="width: 30rpx; height: 30rpx"
						></image>
						<text style="color: #ffffff">{{ getGraceNumber(vlog.likeCounts) }}</text>
					</view>
				</view>
			</view>

			<view
				v-if="vlogList.length == 0 && block == false"
				class="empty"
			>
				<text class="empty-text">~ 空空如也 ~</text>
			</view>

			<view
				v-if="vlogList.length > 0 && block == false"
				class="not-empty"
			>
				<text class="not-empty-text">~ 没有更多了 ~</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
let system = uni.getSystemInfoSync();
import { clickFeedBack } from '@/utils/tools.js';
import api from '@/config/api.js';
import storage from '@/utils/storage.js'; //缓存
import {
	queryBlockVloger,
	cancelBlock,
	blockUser,
	vlogUserInfo,
	vlogQueryDoIFollowVloger,
	vlogMyPublicList,
	vlogMyPrivateList,
	vlogMyLikedList,
	vlogMeTag,
	vlogFansCancel,
	vlogFansFollow
} from '@/api/vlog';

import { getAstro, getAnimal, dateFormat, graceNumber, isStrEmpty } from '@/utils/tools.js';
export default {
	data() {
		return {
			pageUserInfo: {
				id: '',
				mobile: '',
				nickname: '',
				imoocNum: '',
				face: '',
				birthday: '1998-12-31T16:00:00.000+0000',
				country: '',
				province: '',
				city: '',
				district: '',
				description: '',
				myFollowsCounts: 0,
				myFansCounts: 0,
				totalLikeMeCounts: 0
			},
			userPageId: '',
			astro: '',
			animal: '',
			loginWords: '请登录',

			statusBarHeight: 0,
			screenHeight: 0,
			screenHeightUnLogin: 0,

			currentTab: 0,
			isFollow: false,
			isFan: false,
			isAndroid: uni.getSystemInfoSync().platform == 'android',

			page: 0,
			totalpage: 0,
			vlogList: [],
			channelComment: null,
			block: false //true=拉黑，false=没拉黑
		};
	},
	destroyed() {
		console.log('博主信息页面销毁');
		// 销毁时关闭 BroadcastChannel
		if (this.channelComment) {
			this.channelComment.close();
		}
	},
	async onLoad(params) {
		this.channelComment = new BroadcastChannel('comment-counts');
		this.statusBarHeight = system.statusBarHeight;
		let screenHeight = system.safeArea.bottom + 50;
		this.screenHeight = screenHeight;
		let screenHeightUnLogin = system.safeArea.bottom;
		this.screenHeightUnLogin = screenHeightUnLogin;
		let me = this;

		// 从视频页面, 点击用户头像传递过来的id
		let userPageId = params.userPageId;
		if (isStrEmpty(userPageId)) {
			uni.showToast({
				title: '出错啦~',
				icon: ' none',
				duration: 2000
			});
			settimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 1500);
		}

		me.userPageId = userPageId;
		var result = await vlogUserInfo(userPageId);
		console.log(result);
		if (result.data.status == 200) {
			me.pageUserInfo = result.data.data;
			me.setBasicUserInfo(me.pageUserInfo);
		} else {
			uni.showToast({
				title: result.data.msg,
				icon: 'none',
				duration: 3000
			});
		}
		// this.switchTab(0);
		this.myList(0, 'myPublicList', true);
		let myUserId = '';
		let info = storage.getVlogUserInfo();
		if (info != null) {
			myUserId = info.id;
		}

		if (!isStrEmpty(myUserId)) {
			// 查询我是否关注博主
			var result = await vlogQueryDoIFollowVloger({ myId: myUserId, vlogerId: userPageId });
			console.log(result);
			if (result.data.status == 200) {
				me.isFollow = result.data.data;
				// me.isFan = result.data.data;
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
			// 查询博主是否关注我
			var result2 = await vlogQueryDoIFollowVloger({ myId: userPageId, vlogerId: myUserId });
			if (result2.data.status == 200) {
				me.isFan = result2.data.data;
			} else {
				uni.showToast({
					title: result2.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
			// 查询我是否拉黑博主
			var isblock = await queryBlockVloger({ myId: myUserId, vlogerId: userPageId });
			if (isblock.data.status == 200) {
				this.block = isblock.data.data;
			}
		}
	},
	methods: {
		async quxiaolahei() {
			var myUserInfo = storage.getVlogUserInfo();
			if (myUserInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			var res = await cancelBlock({
				myId: myUserInfo.id, //我的id
				vlogerId: this.userPageId // 博主id
			});
			if (res.data.status == 200) {
				uni.showToast({
					icon: 'none',
					title: '已解除拉黑'
				});
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { lahei: true }
				});
				this.block = false;
			}
		},
		async lahei() {
			var myUserInfo = storage.getVlogUserInfo();
			if (myUserInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			var res = await blockUser({
				myId: myUserInfo.id, //我的id
				vlogerId: this.userPageId // 博主id
			});
			if (res.data.status == 200) {
				uni.showToast({
					icon: 'none',
					title: '已拉黑'
				});
				this.block = true;
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { lahei: true }
				});
			}
		},
		setBasicUserInfo(myUserInfo) {
			// 根据生日判断星座
			let birthday = myUserInfo.birthday;
			let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
			let birthArr = birth.split('-');
			let year = birthArr[0];
			let month = birthArr[1];
			let day = birthArr[2];
			let astro = getAstro(month, day);
			this.astro = astro;

			// 根据生日判断生肖
			let animal = getAnimal(year);
			this.animal = animal;
		},
		switchTab(index) {
			this.currentTab = index;
			if (index == 0) {
				this.page = 0;
				this.toalPage = 0;
				this.myList(0, 'myPublicList', true);
			} else if (index == 1) {
				this.page = 0;
				this.toalPage = 0;
				this.myList(0, 'myLikedList', true);
			}
		},
		loadMore() {
			if (this.page >= this.toalPage) {
				return;
			} else {
				var prop = ['myPublicList', 'myLikedList'];
				this.myList(this.page, prop[this.currentTab]);
			}
		},
		async myList(page, requrl, init = false) {
			let me = this;
			page = page + 1;
			me.page = page;
			let userId = me.userPageId;
			var myUserInfo = storage.getVlogUserInfo();
			var myId = '';
			if (myUserInfo != null) {
				myId = myUserInfo.id;
			}
			var result = await vlogMeTag(requrl, page, 10, userId, myId);
			if (result.data.status == 200) {
				let vlogList = result.data.data.rows;
				console.log(vlogList);
				let toalPage = result.data.data.total;
				if (init) {
					me.vlogList = vlogList;
				} else {
					me.vlogList = me.vlogList.concat(vlogList);
				}
				me.page = page;
				me.toalPage = toalPage;
			}
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		async cancelFollow() {
			var myUserInfo = storage.getVlogUserInfo();
			if (myUserInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			clickFeedBack();
			let me = this;
			let vlogerId = me.userPageId;
			let userId = storage.getVlogUserInfo().id;
			var result = await vlogFansCancel({ myId: userId, vlogerId: vlogerId });
			if (result.data.status == 200) {
				me.isFollow = false;
				// uni.setStorageSync("justCancelVlogerId", vlogerId);
				// 刷新当前页的粉丝数
				let pendingInfo = me.pageUserInfo;
				me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts - 1;
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { flag: false, from: 'refresh', vlogerId: vlogerId }
				});
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { from: 'initGuanzhu' }
				});
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},
		async followMe() {
			let me = this;
			let myUserInfo = storage.getVlogUserInfo();
			if (myUserInfo == null) {
				uni.navigateTo({
					url: '/pages/passport/login',
					animationType: 'slide-in-bottom'
				});
				return;
			}
			clickFeedBack();
			let vlogerId = me.userPageId;
			let userId = myUserInfo.id;
			var result = await vlogFansFollow({ myId: userId, vlogerId: vlogerId });
			if (result.data.status == 200) {
				me.isFollow = true;
				// uni.setStorageSync("justFollowVlogerId", vlogerId);
				// 刷新当前页的粉丝数
				let pendingInfo = me.pageUserInfo;
				me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts + 1;
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { flag: true, from: 'refresh', vlogerId: vlogerId }
				});
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { from: 'initGuanzhu' }
				});
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},

		// 把超过1000或10000的数字调整, 比如1.3k/6.8w
		getGraceNumber(num) {
			return graceNumber(num);
		},

		goToVlog(vlog) {
			let vlogId = vlog.id ? vlog.id : vlog.vlogId;
			// uni.navigateTo({
			//   url: "../vlog/vlog?type=mine&isNeedPage=1&vlogId=" + vlogId,
			// });
			uni.navigateTo({
				url: '/pages/me/vlog?vlogId=' + vlogId
			});
		},
		goMyFans(userId) {
			uni.navigateTo({
				animationType: 'fade-in',
				url: 'myFans?userId=' + userId
			});
		},

		goMyFollows(userId) {
			uni.navigateTo({
				animationType: 'fade-in',
				url: 'myFollows?userId=' + userId
			});
		}
	}
};
</script>

<style>
.header-right-search {
	width: 40rpx;
	height: 40rpx;
	opacity: 0.8;
}
.header {
	position: absolute;
	left: 0;
	right: 0;
	flex-direction: row;
	height: 100rpx;
	line-height: 100rpx;
	align-items: center;
	padding-left: 40rpx;
	padding-right: 40rpx;
}
.mybg {
	width: 750rpx;
	height: 750rpx;
	box-shadow: inset 0 -150px 180px #313030;
}
.tiktok-num {
	font-size: 10px;
	color: #ffffff;
	font-weight: 300;
}
.tiktok-num-wrapper {
	display: flex;
	flex-direction: row;
}
.location-text {
	line-height: 20px;
	color: #ffffff;
	font-size: 10px;
	font-weight: 300;
}
.nickname {
	font-size: 20px;
	color: #ffffff;
	font-weight: 600;
}

.location {
	display: flex;
	flex-direction: row;
	height: 20px;
	margin-top: 2px;
	font-size: 1px;
}
.my-face {
	width: 200rpx;
	height: 200rpx;
	border-radius: 100rpx;
	border-width: 1px;
	border-color: #f1f1f1;
}
.sex-img {
	width: 22rpx;
	height: 22rpx;
	align-items: center;
}
.astro {
	font-size: 10px;
	color: #ffffff;
	line-height: 20px;
	font-weight: bold;
	margin-left: 6rpx;
	align-items: center;
}
.constellation {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #000000;
	opacity: 0.5;
	width: 130rpx;
	height: 40rpx;
	border-radius: 10px;
}
.animal-text {
	font-size: 10px;
	color: #ffffff;
	line-height: 20px;
	font-weight: bold;
	align-items: center;
}
.animal {
	margin-left: 10rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #000000;
	opacity: 0.5;
	width: 60rpx;
	height: 40rpx;
	border-radius: 10px;
}
.sex-wrapper {
	display: flex;
	flex-direction: row;
	margin-top: 10rpx;
}
.info-wrapper {
	margin-left: 30rpx;
	padding-top: 20rpx;
	width: 500rpx;
}
.my-info {
	display: flex;
	flex-direction: row;
}
.my-info-wrapper {
	position: relative;
	left: 30rpx;
	top: -560rpx;
	display: flex;
	flex-direction: column;
	width: 1000rpx;
}
.desc {
	position: relative;
	top: -520rpx;
	color: #ffffff;
	font-size: 14px;
	margin: 0 30rpx;
}
.item-num {
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	align-items: center;
}
.item-text {
	color: #ffffff;
	font-size: 12px;
	font-weight: 300;
	align-items: center;
}
.bottom-item {
	margin-left: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.bottom {
	display: flex;
	flex-direction: row;
}
.follow-text {
	font-size: 13px;
	color: #ffffff;
	font-weight: 500;
	align-items: center;
}
.follow-btn {
	margin-right: 20rpx;
	border-width: 1px;
	border-color: #ffffff;
	width: 200rpx;
	height: 66rpx;
	background-color: #545456;
	opacity: 0.8;
	border-radius: 40rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.edit {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-right: 30rpx;
}
.bottom-wrapper {
	position: relative;
	top: -510rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.tab-normal {
	font-size: 18px;
	font-weight: 500;
	align-items: center;
	color: #808080;
}
.tab-selected {
	color: #ffffff;
}
.selected-tab {
	margin-top: 5px;
	height: 5rpx;
	width: 250rpx;
	border-radius: 6rpx;
	background-color: #ef274d;
}
.vlog-cover {
	align-items: center;
	width: 248rpx;
	height: 360rpx;
	border-width: 1rpx;
}
.tab-item {
	width: 250rpx;
	align-items: center;
}
.tab-wrapper {
	position: relative;
	top: -480rpx;
	height: 40px;
	background-color: #171825;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 3px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.empty-text {
	color: #ffffff;
	font-size: 14px;
	margin-top: 200rpx;
}
.vlog-list {
	position: relative;
	top: -480rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	background-color: #000000;
}
.vlogBox {
	position: relative;
}
.rightLike {
	position: absolute;
	flex-direction: row;
	align-items: center;
	left: 5px;
	bottom: 5px;
	color: #ffffff;
}
.empty {
	background-color: #000000;
	width: 750rpx;
	height: 300rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
	top: -480rpx;
}
.not-empty-text {
	color: #ffffff;
	font-size: 14px;
}
.not-empty {
	width: 750rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
	top: -400rpx;
}
.isLogin-info-wrapper {
}
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #000000;
}
</style>