OnlineEducation-teacher-front/src/views/myResources/auditModal.vue

<!-- auditModal.vue -->
<template>
	<a-modal v-model:visible="visibles" title="资源审核" @ok="handleOk" @cancel="handleCancel">
		<div class="audit-content">
			<video-player v-if="record.suffix === 'mp4'" :options="playerOptions" @ready="playerReadied"></video-player>
			<!-- 其他格式文件的展示方式 -->
			<div v-else-if="record.suffix === 'ppt'">PPT展示区域</div>
			<div v-else-if="record.suffix === 'word'">Word展示区域</div>
			<div v-else-if="record.suffix === 'pdf'">PDF展示区域</div>
			<div v-else>其他格式文件展示区域</div>

			<div class="audit-info">
				<p><strong>授课老师：</strong>{{ record.teacherName }}</p>
				<p><strong>所属院系：</strong>{{ record.collegeName }}</p>
				<p><strong>所属专业：</strong>{{ record.majorName }}</p>
				<p><strong>课程类型：</strong>{{ record.courseType }}</p>
				<p><strong>课件格式：</strong>{{ record.suffix }}</p>
				<p><strong>视频时长：</strong>{{ record.duration }}</p>
				<p><strong>视频大小：</strong>{{ record.fileSize }}</p>
				<p><strong>发布时间：</strong>{{ record.publishTime }}</p>
				<p><strong>课程介绍：</strong>{{ record.courseDescription }}</p>
			</div>

			<a-radio-group v-model:value="auditResult">
				<a-radio :value="1">通过</a-radio>
				<a-radio :value="0">不通过</a-radio>
			</a-radio-group>
		</div>
	</a-modal>
</template>

<script setup>
	import { ref, defineProps, defineEmits, computed } from 'vue'
	// import videoPlayer from 'vue-video-player'

	const props = defineProps({
		record: Object
	})

	const emit = defineEmits(['confirm'])

	const auditResult = ref(1) // 默认为通过
	const visibles = ref(true)

	const playerOptions = computed(() => ({
		sources: [
			{
				type: 'video/mp4',
				src: props.record.filePath // 视频文件路径
			}
		],
		poster: props.record.posterPath // 封面图片路径
	}))

	const handleOk = () => {
		emit('confirm', { ...props.record, auditResult: auditResult.value })
	}

	const handleCancel = () => {
		emit('update:visible', false)
	}

	const playerReadied = (player) => {
		// player ready
	}
</script>

<style scoped>
	.audit-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.audit-info {
		margin-top: 20px;
		text-align: left;
	}
</style>