jiuyiUniapp/jiuyi2/pages/index/videoHome.vue

<script setup>
/**
 * 他人用户视频主页
 */
import {
	ref,
	reactive,
	getCurrentInstance,
	computed,
} from 'vue';
import {
	onLoad,
	onPageScroll,
	onReachBottom,
	onHide
} from '@dcloudio/uni-app'
import {
	useStore
} from 'vuex'
// 工具库
import util from '@/common/js/util';
// api
import api from '@/api/index.js'
// 顶部状态栏
import statusBar from '@/components/header/statusBar.vue'
// 顶部
import apex from '@/components/header/apex.vue'
// 视频菜单
import videoMenu from '@/components/index/videoMenu.vue'

// 代理
const {
	proxy
} = getCurrentInstance()
// 
const store = useStore()
// 滚动头部
const scrollTop = ref(false)
// 用户id
const userId = ref('')
// 详情
const detail = reactive({})
// 列表对象
const listProperty = reactive({
	data: [],
	pageSize: 9,
	pageNum: 1,
	total: 0,
})
// 用户信息
let userinfo = computed(() => {
	let result = store.state.userinfo
	return result
})

// 
onLoad((option) => {
	// 用户id
	if (option.userId) userId.value = option.userId
	// 他人用户主页
	getUserinfo()
	// 获取列表
	getList()
})

onHide(() => {
	// 暂停当前视频
	proxy.$refs.videoMenuRef.pause()
})

// 滚动
onPageScroll((ev) => {
	scrollTop.value = ev.scrollTop > 44 ? true : false
})

onReachBottom(() => {
	// 获取更多列表
	getMoreList()
})

