浏览代码

Merge branch 'test-2' of http://git.tjyourong.com.cn/ctop/adsp-vue into test-2

魏志佳 4 年之前
父节点
当前提交
2a59ee6465

+ 12 - 4
src/components/layouts/UserLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="userLayout" :class="['user-layout-wrapper', device]">
-    <div class="container">
-      <div class="top" style="margin-bottom:30px">
+    <div class="container"  v-if="showTitle">
+      <div class="top" style="margin-bottom: 30px" >
         <div class="header">
           <a href="/">
             <img src="~@/assets/logo.png" class="logo" alt="logo" style="height: 50px" />
@@ -24,6 +24,7 @@
         <div class="copyright">Copyright &copy; 2019 上海有腾</div>
       </div>
     </div>
+    <route-view v-else></route-view>
   </div>
 </template>
 
@@ -36,14 +37,21 @@ export default {
   components: { RouteView },
   mixins: [mixinDevice],
   data() {
-    return {}
+    return {
+      showTitle: true,
+    }
   },
   mounted() {
     document.body.classList.add('userLayout')
+    if (this.$route.path == '/user/new-batch'||this.$route.path=='/user/lookPreview') {
+      this.showTitle = false
+    } else {
+      this.showTitle = true
+    }
   },
   beforeDestroy() {
     document.body.classList.remove('userLayout')
-  }
+  },
 }
 </script>
 

+ 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>

+ 13 - 3
src/config/router.config.js

@@ -1,4 +1,4 @@
-import {UserLayout, TabLayout, RouteView, BlankLayout, PageView} from '@/components/layouts'
+import { UserLayout, TabLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
 
 /**
  * 走菜单,走权限控制
@@ -10,7 +10,7 @@ export const asyncRouterMap = [
     path: '/',
     name: 'dashboard',
     component: TabLayout,
-    meta: {title: '首页'},
+    meta: { title: '首页' },
     redirect: '/dashboard/workplace',
     children: []
   },
@@ -65,6 +65,16 @@ export const constantRouterMap = [
         name: 'FStransfer',
         component: () => import(/* webpackChunkName: "fail" */ '@/views/user/FStransfer')
       },
+      {
+        path: 'new-batch',
+        name: 'newBatch',
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/modules/kuaishouapp/newBatch')
+      },
+      {
+        path: 'lookPreview',
+        name: 'lookPreview',
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/modules/kuaishouapp/newBatch/lookPreview')
+      }
     ]
   },
 
@@ -90,5 +100,5 @@ export const constantRouterMap = [
     name: 'errorPage',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/errorPage')
   },
-  
+
 ]

+ 55 - 0
src/filters.js

@@ -256,6 +256,61 @@ const filters = {
 
         return data[val]
     },
+    //快手年龄
+    kuaishouAge(val) {
+        var data = {
+            18: '18-23岁',//'等于',
+            24: '24-30岁',//不等于,
+            31: '31-40岁',//大于
+            41: '41-49岁',//小于
+            50: '50+',//大于等于
+        }
+
+        return data[val]
+    },
+    //快手手机价格
+    kuaishouPrice(val) {
+        var data = {
+            1: '1500以下',
+            2: '1501~2000',
+            3: '2001~2500',
+            4: '2501~3000',
+            5: '3001~3500',
+            6: '3501~4000',
+            7: '4001~4500',
+            8: '4501~5000',
+            9: '5001~5500',
+            10: '5500以上',
+        }
+
+        return data[val]
+    },
+    //快手过滤以转化用户
+    kuaishouFilterConvertedLevel(val) {
+        var data = {
+            0: '不限',
+            1: '广告组',
+            2: '广告计划',
+            3: '本账户',
+            4: '公司主体',
+            5: 'APP'
+        }
+
+        return data[val]
+    },
+    //场景广告位
+    kuaishouSceneId(val) {
+        var data = {
+            1: '优选广告位',
+            3: '视频播放页广告',
+            6: '上下滑大屏广告',
+            7: '信息流广告',
+            5: "联盟广告"
+        }
+
+        return data[val]
+    },
+
 }
 
 // 获取当前月的第一天

+ 16 - 12
src/permission.js

@@ -4,44 +4,48 @@ import store from './store'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import notification from 'ant-design-vue/es/notification'
-import {ACCESS_TOKEN} from '@/store/mutation-types'
-import {generateIndexRouter} from "@/utils/util"
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { generateIndexRouter } from "@/utils/util"
 
