zhuxinbo 4 lat temu
rodzic
commit
8437bc890b
1 zmienionych plików z 161 dodań i 12 usunięć
  1. 161 12
      src/views/modules/BatchCreate/components/material.vue

+ 161 - 12
src/views/modules/BatchCreate/components/material.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="input-item material-creat">
-    <a-form-item class="row-item">
-      <a-radio-group v-model="materialType" @change="materialTypeChange" class="row-item">
+    <a-form-item>
+      <a-radio-group v-model="materialType" @change="materialTypeChange" style="margin-bottom: 32px;">
         <a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
           <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
         </a-badge>
@@ -36,6 +36,7 @@
             <a-row>
               <a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
                 <a-card title :ref="item">
+                  {{item}}
                   <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
                   <div style="clear:both"></div>
                   <div class="dynamically_add_form_item">
@@ -56,7 +57,7 @@
                       <!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
                         :bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
                         :accessKeySecret="accessKeySecret"></upload-to-ali> -->
-                      <uploadFile :value.sync="item.imageUrl" :fileCount="1" uploadType="image" :multiple="false" />
+                      <a @click="getImageList(item)">选择图片</a>
                     </a-form-item>
 
                     <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
@@ -95,8 +96,53 @@
       </div>
     </div>
     <!-- 创建大图横图创意 -->
+
     <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
+      <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
+      <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
+        <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
+          <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
+
+            <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
+                  您的浏览器不支持 video 标签。
+                </video> -->
+            <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
+
+              <video v-if="materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || materialType ==
+          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'" class="video" :src="item.videoUrl" controls="controls"
+                style="width:100%;margin-left: -8px;">
+                您的浏览器不支持 video 标签。
+              </video>
+              <img v-else :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
+            </a-checkbox>
+            <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
+          </li>
+        </a-checkbox-group>
+      </ul>
+      <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
+        <img
+          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
+          alt="" v-if="!loadingVideoList" />
+        <img v-else src="@/views/modules/material/loading.gif" />
+      </div>
+
+      <!-- <ul class="actor-photo-list">
+          <a-checkbox-group v-model="checkArr" style="width:100%;  display: flex;padding-left: 0;"
+            @change="onChangeCheck">
+            <li v-for="(item, index) of dataSource" :key="index">
+              <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
 
+              </a-checkbox>
+            </li>
+          </a-checkbox-group>
+        </ul> -->
+      <div style="text-align:right">
+        <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
+          showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
+          @change="getDataSource" />
+      </div>
+    </a-modal>
+    <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemalImage" @ok="handleOkShow" :width="1000">
       <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
       <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
         <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
@@ -106,9 +152,10 @@
                   您的浏览器不支持 video 标签。
                 </video> -->
             <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
-              <img :src="item.coverUrl" alt="" style="width:100%;margin-bottom:10px">
+
+              <img :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
             </a-checkbox>
-            <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
+            <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
           </li>
         </a-checkbox-group>
       </ul>
@@ -158,6 +205,7 @@
   import moment from 'moment'
   import AFormItem from 'ant-design-vue/es/form/FormItem'
   import $ from 'jquery'
+  import qs from 'qs'
   export default {
     name: 'BaseForm',
     props: {
@@ -184,6 +232,7 @@
         visibleVideo: false,
         videoUrlShow: "",
         dataSource: [],
+        loadingVideoList: false,
         time: [],
         checkVideo: [],
         labelCol: {
@@ -262,6 +311,39 @@
       }
     },
     methods: {
+      getDataSource(page, pageSize) {
+        this.ipagination.current = page
+        var params = {}
+        params.accountId = "1649600126891015"
+        params.pageSize = this.ipagination.pageSize
+        params.pageNo = page
+        if (this.time.length > 0) {
+          params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
+          params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+        }
+        if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
+          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          this.showVideoList('/bytedance/batch/getVideoList', params)
+        } else {
+          this.showVideoList('/bytedance/batch/getImageList', params)
+        }
+      },
+      getImageList(item) {
+        this.checkVideo = []
+        this.nowItem = item
+        this.visibleMatemal = true
+
+        this.ipagination.current = 1
+        var params = {}
+        params.accountId = '1649600126891015'
+        params.pageSize = this.ipagination.pageSize
+        params.pageNo = this.ipagination.current
+        if (this.time.length > 0) {
+          params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
+          params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+        }
+        this.showVideoList('/bytedance/batch/getImageList', params)
+      },
       onChangeVideo() {
         if (this.checkVideo.length > 1) {
           this.checkVideo.shift()
@@ -272,22 +354,54 @@
         this.videoUrlShow = item.url
       },
       handleOkShow() {
+        this.visibleMatemal = false
+        if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
+          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
 
+          this.nowItem.videoId = this.checkVideo[0].id
+          this.nowItem.videoUrl = this.checkVideo[0].videoUrl
+        } else {
+          this.nowItem.imageId = this.checkVideo[0].id
+          this.nowItem.imageUrl = this.checkVideo[0].imageUrl
+        }
       },
       getVideoList(item) {
         this.checkVideo = []
+        this.nowItem = item
+        this.visibleMatemal = true
+
+        this.ipagination.current = 1
+        var params = {}
+        params.accountId = '1649600126891015'
+        params.pageSize = this.ipagination.pageSize
+        params.pageNo = this.ipagination.current
+        if (this.time.length > 0) {
+          params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
+          params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+        }
         if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
           'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
-          console.log('video', item)
-          this.nowItem = item
-          this.visibleMatemal = true
+
+          this.showVideoList('/bytedance/batch/getVideoList', params)
         } else {
-          console.log('image', item)
-          this.nowItem = item
-          this.visibleMatemal = true
+          this.showVideoList('/bytedance/batch/getImageList', params)
         }
 
       },