// 获取用户信息
function getUserinfo() {
	api.video.getUserInfo({
		query: {
			userId: userId.value,
			myId: userinfo.value.id,
		}
	}).then(rs => {
		if (rs.code == 200) {
			console.log('userinfo', rs)
			const result = rs.data
			Object.assign(detail, result)
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}

// 获取更多列表
function getMoreList() {
	if (listProperty.total <= listProperty.data.length) return
	listProperty.pageNum++
	getList()
}

// 获取用户作品
function getList() {
	// 
	api.video.myWorks({
		query: {
			// 人员id
			userId: userId.value,
			pageSize: listProperty.pageSize,
			pageNum: listProperty.pageNum,
		}
	}).then(rs => {
		if (rs.code == 200) {
			if (listProperty.pageNum == 1) listProperty.data.length = 0
			listProperty.data.push(...rs.rows)
			listProperty.total = rs.total
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}

// 举报
function handleReport() {
	// 关闭弹窗
	proxy.$refs.menuRef.close()

	// 打开模态弹窗
	uni.showActionSheet({
		itemList: ['举报'],
	}).then(rs => {
		const index = rs.tapIndex
		if (index == 0) {
			uni.navigateTo({
				url: util.setUrl('/pages/index/report', {
					userId: userId.value,
				}),
			})
		}
	})
}

// 拉黑
function handleBlack() {
	// let text = detail.isBlock ? '取消拉黑' : '拉黑'
	// util.alert({
	// 	content: `确认要${text}用户${detail.userNickname}吗？`,
	// }).then(rs => {
	// 	let obj = {
	// 		blockUserId: detail.id,
	// 		status: detail.isBlock ? 1 : 0
	// 	}
	// 	api.mine.blockUser(obj).then(res => {
	// 		if (res.code == 200) {
	// 			util.alert('操作成功！')
	// 			getUserinfo()

	// 			// 关闭弹窗
	// 			proxy.$refs.menuRef.close()
	// 		}
	// 	})
	// })
}

// 复制账号
function handleCopyAccount() {
	// 复制用户账号
	uni.setClipboardData({
		data: detail.account,
		showToast: false,
		success: rs => {
			util.alert('复制成功')
		}
	})
}

// 关注用户
function handleAttention() {
	let targetAtt = detail.isAttention == 0 ? 1 : 0
	api.video.attention({
		data: {
			// 当前用户id
			userId: userinfo.value.id,
			// 被关注id
			attentionId: detail.id,
			// 
			isAttention: targetAtt,
		}
	}).then(rs => {
		if (rs.code == 200) {
			// 关注状态切换
			detail.isAttention = targetAtt

			// 他人用户主页
			getUserinfo()
			// 修改了他人关注状态
			uni.$emit('focusUser', {
				userId: detail.id,
				result: detail.isAttention,
			})
			// 重载关注列表
			uni.$emit('updateFocusList')
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}

// 操作不让看
function handleBlock() {
	// // 反选状态
	// detail.isBlock = !detail.isBlock

	// api.video.videoBlock({
	// 	query: {
	// 		type: detail.isBlock ? 0 : 1,
	// 		userId: detail.id,
	// 	}
	// }).then(rs => {
	// 	if (rs.code == 200) {
	// 		return
	// 	}

	// 	detail.isBlock = !detail.isBlock
	// 	util.alert({
	// 		content: rs.msg,
	// 		showCancel: false,
	// 	})
	// })
}

// 私信
function handleMessage() {
	util.toChat({
		name: detail.userNickname,
		msgId: detail.id,
		type: 'C2C',
	})
	return
}
// 评论
function userComments() {
	if (detail.isLock) {
		toCommentsList()
	} else {
		// 解锁提示
		util.alert({
			content: `确认消耗${detail.consumeFruit}个榴莲果解锁评论吗？`,
		}).then(rs => {
			unlockComments()
		})
	}
}
// 解锁评论列表
function unlockComments() {
	api.mine.unlockComment({ userId: detail.id }).then(res => {
		if (res.code == 200) {
			util.alert('解锁成功！')
			if (res.data.isLock) {
				toCommentsList()
				getUserinfo()
			}
		}
	})
}
// 跳转到评论列表
function toCommentsList() {
	uni.navigateTo({
		url: util.setUrl('/pages/mine/myComment', {
			userId: detail.id,
		}),
	})
}
</script>

<template>
	<view class="appbw">
		<!-- 页面顶部 -->
		<view class="apex pr">
			<view class="bg pfull">
				<image :src="detail.background" mode="aspectFill" />
				<view class="window pfull"></view>
			</view>

			<apex :bgColor="scrollTop ? '#fff' : '#fff0'" :color="scrollTop ? '#333' : '#fff'">
				<template #content v-if="scrollTop">
					<view class="">{{ detail.userNickname }}</view>
				</template>

				<template #right>
					<view class="menuIcon plr5" @click="$refs.menuRef.open()">
						<uni-icons type="bars" size="50rpx" :color="scrollTop ? '#333' : '#fff'" />
					</view>
				</template>
			</apex>

			<!-- 用户信息 -->
			<view class="userinfo df aic pr pt20 plr30 pb60">
				<view class="avatar cir">
					<image class="wh200 cir" :src="detail.avatar" mode="aspectFill" />
				</view>

				<view class="user f1 ml20 cfff">
					<view class="f36 b">{{ detail.userNickname }}</view>
					<view class="f24">账号：{{ detail.account }}</view>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="container pr ptb30 plr30 c333">
			<view class="rows">

				<view class="number df">
					<view class="option mr40" v-if="0">
						<text class="value f36">{{ detail.userPraised }}</text>
						<text class="key ml10 c666 f24">获赞</text>
					</view>

					<view class="option mr40">
						<text class="value f36">{{ detail.userFans }}</text>
						<text class="key ml10 c666 f24">粉丝</text>
					</view>

					<view class="option mr40">
						<text class="value f36">{{ detail.userAttention }}</text>
						<text class="key ml10 c666 f24">关注</text>
					</view>
				</view>
				<view class="" @click="userComments">他的评论</view>
			</view>

			<!-- 个人介绍 -->
			<view class="desc mtb20 c333 f28">{{ detail.userBrief }}</view>

			<!-- 橱窗 -->
			<view class="shopwindow df aic mtb30" v-if="detail.isShop == 1 && 0">
				<image class="wh60" src="/static/shopwindow.png" mode="aspectFit" />
				<view class="ml20 c333 f28">商品橱窗</view>
			</view>

			<!-- 关注按钮 -->
			<view class="btns df">
				<template v-if="detail.isAttention == 0">
					<view class="btn lg cancel f1" @click="handleAttention">已关注</view>
					<view class="btn lg cancel f1 ml20" @click="handleMessage" v-if="!userinfo.teenTime">私信</view>
				</template>
				<template v-else>
					<view class="btn lg focus f1" @click="handleAttention">关注</view>
				</template>
			</view>
		</view>

		<!-- 作品 -->
		<view class="product mt30">
			<view class="title plr30 c333 f32">
				<text>作品</text>
				<text class="ml10">{{ listProperty.total }}</text>
			</view>

			<view class="list mt20">
				<videoMenu ref="videoMenuRef" :list="listProperty.data"></videoMenu>
			</view>
		</view>
	</view>

	<!-- 列表菜单 -->
	<uni-popup ref="menuRef" type="bottom">
		<view class="menuAlt ptb50 plr40 ">
			<view class="header df">
				<view class="user f1 c111">
					<view class="nickname f28">{{ detail.userNickname }}</view>
					<view class="df aic mt10">
						<text class="f20">账号：{{ detail.account }}</text>
						<image class="wh30 ml10" src="/static/copy.png" mode="aspectFit" @click="handleCopyAccount" />
						<view class="f1"></view>
					</view>
				</view>
				<view @click="$refs.menuRef.close()">
					<uni-icons type="close" size="40rpx" />
				</view>
			</view>

			<!-- 选择菜单 -->
			<view class="select mt20 mb10">
				<!-- <view class="option ver jcc bfff br10">
					<image class="wh50" src="/static/share.png" mode="aspectFit" />
					<view class="txt mt20 c111 f20">分享主页</view>
				</view> -->

				<view class="option ver jcc bfff br10" @click="handleMessage" v-if="!userinfo.teenTime">
					<image class="wh50" src="/static/email.png" mode="aspectFit" />
					<view class="txt mt20 c111 f20">私信Ta</view>
				</view>

				<view class="option ver jcc bfff br10" @click="handleReport">
					<image class="wh50" src="/static/report.png" mode="aspectFit" />
					<view class="txt mt20 c111 f20">举报</view>
				</view>

				<view class="option ver jcc bfff br10" @click="handleBlack">
					<image class="wh50" src="/static/blackList.png" mode="aspectFit" />
					<view class="txt mt20 c111 f20">
						<text>{{ detail.isBlock ? '取消拉黑' : '拉黑' }}</text>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list mtb20 plr20 c111 f24 bfff br10" v-if="0">
				<view class="item rows ptb25">
					<view class="key">设置备注</view>
					<view class="inputBox tac">
						<input class="c111 f24" type="text" placeholder="请输入备注" />
					</view>
				</view>

				<view class="item rows ptb25">
					<view class="key">不让 Ta 看作品</view>
					<view>
						<switch color="#FF0F2E" :checked="detail.isBlock" style="transform: scale(.7);"
							@change="handleBlock" />
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
// 头部
.apex {

	// 用户信息
	.userinfo {
		.avatar {
			padding: 5rpx;
			background-color: #fff;
		}
	}
}

// 内容
.container {
	margin-top: -30rpx;
	border-radius: 15rpx 15rpx 0 0;
	background-color: #fff;
}

// 菜单弹窗
.menuAlt {
	border-radius: 24rpx 24rpx 0 0;
	background: #F2F2F2;

	// 选择菜单
	.select {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;

		// 选项
		.option {
			height: 160rpx;
		}
	}

	// 列表
	.list {
		.inputBox {
			width: 220rpx;
		}
	}
}
</style>