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">
				<!-- <img src="/src/assets/images/flw/REVOKE.png" /> -->
				<video-player
					v-if="recordData.suffix === 'mp4'"
					:source="activeVideoSource"
					@ready="playerReadied"
				></video-player>
				<div
					v-else-if="['pdf', 'word', 'ppt', 'doc', 'docx'].includes(recordData.suffix.toLowerCase())"
					class="preview-iframe"
				>
					<iframe
						:src="`https://docs.google.com/gview?url=${sysConfig.FILE_URL + recordData.fileUrl}&embedded=true`"
						frameborder="0"
					></iframe>
				</div>
				<!-- 图片预览 -->
				<div v-else-if="['jpg', 'jpeg', 'png', 'gif'].includes(recordData.suffix.toLowerCase())" class="image-viewer">
					<img
						:src="sysConfig.FILE_URL + recordData.fileUrl"
						:alt="recordData.fileName"
						style="max-width: 100%; max-height: 100%; object-fit: contain"
					/>
				</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?.resourceTypeName || '--' }}</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 './VideoPlayer.vue'
	import sysConfig from '@/config/index'
	// 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 activeVideoSource = computed(() => ({
		type: `video/mp4`,
		src: sysConfig.FILE_URL + props.recordData.fileUrl
	}))
	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; /* 检查是否被覆盖 */
	}
	.preview-iframe {
		width: 100%;
		height: 100%;
		min-height: 500px;
	}
	.preview-iframe iframe {
		width: 100%;
		height: 100%;
		border: none;
	}
</style>