pbl-teacher-table/src/components/pages/pptEasy/dialog/VideoUploadDialog2.vue

<template>
	<div class="video-source-modal" v-if="show">
		<div class="modal-overlay"></div>
		<div class="modal-content video-source-content">
			<div class="modal-header">
				<h3 class="modal-title">{{ lang.ssSelectVideoSource }}</h3>
				<div class="modal-close" @click="close()">×</div>
			</div>
			<div class="modal-body video-source-body">
				<div class="source-options">
					<div class="source-option" @click="handleLocalUpload">
						<div class="option-icon">
							<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<g id="Component 1">
									<path id="Vector" d="M24 10V38" stroke="currentColor" stroke-width="4" />
									<path id="Vector_2" d="M10 24L24 10L38 24" stroke="currentColor" stroke-width="4" />
								</g>
							</svg>
						</div>
						<div class="option-text">{{ lang.ssLocalUpload }}</div>
					</div>
					<div class="source-option" @click="handleBilibiliSearch" v-show="lang.lang == 'cn'">
						<div class="option-icon">
							<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<g id="Component 1">
									<path id="Vector"
										d="M38 8H10C7.79086 8 6 9.79086 6 12V32C6 34.2091 7.79086 36 10 36H38C40.2091 36 42 34.2091 42 32V12C42 9.79086 40.2091 8 38 8Z"
										stroke="currentColor" stroke-width="4" />
									<path id="Vector_2" d="M20 18L32 24L20 30V18Z" stroke="currentColor" stroke-width="4" />
								</g>
							</svg>
						</div>
						<div class="option-text">{{ lang.ssBiliSearch }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 隐藏的文件输入 -->
		<input ref="fileInput" type="file" accept="video/*" style="display: none" @change="handleFileChange" />
	</div>
</template>

<script>
import "../../../../common/aws-sdk-2.235.1.min.js";

export default {
	data() {
		return {
			show: false,
			data: null,
		};
	},
	computed: {},
	methods: {
		open(data) {
			this.data = data;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.data = null;
		},
		// 处理本地文件上传
		handleLocalUpload() {
			this.$refs.fileInput.click();
		},
		// 处理文件选择
		handleFileChange(event) {
			const file = event.target.files[0];
			if (file) {
				// 验证文件类型
				if (!file.type.startsWith('video/')) {
					this.$message.error('请选择视频文件');
					event.target.value = "";
					return;
				}
				// 上传文件
				this.uploadVideo(file);
			}
			// 重置input，以便可以再次选择同一个文件
			event.target.value = "";
		},
		// 上传视频文件
		uploadVideo(file) {
			const uploadId = new Date().getTime();
			const fileName = file.name;

			// 初始化进度信息
			this.$emit("uploadProgress", {
				id: uploadId,
				fileName: fileName,
				progress: 0,
				loaded: 0,
				total: file.size,
				status: 'uploading'
			});

			var credentials = {
				accessKeyId: "AKIATLPEDU37QV5CHLMH",
				secretAccessKey: "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"
			};
			window.AWS.config.update(credentials);
			window.AWS.config.region = "cn-northwest-1";

			var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } });
			var _this = this;

			var params = {
				Key:
					file.name.split(".")[0] +
					new Date().getTime() +
					"." +
					file.name.split(".")[file.name.split(".").length - 1],
				ContentType: file.type,
				Body: file,
				"Access-Control-Allow-Credentials": "*",
				ACL: "public-read"
			};
			var options = {
				partSize: 2048 * 1024 * 1024,
				queueSize: 2,
				leavePartsOnError: true
			};
			bucket
				.upload(params, options)
				.on("httpUploadProgress", function (evt) {
					// 更新上传进度
					const progress = Math.round((evt.loaded * 100) / evt.total);
					_this.$emit("uploadProgress", {
						id: uploadId,
						fileName: fileName,
						progress: progress,
						loaded: evt.loaded,
						total: evt.total,
						status: 'uploading'
					});
				})
				.send(function (err, data) {
					if (err) {
						// 上传失败，更新进度状态
						_this.$emit("uploadProgress", {
							id: uploadId,
							fileName: fileName,
							progress: 0,
							loaded: 0,
							total: file.size,
							status: 'error'
						});
						_this.$message.error("上传失败");
					} else {
						// 上传成功，触发事件传递文件信息
						_this.$emit("uploadLocalVideo", {
							id: uploadId,
							file: file,
							url: data.Location,
							name: file.name
						});
						_this.close();
					}
				});
		},
		// 处理Bilibili搜索
		handleBilibiliSearch() {
			// 触发Bilibili搜索事件
			this.$emit("searchBilibili");
			this.close();
		},
	},
};
</script>

<style scoped>
/* 视频来源选择弹窗 */
.video-source-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	position: relative;
	z-index: 1001;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	width: 600px;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	/* border-bottom: 1px solid #f0f0f0; */
}

.modal-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin: 0;
}

.modal-close {
	font-size: 24px;
	color: #999;
	cursor: pointer;
	transition: all 0.3s;
}

.modal-close:hover {
  /* color: #409eff; */
  background-color: #f3f4f6;
}

.video-source-body {
	padding: 0px 24px 30px;
}

.source-options {
	display: flex;
	justify-content: center;
	gap: 40px;
}

.source-option {
	flex: 1;
	max-width: 200px;
	padding: 15px 20px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	background-color: #fafbfc;
}

.source-option:hover {
	background-color: #fff8f0;
	border-color: #f8963c;
	color: #FF9300;
	box-shadow: 0 2px 8px rgba(40, 92, 245, 0.1);
}

.source-option:hover .option-icon{
	color: #FF9300;
}

.option-icon {
	width: 95%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	border: 1px solid #e5e7eb;
	color: #6b7280;
    background: #fff;
	border-radius: 4px;
	padding: 10px;
}

.option-text {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	text-align: center;
}
</style>