首頁 探索 說明
註冊 登入
zhuishuyun
/
precise_delivery_distribution_front
2
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

RING:素材库上传素材组件分别接入

ringcode 3 年之前
父節點
193cc0cd48
當前提交
03a623410b
共有 6 個文件被更改，包括 367 次插入 和 34 次删除
分割檢視 顯示文件統計
  1. 22 27
      public/index.html
  2. 7 5
      src/plugins/install.ts
  3. 149 0
      src/views/material/component/upload-image.vue
  4. 149 0
      src/views/material/component/upload-video.vue
  5. 20 1
      src/views/material/picture.vue
  6. 20 1
      src/views/material/video.vue

+ 22 - 27
public/index.html
查看文件 

@@ -1,31 +1,26 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta
 
-      name="viewport"
 
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 
-    />
 
-    <link
 
-      rel="icon"
 
-      type="image/png"
 
-      href="data:image/png;base64,iVBORw0KGgo="
 
-    />
 
-    <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
 
-    <% for (var i in
 
-    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
 
+  <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
 
+  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
 
     <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
 
     <% } %>
 
-    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
 
-    <% for (var i in
 
-    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
 
-    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 
-    <% } %>
 
-    <title>精准投放后台</title>
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
-</html>
 
+      <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2651824_dvnf8rfi7bl.css">
 
+      <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
 
+      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
 
+        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 
+        <% } %>
 
+          <title>精准投放后台</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app"></div>
 
+  <!-- built files will be auto injected -->
 
+</body>
 
+
 
+</html>

+ 7 - 5
src/plugins/install.ts
查看文件 

@@ -3,7 +3,7 @@
 
  * @Date: 2021-04-28 09:20:56
 
  * @LastEditors: Please set LastEditors
 
  */
 
-import {App} from "vue";
 
