OnlineEducation-back-front/src/views/courseAdd/components/courseProduction/addClassHours.vue

<template>
	<a-modal
		v-model:visible="modalVisible"
		title="添加课时"
		:footer="null"
		width="700px"
		@cancel="handleCancel"
		class="add-class-hours-modal"
	>
		<a-form :model="form" :rules="rules" ref="formRef" layout="vertical">
			<a-form-item label="课时名称：" name="title" required>
				<a-input v-model:value="form.title" placeholder="输入内容" />
			</a-form-item>
			<a-form-item label="选择视频：" required>
				<div class="video-select-row">
					<a-select v-model:value="form.video" style="width: 220px; margin-right: 12px" placeholder="选择已有资源">
						<a-select-option v-for="item in videoList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
					</a-select>
					<a-upload :show-upload-list="false" :before-upload="beforeUploadVideo" :custom-request="dummyRequest">
						<a-button type="primary">上传新资源</a-button>
					</a-upload>
				</div>
			</a-form-item>
			<a-form-item label="上传封面：" required>
				<div class="cover-upload-row">
					<a-upload
						:show-upload-list="false"
						:before-upload="beforeUploadImg"
						:custom-request="dummyRequest"
						accept=".jpg,.png"
					>
						<div class="cover-upload-box">
							<img v-if="form.coverUrl" :src="form.coverUrl" class="cover-img" />
							<div v-else class="cover-placeholder">
								<PictureOutlined style="font-size: 32px; color: #bbb" />
							</div>
						</div>
					</a-upload>
					<div class="cover-tip">支持jpg、png等格式文件上传，文件大小不超过10MB</div>
				</div>
			</a-form-item>
			<a-form-item label="上传讲义：">
				<a-upload
					:show-upload-list="false"
					:before-upload="beforeUploadDoc"
					:custom-request="dummyRequest"
					accept=".ppt,.pptx,.doc,.docx,.pdf"
				>
					<a-button><CloudUploadOutlined /> 上传文件</a-button>
				</a-upload>
				<span class="upload-tip">支持ppt、word等格式文件上传，文件大小不超过10MB</span>
			</a-form-item>
			<a-form-item label="上传字幕：">
				<a-upload
					:show-upload-list="false"
					:before-upload="beforeUploadSrt"
					:custom-request="dummyRequest"
					accept=".srt"
				>
					<a-button><CloudUploadOutlined /> 上传文件</a-button>
				</a-upload>
				<span class="upload-tip">仅支持srt格式文件上传，文件大小不超过1MB</span>
			</a-form-item>
			<div class="footer-btns">
				<a-button @click="handleCancel">取消</a-button>
				<a-button type="primary" @click="handleOk">确定</a-button>
			</div>
		</a-form>
	</a-modal>
</template>

<script setup>
	import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
	import { message } from 'ant-design-vue'
	import { PictureOutlined, CloudUploadOutlined } from '@ant-design/icons-vue'

	const props = defineProps({
		visible: Boolean
	})
	const emit = defineEmits(['update:visible', 'ok'])

	const modalVisible = ref(props.visible)
	watch(
		() => props.visible,
		(v) => {
			modalVisible.value = v
		}
	)
	watch(modalVisible, (v) => {
		emit('update:visible', v)
	})

	const formRef = ref()
	const form = reactive({
		title: '',
		video: '',
		coverUrl: '',
		docUrl: '',
		srtUrl: ''
	})

	const rules = {
		title: [{ required: true, message: '请输入课时名称' }],
		video: [{ required: true, message: '请选择或上传视频' }],
		coverUrl: [{ required: true, message: '请上传封面' }]
	}

	// mock视频资源
	const videoList = ref([
		{ id: 'v1', name: '示例视频1.mp4' },
		{ id: 'v2', name: '示例视频2.mp4' }
	])

	function beforeUploadImg(file) {
		const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
		const isLt10M = file.size / 1024 / 1024 < 10
		if (!isImg) {
			message.error('只能上传jpg/png图片')
			return false
		}
		if (!isLt10M) {
			message.error('图片不能超过10MB')
			return false
		}
		// mock上传
		const reader = new FileReader()
		reader.onload = (e) => {
			form.coverUrl = e.target.result
		}
		reader.readAsDataURL(file)
		return false
	}
	function beforeUploadVideo(file) {
		// 这里只做类型和大小校验，mock上传
		const isVideo = file.type.startsWith('video/')
		const isLt500M = file.size / 1024 / 1024 < 500
		if (!isVideo) {
			message.error('只能上传视频文件')
			return false
		}
		if (!isLt500M) {
			message.error('视频不能超过500MB')
			return false
		}
		// mock添加到下拉
		videoList.value.push({ id: 'mock_' + Date.now(), name: file.name })
		form.video = videoList.value[videoList.value.length - 1].id
		return false
	}
	function beforeUploadDoc(file) {
		const isDoc = /\.(ppt|pptx|doc|docx|pdf)$/i.test(file.name)
		const isLt10M = file.size / 1024 / 1024 < 10
		if (!isDoc) {
			message.error('仅支持ppt、word、pdf格式')
			return false
		}
		if (!isLt10M) {
			message.error('文件不能超过10MB')
			return false
		}
		form.docUrl = file.name
		return false
	}
	function beforeUploadSrt(file) {
		const isSrt = file.name.endsWith('.srt')
		const isLt1M = file.size / 1024 / 1024 < 1
		if (!isSrt) {
			message.error('仅支持srt格式')
			return false
		}
		if (!isLt1M) {
			message.error('文件不能超过1MB')
			return false
		}
		form.srtUrl = file.name
		return false
	}
	function dummyRequest({ onSuccess }) {
		setTimeout(() => {
			onSuccess && onSuccess()
		}, 500)
	}
	function handleOk() {
		formRef.value.validate().then(() => {
			emit('ok', { ...form })
			modalVisible.value = false
		})
	}
	function handleCancel() {
		modalVisible.value = false
	}
</script>

<style lang="less" scoped>
	.add-class-hours-modal {
		.ant-modal-content {
			border-radius: 10px;
		}
		.ant-modal-header {
			border-radius: 10px 10px 0 0;
		}
		.ant-form-item {
			margin-bottom: 24px;
		}
		.video-select-row {
			display: flex;
			align-items: center;
		}
		.cover-upload-row {
			display: flex;
			align-items: center;
			.cover-upload-box {
				width: 120px;
				height: 120px;
				background: #f7f8fa;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24px;
				border: 1px dashed #d9d9d9;
				cursor: pointer;
				.cover-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 8px;
				}
				.cover-placeholder {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					color: #bbb;
					font-size: 32px;
				}
			}
			.cover-tip {
				color: #888;
				font-size: 13px;
			}
		}
		.upload-tip {
			color: #888;
			font-size: 13px;
			margin-left: 12px;
		}
		.footer-btns {
			display: flex;
			justify-content: flex-end;
			gap: 16px;
			margin-top: 24px;
		}
	}
</style>