院士、人物视频上传支持第三方iframe

2024-08-12 09:57:02 +08:00 · 2024-08-12 09:52:58 +08:00
3 changed files with 195 additions and 28 deletions
--- a/src/components/insertVideo/index.vue
+++ b/src/components/insertVideo/index.vue
@ -0,0 +1,183 @@
+<template>
+  <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
+    :description="`类型为：${props.mediaTypeInfo}, 大小不超过${props.fileSizeInfo}, 宽*高: ${props.mediaWidth}px*${props.mediaHeight}px`" />
+  <div class="gva-btn-list" style="width: 100%;">
+    <el-upload class="avatar-uploader" :action="`${imgUploadPath}/cms/mediaFile/upload?category=${props.category}`"
+      :show-file-list="false" :on-success="(res) => { uploadSuccess(res) }" :on-error="uploadFailure"
+      :before-upload="(file) => { return beforeUpload(file) }">
+      <el-button type="default" plain icon="upload">上传</el-button>
+    </el-upload>
+    <el-button type="default" plain icon="link" :onclick="openDialog">插入第三方</el-button>
+  </div>
+
+  <div v-if="videoCode != ''">
+    <video v-if="videoCode.substring(0, 5) == 'http:' || videoCode.substring(0, 6) == 'https:'" ref="videoRef"
+      controls="controls" :width="300">
+      <source :src="videoCode" />
+    </video>
+    <div v-else-if="videoCode.substring(0, 7) == '<iframe'" class="video-content" v-html="videoCode"></div>
+    <div v-else>
+      {{ videoCode }}
+    </div>
+  </div>
+  <div v-else>
+    无视频
+  </div>
+
+  <el-dialog v-model="dialogVisible" width="600" height="400" class="overlay" :show-close="false">
+    <template #header>
+      <div>请输入第三方iframe代码</div>
+    </template>
+    <el-input v-model="newVideoCode" type="textarea" :rows="14" />
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button @click="close">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { isVideoMime } from '@/utils/image'
+const imgUploadPath = import.meta.env.VITE_BASE_API
+
+defineOptions({
+  name: 'InsertVideo',
+})
+
+const videoCode = ref('')
+const newVideoCode = ref('')
+const emits = defineEmits(['update:modelValue', 'on-close'])
+const props = defineProps({
+  mediaTypeInfo: { type: String, default: 'mp4,webm' },
+  fileSize: { type: Number, default: 5000 },
+  fileSizeInfo: { type: String, default: '5M' },
+  mediaWidth: { type: Number, default: 600 },
+  mediaHeight: { type: Number, default: 400 },
+  category: { type: String, default: '' },
+  modelValue: { type: String, default: '' }
+})
+
+watch(() => props.modelValue, () => {
+  videoCode.value = props.modelValue
+})
+
+const beforeUpload = (file) => {
+  console.log(file)
+  const isLtSize = file.size / 1024 < props.fileSize
+  const isVideo = isVideoMime(file.type)
+  if (!isVideo) {
+    ElMessage.error('上传文件只能是 ' + props.mediaTypeInfo + ' 格式')
+    return false
+  }
+  if (!isLtSize) {
+    ElMessage.error('上传文件大小不能超过 ' + info.fileSizeInfo)
+    return false
+  }
+  return true
+}
+
+const uploadFailure = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+}
+
+const dialogVisible = ref(false)
+const openDialog = () => {
+  dialogVisible.value = true
+  if (videoCode.value.substring(0, 7) == '<iframe') {
+    newVideoCode.value = videoCode.value
+  }
+}
+
+const close = () => {
+  dialogVisible.value = false
+  newVideoCode.value = ''
+}
+
+const submit = (value) => {
+  videoCode.value = value
+  emits('update:modelValue', value)
+  close()
+}
+
+const handleSubmit = () => {
+  if (newVideoCode.value != '') {
+    submit(newVideoCode.value)
+  } else {
+    close()
+  }
+}
+
+const uploadSuccess = (res) => {
+  const { code, data, msg } = res
+  if (code !== 0) {
+    ElMessage({ type: 'error', message: msg })
+    return
+  }
+  if (!data.mediaFile) {
+    ElMessage({ type: 'error', message: '返回错误，上传失败' })
+    return
+  }
+  submit(data.mediaFile.url)
+}
+
+defineExpose({ uploadSuccess })
+
+</script>
+
+<style lang="scss">
+.overlay {
+  border-radius: 4px;
+
+  .el-dialog__header {
+    padding: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .el-dialog__body {
+    padding: 12px !important;
+    height: 50vh;
+    overflow: auto !important;
+  }
+
+  .quick-title {
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+  }
+
+  .quick-input {
+    color: #666;
+    border-radius: 4px 4px 0 0;
+    border: none;
+    padding: 12px 16px;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: 16px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .quick-item {
+    font-size: 14px;
+    padding: 8px;
+    margin: 4px 0;
+
+    &:hover {
+      cursor: pointer;
+      background: #eee;
+      border-radius: 4px;
+    }
+  }
+}
+
+.video-content {
+  line-height: 1.2;
+}
+</style>
--- a/src/view/content/components/academicianEdit.vue
+++ b/src/view/content/components/academicianEdit.vue
@ -73,21 +73,9 @@
              </div>
            </el-form-item>
            <el-form-item label="介绍视频" prop="videoUrl" style="width: 100%">
-              <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
-                :description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
-              <div class="gva-btn-list" style="width: 100%;">
-                <el-upload class="avatar-uploader"
-                  :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
-                  :on-success="(res) => { uploadSuccess(res, 'video') }" :on-error="uploadFailure"
-                  :before-upload="(file) => { return beforeUpload(file, videoInfo) }">
-                  <el-button type="default" plain icon="upload">上传</el-button>
-                </el-upload>
-              </div>
-              <div>
-                <video ref="videoRef" controls="controls" :width="300">
-                  <source src />
-                </video>
-              </div>
+              <InsertVideo v-model="editForm.videoUrl" :fileSize="videoInfo.fileSize"
+                :fileSizeInfo="videoInfo.fileSizeInfo" :mediaWidth="videoInfo.mediaWidth"
+                :mediaHeight="videoInfo.mediaHeight" category="academician_imgs" />
            </el-form-item>
            <el-form-item label="企业二维码" prop="qrcodeUrl" style="width: 100%">
              <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
@ -120,6 +108,7 @@ import { ElMessage } from 'element-plus'
 import RichEdit from '@/components/richtext/rich-edit.vue'
 import { isImageMime, isVideoMime, isGifMime, checkImageWHEqual } from '@/utils/image'
 import CropperImg from '@/components/upload/cropperImg.vue'
+import InsertVideo from '@/components/insertVideo/index.vue'
 import {
  addAcademician,
  updateAcademician,
@ -135,7 +124,6 @@ const props = defineProps({
  title: { type: String, default: '' }
 })

-const cropperImgRef = ref(null)
 const showDrawer = ref(false)
 const showErrMessage = ref('')
 const fullscreenLoading = ref(true)
@ -351,6 +339,10 @@ const initFormById = async (ID) => {
  fullscreenLoading.value = false
 }

+const handleInsertVideo = () => {
+
+}
+
 // 对外暴露方法
 defineExpose({ openPage })
 </script>
--- a/src/view/content/components/entrepreneurEdit.vue
+++ b/src/view/content/components/entrepreneurEdit.vue
@ -72,18 +72,9 @@
              </div>
            </el-form-item>
            <el-form-item label="企业视频" prop="videoUrl" style="width: 100%">
-              <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
-                :description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
-              <div class="gva-btn-list" style="width: 100%;">
-                <el-upload :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`"
-                  style="height: 32px;" :show-file-list="false" :on-success="(res) => { uploadSuccess(res, 'video') }"
-                  :on-error="uploadFailure" :before-upload="(file) => { return beforeUpload(file, videoInfo) }">
-                  <el-button type="default" plain icon="upload">上传</el-button>
-                </el-upload>
-              </div>
-              <video ref="videoRef" controls="controls" :width="300">
-                <source src />
-              </video>
+              <InsertVideo v-model="editForm.videoUrl" :fileSize="videoInfo.fileSize"
+                :fileSizeInfo="videoInfo.fileSizeInfo" :mediaWidth="videoInfo.mediaWidth"
+                :mediaHeight="videoInfo.mediaHeight" category="academician_imgs" />
            </el-form-item>
            <el-form-item label="企业二维码" prop="qrcodeUrl" style="width: 100%">
              <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
@ -115,6 +106,7 @@ import { ElMessage } from 'element-plus'
 import RichEdit from '@/components/richtext/rich-edit.vue'
 import { isImageMime, isVideoMime, isGifMime, checkImageWHEqual } from '@/utils/image'
 import CropperImg from '@/components/upload/cropperImg.vue'
+import InsertVideo from '@/components/insertVideo/index.vue'
 import {
  addEntrepreneur,
  updateEntrepreneur,
Author	SHA1	Message	Date
jacky	9bc148ae89	院士、人物视频上传支持第三方iframe	2024-08-12 09:57:02 +08:00
jacky	65fdc9f593	院士、人物视频上传支持第三方iframe	2024-08-12 09:52:58 +08:00