提交

src/api/index.ts

@@ -277,3 +277,10 @@ export const getProvinceCity = () => {
 export const getUserDetail = () => {
   return instance.get('/ad/users/info')
 }
+
+/**
+ * 批量给创意添加素材
+ */
+export const addMaterial = (data: { creativeId: number; stuffId: number[] }) => {
+  return instance.post('/ad/stuffs/copy', data)
+}

src/components/mediaComponents.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button type="primary" :loading="loading" v-if="!src">
+  <el-button type="primary" :loading="loading" v-if="!props.src">
     <label class="file" for="file"> 上传素材 </label>
     <input
       style="display: none"
@@ -27,7 +27,7 @@
         p-id="4267"
       />
     </svg>
-    <el-image style="width: 120px; height: 120px" :src="src" fit="contain" />
+    <el-image style="width: 120px; height: 120px" :src="srcText" fit="contain" />
     <svg
       t="1732603337032"
       v-if="fileType === 'video'"
@@ -63,35 +63,29 @@ import { defineProps, ref } from 'vue'
 const emit = defineEmits(['change', 'getCalc'])
 const props = defineProps<{ src: string }>()
 const loading = ref(false)
-const src = ref(props.src)
+const srcText = ref('')
 const fileType = ref('')
+let oriUrl = props.src ? props.src : ''
 
 const isImg = (url: string) => {
   return /\.(jpg|jpeg|png|gif)$/.test(url)
 }
 
-// 判定如果是图片则直接输出图片，如果是视频则输出第一帧图片
-const getImage = (file: File | string) => {
-  const video = document.createElement('video')
-  fileType.value = 'video'
-  if (typeof file === 'string') {
-    video.setAttribute('crossorigin', 'anonymous')
-    video.src = file
-  } else {
-    if (file.type.indexOf('image') !== -1) {
-      src.value = URL.createObjectURL(file)
-      fileType.value = 'image'
-      const img = new Image()
-      img.onload = function () {
-        emit('getCalc', img.width, img.height)
-      }
-      img.src = URL.createObjectURL(file)
-      return
-    }
-    // 视频 获取第一帧
-    // 播放本地视频文件
-    video.src = URL.createObjectURL(file)
+const imgInfo = (file: string) => {
+  fileType.value = 'image'
+  const img = new Image()
+  img.src = file
+  img.onload = () => {
+    emit('getCalc', img.width, img.height)
+    srcText.value = img.src
   }
+}
+
+const videoInfo = (file: string) => {
+  fileType.value = 'video'
+  const video = document.createElement('video')
+  video.setAttribute('crossorigin', 'anonymous')
+  video.src = file
   video.onloadeddata = function () {
     // 跳转到第二秒
     video.currentTime = 1
@@ -104,27 +98,41 @@ const getImage = (file: File | string) => {
       canvas.height = video.videoHeight
       const ctx = canvas.getContext('2d')
       ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
-      src.value = canvas.toDataURL()
+      srcText.value = canvas.toDataURL()
     })
   }
 }
-if (src.value) {
-  const isImgUrl = isImg(src.value)
-  fileType.value = isImgUrl ? 'image' : 'video'
-  getImage(src.value)
-}
-
-let oriUrl = props.src ? props.src : ''
-let times = 0
-
 const close = () => {
-  src.value = ''
+  srcText.value = ''
   fileType.value = ''
   oriUrl = ''
   emit('getCalc', 0, 0)
   emit('change', '')
 }
 
+const getImage = (file: File | string) => {
+  const FType = typeof file
+  if (FType === 'string') {
+    const isImage: boolean = isImg(file as string)
+    // 判定如果是图片则直接输出图片，如果是视频则输出第一帧图片
+    if (isImage) imgInfo(file as string)
+    else videoInfo(file as string)
+    return
+  } else {
+    const readerFile = file as File
+    if (readerFile.type.indexOf('image') !== -1) {
+      imgInfo(URL.createObjectURL(readerFile))
+    } else {
+      videoInfo(URL.createObjectURL(readerFile))
+    }
+  }
+}
+
+const playVideo = () => {
+  window.open(oriUrl)
+}
+
+let times = 0
 // 传参为文件
 const chagne = (e: Event) => {
   if (!e.target) return
@@ -149,13 +157,13 @@ const chagne = (e: Event) => {
       loading.value = false
     })
     .catch(() => {
+      let t: undefined | number
       if (times++ < 5) {
         ElMessage({
           message: '正在重新上传',
           type: 'info',
         })
         const t = setTimeout(function () {
-          console.log(times)
           clearTimeout(t)
           chagne(e)
         }, 1000)
@@ -165,15 +173,14 @@ const chagne = (e: Event) => {
           type: 'info',
         })
         inputElement.value = ''
+        if (t) clearTimeout(t)
         loading.value = false
         times = 0
       }
     })
 }
 