+      showVideoList(url, params) {
+        this.dataSource = []
+        this.loadingVideoList = true
+
+        getAction(url, params).then(res => {
+          if (res.success) {
+            this.dataSource = res.result.records
+            this.ipagination.total = res.result.total
+            this.loadingVideoList = false
+          } else {
+            this.loadingVideoList = false
+          }
+        })
+      },
       judge(item) {
         var re = /{(.*?)}/g
         var array = []
@@ -458,9 +572,11 @@
           this.HorizontalLargeImageListSmall.push({
             typeCode: type,
             imageUrl: '',
+            imageId: '',
             text: '',
             textIds: [],
             vadioUrl: '',
+            videoId: '',
             multiple: [],
             countTag: 0,
             many: 3,
@@ -472,9 +588,11 @@
           this.HorizontalLargeImageListBig.push({
             typeCode: type,
             imageUrl: '',
+            imageId: '',
             text: '',
             textIds: [],
             vadioUrl: '',
+            videoId: '',
             multiple: [],
             countTag: 0,
             many: 3,
@@ -487,9 +605,11 @@
             creativeType: this.creativeType,
             typeCode: type,
             imageUrl: '',
+            imageId: '',
             text: '',
             textIds: [],
             vadioUrl: '',
+            videoId: '',
             multiple: [],
             countTag: 0,
             many: 3,
@@ -502,9 +622,11 @@
             creativeType: this.creativeType,
             typeCode: type,
             imageUrl: '',
+            imageId: '',
             text: '',
             textIds: [],
             vadioUrl: '',
+            videoId: '',
             multiple: [],
             countTag: 0,
             many: 3,
@@ -517,9 +639,11 @@
             creativeType: this.creativeType,
             typeCode: type,
             imageUrl: '',
+            imageId: '',
             text: '',
             textIds: [],
             vadioUrl: '',
+            videoId: '',
             multiple: [],
             countTag: 0,
             many: 3,
@@ -532,9 +656,11 @@
             creativeType: this.creativeType,
             typeCode: type,
             imageUrl: '',
+            imageId: '',
             text: '',
             textIds: [],
             vadioUrl: '',
+            videoId: '',
             multiple: [],
             countTag: 0,
             many: 3,
@@ -596,7 +722,26 @@
         if (!n) {
           closeAllVideoFun()
         }
-      }
+      },
+      time(n, o) {
+        console.log(n)
+        if (n.length > 0) {
+          var params = {}
+          params.accountId = "1649600126891015"
+          params.pageSize = this.ipagination.pageSize
+          params.pageNo = 1
+          params.startDate = moment(n[0]).format('YYYY-MM-DD')
+          params.endDate = moment(n[1]).format('YYYY-MM-DD')
+          this.showVideoList('/bytedance/batch/getVideoList', params)
+        } else {
+          var params = {}
+          params.accountId = "1649600126891015"
+          params.pageSize = this.ipagination.pageSize
+          params.pageNo = 1
+          this.ipagination.current = 1
+          this.showVideoList('/bytedance/batch/getVideoList', params)
+        }
+      },
     },
     computed: {
       count: function () {
@@ -664,6 +809,10 @@
     .ant-layout {
       background: white;
     }
+
+    .ant-scroll-number {
+      z-index: 1000;
+    }
   }
 
   .dynamically_add_form_item {