+import { App } from "vue";
 
 import {
 
   Button,
 
   ConfigProvider,
 
@@ -32,21 +32,22 @@ import {
 
   Steps,
 
   Upload,
 
   List,
 
-  Spin
 
+  Spin,
 
+  Progress
 
 } from "ant-design-vue";
 
 
 import VueClipboard3 from "./vue-clipboard";
 
 import VueConfirmDirective from "./vue-confirm";
 
 import VueQrCode from "./vue-qrcode";
 
 
-import {ModalConfirmKey} from "./injectionKey";
 
+import { ModalConfirmKey } from "./injectionKey";
 
 import confirmButton from "@/components/confirm-button.vue"
 
 
 const install = (app: App<Element>) => {
 
   app.provide(ModalConfirmKey, Modal.confirm);
 
   app.config.globalProperties.$confirm = Modal.confirm;
 
   app.config.globalProperties.$message = message;
 
-  app.component('confirm-button',confirmButton)
 
+  app.component('confirm-button', confirmButton)
 
 
   return app
 
     .use(VueClipboard3)
 
@@ -78,7 +79,8 @@ const install = (app: App<Element>) => {
 
     .use(Steps)
 
     .use(List)
 
     .use(Spin)
 
-    .use(Upload);
 
+    .use(Upload)
 
+    .use(Progress);
 
 };
 
 
 export default install;

+ 149 - 0
src/views/material/component/upload-image.vue
查看文件 

@@ -0,0 +1,149 @@
 
+<template>
 
+  <div class="upload-video">
 
+    <div class="upload-box">
 
+      <input
 
+        class="upload-input"
 
+        ref="chooseFile"
 
+        type="file"
 
+        @change="addFile"
 
+        multiple
 
+        accept=".jpg,.png,.jpeg,"
 
+      />
 
+      <i class="iconfont icon-empty"></i>
 
+      <p>点击或将文件拖拽到这里上传</p>
 
+      <p class="gray-font">建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，</p>
 
+      <p class="gray-font">
 
+        支持JPG，PNG等图片格式。命名格式：推广书记名称-需求方-文案
 
+      </p>
 
+    </div>
 
+    <div class="upload-list">
 
+      <div class="list-item" v-for="(item, index) in fileList" :key="index">
 
+        <i class="iconfont icon-paper-clip"></i>
 
+        <p>
 
+          {{ item.name }}
 
+          <i class="iconfont icon-guanbi" @click="deleteItem(index)"></i
 
+          ><a-progress
 
+            :showInfo="false"
 
+            :percent="item.percent"
 
+            status="active"
 
+          />
 
+        </p>
 
+      </div>
 
+    </div>
 
+    <p class="gray-font footer-num">已选择：{{ fileList.length }}/20</p>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts">
 
+import { defineComponent, reactive, toRefs, ref } from "vue";
 
+import {} from "@/api";
 
+import { message, Progress } from "ant-design-vue";
 
+const UploadVideo = defineComponent({
 
+  components: {},
 
+  setup() {
 
+    const formRef = ref();
 
+    const state = reactive({
 
+      fileList: ref<any[]>([]),
 
+    });
 
+    return { ...toRefs(state) };
 
+  },
 
+  mounted() {},
 
+  methods: {
 
+    // 选择视频后
 
+    addFile(event: any) {
 
+      console.log(event.target.files);
 
+      event.target.files.forEach((item: any) => {
 
+        this.fileList.push({
 
+          file: item,
 
+          name: item.name,
 
+          percent: 0,
 
+          materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
 
+          type: item.type.split("/")[0],
 
+        });
 
+      });
 
+      console.log("新增文件列表", this.fileList);
 
+    },
 
+    // 删除item
 
+    deleteItem(index: number) {
 
+      this.fileList.splice(index, 1);
 
+    },
 
+  },
 
+});
 
+
 
+export default UploadVideo;
 
+</script>
 
+<style lang="scss" scoped>
 
+@import "@/assets/common-style/frame.scss";
 
+.upload-video {
 
+  width: 100%;
 
+  padding: 0 10%;
 
+  .gray-font {
 
+    color: gray;
 
+  }
 
+  .upload-box {
 
+    cursor: pointer;
 
+    background: rgb(250, 250, 250);
 
+    border: 2px dashed rgb(212, 210, 210);
 
+    border-radius: 6px;
 
+    transition: all 0.3s;
 
+    padding-bottom: 10px;
 
+    position: relative;
 
+    i {
 
+      color: rgb(168, 167, 167);
 
+      display: block;
 
+      font-size: 60px;
 
+    }
 
+    i,
 
+    p {
 
+      text-align: center;
 
+      transition: all 0.3s;
 
+    }
 
+    // 选择文件
 
+    .upload-input {
 
+      position: absolute;
 
+      display: block;
 
+      width: 100%;
 
+      height: 100%;
 
+      opacity: 0;
 
+      cursor: pointer;
 
+    }
 
+  }
 
+  .upload-box:hover {
 
+    i,
 
+    p {
 
+      color: #39a4ff !important;
 
+    }
 
+    border-color: #39a4ff;
 
+  }
 
+  .upload-list {
 
+    overflow: hidden;
 
+    .list-item {
 
+      margin-top: 10px;
 
+      .icon-paper-clip {
 
+        width: 14px;
 
+        font-size: 12px;
 
+        float: left;
 
+        padding-top: 3px;
 
+      }
 
+      p {
 
+        float: left;
 
+        width: calc(100% - 14px);
 
+        overflow: hidden;
 
+        .icon-guanbi {
 
+          display: block;
 
+          float: right;
 
+          font-size: 13px;
 
+          cursor: pointer;
 
+          &:hover {
 
+            color: rgb(248, 10, 157);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .footer-num {
 
+    position: relative;
 
+    top: 56px;
 
+  }
 
+}
 
+</style>

+ 149 - 0
src/views/material/component/upload-video.vue
查看文件 

@@ -0,0 +1,149 @@
 
+<template>
 
+  <div class="upload-video">
 
+    <div class="upload-box">
 
+      <input
 
+        class="upload-input"
 
+        ref="chooseFile"
 
+        type="file"
 
+        @change="addFile"
 
+        multiple
 
+        accept=".mp4,.mpeg,.3gp,.avi"
 
+      />
 
+      <i class="iconfont icon-empty"></i>
 
+      <p>点击或将文件拖拽到这里上传</p>
 
+      <p class="gray-font">
 
+        支持格式：mp4，mpeg，3gp，avi，宽高16:9或9:16，&lt;500M
 
+      </p>
 
+      <p class="gray-font">命名格式：推广书籍名称-需求方-文案</p>
 
+    </div>
 
+    <div class="upload-list">
 
+      <div class="list-item" v-for="(item, index) in fileList" :key="index">
 
+        <i class="iconfont icon-paper-clip"></i>
 
+        <p>
 
+          {{ item.name }}
 
+          <i class="iconfont icon-guanbi" @click="deleteItem(index)"></i
 
+          ><a-progress
 
+            :showInfo="false"
 
+            :percent="item.percent"
 
+            status="active"
 
+          />
 
+        </p>
 
+      </div>
 
+    </div>
 
+    <p class="gray-font footer-num">已选择：{{ fileList.length }}/10</p>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts">
 
+import { defineComponent, reactive, toRefs, ref } from "vue";
 
+import {} from "@/api";
 
+import { message, Progress } from "ant-design-vue";
 
+const UploadVideo = defineComponent({
 
+  components: {},
 
+  setup() {
 
+    const formRef = ref();
 
+    const state = reactive({
 
+      fileList: ref<any[]>([]),
 
+    });
 
+    return { ...toRefs(state) };
 
+  },
 
+  mounted() {},
 
+  methods: {
 
+    // 选择视频后
 
+    addFile(event: any) {
 
+      console.log(event.target.files);
 
+      event.target.files.forEach((item: any) => {
 
+        this.fileList.push({
 
+          file: item,
 
+          name: item.name,
 
+          percent: 0,
 
+          materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
 
+          type: item.type.split("/")[0],
 
+        });
 
+      });
 
+      console.log("新增文件列表", this.fileList);
 
+    },
 
+    // 删除item
 
+    deleteItem(index: number) {
 
+      this.fileList.splice(index, 1);
 
+    },
 
+  },
 
+});
 
+
 
+export default UploadVideo;
 
+</script>
 
+<style lang="scss" scoped>
 
+@import "@/assets/common-style/frame.scss";
 
+.upload-video {
 
+  width: 100%;
 
+  padding: 0 10%;
 
+  .gray-font {
 
+    color: gray;
 
+  }
 
+  .upload-box {
 
+    cursor: pointer;
 
+    background: rgb(250, 250, 250);
 
+    border: 2px dashed rgb(212, 210, 210);
 
+    border-radius: 6px;
 
+    transition: all 0.3s;
 
+    padding-bottom: 10px;
 
+    position: relative;
 
+    i {
 
+      color: rgb(168, 167, 167);
 
+      display: block;
 
+      font-size: 60px;
 
+    }
 
+    i,
 
+    p {
 
+      text-align: center;
 
+      transition: all 0.3s;
 
+    }
 
+    // 选择文件
 
+    .upload-input {
 
+      position: absolute;
 
+      display: block;
 
+      width: 100%;
 
+      height: 100%;
 
+      opacity: 0;
 
+      cursor: pointer;
 
+    }
 
+  }
 
+  .upload-box:hover {
 
+    i,
 
+    p {
 
+      color: #39a4ff !important;
 
+    }
 
+    border-color: #39a4ff;
 
+  }
 
+  .upload-list {
 
+    overflow: hidden;
 
+    .list-item {
 
+      margin-top: 10px;
 
+      .icon-paper-clip {
 
+        width: 14px;
 
+        font-size: 12px;
 
+        float: left;
 
+        padding-top: 3px;
 
+      }
 
+      p {
 
+        float: left;
 
+        width: calc(100% - 14px);
 
+        overflow: hidden;
 
+        .icon-guanbi {
 
+          display: block;
 
+          float: right;
 
+          font-size: 13px;
 
+          cursor: pointer;
 
+          &:hover {
 
+            color: rgb(248, 10, 157);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .footer-num {
 
+    position: relative;
 
+    top: 56px;
 
+  }
 
+}
 
+</style>

+ 20 - 1
src/views/material/picture.vue
查看文件 

@@ -2,6 +2,7 @@
 
   <div class="picture">
 
     <div class="title-box-common">
 
       <h3>图片库</h3>
 
+      <a-button type="primary" @click="uploadVisible = true">上传</a-button>
 
     </div>
 
     <div class="padding-box-common">
 
       <search :materialType="'picture'" @search="onSearch"></search>
 
@@ -10,12 +11,24 @@
 
         :searchForm="searchForm"
 
       ></common-table>
 
     </div>
 
+    <a-modal
 
+      width="40%"
 
+      :title="`上传图片至${
 
+        searchForm.is_pubilc === 1 ? '公共素材' : '个人素材'
 
+      }`"
 
+      v-model:visible="uploadVisible"
 
+      :confirm-loading="confirmLoading"
 
+      @ok="onConfirmUpload"
 
+    >
 
+      <upload-image v-if="uploadVisible"></upload-image>
 
+    </a-modal>
 
   </div>
 
 </template>
 
 
 <script lang="ts">
 
 import Search from "./component/search.vue";
 
 import CommonTable from "./component/common-table.vue";
 
+import UploadImage from "./component/upload-image.vue";
 
 import usePagination from "@/hooks/usePagination";
 
 import { defineComponent, reactive, toRefs, ref } from "vue";
 
 import { onBeforeRouteUpdate } from "vue-router";
 
@@ -24,12 +37,14 @@ import { onBeforeRouteUpdate } from "vue-router";
 
 import { deletePromotion } from "@/api";
 
 import { message } from "ant-design-vue";
 
 const ImageLibrary = defineComponent({
 
-  components: { Search, CommonTable },
 
+  components: { Search, CommonTable, UploadImage },
 
   setup() {
 
     let { tablePageOptions } = usePagination();
 
     const formRef = ref();
 
     const state = reactive({
 
       searchForm: {},
 
+      uploadVisible: false,
 
+      confirmLoading: false, // 上传视频按钮loading
 
     });
 
     return { ...toRefs(state), formRef, tablePageOptions };
 
   },
 
@@ -40,6 +55,10 @@ const ImageLibrary = defineComponent({
 
       console.log(param);
 
       this.searchForm = param;
 
     },
 
+    // 确定上传 触发组件上传视频
 
+    onConfirmUpload() {
 
+      this.confirmLoading = true;
 
+    },
 
   },
 
 });

+ 20 - 1
src/views/material/video.vue
查看文件 

@@ -2,6 +2,7 @@
 
   <div class="video">
 
     <div class="title-box-common">
 
       <h3>视频库</h3>
 
+      <a-button type="primary" @click="uploadVisible = true">上传</a-button>
 
     </div>
 
     <div class="padding-box-common">
 
       <search :materialType="'video'" @search="onSearch"></search>
 
@@ -10,12 +11,24 @@
 
         :searchForm="searchForm"
 
       ></common-table>
 
     </div>
 
+    <a-modal
 
+      width="40%"
 
+      :title="`上传视频至${
 
+        searchForm.is_pubilc === 1 ? '公共素材' : '个人素材'
 
+      }`"
 
+      v-model:visible="uploadVisible"
 
+      :confirm-loading="confirmLoading"
 
+      @ok="onConfirmUpload"
 
+    >
 
+      <upload-video v-if="uploadVisible"></upload-video>
 
+    </a-modal>
 
   </div>
 
 </template>
 
 
 <script lang="ts">
 
 import Search from "./component/search.vue";
 
 import CommonTable from "./component/common-table.vue";
 
+import UploadVideo from "./component/upload-video.vue";
 
 import usePagination from "@/hooks/usePagination";
 
 import { defineComponent, reactive, toRefs, ref } from "vue";
 
 import { onBeforeRouteUpdate } from "vue-router";
 
@@ -24,12 +37,14 @@ import { onBeforeRouteUpdate } from "vue-router";
 
 import { deletePromotion } from "@/api";
 
 import { message } from "ant-design-vue";
 
 const VideoLibrary = defineComponent({
 
-  components: { Search, CommonTable },
 
+  components: { Search, CommonTable, UploadVideo },
 
   setup() {
 
     let { tablePageOptions } = usePagination();
 
     const formRef = ref();
 
     const state = reactive({
 
       searchForm: {},
 
+      uploadVisible: false,
 
+      confirmLoading: false, // 上传视频按钮loading
 
     });
 
     return { ...toRefs(state), formRef, tablePageOptions };
 
   },
 
@@ -40,6 +55,10 @@ const VideoLibrary = defineComponent({
 
       console.log(param);
 
       this.searchForm = param;
 
     },
 
+    // 确定上传 触发组件上传视频
 
+    onConfirmUpload() {
 
+      this.confirmLoading = true;
 
+    },
 
   },
 
 });