jiuyiUniapp/jiuyi2/pages/index/videoDetail.vue

<script setup>
	/**
	 * 视频详情页
	 */

	import {
		ref,
		getCurrentInstance,
		reactive,
	} from 'vue'
	import {
		onLoad,
		onHide
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	// 首页视频
	import indexVideo from '@/components/index/indexVideo.vue'
	// 评论弹窗
	import commentAlt from '@/components/index/commentArea.vue'
	// 收藏弹窗
	import collectAlt from '@/components/index/collect.vue'
	// 分享到好友弹窗
	import shareFirendAlt from '@/components/index/shareFirend.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 视频id
	const videoId = ref('')
	// 视频详情
	const detail = reactive({})
	// 是否是自己
	const isMine = ref(false)

	onLoad((option) => {
		if (option.videoId) videoId.value = option.videoId
		// 是否我的作品
		if (option.isMine && option.isMine != 'false') isMine.value = option.isMine

		// 获取视频详情
		getVideoDetail()

		// 视频数据被修改
		uni.$on('updateVideo', (item) => {
			// 校验
			if (!item && !item.videoId) return
			// 当前下标
			if (item.videoId == detail.videoId) Object.assign(detail, item)
		})
	})

	onHide(() => {
		proxy.$refs.indexVideo.pause()
	})

	// 获取视频详情
	function getVideoDetail() {
		api.video.getVideoById({
			data: {
				id: videoId.value,
			}
		}).then(rs => {
			if (rs.code == 200) {
				const result = rs.data

				result.format_videoUrl = util.format_url(result.videoUrl, 'video')
				result.format_header = util.format_url(result.header, 'img')

				Object.assign(detail, result)

				// 播放视频
				proxy.$refs.indexVideo.play()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 打开评论弹窗
	 * @param {Object} item 当前列表项
	 */
	function handleShowCommentAlt(item) {
		proxy.$refs.commentRef.open(item)
		// 暂停当前视频
		proxy.$refs.indexVideo.pause()
	}

	/**
	 * 打开收藏弹窗
	 * @param {Object} item 视频项下标
	 */
	function handleShowCollectAlt(item) {
		proxy.$refs.collectRef.open(item)
	}

	/**
	 * 打开分享给好友弹窗
	 */
	function handleShowShareFirend() {
		proxy.$refs.shareFirendRef.open()
	}

	/**
	 * 视频点赞
	 * @param {Object} param 见下
	 * @param {Number} param.index 操作的视频下标
	 * @param {Number|String} param.isLike 点赞操作
	 */
	function videoLike(param) {
		const {
			index,
			isLike
		} = param
		const item = detail
		// 操作状态
		let type = 1
		// 0未点赞 1已点赞 3私密赞
		if (item.isLike == 0) type = isLike

		// 
		api.video.videoLike({
			query: {
				// 0赞1取消赞 3私密赞
				type,
				// 视频id
				videoId: item.videoId,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 同步点赞状态
				item.isLike = {
					0: 1,
					1: 0,
					3: 3,
				} [type]
				// 取消减数量 否则增加
				type == 1 ? item.likes-- : item.likes++
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 点击详情菜单
	 * @param {Object} item
	 */
	function detailMenu(item) {
		// 菜单
		let menu = [{
				name: '编辑',
				fn: () => {
					uni.navigateTo({
						url: util.setUrl('/pages/release/video', {
							videoId: detail.id,
						})
					})
				}
			},
			{
				name: '删除',
				fn: () => {
					util.alert({
						content: '删除后不可恢复。确认删除？',
					}).then(rs => {
						// 删除视频
						if (rs.confirm) api.video.removeVideo({
							data: {
								id: detail.id,
							}
						}).then(rs => {
							if (rs.code == 200) {
								uni.$emit('deleteVideo', detail.videoId)
								uni.navigateBack()
								return
							}
							util.alert({
								content: rs.msg,
								showCancel: false,
							})
						})
					})
				}
			},
		]
		uni.showActionSheet({
			itemList: menu.map(node => node.name),
			success: rs => {
				menu[rs.tapIndex].fn()
			}
		})
	}

	/**
	 * 跳转数据中心
	 * @param {Object} detail
	 */
	function handleDataCenter(detail) {
		// 
	}
</script>

<template>
	<view class="page f1">
		<!--  -->
		<indexVideo ref="indexVideo" :statistic="1" :item="detail" :tabIndex="0" :isMine="isMine" :index="0"
			:current="0" mode="detail" @showComment="handleShowCommentAlt" @showCollect="handleShowCollectAlt"
			@showShareFirend="handleShowShareFirend" @like="videoLike" @detailMenu="detailMenu"
			@dataCenter="handleDataCenter" />

		<!-- 评论弹窗 -->
		<commentAlt ref="commentRef" />
		<!-- 收藏弹窗 -->
		<collectAlt ref="collectRef" />
		<!-- 分享到好友弹窗 -->
		<shareFirendAlt ref="shareFirendRef" />
	</view>
</template>

<style lang="scss">
	// 
</style>