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"
				>
					<!-- <img :src="imgs + itemData.coverImagePath" style="width: 100%; height: 100%" /> -->
					<!-- <img :v-lazy="imagess" style="width: 100%; height: 100%" /> -->
					<a-image width="100%" height="350px" :src="resSrc" :preview="true" />
					<!-- <image :src="resSrc" style="object-fit: cover" /> -->
				</div>
				<!-- "wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv" -->
				<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="resSrc" controls style="width: 100%; height: 100%" />
				</div>
				<!-- "doc","docx","ppt","pptx","xls","xlsx" -->
				<div
					v-if="
						videoFormat == 'docx' ||
						videoFormat == 'doc' ||
						videoFormat == 'ppt' ||
						videoFormat == 'pptx' ||
						videoFormat == 'xls' ||
						videoFormat == 'xlsx' ||
						videoFormat == 'pdf'
					"
					style="width: 100%; height: 350px"
				>
					<!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
					<FilePreviewer :fileUrl="resSrc" :fileName="resName" :fileType="fileType" />
					<!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
					<!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
				</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; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">授课老师: </span>
					<span style="display: block">{{ teacherName }}</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">{{ major }}</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" v-if="videoFormat != 'jpg'">
					<span style="font-weight: bold; margin-right: 10px">视频时长: </span>
					<span style="display: block">{{ videoDuration }}</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>
				<!-- <div style="display: flex; flex-direction: column">
					<span style="font-weight: bold; margin-right: 10px">课程介绍: </span>
					<br />
					<span style="display: block">{{ courseDescription }}</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 PDF from 'vue-pdf'
	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 VueOfficePdf from '@vue-office/pdf'
	// import pdfView from 'pdfvuer'
	// import 'pdfvuer/dist/pdfvuer.css'
	const route = useRoute()
	const router = useRouter()
	const props = defineProps({
		// itemData: {
		// 	type: Object,
		// 	default: () => {}
		// }
		//是否从资源列表来 1 是 0 否
		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 courseDescription = ref(
	// 	'“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段，分析数据展示规律，把思想变得更精细！——“弹指之间·享受创新”，通过4周学习，你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
	// )
	const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])
	const emit = defineEmits(['selectTab'])
	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 getList = () => {
		//....
		// listUnpublishedView.value.setData(tableData.value)
	}
	const setData = (data) => {
		itemData.value = data
	}
	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 = tool.formatTimestamp(itemData.value.uploadTime)
					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 = sysConfig.FILE_URL + itemData.value.fileUrl
					resSrc.value = sysConfig.FILE_URL + itemData.value.priviewFileUrl
					fileType.value = itemData.value.suffix
					// imagess.value = ''+itemData.value.coverImagePath
					// imagess.value = 'http://192.168.1.245:10005/education/' + itemData.value.priviewFileUrl

					// VideoDetailsRef.value.setData(res.sdata)
					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 = () => {
		getList()
		const id = route.query.id
		if (id != undefined && id != '') {
			// isHaveAuth : 0 1
			// checkAuth

			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: '/portal/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>