-const playVideo = () => {
-  window.open(oriUrl)
-}
+if (props.src) getImage(props.src)
 </script>
 
 <style scoped>

src/views/OriginalityPage.vue

@@ -423,6 +423,7 @@ const creatEditPlan = async (data?: OriginalityItem) => {
   } else {
     form.value = {
       ...D,
+      showType: 3,
     }
     if (typeof siteList.value[0].mediaId === 'number')
       form.value.mediaIds = [siteList.value[0].mediaId]

src/views/SitePage.vue

@@ -200,7 +200,7 @@ const copyCode = (row: CatalogTreeOri) => {
       h('div', null, ele.outerHTML),
       h('h3', { style: { 'font-weight': 'bold', padding: '5px 0' } }, '代码(https)'),
       h('div', null, elehttps.outerHTML),
-      h('h3', { style: { 'font-weight': 'bold', padding: '5px 0' } }, 'id:'),
+      h('h3', { style: { 'font-weight': 'bold', padding: '5px 0' } }, '广告位id:'),
       h('div', null, slots.map((v) => '#sxtv-ad-' + v.slotId).join('，')),
     ]),
   })

src/views/SourceMaterialPage.vue

@@ -23,10 +23,15 @@
     <el-form-item>
       <el-button type="primary" @click="onSubmit">搜索</el-button>
       <el-button type="primary" link @click="() => creatEditPlan()">创建素材</el-button>
+      <el-popconfirm v-if="query != -1" @confirm="moreAdd" title="确定添加吗?">
+        <template #reference>
+          <el-button type="primary" link> 批量添加 </el-button>
+        </template>
+      </el-popconfirm>
     </el-form-item>
   </el-form>
-
-  <el-table :data="tableData" style="width: 100%">
+  <el-table @selection-change="selectionChange" :data="tableData" style="width: 100%">
+    <el-table-column type="selection" width="55" v-if="query != -1" />
     <el-table-column prop="stuffName" label="名称" />
     <el-table-column prop="stuffName" label="查看">
       <template #default="scope">
@@ -178,8 +183,8 @@ import type {
   SourceMaterialItem,
 } from '@/types/SourceMaterial'
 import { formatDateSite, getStatus } from '@/tool/index'
-import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import {
   getMaterialList,
   deleteMaterial,
@@ -187,19 +192,19 @@ import {
   createMaterial,
   updateMaterial,
   updateMaterialStatus,
+  addMaterial,
 } from '@/api/index'
 import { ref, reactive } from 'vue'
 
 import MediaComponents from '@/components/mediaComponents.vue'
-
 // vue3 获取url参数
 const router = useRouter()
-const query = router.currentRoute.value.query
-
+const queryRouter = router.currentRoute.value.query
+const query = ref<number>(Number(queryRouter?.creativeId) || -1)
 const ruleFormRef = ref<FormInstance>()
 const rules = reactive<FormRules<ISourceMaterialProps>>({
   stuffName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-  landingPage: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  landingPage: [{ required: true, message: '请输入落地页地址', trigger: 'blur' }],
   creativeId: [{ required: true, message: '请选择创意', trigger: 'change' }],
   addr: [{ required: true, message: '请选择素材', trigger: 'change' }],
   width: [{ required: true, message: '请输入宽', trigger: 'change' }],
@@ -224,7 +229,7 @@ const form = ref<ISourceMaterialProps>({
 const pages = reactive<Pages>({
   pageNum: 1,
   pageSize: 10,
-  creativeId: query.creativeId ? Number(query.creativeId) : undefined,
+  creativeId: undefined,
 })
 
 const tableData = ref<SourceMaterialList>([])
@@ -251,6 +256,24 @@ const onSubmit = () => {
   })
 }
 
+let selectObj: SourceMaterialItem[] = []
+
+const moreAdd = () => {
+  addMaterial({
+    creativeId: query.value,
+    stuffId: selectObj.map((v) => v.stuffId),
+  }).then(() => {
+    ElMessage({
+      message: '添加成功',
+      type: 'success',
+    })
+  })
+}
+
+const selectionChange = (val: SourceMaterialItem[]) => {
+  selectObj = val
+}
+
 const creatMaterial = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.validate((valid) => {
@@ -301,6 +324,7 @@ const addNewMaterial = (formEl: FormInstance | undefined) => {
 
 const page = (val: number) => {
   pages.pageNum = val
+  selectObj = []
   onSubmit()
 }