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: '/pages/index/report',
				})
			}
		})
	}

	// 复制账号
	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.userId,
					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.userId,
			}
		}).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.userId,
			type: 'C2C',
		})
		return
	}
</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="">他的评论</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">私信</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">
					<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>拉黑</text>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list mtb20 plr20 c111 f24 bfff br10">
				<view class="item rows ptb25" v-if="0">
					<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>