-NProgress.configure({showSpinner: false}) // NProgress Configuration
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 
-const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration','/user/transfer-local','/errorPage','http://192.168.0.111:8088/jeecg-boot/sys/feishu/url','/user/FStransfer'] // no redirect whitelist
+const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration', '/user/transfer-local', '/errorPage', '/user/new-batch', '/user/lookPreview', 'http://192.168.0.111:8088/jeecg-boot/sys/feishu/url', '/user/FStransfer'] // no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
-
+  //if (whiteList.indexOf(to.path) !== -1) {
+    // 在免登录白名单,直接进入
+   // next()
+ //}
   if (Vue.ls.get(ACCESS_TOKEN)) {
     /* has token */
+
     if (to.path === '/user/login') {
-      next({path: '/dashboard/workplace'})
+      next({ path: '/dashboard/workplace' })
       NProgress.done()
     } else {
       if (store.getters.permissionList.length === 0) {
         store.dispatch('GetPermissionList').then(res => {
           const menuData = res.result.menu;
-          localStorage.setItem("roleCode",res.result.roleCode)
+          localStorage.setItem("roleCode", res.result.roleCode)
           if (menuData === null || menuData === "" || menuData === undefined) {
             return;
           }
           let constRoutes = [];
           constRoutes = generateIndexRouter(menuData);
           // 添加主界面路由
-          store.dispatch('UpdateAppRouter', {constRoutes}).then(() => {
+          store.dispatch('UpdateAppRouter', { constRoutes }).then(() => {
             // 根据roles权限生成可访问的路由表
             // 动态添加可访问路由表
             router.addRoutes(store.getters.addRouters)
             const redirect = decodeURIComponent(from.query.redirect || to.path)
             if (to.path === redirect) {
               // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
-              next({...to, replace: true})
+              next({ ...to, replace: true })
             } else {
               // 跳转到目的路由
-              next({path: redirect})
+              next({ path: redirect })
             }
           })
         })
@@ -51,7 +55,7 @@ router.beforeEach((to, from, next) => {
                description: '请求用户信息失败,请重试!'
              })*/
             store.dispatch('Logout').then(() => {
-              next({path: '/user/login', query: {redirect: to.fullPath}})
+              next({ path: '/user/login', query: { redirect: to.fullPath } })
             })
           })
       } else {
@@ -63,7 +67,7 @@ router.beforeEach((to, from, next) => {
       // 在免登录白名单,直接进入
       next()
     } else {
-      next({path: '/user/login', query: {redirect: to.fullPath}})
+      next({ path: '/user/login', query: { redirect: to.fullPath } })
       NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
   }

+ 4 - 4
src/views/modules/kuaishouapp/account/stepForm/Step4.vue

@@ -63,8 +63,8 @@
 .display-none-selset {
   display: none !important;
 }
-.only-step4 .ant-form-item-label {
-  text-align: left;
+.only-step4 .ant-form-item-label {
+  text-align: left;
 }
 </style>
 <style scoped lang="scss">
@@ -262,8 +262,8 @@ li.chouzhen.first:before {
                             >推荐封面</a
                           >
                           <br />
-                          <span v-for="(item, deleteIndex) of item.imageList" style="position: relative">
-                            <img :src="item.url" style="width: 18%; margin: 1%" :key="item.url" />
+                          <span v-for="(itemImg, deleteIndex) of item.imageList" style="position: relative">
+                            <img :src="itemImg.url" style="width: 18%; margin: 1%" :key="itemImg.url" />
                             <a-icon
                               type="close-circle"
                               @click="deleteData(index, bestIndex, deleteIndex)"

+ 44 - 38
src/views/modules/kuaishouapp/account/stepForm/stepModule/test.vue

@@ -3,10 +3,10 @@
     <table class="time_table table" v-on:mouseleave="mouseleave">
       <thead>
         <tr>
-          <th rowspan="2" style="width:120px">日期/时间</th>
+          <th rowspan="2" style="width: 120px">日期/时间</th>
         </tr>
         <tr>
-          <th class="unselectable" v-for="(num, index) in numData" :key="index" style="width:30px">{{ num }}</th>
+          <th class="unselectable" v-for="(num, index) in numData" :key="index" style="width: 30px">{{ num }}</th>
         </tr>
       </thead>
       <tbody>
@@ -41,8 +41,8 @@ export default {
       type: String,
       default() {
         return '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
-      }
-    }
+      },
+    },
   },
   data() {
     return {
@@ -52,39 +52,39 @@ export default {
       timeData: [
         {
           date: '周一',
-          time: []
+          time: [],
         },
         {
           date: '周二',
-          time: []
+          time: [],
         },
         {
           date: '周三',
-          time: []
+          time: [],
         },
         {
           date: '周四',
-          time: []
+          time: [],
         },
         {
           date: '周五',
-          time: []
+          time: [],
         },
         {
           date: '周六',
-          time: []
+          time: [],
         },
         {
           date: '周日',
-          time: []
-        }
+          time: [],
+        },
       ],
       selectFlag: false,
       max: {
         x: 0,
-        y: 0
+        y: 0,
       },
-      dataString: ''
+      dataString: '',
     }
   },
   methods: {
@@ -102,7 +102,7 @@ export default {
     showOne(index, key) {
       //   this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
     },
-    mousedown: function(index, key) {
+    mousedown: function (index, key) {
       this.selectStart = []
       this.selectFlag = true
       if (this.timeData[index].time[key].value == false) {
@@ -114,10 +114,10 @@ export default {
       }
       this.selectStart.push({
         index: index,
-        key: key
+        key: key,
       })
     },
-    mouseover: function(index, key) {
+    mouseover: function (index, key) {
       // x 垂直方向  y 水平方向
       if (this.selectFlag) {
         if (index >= this.max.x) {
@@ -128,11 +128,11 @@ export default {
         }
         var start = {
           x: this.selectStart[0].index,
-          y: this.selectStart[0].key
+          y: this.selectStart[0].key,
         }
         var end = {
           x: index,
-          y: key
+          y: key,
         }
         for (var i = end.x; i <= this.max.x; i++) {
           for (var j = end.y; j <= this.max.y; j++) {
@@ -153,14 +153,14 @@ export default {
         }
       }
     },
-    mouseup: function(index, key) {
+    mouseup: function (index, key) {
       var start = {
         x: this.selectStart[0].index,
-        y: this.selectStart[0].key
+        y: this.selectStart[0].key,
       }
       var end = {
         x: index,
-        y: key
+        y: key,
       }
       /* 渲染选中的区域 */
       var data = []
@@ -179,7 +179,7 @@ export default {
         this.timeData[5].time,
         this.timeData[6].time
       )
-      this.dataString = arr.map(item => {
+      this.dataString = arr.map((item) => {
         if (item.isSelected) {
           return 1
         } else {
@@ -191,10 +191,10 @@ export default {
       this.selectFlag = false
       this.max = {
         x: 0,
-        y: 0
+        y: 0,
       }
     },
-    mouseleave: function() {
+    mouseleave: function () {
       this.selectFlag = false
     },
     setItemDate(sum) {
@@ -216,37 +216,43 @@ export default {
       }
     },
     init() {
-      var str = this.scheduleTime
+      var str = ''
+      if (this.scheduleTime) {
+        str = this.scheduleTime
+      } else {
+        str =
+          '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
+      }
       var arr = str.split('')
       this.timeData = [
         {
           date: '周一',
-          time: []
+          time: [],
         },
         {
           date: '周二',
-          time: []
+          time: [],
         },
         {
           date: '周三',
-          time: []
+          time: [],
         },
         {
           date: '周四',
-          time: []
+          time: [],
         },
         {
           date: '周五',
-          time: []
+          time: [],
         },
         {
           date: '周六',
-          time: []
+          time: [],
         },
         {
           date: '周日',
-          time: []
-        }
+          time: [],
+        },
       ]
       for (let i = 0; i < arr.length; i++) {
         if (i < 24) {
@@ -265,16 +271,16 @@ export default {
           this.timeData[6].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
         }
       }
-    }
+    },
   },
   watch: {
     scheduleTime: {
       immediate: true, // immediate选项可以开启首次赋值监听
       handler(newVal, oldVal) {
         this.init()
-      }
-    }
-  }
+      },
+    },
+  },
 }
 </script>
 

+ 9 - 1
src/views/modules/kuaishouapp/batchCreation/campaignList.vue

@@ -15,6 +15,7 @@
       <a-col :span="24" style="display: flex">
         <Treeselect :appId.sync="appId" :multiple="false" request="2,4" ref="treeSelect" style="margin: 8px 20px" />
         <a-button type="primary" style="margin: 10px" @click="addUser">搜索</a-button>
+        <a-button type="primary" style="margin: 10px; float: right" @click="newCreat">批量创建</a-button>
       </a-col>
     </a-row>
     <a-form layout="inline">
@@ -671,6 +672,13 @@ export default {
     },
   },
   methods: {
+    newCreat() {
+      if (this.appId) {
+        window.open('/user/new-batch?accountId=' + this.appId, '_blank')
+      } else {
+        window.open('/user/new-batch', '_blank')
+      }
+    },
     getUnitData() {
       this.addUser()
       this.allUnitCopy = false
@@ -882,7 +890,7 @@ export default {
       if (this.appId) {
         this.getSpend(params)
         this.getCampaignList(params)
-        localStorage.setItem('campaignAccountId',this.appId)
+        localStorage.setItem('campaignAccountId', this.appId)
       } else {
         this.$message.error('请选择账户')
       }

+ 1 - 1
src/views/modules/kuaishouapp/batchCreation/creat/creatUnit.vue

@@ -2348,7 +2348,7 @@ export default {
         viewComp: 7,
       }).then((res) => {
         if (res.success) {
-          this.siteList = res.result
+          this.siteLiRst = res.result
           if (this.siteList.length > 0) {
             this.showSite = true
           }

文件差异内容过多而无法显示
+ 3563 - 0
src/views/modules/kuaishouapp/newBatch/index.vue


+ 955 - 0
src/views/modules/kuaishouapp/newBatch/lookPreview.vue

@@ -0,0 +1,955 @@
+<style scoped lang="scss">
+.chouzhen {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #e4e4e4;
+  width: calc(20% - 10px);
+  padding: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  position: relative;
+  z-index: 99;
+  float: left;
+}
+
+li.chouzhen.first:before {
+  font-size: 12px;
+  content: '首帧';
+  position: absolute;
+  top: 7px;
+  left: 5px;
+  width: 36px;
+  height: 20px;
+  color: rgb(255, 255, 255);
+  line-height: 20px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
+  z-index: 1000;
+}
+.display-none-selset {
+  display: none !important;
+}
+.logo {
+  padding-left: 24px;
+  img {
+    height: 32px !important;
+  }
+  .name {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #CED2D9;
+    // line-height: 22px;
+    margin-left: 20px;
+    padding-left: 21px;
+    position: relative;
+  }
+  .name::before {
+    content: '';
+    width: 1px;
+    height: 18px;
+    background: rgba(255, 255, 255, 0.31);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -9px;
+  }
+}
+.chartBox {
+  margin-top: 80px;
+  .chartBody {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+  .search-box {
+    margin-bottom: 20px;
+  }
+}
+</style>
+<style lang="scss">
+.hide-checkbox .ant-table-thead .ant-table-selection {
+  display: none;
+}
+.look-preview .ant-card-head-title {
+  font-weight: 700;
+}
+// .look-preview textarea {
+//   resize: none;
+//   border: none;
+//   outline: 0;
+//   box-shadow: none;
+// }
+.create-info .ant-form-item {
+  margin-bottom: 0 !important;
+}
+.fengmian .ant-checkbox-wrapper:first-child {
+  margin-left: 8px;
+}
+@media screen and (max-width: 1200px) {
+  // 这里写对应要修改的样式如:
+  .look-preview .el-step__title {
+    font-size: 12px;
+  }
+}
+.line-height-one .ant-form-item-control {
+  line-height: inherit;
+}
+.creat-all-info .ant-form-item-control {
+  width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.display-none-selset {
+  display: none !important;
+}
+</style>
+<template>
+  <div ref="questionnaireBox" class="look-preview">
+    <a-layout-header
+      class="ant-header-fixedHeader ant-header-side-opened"
+      :style="{ padding: '0' }"
+      style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
+    >
+      <div :class="['top-nav-header-index', theme]">
+        <div class="header-index-wide">
+          <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
+            <div class="logo">
+              <img src="~@/assets/logoNew1.png" alt="logo" />
+              <span class="name">有腾投放管家</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-layout-header>
+    <div style="width: 100%; padding: 0 20px" class="chartBox">
+      <a-card title="预览区">
+        <div slot="extra">
+          预估生成<span style="color: #409EFF">{{ groupCount }}</span
+          >个广告组 <a-button type="primary" style="margin: 0 15px"> 全部提交审核 </a-button>
+        </div>
+        <div v-if="campaignList">
+          <h2 style="display: flex; justify-content: space-between">
+            <span>账户id:{{ accountId }}</span
+            ><span style="font-size: 14px; font-weight: 500"
+              >广告计划数量:{{ campaignList.length }}&nbsp;&nbsp;&nbsp;&nbsp;广告组数量:{{ groupCount }}</span
+            >
+            <div>
+              <a-dropdown>
+                <a-menu slot="overlay" @click="handleMenuClick">
+                  <a-menu-item key="1" :disabled="groupCheck.length == 0">批量修改预算与出价 </a-menu-item>
+                  <a-menu-item key="2" :disabled="groupCheck.length == 0"> 批量修改监测链接 </a-menu-item>
+                </a-menu>
+                <a-button style="margin: 0 15px"> 批量修改 <a-icon type="down" /> </a-button>
+              </a-dropdown>
+              <a-popconfirm :title="`确定要删除这 ${groupCheck.length} 项吗?`" @confirm="handleConfirmDelete">
+                <a-button style="margin: 0 15px" :disabled="groupCheck.length == 0" @click="">
+                  批量删除广告组
+                </a-button>
+              </a-popconfirm>
+
+              <a-button type="primary" style="margin: 0 15px"> 全部提交审核 </a-button>
+            </div>
+          </h2>
+          <!-- <div v-for="(item, index) in campaignList" :key="index"></div> -->
+          <el-collapse v-model="activeName" accordion>
+            <el-collapse-item v-for="(item, index) in campaignList" :key="index" :name="item.id">
+              <template slot="title">
+                <h3 style="display: flex; justify-content: space-between; width: 80%">
+                  <span style="width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+                    >广告计划:{{ item.campaignName }}</span
+                  >
+                  <span style="width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+                    >营销目标:{{ item.campaignType == 2 ? '提升应用安装' : '收集销售线索' }}</span
+                  >
+                  <span style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+                    >预算:{{ item.dayBudget ? item.dayBudget / 1000 + '元' : '不限' }}</span
+                  >
+                  <a-checkbox style="width: 10%" v-model="item.checkAll" @click.stop> 全选 </a-checkbox>
+                </h3>
+              </template>
+              <a-table
+                :columns="columns"
+                :data-source="item.kuaishouBatchGroupPreviews"
+                class="components-table-demo-nested"
+                :pagination="false"
+                :scroll="{ x: 2100 }"
+                bordered
+                tableLayout="fixed"
+                :row-selection="{ selectedRowKeys: groupCheck, onChange: onSelectChange }"
+                rowKey="id"
+              >
+                <span slot="unitName" slot-scope="text, records">
+                  <p style="text-align: left">
+                    {{ text }}
+                  </p>
+                  <a-icon
+                    type="edit"
+                    style="float: left; color: #409EFF; margin-top: 5px"
+                    class="count"
+                    @click.stop="editUnitName(records)"
+                  />
+                </span>
+                <span slot="bidType" slot-scope="text, records">
+                  {{ text | bidType }}
+                </span>
+                <span slot="sceneId" slot-scope="text, records">
+                  <p v-for="(item, index) in JSON.parse(text)" :key="index" style="text-align: left">
+                    {{ item | kuaishouSceneId }}{{ index == JSON.parse(text).length - 1 ? '' : ',' }}
+                  </p>
+                </span>
+                <span slot="materialArr" slot-scope="text, records">
+                  <p style="color: #409EFF; cursor: pointer" @click="lookVideo(text)">
+                    已选{{ text ? text.length : 0 }}个视频素材
+                  </p>
+                </span>
+                <span slot="dayBudget" slot-scope="text, records">
+                  <p style="text-align: left">
+                    预算:{{ records.dayBudget || records.dayBudget == 0 ? records.dayBudget / 1000 + '元' : '不限' }}
+                  </p>
+                  <p style="text-align: left">
+                    出价:{{ records.bid ? records.bid / 1000 : records.cpaBid ? records.cpaBid / 1000 : '' }}元
+                  </p>
+                  <p style="text-align: left">
+                    深度转化出价:{{ records.deepConversionBid ? records.deepConversionBid / 1000 : '无' }}
+                  </p>
+                  <a-icon
+                    type="edit"
+                    style="float: left; color: #409EFF"
+                    class="count"
+                    @click.stop="editBid(records, records.bid ? 'bid' : 'cpaBid')"
+                  />
+                </span>
+                <span slot="appId" slot-scope="text, records">
+                  <p style="text-align: left">
+                    {{ setAppName(text) }}
+                  </p>
+                  <a-icon
+                    type="edit"
+                    style="float: left; color: #409EFF; margin-top: 5px"
+                    class="count"
+                    @click="editAppAndSite(records)"
+                  />
+                </span>
+                <span slot="action" slot-scope="text, record">
+                  <a-popconfirm :title="`确定要删除这项吗?`" @confirm="removeGroup(record.id)">
+                    <a>删除</a>
+                    <span class="gap"></span>
+                  </a-popconfirm>
+
+                  <!-- <a-divider type="vertical" />
+                  <a>Delete</a> -->
+                </span>
+                <span slot="descriptionArr" slot-scope="text, records">
+                  <p
+                    v-for="(item, index) in new Set(text)"
+                    :key="index"
+                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left"
+                    :title="item"
+                  >
+                    {{ item }}
+                  </p>
+                </span>
+
+                <span slot="clickTrackUrl" slot-scope="text, records">
+                  <p style="text-align: left">{{ text }}</p>
+
+                  <a-icon
+                    type="edit"
+                    style="float: left; color: #409EFF"
+                    class="count"
+                    @click.stop="editClickTrackUrl(records)"
+                  />
+                </span>
+                <span slot="isSuccess" slot-scope="text, records">{{ text ? '待提交' : '提交成功' }}</span>
+                <span slot="siteId" slot-scope="text, records">
+                  {{ text ? setSiteName(records.appId, text) : '无' }}
+                </span>
+              </a-table>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </a-card>
+      <a-modal
+        title="修改广告组名称"
+        v-model="unitNameEditVisible"
+        :width="500"
+        @ok="okUnitName"
+        @cancel="unitNameEditVisible = false"
+        :destroyOnClose="true"
+      >
+        <!-- <a-form-model
+          ref="materialForm"
+          :hideRequiredMark="true"
+        >
+          <a-row :gutter="16"> -->
+        <div style="display: flex; width: 100%">
+          <span>广告组名称:</span>
+          <a-input
+            v-model="unitName"
+            style="width: 70%; margin-left: 10px; position: relative; top: -4px"
+            placeholder="请输入广告组名称"
+          />
+        </div>
+
+        <!-- </a-row>
+        </a-form-model> -->
+      </a-modal>
+      <a-modal
+        title="修改出价预算"
+        v-model="bidEditVisible"
+        :width="500"
+        @ok="okUnitBid"
+        @cancel="bidEditVisible = false"
+        :destroyOnClose="true"
+      >
+        <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
+          <a-form-item label="预算">
+            <a-input-number
+              v-decorator="['dayBudget']"
+              style="width: 100%"
+              placeholder="不小于500,不超过100000000,仅支持输入自然数,如填0,则为不限"
+            />
+          </a-form-item>
+          <a-form-item label="出价">
+            <a-input-number v-decorator="['bid']" style="width: 100%" />
+          </a-form-item>
+          <a-form-item label="深度转化出价">
+            <a-input-number v-decorator="['deepConversionBid']" style="width: 100%" />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+
+      <a-modal
+        title="修改应用"
+        v-model="appIdEditVisible"
+        :width="700"
+        @ok="okAppId"
+        @cancel="appIdEditVisible = false"
+        :destroyOnClose="true"
+      >
+        <a-form :form="appIdConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
+          <a-form-item label="应用">
+            <a-select v-decorator="['appId']" style="width: 100%" allowClear @change="setSiteId">
+              <a-select-option v-for="appModel in appListArr" :key="appModel.appId" :value="appModel.appId">
+                {{ appModel.appName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="应用下载详情页">
+            <a-select
+              v-decorator="['siteId']"
+              style="width: 100%"
+              allowClear
+              :disabled="
+                getData('appId', 'appIdConfigForm') == undefined ||
+                getData('appId', 'appIdConfigForm') == null ||
+                getData('appId', 'appIdConfigForm') == ''
+              "
+            >
+              <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
+                {{ appModel.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+
+      <a-modal
+        title="修改监测链接"
+        v-model="clickTrackUrlEditVisible"
+        :width="700"
+        @ok="okClickTrackUrl"
+        @cancel="clickTrackUrlEditVisible = false"
+        :destroyOnClose="true"
+      >
+        <h4 style="text-align: center">不填则保持原样</h4>
+        <a-form :form="clickTrackUrlConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
+          <a-form-item label="监测链接">
+            <a-input v-decorator="['clickTrackUrl']" placeholder="请输入监测链接" />
+          </a-form-item>
+          <a-form-item label="点击监测链接">
+            <a-input v-decorator="['actionbarClickUrl']" placeholder="请输入点击监测链接" />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+
+      <a-modal title="素材预览" v-model="coverPreviewVisible" :width="1000" :footer="null">
+        <a-carousel arrows class="cover_carousel_con" v-if="videoData.length > 0">
+          <div v-for="(item, index) in videoData" :key="index" class="content">
+            <div style="display: flex !important; justify-content: space-around">
+              <img :src="item.videoUrl.coverUrl" :width="300" />
+              <img :src="item.imageUrl" :width="300" />
+            </div>
+          </div>
+          <a-icon
+            type="left-circle"
+            slot="prevArrow"
+            slot-scope
+            style="left: 10px; zindex: 9; font-size: 30px; color: black"
+          />
+          <a-icon
+            type="right-circle"
+            slot="nextArrow"
+            slot-scope
+            style="right: 10px; zindex: 9; font-size: 30px; color: black"
+          />
+        </a-carousel>
+      </a-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+//   import UserMenu from '../tools/UserMenu'
+//   import SMenu from '../menu/'
+import Logo from '@/components/tools/Logo.vue'
+import pick from 'lodash.pick'
+import { mixin } from '@/utils/mixin.js'
+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'
+function tqFun(qcArr1) {
+  var tempArr = []
+  function bbFun(qcArr) {
+    for (var i = 0; i < qcArr.length; i++) {
+      if (qcArr[i] instanceof Array) {
+        bbFun(qcArr[i])
+      } else {
+        tempArr.push(qcArr[i])
+      }
+    }
+    return tempArr
+  }
+  return bbFun(qcArr1)
+}
+
+export default {
+  name: 'GlobalHeader',
+  components: {
+    //   UserMenu,
+    //   SMenu,
+    Logo,
+    Treeselect,
+    selectCheckAll,
+    checkBoxGroup,
+  },
+  mixins: [mixin],
+  props: {
+    mode: {
+      type: String,
+      // sidemenu, topmenu
+      default: 'sidemenu',
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark',
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    device: {
+      type: String,
+      required: false,
+      default: 'desktop',
+    },
+  },
+  data() {
+    return {
+      videoData: [],
+      coverPreviewVisible: false,
+      clickTrackUrlEditVisible: false,
+
+      appIdEditVisible: false,
+      ruleConfigForm: this.$form.createForm(this),
+      appIdConfigForm: this.$form.createForm(this),
+      clickTrackUrlConfigForm: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 19 },
+      },
+      unitNameEditVisible: false, //广告组模态框
+      bidEditVisible: false,
+
+      topMenuStyle: {
+        headerIndexLeft: {},
+        topNavHeader: {},
+        headerIndexRight: {},
+        topSmenuStyle: {},
+      },
+      accountId: '',
+      batchId: null,
+      campaignList: null,
+      activeName: null,
+      columns: [
+        {
+          title: '广告组名称',
+          dataIndex: 'unitName',
+          key: 'unitName',
+          width: 200,
+          align: 'center',
+          scopedSlots: { customRender: 'unitName' },
+          fixed: 'left',
+        },
+        {
+          title: '优化目标',
+          dataIndex: 'bidType',
+          key: 'bidType',
+          width: 100,
+          align: 'center',
+          scopedSlots: { customRender: 'bidType' },
+        },
+        {
+          title: '预算与出价',
+          dataIndex: 'dayBudget',
+          key: 'dayBudget',
+          scopedSlots: { customRender: 'dayBudget' },
+          width: 150,
+          align: 'center',
+        },
+        {
+          title: '广告位',
+          dataIndex: 'sceneId',
+          key: 'sceneId',
+          width: 140,
+          scopedSlots: { customRender: 'sceneId' },
+          align: 'center',
+        },
+        {
+          title: '快手应用/落地页',
+          dataIndex: 'appId',
+          key: 'appId',
+          width: 150,
+          scopedSlots: { customRender: 'appId' },
+          align: 'center',
+        },
+        {
+          title: '定向包',
+          dataIndex: 'templateName',
+          key: 'templateName',
+          width: 150,
+          align: 'center',
+          scopedSlots: { customRender: 'templateName' },
+        },
+        {
+          title: '广告语',
+          dataIndex: 'descriptionArr',
+          key: 'descriptionArr',
+          width: 350,
+          align: 'center',
+          scopedSlots: { customRender: 'descriptionArr' },
+          ellipsis: true,
+        },
+        {
+          title: '创意素材',
+          dataIndex: 'materialArr',
+          key: 'materialArr',
+          width: 150,
+          align: 'center',
+          scopedSlots: { customRender: 'materialArr' },
+        },
+        {
+          title: '监测链接',
+          dataIndex: 'clickTrackUrl',
+          key: 'clickTrackUrl',
+          width: 350,
+          align: 'center',
+          scopedSlots: { customRender: 'clickTrackUrl' },
+        },
+        {
+          title: '应用下载详情页',
+          dataIndex: 'siteId',
+          key: 'siteId',
+          width: 150,
+          align: 'center',
+          scopedSlots: { customRender: 'siteId' },
+        },
+        {
+          title: '状态',
+          dataIndex: 'isSuccess',
+          key: 'isSuccess',
+          width: 100,
+          fixed: 'right',
+          align: 'center',
+          scopedSlots: { customRender: 'isSuccess' },
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          width: 100,
+          fixed: 'right',
+          align: 'center',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+      appListArr: [],
+      groupCheck: [],
+      groupCheckRow: [],
+      unitId: '',
+      unitName: '',
+      bidType: 'cpaBid',
+      bid: null,
+      dayBudget: null,
+      deepConversionBid: null,
+      siteList: [],
+      allData: null,
+      editAll: false,
+    }
+  },
+  computed: {
+    groupCount() {
+      var count = 0
+      if (this.campaignList) {
+        for (let i = 0; i < this.campaignList.length; i++) {
+          count += this.campaignList[i].kuaishouBatchGroupPreviews.length
+        }
+      }
+      return count
+    },
+  },
+  watch: {},
+  mounted() {
+    this.accountId = this.$route.query.accountId
+    this.batchId = this.$route.query.batchId
+    this.getPreviewList()
+    // this.$nextTick(() => {
+    let params = {}
+    params.accountId = this.accountId
+    this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
+      if (res.success) {
+        this.appListArr = res.result.map((item, index) => {
+          return {
+            ...item,
+            key: item.appId + '',
+            title: item.appName,
+            siteId: null,
+            siteList: [],
+          }
+        })
+      }
+    })
+    // })
+  },
+  methods: {
+    handleConfirmDelete() {
+      this.getAction('/kuaishouBatch/campaignPreview/deleteBatch', {
+        ids: this.groupCheck,
+      }).then((res) => {
+        if (res.success) {
+          this.groupCheck = []
+          this.$message.success('删除成功')
+          this.getPreviewList()
+        }
+      })
+    },
+    handleMenuClick(e) {
+      if (e.key == '1') {
+        this.bidEditVisible = true
+      } else {
+        this.clickTrackUrlEditVisible = true
+      }
+
+      this.editAll = true
+    },
+    setSiteId(e) {
+      this.getSiteList(e)
+    },
+    getData(className, formName) {
+      return this[formName].getFieldValue(className)
+    },
+    getSiteList(item) {
+      this.getAction('/kuaishou/batch/getPageList', {
+        accountId: this.accountId,
+        appId: item,
+        viewComp: 7,
+      }).then((res) => {
+        if (res.success) {
+          console.log(item)
+          this.siteList = res.result
+        } else {
+        }
+      })
+    },
+    //rules
+    handleConfirmValue(rule, value, callback) {
+      if (value == 0) {
+        callback()
+      } else if (value == '' || (value > 0 && value < 500) || value >= 100000000) {
+        callback('不小于500, 不超过100000000,仅支持输入自然数')
+      }
+      callback()
+    },
+
+    getPreviewList() {
+      this.getAction('/kuaishouBatch/campaignPreview/queryByBatchId', {
+        accountId: this.accountId,
+        batchId: this.batchId,
+      }).then((res) => {
+        if (res.success) {
+          this.campaignList = res.result.campaignList.map((item) => {
+            return {
+              ...item,
+              checkAll: false,
+            }
+          })
+
+          // this.activeName = this.campaignList[0].id
+        } else {
+          this.$message.error('网络开小差了,请刷新后重试')
+        }
+      })
+    },
+    onSelectChange(selectedRowKeys, selectionRows) {
+      this.groupCheck = selectedRowKeys
+      this.groupCheckRow = selectionRows
+      console.log(this.groupCheck, this.groupCheckRow)
+    },
+    setAppName(appId) {
+      // this.$nextTick(() => {
+      var data = this.appListArr.filter((item) => {
+        return item.appId == appId
+      })
+      if (data.length > 0) {
+        return data[0].appName
+      }
+      // })
+    },
+    setSiteName(appId, siteId) {
+      var data = null
+      this.getAction('/kuaishou/batch/getPageList', {
+        accountId: this.accountId,
+        appId: appId,
+        viewComp: 7,
+      }).then((res) => {
+        if (res.success) {
+          data = res.result.filter((item) => {
+            return item.siteId == siteId
+          })
+        } else {
+        }
+      })
+      if (data.length > 0) {
+        return data[0].name
+      }
+    },
+    editUnitName(item) {
+      this.unitNameEditVisible = true
+      this.unitName = item.unitName
+      this.unitId = item.id
+    },
+    okUnitName() {
+      this.postDataAction('/kuaishouBatch/groupPreview/edit', { id: this.unitId, unitName: this.unitName }).then(
+        (res) => {
+          if (res.success) {
+            this.getPreviewList()
+            this.unitNameEditVisible = false
+          }
+        }
+      )
+    },
+    editBid(item, type) {
+      console.log(type)
+      this.editAll = false
+      this.unitId = item.id
+      this.bidEditVisible = true
+      this.bidType = type
+      this.bid = item[type] / 1000
+      this.dayBudget = item.dayBudget / 1000
+      this.deepConversionBid = item.deepConversionBid ? item.deepConversionBid / 1000 : null
+    },
+    okUnitBid() {
+      this.ruleConfigForm.validateFields((err, values) => {
+        if (!err) {
+          var params = {}
+          if (this.bidType == 'cpaBid') {
+            params.cpaBid = values.bid == undefined ? null : values.bid * 1000
+          } else {
+            params.bid = values.bid == undefined ? null : values.bid * 1000
+          }
+          params.dayBudget = values.dayBudget == undefined ? null : values.dayBudget * 1000
+          params.deepConversionBid = values.deepConversionBid == undefined ? null : values.deepConversionBid * 1000
+          if (!this.editAll) {
+            params.id = this.unitId
+
+            this.postDataAction('/kuaishouBatch/groupPreview/edit', params).then((res) => {
+              if (res.success) {
+                this.getPreviewList()
+                this.bidEditVisible = false
+              }
+            })
+          } else if (this.editAll) {
+            params.groupIds = this.groupCheck
+            this.postDataAction('/kuaishouBatch/groupPreview/batchEdit', params).then((res) => {
+              if (res.success) {
+                this.groupCheck = []
+                this.getPreviewList()
+                this.bidEditVisible = false
+              }
+            })
+          }
+        }
+      })
+    },
+    editAppAndSite(item) {
+      // /\{{([^}]+)\}}/g;
+      this.unitId = item.id
+      this.appIdEditVisible = true
+      this.allData = item
+      this.$nextTick(() => {
+        this.appIdConfigForm.setFieldsValue({ appId: item.appId, siteId: item.siteId })
+        this.getSiteList(item.appId)
+      })
+
+      // var pattern = /\{{应用名称}}/g
+      // console.log(item.unitNameFormat.replace(pattern, '*'))
+    },
+    okAppId() {
+      this.appIdConfigForm.validateFields((err, values) => {
+        if (!err) {
+          var appPattern = /\{{应用名称}}/g
+          var templatePattern = /\{{定向包}}/g
+          var timePattern = /\{{日期}}/g
+          var versionPattern = /\{{渠道号}}/g
+          var typePattern = /\{{创意制作方式}}/g
+          var positionPattern = /\{{广告位置}}/g
+
+          var data = []
+          if (values.appId != undefined) {
+            data = this.appListArr.filter((item) => {
+              return item.appId == values.appId
+            })
+          } else {
+            data = this.appListArr.filter((item) => {
+              return item.appId == this.allData.appId
+            })
+          }
+          var params = {}
+          params.appId = values.appId == undefined ? null : values.appId
+          params.siteId = values.siteId == undefined ? null : values.siteId
+          // params.unitName = this.allData.unitNameFormat.replace(pattern, '*')
+          if (appPattern.test(this.allData.unitNameFormat)) {
+            this.allData.unitNameFormat = this.allData.unitNameFormat.replace(appPattern, data[0].appName)
+          }
+          if (templatePattern.test(this.allData.unitNameFormat)) {
+            this.allData.unitNameFormat = this.allData.unitNameFormat.replace(
+              templatePattern,
+              this.allData.templateName
+            )
+          }
+          if (timePattern.test(this.allData.unitNameFormat)) {
+            this.allData.unitNameFormat = this.allData.unitNameFormat.replace(timePattern, this.allData.beginTime)
+          }
+          if (versionPattern.test(this.allData.unitNameFormat)) {
+            this.allData.unitNameFormat = this.allData.unitNameFormat.replace(versionPattern, data[0].appVersion)
+          }
+          if (typePattern.test(this.allData.unitNameFormat)) {
+            this.allData.unitNameFormat = this.allData.unitNameFormat.replace(typePattern, '自定义')
+          }
+          if (positionPattern.test(this.allData.unitNameFormat)) {
+            this.allData.unitNameFormat = this.allData.unitNameFormat.replace(
+              positionPattern,
+              JSON.parse(this.allData.sceneId)[0] == 1
+                ? '优选'
+                : JSON.parse(this.allData.sceneId)[0] == 5
+                ? '联盟'
+                : '按场景'
+            )
+          }
+          params.unitName = this.allData.unitNameFormat
+          params.id = this.unitId
+
+          this.postDataAction('/kuaishouBatch/groupPreview/edit', params).then((res) => {
+            if (res.success) {
+              this.getPreviewList()
+              this.appIdEditVisible = false
+            }
+          })
+        }
+      })
+    },
+    editClickTrackUrl(item) {
+      this.editAll = false
+      this.clickTrackUrlEditVisible = true
+      this.unitId = item.id
+    },
+    okClickTrackUrl() {
+      this.clickTrackUrlConfigForm.validateFields((err, values) => {
+        var params = {}
+        params.clickTrackUrl =
+          values.clickTrackUrl == null || values.clickTrackUrl == undefined ? null : values.clickTrackUrl
+        params.actionbarClickUrl =
+          values.actionbarClickUrl == null || values.actionbarClickUrl == undefined ? null : values.actionbarClickUrl
+
+        if (!this.editAll) {
+          params.id = this.unitId
+          this.postDataAction('/kuaishouBatch/groupPreview/edit', params).then((res) => {
+            if (res.success) {
+              this.getPreviewList()
+              this.clickTrackUrlEditVisible = false
+            }
+          })
+        } else if (this.editAll) {
+          params.groupIds = this.groupCheck
+          this.postDataAction('/kuaishouBatch/groupPreview/batchEdit', params).then((res) => {
+            if (res.success) {
+              this.groupCheck = []
+              this.getPreviewList()
+              this.clickTrackUrlEditVisible = false
+            }
+          })
+        }
+      })
+    },
+    lookVideo(item) {
+      this.videoData = []
+      for (let i = 0; i < item.length; i++) {
+        this.setVideUrl(item[i].photoId).then((res) => {
+          item[i].videoUrl = res
+          this.videoData.push(item[i])
+          if (this.videoData.length == item.length) {
+            this.coverPreviewVisible = true
+          }
+        })
+      }
+    },
+    setVideUrl(photoId) {
+      this.videoList = []
+      return new Promise((resolve, reject) => {
+        this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
+          if (res.success) {
+            resolve({ ...res.result, photoId: photoId })
+          }
+        })
+      })
+      // this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
+      //   if (res.success) {
+      //     this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
+      //     return res.result.url
+      //   } else {
+      //   }
+      // })
+    },
+    removeGroup(id) {
+      this.getAction('/kuaishouBatch/groupPreview/delete', { id: id }).then((res) => {
+        if (res.success) {
+          this.$message.success('删除成功')
+          this.getPreviewList()
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>