RING:素材库功能完成

src/api/index.ts

@@ -795,8 +795,8 @@ export const forceReport = (
  */
 export const getVideoList = (
   query: {
-    is_pubic: number | string, page: number, video_name: string, video_type?: string, book_name?: string,
-    demander: string, editor: string, uploader: string,
+    is_pubic: number | string, page: number, video_name?: string, video_type?: string, book_name?: string,
+    demander?: string, editor?: string, uploader?: string,
   }
 ): any => {
   return axios("/video/list", { params: query });
@@ -808,8 +808,8 @@ export const getVideoList = (
  */
 export const getImageList = (
   query: {
-    is_pubic: number | string, page: number, image_name: string, image_type?: string, book_name?: string,
-    demander: string, editor: string, uploader: string,
+    is_pubic: number | string, page: number, image_name?: string, image_type?: string, book_name?: string,
+    demander?: string, editor?: string, uploader?: string,
   }
 ): any => {
   return axios("/image/list", { params: query });
@@ -856,13 +856,14 @@ export const uploadVideo = (data: {
     url: '/video/upload',
     data,
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'multipart/form-data',
+      "contentType": false,
     }
   })
 };
 
 /**
- * 上传视频
+ * 上传图片
  * @data
  */
 export const uploadImage = (data: {

src/views/_pageOptions/table_material.ts

@@ -8,6 +8,7 @@ export const TableColumnOfVideo = [
   {
     title: '时长',
     dataIndex: 'duration',
+    slots: { customRender: 'duration' },
   },
   {
     title: '视频类型',

src/views/material/component/common-table.vue

@@ -23,18 +23,27 @@
     >
       <template #video_name="{ record }">
         <div class="table-view-box">
-          <div class="video-view">
+          <div class="video-view" @click="onOpenPreview(record.url)">
             <i class="iconfont icon-ziyuan"></i>
+            <img
+              :src="
+                record.url + '?x-oss-process=video/snapshot,t_0,f_jpg,m_fast'
+              "
+              alt=""
+            />
           </div>
           <span>{{ record.name }}</span>
         </div>
       </template>
       <template #image_name="{ record }">
         <div class="table-view-box">
-          <div class="image-view"></div>
+          <div class="image-view" @click="onOpenPreview(record.url)">
+            <img :src="record.url" alt="" />
+          </div>
           <span>{{ record.name }}</span>
         </div>
       </template>
+      <template #duration="{ record }">{{ record.duration }}秒</template>
       <template #video_type="{ record }">
         <span v-show="record.video_type === 'S'">竖版视频</span>
         <span v-show="record.video_type === 'H'">横版视频</span>
@@ -73,6 +82,28 @@
         }"
       />
     </a-modal>
+    <a-modal
+      v-model:visible="previewVisible"
+      width="40%"
+      height="200px"
+      :footer="null"
+      :mask="true"
+      wrapClassName="preview"
+      style="max-height: 400px"
+    >
+      <img
+        style="max-width: 100%; max-height: 100%"
+        :src="currentUrl"
+        alt=""
+        v-show="type === 'picture'"
+      />
+      <video
+        v-show="type === 'video'"
+        style="max-width: 100%; max-height: 100%"
+        :src="currentUrl"
+        controls
+      ></video>
+    </a-modal>
   </div>
 </template>
 
@@ -115,6 +146,8 @@ const CommonTable = defineComponent({
       pushVisible: false,
       currentId: 0, // 当前操作的素材id
       advertiser: ref<string[]>([]), // 选择的广告主
+      previewVisible: false,
+      currentUrl: "",
     });
     const getList = async (page?: any) => {
       state.loading = true;
@@ -126,17 +159,14 @@ const CommonTable = defineComponent({
       });
       state.loading = false;
       state.list = data.list;
-      console.log("返回的数据", data);
     };
     // 列表选项改变
     const onSelectChange = (selectedRowKeys: any) => {
-      console.log("selectedRowKeys changed: ", selectedRowKeys);
       state.selectedRowKeys = selectedRowKeys;
     };
     watch(
       () => props.searchForm,
       (oldVal, newVal) => {
-        console.log("单个监听", oldVal, newVal);
         getList({ current: 1 });
       }
     );
@@ -151,8 +181,8 @@ const CommonTable = defineComponent({
   methods: {
     // 获取广告主列表
     async getAdList() {
+      this.selectedRowKeys = [];
       let { data } = await getAdvertiser();
-      console.log("AD", data);
       this.adList = data;
       if (this.adList.length === 0) return;
       this.adList.forEach((item) => {
@@ -195,7 +225,7 @@ const CommonTable = defineComponent({
       try {
         await pushMaterial({
           material_id: this.currentId,
-          advertiser_id: this.advertiser[0],
+          advertiser_id: this.advertiser[1],
         });
         this.pushVisible = false;
         message.success("推送成功");
@@ -204,7 +234,13 @@ const CommonTable = defineComponent({
         console.log(err);
       }
     },
+    // 点击预览
+    onOpenPreview(url: string) {
+      this.previewVisible = true;
+      this.currentUrl = url;
+    },
   },
+  //https://firemanage.oss-cn-hangzhou.aliyuncs.com/material/video/S-20210739163739-E9XA.mp4?x-oss-process=video/snapshot,t_0,f_jpg,m_fast
 });
 
 export default CommonTable;
@@ -224,10 +260,19 @@ export default CommonTable;
       border: 1px solid gray;
       margin-right: 4px;
       position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgb(94, 93, 93);
+      img {
+        max-width: 58px;
+        max-height: 58px;
+      }
       .icon-ziyuan {
         position: absolute;
         top: 18px;
         left: 32px;
+        color: white;
       }
     }
     .image-view {
@@ -235,10 +280,17 @@ export default CommonTable;
       height: 60px;
       border: 1px solid gray;
       margin-right: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-width: 58px;
+        max-height: 58px;
+      }
     }
-    &:hover span {
-      color: rgb(0, 140, 255);
-    }
+    // &:hover span {
+    //   color: rgb(0, 140, 255);
+    // }
   }
 }
 </style>

src/views/material/component/search.vue

@@ -2,7 +2,7 @@
   <div class="search-bar">
     <a-tabs v-model:activeKey="search.is_public" @change="onSubmit">
       <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
-      <a-tab-pane :key="0" tab="个人素材"></a-tab-pane>
+      <a-tab-pane :key="0" tab="我的上传"></a-tab-pane>
     </a-tabs>
     <div class="search-item">
       <span class="label">{{
@@ -121,14 +121,12 @@ const PictureLibrary = defineComponent({
       },
     });
     const filterOption = (input: string, option: any) => {
-      console.log(option);
       return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
     };
     return { ...toRefs(state), filterOption };
   },
 
   mounted() {
-    console.log("TYPE", this.$props.materialType);
     this.type = this.$props.materialType;
     this.onSubmit();
     this.getBookList();
@@ -137,19 +135,21 @@ const PictureLibrary = defineComponent({
     // 获取推广书籍列表
     async getBookList() {
       let { data } = await getLandingBooks();
-      console.log(data.list);
       this.bookList = data.list;
     },
     // 搜索
     onSubmit() {
-      console.log(this.search);
       let param: any = {
         is_public: this.search.is_public,
-        book_name: this.search.bookname,
-        demander: this.search.demander,
-        editor: this.search.editor,
-        uploader: this.search.uploader,
       };
+      // book_name: this.search.bookname,
+      // demander: this.search.demander,
+      // editor: this.search.editor,
+      // uploader: this.search.uploader,
+      if (this.search.bookname) param.book_name = this.search.bookname;
+      if (this.search.demander) param.demander = this.search.demander;
+      if (this.search.editor) param.editor = this.search.editor;
+      if (this.search.uploader) param.uploader = this.search.uploader;
       if (this.type === "video") {
         param.video_name = this.search.videoName;
         param.video_type = this.search.videotype;

src/views/material/component/upload-image.vue

@@ -52,13 +52,10 @@ const UploadVideo = defineComponent({
     });
     return { ...toRefs(state) };
   },
-  mounted() {
-    console.log("isp", this.$props.searchForm.is_public);
-  },
+  mounted() {},
   methods: {
     // 选择视频后
     addFile(event: any) {
-      console.log(event.target.files);
       event.target.files.forEach((item: any) => {
         this.getImgInfo(item).then((imgInfo: any) => {
           let { width, height } = imgInfo;
@@ -96,19 +93,24 @@ const UploadVideo = defineComponent({
     },
     // 确定上传图片
     async onUploadImage() {
+      if (this.fileList.length === 0) return message.warning("请选择图片");
+      this.$emit("close");
+      message.info("素材上传中...");
+      let num = 0;
       if (this.fileList.length === 0) return message.error("请选择图片");
       this.fileList.forEach((item) => {
-        console.log(item);
-        let file = item.file;
-        console.log(file);
-        let data: any = {
-          // video: file,
-          is_public: this.$props.searchForm.is_public,
-        };
-        data.video = file;
-        console.log(data);
-        // return;
-        uploadImage(data);
+        let form: any = new FormData();
+        form.append("is_public", this.$props.searchForm.is_public);
+        form.append("image", item.file); //,item.name
+        uploadImage(form)
+          .catch((err) => {
+            console.log("ERR", err);
+          })
+          .finally(() => {
+            num++;
+            console.log("NUM", num);
+            if (num === this.fileList.length) message.success("素材上传完成");
+          });
       });
     },
     // 获取图片宽高信息

src/views/material/component/upload-video.vue

@@ -54,18 +54,14 @@ const UploadVideo = defineComponent({
   methods: {
     // 选择视频后
     async addFile(event: any) {
-      console.log(event.target.files);
       event.target.files.forEach((item: any) => {
-        console.log("item", item, this.checkNumber(item.name));
         this.getVideoMsg(item).then((videoinfo: any) => {
           const { duration, height, width } = videoinfo;
           //获取到视频的时长,高度,宽度
           console.log(duration, height, width);
-
           // 校验文件尺寸比例大小
           if (Number((item.size / 1024 / 1024).toFixed(2)) > 500)
             return message.warning(`视频：${item.name}大小超过了500M`);
-          console.log("宽高1", height, width);
           console.log("宽高", height / width, 16 / 9, 9 / 16);
           // if (
           //   item.height / item.width !== 16 / 9 &&
@@ -95,22 +91,27 @@ const UploadVideo = defineComponent({
     },
     // 确定上传视频
     async onUploadVideo() {
+      if (this.fileList.length === 0) return message.warning("请选择视频");
+      this.$emit("close");
+      message.info("素材上传中...");
+      let num = 0;
       if (this.fileList.length === 0) return message.error("请选择视频");
       this.fileList.forEach((item) => {
-        console.log(item);
-        let file = item.file;
-        console.log(file);
-        let data: any = {
-          // video: file,
-          is_public: this.$props.searchForm.is_public,
-          duration: item.duration,
-          width: item.width,
-          height: item.height,
-        };
-        data.video = file;
-        console.log(data);
-        // return;
-        uploadVideo(data);
+        let form: any = new FormData();
+        form.append("is_public", this.$props.searchForm.is_public);
+        form.append("video", item.file); //,item.name
+        form.append("duration", item.duration);
+        form.append("width", item.width);
+        form.append("height", item.height);
+        uploadVideo(form)
+          .catch((err) => {
+            console.log("ERR", err);
+          })
+          .finally(() => {
+            num++;
+            console.log("NUM", num);
+            if (num === this.fileList.length) message.success("素材上传完成");
+          });
       });
     },
     // 获取视频宽高时长

src/views/material/picture.vue

@@ -29,8 +29,8 @@
     >
       <upload-image
         ref="upload"
-        v-if="uploadVisible"
         :searchForm="searchForm"
+        @close="uploadVisible = false"
       ></upload-image>
     </a-modal>
   </div>
@@ -63,14 +63,13 @@ const ImageLibrary = defineComponent({
   methods: {
     // 搜索条件回传
     onSearch(param: any) {
-      console.log(param);
       this.searchForm = param;
     },
     // 确定上传 触发组件上传视频
     onConfirmUpload() {
-      this.confirmLoading = true;
       let upload: any = this.$refs.upload;
       upload.onUploadImage();
+      // this.confirmLoading = true;
     },
   },
 });

src/views/material/video.vue

@@ -30,8 +30,8 @@
     >
       <upload-video
         ref="upload"
-        v-if="uploadVisible"
         :searchForm="searchForm"
+        @close="uploadVisible = false"
       ></upload-video>
     </a-modal>
   </div>
@@ -64,14 +64,13 @@ const VideoLibrary = defineComponent({
   methods: {
     // 搜索条件回传
     onSearch(param: any) {
-      console.log(param);
       this.searchForm = param;
     },
     // 确定上传 触发组件上传视频
     onConfirmUpload() {
-      this.confirmLoading = true;
       let upload: any = this.$refs.upload;
       upload.onUploadVideo();
+      // this.confirmLoading = true;
     },
   },
 });