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

<template>
	<a-modal v-model:visible="visibles" title="资源信息" @cancel="handleCancel" :footer="null" width="800px">
		<div class="audit-container">
			<!-- 左侧 - 文件展示区域 -->
			<div class="file-preview">
				<video-player v-if="recordData.suffix === 'mp4'" :options="playerOptions" @ready="playerReadied"></video-player>
				<div v-else-if="recordData.suffix === 'ppt'" class="preview-placeholder">
					<file-ppt-filled style="font-size: 48px; color: #d24638" />
					<p>PPT文件预览</p>
				</div>
				<div v-else-if="recordData.suffix === 'word'" class="preview-placeholder">
					<file-word-filled style="font-size: 48px; color: #2b579a" />
					<p>Word文件预览</p>
				</div>
				<div v-else-if="recordData.suffix === 'pdf'" class="preview-placeholder">
					<file-pdf-filled style="font-size: 48px; color: #f40f02" />
					<p>PDF文件预览</p>
				</div>
				<div v-else class="preview-placeholder">
					<file-unknown-filled style="font-size: 48px; color: #999" />
					<p>文件预览</p>
				</div>
			</div>

			<!-- 右侧 - 审核信息区域 -->
			<div class="audit-info">
				<div class="info-section">
					<p><strong>上传人：</strong>{{ detailData.resourceCreaterUserName || '--' }}</p>
					<p><strong>所属院系：</strong>{{ detailData?.collegeAllIdName || '--' }}</p>
					<p><strong>所属专业：</strong>{{ detailData?.majorIdName || '--' }}</p>
					<p><strong>资源类型：</strong>{{ detailData?.courseTypeName || '--' }}</p>
					<p><strong>资源格式：</strong>{{ detailData?.suffix || '--' }}</p>
					<p><strong>视频时长：</strong>{{ detailData?.duration || '--' }}</p>
					<p><strong>视频大小：</strong>{{ detailData?.FILESIZE || '--' }}<span v-if="detailData?.FILESIZE">b</span></p>
					<p><strong>发布时间：</strong>{{ detailData?.uploadTime || '--' }}</p>
					<p><strong>资源描述：</strong>{{ detailData?.resourceDesc || '--' }}</p>
				</div>
			</div>
		</div>
		<div style="display: flex; justify-content: flex-end; margin-top: 10px" v-if="isAudit">
			<a-button @click="handleAuditResult(3)" style="margin-right: 10px">不同意</a-button>
			<a-button type="primary" @click="handleAuditResult(2)">同意</a-button>
		</div>
	</a-modal>
</template>

<script setup>
	import { ref, defineProps, defineEmits, computed } from 'vue'
	import resourceAuditApi from '@/api/resourceAudit.js'
	// import videoPlayer from 'vue-video-player'
	const props = defineProps({
		recordData: {
			type: Object,
			required: true,
			default: null
		},
		//是否是审核
		isAudit: {
			type: Boolean,
			required: true,
			default: false
		}
	})

	const emit = defineEmits(['confirm', 'close'])

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

	const playerOptions = computed(() => ({
		sources: [
			{
				type: 'video/mp4',
				src: props.recordData.filePath // 视频文件路径
			}
		],
		poster: props.recordData.posterPath // 封面图片路径
	}))
	const handleCancel = () => {
		emit('close')
	}
	const handleAuditResult = (val) => {
		auditResult.value = val
		emit('confirm', { ...props.recordData, auditResult: auditResult.value })
	}

	const playerReadied = (player) => {
		// player ready
	}
	// 获取资源详情
	const getDetail = () => {
		resourceAuditApi.detail({ id: props.recordData.id }).then((res) => {
			console.log(res.data, '资源详情')
			detailData.value = res.data
		})
	}
	onMounted(() => {
		getDetail()
	})
</script>
<style scoped>
	.audit-container {
		display: flex;
		gap: 20px;
		height: 500px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
	}

	.file-preview {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 4px;
		overflow: hidden;
	}

	.preview-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		color: #666;
	}

	.audit-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.info-section {
		background: #fff;
		border-radius: 4px;
	}

	.info-section h4 {
		margin-bottom: 12px;
		font-size: 16px;
		color: #333;
	}

	.description-box {
		padding: 12px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		max-height: 150px;
		overflow-y: auto;
	}

	.audit-action {
		margin-top: auto;
		padding-top: 20px;
		border-top: 1px dashed #d9d9d9;
	}

	/* 调整描述列表样式 */
	:deep(.ant-descriptions-item-label) {
		width: 100px;
		font-weight: normal;
	}
	.ant-modal-footer {
		display: none !important; /* 检查是否被覆盖 */
	}
</style>