OnlineEducation-student-front/src/views/resourceDetails/components/VideoDetails.vue

<template>
	<div>
		<h1>{{ resName }}</h1>
		<div class="user-info-container">
			<a-card :bordered="false" class="boxShadow cardBox mr-3 flex-3">
				<div class="video-info">
					<div style="height: 600px">
						<div v-if="isImageFile(resSrc)" style="width: 100%; height: 100%">
							<a-image width="100%" height="100%" :src="fileSrc(resSrc)" :preview="true" />
						</div>
						<div v-if="isVideoFile(resSrc)" style="width: 100%; height: 100%">
							<video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%" />
						</div>
						<div v-if="isDocumentFile(resSrc)" style="width: 100%; height: 100%">
							<FilePreviewer v-if="resSrc" :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" />
						</div>
						<div class="imgBox" v-if="itemData.id && unknownFile">
							<a-image height="100%" :src="unknownFile" :preview="false" />
						</div>
					</div>
					<!-- 用户信息部分 -->
					<div class="user-info" style="display: flex; flex-direction: column">
						<div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
							<div style="display: flex; align-items: center">
								<div class="user-avatar"></div>
								<div class="user-details">
									<div class="user-name">{{ itemData.resourceCreaterUserName }}</div>
									<div class="publish-time">{{ itemData.uploadTime }}</div>
								</div>
							</div>

							<div style="display: flex; align-items: center" v-if="!isState">
								<div class="metrics">
									<div class="metric-item">
										<span>{{ itemData.viewCount }}</span>
										<span>播放量</span>
									</div>
									<div class="liene"></div>
									<div class="metric-item">
										<span>{{ talkNum }}</span>
										<span>评论</span>
									</div>
									<div class="liene"></div>
									<div class="metric-item">
										<span>{{ collectNum }}</span>
										<span>收藏</span>
									</div>
								</div>
								<div style="width: 10px"></div>
								<div class="actions">
									<div
										style="display: flex; align-items: center; cursor: pointer; margin-right: 5px"
										@click="handlerShareDialog"
									>
										<ExportOutlined />
										<div style="width: 10px"></div>
										<button class="share-btn">分享资源</button>
									</div>
									<div style="display: flex; align-items: center; cursor: pointer" @click="handlerCollection">
										<StarOutlined v-if="starTag == false" />
										<StarFilled v-if="starTag == true" />
										<div style="width: 10px"></div>
										<button class="favorite-btn">收藏资源</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</a-card>
			<a-card class="flex-1">
				<div class="resInfo">
					<div class="titleBox">
						<span style="display: block; font-weight: bold; font-size: 20px">资源信息</span>
					</div>
					<div class="lableBox">
						<span style="display: block; font-weight: bold; font-size: 18px">{{ resName }}</span>
					</div>

					<div class="lableBox">
						<span class="lableName">所属院系: </span>
						<span class="lableVal">{{ department }}</span>
					</div>

					<div class="lableBox">
						<span class="lableName">资源类型: </span>
						<span class="lableVal">{{ courseType }}</span>
					</div>
					<div class="lableBox">
						<span class="lableName">资源格式: </span>
						<span class="lableVal">{{ videoFormat }}</span>
					</div>

					<div class="lableBox">
						<span class="lableName">容量大小: </span>
						<span class="lableVal">{{ videoSize }}</span>
					</div>
					<div class="lableBox">
						<span class="lableName">发布时间: </span>
						<span class="lableVal">{{ releaseTime }}</span>
					</div>
					<div class="lableBox">
						<span class="lableName">资源描述: </span>
						<span class="lableVal">{{ itemData.resourceDesc }}</span>
					</div>
					<span>资源标签</span>
					<div style="display: flex; width: 100%; flex-wrap: wrap">
						<a-tag style="margin-top: 5px" v-for="tag in tags" :key="tag">{{ tag }}</a-tag>
					</div>
				</div>
			</a-card>
		</div>
		<ShareDialog ref="ShareDialogRef"></ShareDialog>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { Tag, Typography, Space, message } from 'ant-design-vue'
	import ShareDialog from './ShareDialog.vue'
	import { addViewCount, detail, add, cancel, queryList, resourcecentreDetail, getShareLink } from '@/api/portal'
	import { useRoute, useRouter } from 'vue-router'
	import sysConfig from '@/config/index'
	import pdfRes from '@/assets/images/pdf.png'
	import FilePreviewer from './FilePreviewer.vue'
	import EventBus from '@/utils/EventBus'
	import tool from '@/utils/tool'
	import { isVideoFile, isImageFile, isDocumentFile } from '@/utils/fileUtil'
	const route = useRoute()
	const router = useRouter()
	const props = defineProps({
		isState: {
			type: Number,
			default: () => null
		}
	})
	const itemData = ref({})
	const starTag = ref(false)
	const ShareDialogRef = ref(null)
	const resSrc = ref('')
	const fileType = ref('')
	const resName = ref('资源名称')

	const teacherName = ref('王某某')
	const department = ref('学院本级-航空机务教研室-三级架构名')
	const major = ref('初级飞行训练')
	const courseType = ref('必修')
	const videoFormat = ref('MP4')
	const videoDuration = ref('59:34')
	const videoSize = ref('598M')
	const releaseTime = ref('2025-10-01 11:33:59')

	const talkNum = ref(0)
	const collectNum = ref(0)

	const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])
	const emit = defineEmits(['selectTab', 'onGetPageCommentNew'])
	const listUnpublishedView = ref(null)
	const handleDownload = (src) => {
		window.open(src)
	}
	const handlerShareDialog = () => {
		getShareLink({ id: route.query.id })
			.then((res) => {
				if (res.code == 200) {
					ShareDialogRef.value.open(res.data.shareLink)
				}
			})
			.catch((err) => {})
	}
	const handlerCollection = async () => {
		const id = route.query.id
		if (id != undefined && id != '') {
			if (starTag.value == true) {
				await cancel({ resourceId: id })
				message.success('取消收藏')
				upDataDetailsNum()
			} else {
				await add({ resourceId: id })
				message.success('收藏成功')
				upDataDetailsNum()
			}
			queryList({ resourceId: id })
				.then((ress) => {
					if (ress.data == true) {
						starTag.value = true
					} else {
						starTag.value = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
		}
	}

	const setData = (data) => {
		itemData.value = data
	}
	const fileSrc = computed(() => (e) => sysConfig.FILE_URL + e)
	const imageUrl = new URL(`@/assets/images/fileImg/file.png`, import.meta.url).href
	const unknownFile = computed((e) => {
		if (!isImageFile(resSrc.value) && !isVideoFile(resSrc.value) && !isDocumentFile(resSrc.value)) {
			return imageUrl
		}
	})
	const getData = (item) => {
		detail({ id: item.id })
			.then((res) => {
				if (res.code == 200) {
					itemData.value = res.data
					courseType.value = itemData.value.resourceALLTypeName.split(',').join('/')
					department.value = itemData.value.collegeAllIdName.split(',').join('/')
					teacherName.value = itemData.value.resourceCreaterUserName
					resName.value = itemData.value.fileName

					videoFormat.value = itemData.value.suffix

					releaseTime.value = itemData.value.uploadTime

					videoSize.value = itemData.value.FILESIZE ? itemData.value.FILESIZE + 'b' : ''

					tags.value = []
					itemData.value.keywordList.forEach((item) => {
						tags.value.push(item.wordName)
					})

					resSrc.value = itemData.value.priviewFileUrl
					fileType.value = itemData.value.suffix

					emit('onGetPageCommentNew', {
						resourceType: itemData.value.resourceType,
						resourceTwoType: itemData.value.resourceTwoType
					})
				}
			})
			.catch((err) => {})
	}

	const upDataList = (item) => {
		resourcecentreDetail({ id: item.id })
			.then((res) => {
				if (res.code == 200) {
					talkNum.value = res.data.commentNum
					collectNum.value = res.data.collectNum
				}
			})
			.catch((err) => {})
	}

	const fetchData = () => {
		const id = route.query.id
		if (id != undefined && id != '') {
			queryList({ resourceId: id })
				.then((res) => {
					if (res.data == true) {
						starTag.value = true
					} else {
						starTag.value = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
			getData({ id: id })
			upDataList({ id: id })
		}
	}
	watch(
		() => route,
		(newRoute) => {
			fetchData() // 手动刷新数据的方法
		},
		{ deep: true, immediate: true }
	)
	onMounted(() => {
		fetchData()
	})

	const upDataDetailsNum = () => {
		const id = route.query.id
		if (id != undefined && id != '') {
			upDataList({ id: id })
		}
	}
	const openResourceDetailsInner = (data) => {
		router.push({
			path: '/student/resourceDetails',
			query: {
				id: data.id,
				t: new Date().getTime()
			}
		})
	}
	defineExpose({
		setData
	})

	EventBus.off('upDataDetailsNum', upDataDetailsNum)
	EventBus.on('upDataDetailsNum', upDataDetailsNum)
	EventBus.off('openResourceDetailsInner', openResourceDetailsInner)
	EventBus.on('openResourceDetailsInner', openResourceDetailsInner)
</script>

<style scoped>
	.tab-switcher {
		display: flex;
		border-radius: 20px;
		border: 1px solid #1e90ff;
		overflow: hidden;
	}

	.tab-switcher div {
		padding: 2px 20px;
		background-color: #f5f5f5;

		cursor: pointer;
	}

	.tab-switcher div.active {
		background-color: #1e90ff;
		color: white;
	}

	.user-info {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20px;
	}

	.resource-container {
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #dfe2e5;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		background: #1e90ff;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 13px;
		font-weight: bold;
	}

	.publish-time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.metrics {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.metric-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 10px;
		padding-right: 10px;
	}

	.metric-item span:first-child {
		font-size: 18px;
		font-weight: bold;
	}

	.metric-item span:last-child {
		font-size: 12px;
		color: #666;
	}

	.actions {
		display: flex;
	}

	.share-btn,
	.favorite-btn {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.course-info {
		margin-top: 20px;
		line-height: 1.6;
		display: flex;
		width: 100%;
	}

	.liene {
		height: 35px;
		width: 1px;
		background: #00000018;
	}

	.resource-container {
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #dfe2e5;
	}

	h1 {
		margin-bottom: 20px;
	}

	.ant-descriptions {
		margin-top: 20px;
	}

	.ant-typography-title {
		margin-top: 20px;
	}

	.ant-typography-paragraph {
		margin-top: 10px;
	}

	.ant-space {
		margin-top: 10px;
	}
	.video-info {
		height: 100%; /* 确保填满容器高度 */
		flex: 1;
	}

	.user-info-container {
		display: flex;
		align-items: stretch;
	}

	.resInfoTitile {
		width: 5px;
		height: 20px;
		background-color: #1e90ff;
		margin-right: 5px;
	}

	.tallList {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200px;
		border: 1px solid #dfe2e5;
		padding: 20px;
		margin-top: 10px;
	}

	.tallListInfo {
		color: rgba(0, 0, 0, 0.116);
		font-size: 12px;
	}
	.titleBox {
		display: flex;
		align-items: center;
	}
	.lableBox {
		display: flex;
		align-items: center;
		margin: 16px 0;
	}
	.lableName {
		font-weight: bold;
		margin-right: 10px;
	}
	.lableVal {
		display: block;
		width: 200px;
		margin-left: 6px;
	}
	.boxShadow {
		border: 1px solid rgba(0, 0, 0, 0.04);
		border-radius: 4px;
	}
	:deep(.cardBox .ant-card-body) {
		padding: 0;
	}
	.flex-3 {
		flex: 3;
	}
	.flex-1 {
		flex: 1;
	}
	.imgBox {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>