朱鑫波 4 gadi atpakaļ
vecāks
revīzija
8d7c222354

+ 344 - 0
src/components/uploadFileMd5Push.vue

@@ -0,0 +1,344 @@
+<style>
+</style>
+<style lang="scss">
+.md5-file {
+  width: 100%;
+  height: 100%;
+}
+.md5-file .ant-upload-picture-card-wrapper {
+  height: 100% !important;
+}
+.md5-file .ant-upload.ant-upload-select-picture-card {
+  height: 100% !important;
+  width: 100%;
+}
+</style>
+<template>
+  <div class="upload-file md5-file">
+    <a-upload
+      name="file"
+      :multiple="multiple"
+      list-type="picture-card"
+      class="avatar-uploader"
+      action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/"
+      :before-upload="beforeUpload"
+      @change="handleChange"
+      :accept="uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/jpg' : 'mp4')"
+      :file-list="fileList"
+      :remove="removeFile"
+      @preview="handlePreview"
+      :disabled="loadingElse || disabled"
+    >
+      <div v-if="fileList.length < fileCount || fileList.length < 1">
+        <a-progress v-if="loadingElse" :percent="percent" :show-info="false" />
+        <div>点击上传</div>
+      </div>
+    </a-upload>
+    <!-- <div style="color: red" v-if="sizeCheck">
+      {{ uploadType == 'image' ? '请上传jpg格式的图片,并且大小在2m之内' : '请上传mp4格式,大小在100m之内' }}
+    </div> -->
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType == 'image'" />
+      <video :src="previewImage" v-else style="width: 100%" controls="controls">您的浏览器不支持 video 标签。</video>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+import { mapGetters } from 'vuex'
+import moment from 'moment'
+
+import BMF from 'browser-md5-file'
+
+import qs from 'qs'
+var COS = require('cos-js-sdk-v5')
+var cos = new COS({
+  SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+  SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
+})
+var i = 0
+const oneKB = 1024
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result)
+    reader.onerror = (error) => reject(error)
+  })
+}
+export default {
+  name: 'upload-file',
+  components: {},
+  props: {
+    uploadType: {
+      //上传类型  值为  image/video,同时目录名称也是这样
+      type: String,
+      default() {
+        return 'image'
+      },
+    },
+    multiple: {
+      // true 可以批量上传  false 不可以
+      type: Boolean,
+      default() {
+        return true
+      },
+    },
+    fileCount: {
+      //最大上传数量
+      type: Number,
+      default() {
+        return 10
+      },
+    },
+    checkFile: {
+      //返回promise方法,判读文件是否上传过,进行上传拦截
+      type: Function,
+      default() {
+        return Promise.resolve()
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    value: {
+      required: true,
+      default() {
+        return ''
+      },
+    },
+    size: {
+      type: Number,
+      default() {
+        if (this.sizeCheck) {
+          if (this.uploadType == 'image') {
+            return 2048
+          } else {
+            return 102400
+          }
+        }
+      },
+    },
+    sizeCheck: {
+      type: Boolean,
+      default() {
+        return true
+      },
+    },
+    onOversize: {
+      type: Function,
+      default() {
+        alert(`请选择${this.size}KB内的文件!`)
+      },
+    },
+  },
+  data() {
+    return {
+      fileList: [],
+      loadingElse: false,
+      imageUrl: '',
+      percent: 0,
+      previewVisible: false,
+      previewImage: '',
+      md5: '',
+    }
+  },
+  filters: {},
+  computed: {},
+  mounted() {},
+  watch: {
+    //    fileListAll
+    // value: {
+    //   immediate: true,
+    //   handler(n, o) {
+    //     this.$nextTick(() => {
+    //       if (this.fileList && this.fileList.length == 0) {
+    //         if (typeof n == 'object') {
+    //           this.fileList = n.map((item, index) => {
+    //             return {
+    //               uid: index + 1,
+    //               name: index + 1,
+    //               status: 'done',
+    //               url: item,
+    //             }
+    //           })
+    //         } else {
+    //           if (n == '') {
+    //             this.fileList = []
+    //           } else {
+    //             this.fileList = [
+    //               {
+    //                 uid: 1,
+    //                 name: 1,
+    //                 status: 'done',
+    //                 url: n,
+    //               },
+    //             ]
+    //           }
+    //         }
+    //       } else {
+    //         if (n.length == 0 || n == '') {
+    //           this.clearAll()
+    //         }
+    //       }
+    //     })
+    //   },
+    //   deep: true,
+    // },
+  },
+  methods: {
+    handleCancel() {
+      closeAllVideoFun()
+      this.previewVisible = false
+    },
+    handleChange(info) {
+      if (info.file.status === 'uploading') {
+        this.loading = true
+        return
+      }
+      if (info.file.status === 'done') {
+        // Get this url from response in real world.
+        getBase64(info.file.originFileObj, (imageUrl) => {
+          this.imageUrl = imageUrl
+          this.loading = false
+        })
+      }
+    },
+    removeFile(file) {
+      // console.log(file)
+      var index = this.fileList.findIndex((v) => v.uid === file.uid)
+      this.fileList.splice(index, 1)
+      this.$emit('removeUpload', file)
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj)
+      }
+      this.previewImage = file.url || file.preview
+      this.previewVisible = true
+    },
+    beforeUpload(file) {
+      this.percent = 0
+      this.loadingElse = true
+      const fileOvesize = file.size > this.size * oneKB
+      // console.log(fileOvesize)
+      if (fileOvesize && this.sizeCheck) {
+        this.onOversize()
+        this.loadingElse = false
+        return
+      } else {
+        this.checkFile(file)
+          .then((res) => {
+            this.md5 = res
+            this.cosUpload(file)
+          })
+          .catch(() => {
+            this.loadingElse = false
+          })
+        return new Promise(function (resolve, reject) {
+          reject()
+        })
+      }
+    },
+    clearAll() {
+      this.fileList = []
+    },
+    cosUpload(file) {
+      var that = this
+      let date = new Date()
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      var timeElse = new Date().getTime()
+      var arr = file.name.split('.')
+
+      var str = ''
+      for (let i = 0; i < arr.length; i++) {
+        if (i == arr.length - 1) {
+        } else {
+          if (i == arr.length - 2) {
+            str += arr[i]
+          } else {
+            str += arr[i] + '.'
+          }
+        }
+      }
+      // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
+      cos.putObject(
+        {
+          Bucket: 'media-1301855440',
+          /* 必须 */
+          Region: 'ap-chongqing',
+          /* 存储桶所在地域,必须字段 */
+          Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
+          /* 必须 */
+          StorageClass: 'STANDARD',
+          Body: file, // 上传文件对象
+          onProgress: function (progressData) {
+            //进度条方法
+
+            that.percent = progressData.percent * 100
+          },
+          onTaskReady: function (tid) {
+            // console.log('onTaskReady', tid);
+          },
+          onTaskStart: function (info) {
+            //开始上传
+            // console.log('onTaskStart', info);
+          },
+        },
+        function (err, data) {
+          if (err) {
+            that.loadingElse = false
+            that.$message.error('上传失败!!!' + err)
+            return
+          }
+          // alert('成功')
+          that.loadingElse = false
+          if (that.fileList.length < that.fileCount) {
+            that.fileList.push({
+              uid: file.name,
+              name: file.name,
+              status: 'done',
+              url: '//' + data.Location,
+            })
+
+            // that.$emit('overUpload', that.fileList.map(item => {
+            //                 return item.url
+            //               }))
+            that.$emit('overUpload', that.fileList)
+
+            if (that.multiple) {
+              that.$emit(
+                'update:value',
+                that.fileList.map((item) => {
+                  return item.url
+                })
+              )
+            } else {
+              that.$emit(
+                'update:value',
+                that.fileList.map((item) => {
+                  return { url: item.url, signature: that.md5 }
+                })[0]
+              )
+            }
+          } else {
+            that.$message.error('上传已达上限' + that.fileCount + '张')
+          }
+        }
+      )
+    },
+  },
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>

+ 88 - 32
src/views/modules/kuaishouapp/newBatch/index.vue

@@ -224,14 +224,24 @@ li.chouzhen.first:before {
                 <a-col :xl="14" :md="24">
                   <a-form-item label="单日预算">
                     {{
-                      groupTemplateId ? (unitInfo.dayBudget ? unitInfo.dayBudget + '元' : '不限') : '无'
+                      groupTemplateId
+                        ? unitInfo.dayBudget && unitInfo.dayBudget > 0
+                          ? unitInfo.dayBudget + '元'
+                          : '不限'
+                        : '无'
                     }}</a-form-item
                   >
                 </a-col>
                 <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                   <a-form-item :label="unitInfo.bidType == 1 ? '出价' : '转化目标出价'">
                     {{
-                      groupTemplateId ? (unitInfo.bidType == 1 ? unitInfo.bid + '元' : unitInfo.cpaBid + '元') : '无'
+                      groupTemplateId
+                        ? unitInfo.bidType == 1
+                          ? unitInfo.bid + '元'
+                          : unitInfo.cpaBid && unitInfo.cpaBid > 0
+                          ? unitInfo.cpaBid + '元'
+                          : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
+                        : '无'
                     }}
                   </a-form-item>
                 </a-col>
@@ -317,7 +327,7 @@ li.chouzhen.first:before {
             <a-card class="search-box step-jump" title="定向包">
               <p>
                 已选定向包: {{ checkDirectionalList.length }}/20
-                <a-button @click="directionalVisible = true" style="margin: 0 15px"> 新增定向包 </a-button
+                <a-button style="margin: 0 15px" disabled> 新增定向包 </a-button
                 ><a-button
                   type="primary"
                   @click="
@@ -439,7 +449,13 @@ li.chouzhen.first:before {
                         <img :src="items.photoId.coverUrl" style="width: auto; height: 100%" alt="" srcset="" />
                       </div>
                       <div style="width: 45%; height: 100%; text-align: center">
-                        <img :src="items.image.url" style="width: auto; height: 100%" alt="" srcset="" />
+                        <img
+                          v-if="items.image.url"
+                          :src="items.image.url"
+                          style="width: auto; height: 100%"
+                          alt=""
+                          srcset=""
+                        />
                       </div>
                       <a-popconfirm
                         title="确定要删除这个素材吗?"
@@ -868,6 +884,8 @@ li.chouzhen.first:before {
                 @change="
                   unitInfo.bidMin = null
                   unitInfo.bidMax = null
+                  unitInfo.cpaBid = null
+                  unitInfo.bid = null
                 "
               >
                 <a-radio-button :value="1">固定出价</a-radio-button>
@@ -1306,7 +1324,7 @@ li.chouzhen.first:before {
             </a-form-model-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row :gutter="16" v-if="materialInfo.isMakeCover == 2">
           <a-col :span="16">
             <a-form-model-item label="设置封面数量" prop="coverNumber">
               <a-input-number
@@ -1415,13 +1433,29 @@ li.chouzhen.first:before {
                     >
                       <div
                         style="width: 40%; height: 100%; display: flex; justify-content: space-between"
-                        v-if="items.image.url"
+                        v-if="items.photoId.coverUrl"
                       >
                         <div style="width: 45%; height: 100%">
                           <img :src="items.photoId.coverUrl" style="width: 100%; height: auto" alt="" srcset="" />
                         </div>
                         <div style="width: 45%; height: 100%">
-                          <img :src="items.image.url" style="width: 100%; height: auto" alt="" srcset="" />
+                          <img
+                            v-if="items.image.url"
+                            :src="items.image.url"
+                            style="width: 100%; height: auto"
+                            alt=""
+                            srcset=""
+                          />
+                          <uploadFile
+                            v-else
+                            :value.sync="items.image"
+                            :checkFile="fileWater"
+                            @overUpload="overUploadImage"
+                            @removeUpload="deleteImage"
+                            :fileCount="1"
+                            uploadType="image"
+                            :multiple="false"
+                          />
                         </div>
                       </div>
                       <div style="width: 55%; height: 100%; line-height: 1">
@@ -1670,7 +1704,7 @@ li.chouzhen.first:before {
             <div style="margin-bottom: 30px">
               <span style="display: inline-block; width: 140px">选择应用</span>
               广告计划:{{ campaignCount }} &nbsp;&nbsp;&nbsp;&nbsp;广告组数量:{{
-                checkDirectionalList.length * materialInfo.materialList.length 
+                checkDirectionalList.length * materialInfo.materialList.length
               }}
               <a-card style="min-height: 300px; margin-top: 15px">
                 <a-transfer
@@ -1778,6 +1812,8 @@ import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
 import moment from 'moment'
 import selectCheckAll from '@/components/formComponents/toutiaoTime'
 import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
+import uploadFile from '@/components/uploadFileMd5Push.vue'
+import BMF from 'browser-md5-file'
 function tqFun(qcArr1) {
   var tempArr = []
   function bbFun(qcArr) {
@@ -1827,6 +1863,7 @@ export default {
     Treeselect,
     selectCheckAll,
     checkBoxGroup,
+    uploadFile,
   },
   mixins: [mixin],
   props: {
@@ -2216,6 +2253,21 @@ export default {
     })
   },
   methods: {
+    overUploadImage(urlAll) {
+      var that = this
+      console.log(urlAll)
+    },
+    deleteImage() {},
+    fileWater(file) {
+      var bmf = new BMF()
+      var that = this
+      return new Promise(function (resolve, reject) {
+        bmf.md5(file, (err, md5) => {
+          resolve(md5)
+        })
+      })
+    },
+
     okAppId() {},
     setCount(e) {
       if (e.target.value == 1) {
@@ -2279,10 +2331,7 @@ export default {
     },
 
     checkAppIds() {
-      if (
-        this.campaignCount == 0 ||
-        this.checkDirectionalList.length * this.materialInfo.materialList.length == 0
-      ) {
+      if (this.campaignCount == 0 || this.checkDirectionalList.length * this.materialInfo.materialList.length == 0) {
         this.$message.error('请先完成以上操作,再进行此步骤')
         return
       } else {
@@ -2419,13 +2468,14 @@ export default {
     handleOkVideo() {
       this.$refs.materialForm.validate((valid) => {
         if (valid) {
-          console.log(this.materialInfo)
           this.materialVisible = false
           this.videoMaterialShow = true
         }
       })
     },
-    cancelVideo() {},
+    cancelVideo() {
+      this.materialInfo.materialList = []
+    },
     removeVideoMaterial(index, indexMaterial) {
       this.materialInfo.materialList[index].photoArr.splice(indexMaterial, 1)
     },
@@ -2483,18 +2533,20 @@ export default {
           this.setVideUrl(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
             this.materialInfo.materialList[i].photoArr[j].photoId = res
           })
+          if (this.materialInfo.isMakeCover == 2) {
+            this.getImageCover(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
+              setTimeout(() => {
+                if (res.length > 0) {
+                  this.materialInfo.materialList[i].photoArr[j].image =
+                    res[i % 2 == 0 ? j % this.materialInfo.coverNumber : 7 - (j % this.materialInfo.coverNumber)]
+                }
 
-          this.getImageCover(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
-            setTimeout(() => {
-              if (res.length > 0) {
-                this.materialInfo.materialList[i].photoArr[j].image =
-                  res[i % 2 == 0 ? j % this.materialInfo.coverNumber : 7 - (j % this.materialInfo.coverNumber)]
-              }
-
-              this.checkMatemalVisible = false
-              console.log(this.materialInfo.materialList)
-            }, 100)
-          })
+                this.checkMatemalVisible = false
+              }, 100)
+            })
+          } else {
+            this.checkMatemalVisible = false
+          }
         }
       }
     },
@@ -2652,6 +2704,10 @@ export default {
       this.checkDirectionalList.splice(index, 1)
     },
     directionalOk() {
+      if (this.selectionRows.length > 20) {
+        this.$message.error('最多选择20个定向包')
+        return
+      }
       this.checkDirectionalList = this.selectionRows
       this.directionalVisible = false
       this.selectedRowKeys = []
@@ -2830,7 +2886,7 @@ export default {
               accountId: this.accountId,
               systemType: this.getData('systemType', 'form'),
               campaignType: this.getData('campaignType', 'form'),
-              dayBudget: this.campaignData.dayBudget ? this.campaignData.dayBudget*1000  : null,
+              dayBudget: this.campaignData.dayBudget ? this.campaignData.dayBudget * 1000 : null,
               timeStart: this.campaignData.timeStart
                 ? moment(this.campaignData.timeStart).format('YYYY-MM-DD hh:mm:ss')
                 : null,
@@ -2849,7 +2905,7 @@ export default {
               unitType: 4,
               accountId: this.accountId,
               sceneId: this.allianceAccount == '1' ? JSON.stringify(this.unitInfo.sceneId) : JSON.stringify([5]),
-              dayBudget: this.dayBudgetType == '1' ? null : this.unitInfo.dayBudget * 1000,
+              dayBudget: this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000,
               beginTime: moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD'),
               endTime: this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null,
               scheduleTime: this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str,
@@ -2885,7 +2941,7 @@ export default {
             actionBarText: this.creativeInfo.actionBarText,
             stickerTitle: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null,
           }
-          
+
           params.materialArray = {
             materialInfo: { ...this.materialInfo },
             materialList: this.materialInfo.materialList.map((item) => {
@@ -2908,7 +2964,7 @@ export default {
             checkType: this.getData('campaignType', 'form') == 2 ? 'app' : 'url',
             appAllocation: this.appList.appAllocation, //1按账户,2按广告计划,3按广告组
             appArr: dataArr.map((item) => {
-              return { appId: item.key, siteId: item.siteId?+item.siteId:null }
+              return { appId: item.key, siteId: item.siteId ? +item.siteId : null }
             }),
             urlArr: null,
             linkAllocation: this.appList.linkAllocation,
@@ -3023,10 +3079,10 @@ export default {
           params.useAppMarket = this.unitInfo.useAppMarket ? 1 : 0
           params.appStore = this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null
 
-          params.cpaBid = this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : null
+          params.cpaBid = this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : 0
           params.bid = this.unitInfo.bid ? this.unitInfo.bid * 1000 : null
-          params.bidMax = this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : null
-          params.bidMin = this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : null
+          params.bidMax = this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : 0
+          params.bidMin = this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : 0
 
           //      allianceAccount: '1',
           // dayBudgetType: '1',