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

<template>
	<div>
		<h1>{{ resName }}</h1>
		<div style="height: 25px"></div>
		<div class="user-info-container">
			<div class="video-info">
				<div
					v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jpeg'"
					style="width: 100%; height: 350px"
				>
					<a-image width="100%" height="350px" :src="fileSrc(resSrc)" :preview="true" />
				</div>
				<div
					v-if="
						videoFormat == 'mkv' ||
						videoFormat == 'mp4' ||
						videoFormat == 'wmv' ||
						videoFormat == 'avi' ||
						videoFormat == 'flv' ||
						videoFormat == 'mpeg' ||
						videoFormat == 'mpg' ||
						videoFormat == 'rmvb' ||
						videoFormat == 'mov'
					"
					style="width: 100%; height: 350px"
				>
					<video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%" />
				</div>
				<div
					v-if="
						videoFormat == 'docx' ||
						videoFormat == 'doc' ||
						videoFormat == 'ppt' ||
						videoFormat == 'pptx' ||
						videoFormat == 'xls' ||
						videoFormat == 'xlsx' ||
						videoFormat == 'pdf'
					"
					style="width: 100%; height: 350px"
				>
					<FilePreviewer v-if="resSrc" :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" />
					<div v-if="!resSrc">暂无数据</div>
				</div>
				<div style="height: 20px"></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 class="course-info">
						<span>
							{{ itemData.resourceDesc }}
						</span>
					</div>
				</div>
			</div>
			<div class="resInfo">
				<div style="display: flex; align-items: center">
					<div class="resInfoTitile"></div>
					<span style="display: block; font-weight: bold">资源信息</span>
				</div>
				<div style="display: flex; justify-content: center; align-items: center; height: 40px">
					<span style="display: block; font-weight: bold">{{ resName }}</span>
				</div>

				<div style="display: flex">
					<span style="font-weight: bold; margin-right: 10px">所属院系: </span>
					<span style="display: block; width: 200px">{{ department }}</span>
				</div>

				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">资源类型: </span>
					<span style="display: block; width: 200px">{{ courseType }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">资源格式: </span>
					<span style="display: block; width: 200px">{{ videoFormat }}</span>
				</div>

				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">容量大小: </span>
					<span style="display: block; width: 200px">{{ videoSize }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">发布时间: </span>
					<span style="display: block; width: 200px">{{ releaseTime }}</span>
				</div>

				<br />
				<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>
		</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'
	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 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%;
		height: 200px;
		border: 1px solid #dfe2e5;
		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 {
		text-align: center;
		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;
	}
	.resInfo {
		margin-left: 10px;
		width: 300px;
		height: 570px;
		border: 1px solid #dfe2e5;
		padding: 10px;
	}

	.user-info-container {
		display: flex;
	}

	.resInfoTitile {
		width: 5px;
		height: 14px;
		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;
	}
</style>