朱鑫波 4 лет назад
Родитель
Сommit
6b35500ad3

+ 1 - 1
src/components/layouts/UserLayout.vue

@@ -43,7 +43,7 @@ export default {
   },
   mounted() {
     document.body.classList.add('userLayout')
-    if (this.$route.path == '/user/new-batch') {
+    if (this.$route.path == '/user/new-batch'||this.$route.path=='/user/lookPreview') {
       this.showTitle = false
     } else {
       this.showTitle = true

+ 5 - 0
src/config/router.config.js

@@ -69,6 +69,11 @@ export const constantRouterMap = [
         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')
       }
     ]
   },

+ 4 - 4
src/permission.js

@@ -10,14 +10,14 @@ import { generateIndexRouter } from "@/utils/util"
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 
-const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration', '/user/transfer-local', '/errorPage', '/user/new-batch', '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) {
+  //if (whiteList.indexOf(to.path) !== -1) {
     // 在免登录白名单,直接进入
-    next()
-  }
+   // next()
+ //}
   if (Vue.ls.get(ACCESS_TOKEN)) {
     /* has token */
 

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

@@ -63,6 +63,9 @@
 .display-none-selset {
   display: none !important;
 }
+.only-step4 .ant-form-item-label {
+  text-align: left;
+}
 </style>
 <style scoped lang="scss">
 .actor-photo-list {
@@ -142,7 +145,7 @@ li.chouzhen.first:before {
 }
 </style>
 <template>
-  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step3">
+  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step4">
     <a-tabs style="width: 50%; margin: 0 auto" type="editable-card" hideAdd @edit="remove">
       <a-tab-pane
         v-for="(pane, bestIndex) in pans"
@@ -259,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)"
@@ -1725,7 +1728,31 @@ export default {
       if (this.pans.length == 0) {
         this.$bus.$emit('remove', '/account/stepForm')
       } else {
+        this.horizontalPhoto = [
+          {
+            videoList: [],
+            imageList: [],
+            creativeMaterialType: '2',
+            imageUrlList: [],
+            checkArrImage: [],
+            chouzhenShow: false,
+          },
+        ]
+        this.verticalPhoto = [
+          {
+            videoList: [],
+            imageList: [],
+            creativeMaterialType: '1',
+            imageUrlList: [],
+            checkArrImage: [],
+            chouzhenShow: false,
+          },
+        ]
+        this.captionsList = [{ captions: '' }]
+        this.stickerStylesValue = []
+        this.coverSlogansList = [{ coverSlogans: '' }]
         this.addCreative(0)
+        this.addAdList(0)
         getAction('/kuaishou/batch/checkCreativeCount', {
           unitId: this.pansKey,
           accountId: localStorage.getItem('accountId'),

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

+ 489 - 55
src/views/modules/kuaishouapp/newBatch/index.vue

@@ -72,6 +72,9 @@ li.chouzhen.first:before {
 }
 </style>
 <style lang="scss">
+.hide-checkbox .ant-table-thead .ant-table-selection {
+  display: none;
+}
 .new-batch .ant-card-head-title {
   font-weight: 700;
 }
@@ -228,11 +231,7 @@ li.chouzhen.first:before {
                 <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                   <a-form-item :label="unitInfo.bidType == 1 ? '出价' : '转化目标出价'">
                     {{
-                      groupTemplateId
-                        ? unitInfo.bidType == 1
-                          ? unitInfo.bid / 1000 + '元'
-                          : unitInfo.cpaBid / 1000 + '元'
-                        : '无'
+                      groupTemplateId ? (unitInfo.bidType == 1 ? unitInfo.bid + '元' : unitInfo.cpaBid + '元') : '无'
                     }}
                   </a-form-item>
                 </a-col>
@@ -437,7 +436,7 @@ li.chouzhen.first:before {
                       v-if="items.image.url"
                     >
                       <div style="width: 45%; height: 100%; text-align: center">
-                        <img :src="items.image.url" style="width: auto; height: 100%" alt="" srcset="" />
+                        <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="" />
@@ -455,8 +454,7 @@ li.chouzhen.first:before {
                   </template>
                 </div>
               </div>
-              <!-- v-if="materialInfo.matchingMethod != 1 && videoMaterialShow" -->
-              <div style="margin-top: 20px">
+              <div style="margin-top: 20px" v-if="materialInfo.matchingMethod != 1 && videoMaterialShow">
                 <a-list bordered :data-source="descriptionList">
                   <a-list-item slot="renderItem" slot-scope="item, index">
                     <p v-if="!item.edit" style="margin-bottom: 0; width: 100%">
@@ -478,9 +476,19 @@ li.chouzhen.first:before {
                       style="margin-right: 20px"
                       @click="addDescription"
                       :disabled="
-                        descriptionList.length >= (materialInfo.matchingMethod == 2
-                          ? materialCount
-                          : materialInfo.materialList.length)
+                        descriptionList.length >=
+                        (materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length)
+                      "
+                    >
+                      选择广告语
+                    </a-button>
+                    <a-button
+                      type="primary"
+                      style="margin-right: 20px"
+                      @click="addOne"
+                      :disabled="
+                        descriptionList.length >=
+                        (materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length)
                       "
                     >
                       添加广告语
@@ -494,7 +502,7 @@ li.chouzhen.first:before {
               </div>
             </a-card>
             <div style="display: flex; justify-content: space-between; margin-bottom: 100px">
-              <a-button type="primary"> 预览应用/链接 </a-button>
+              <a-button type="primary" @click="checkAppIds"> 预览应用/链接 </a-button>
               <div>
                 <a-button type="primary" style="margin-right: 15px" @click="handleSubmit"> 预览广告组 </a-button>
                 <a-button> 清空配置 </a-button>
@@ -511,6 +519,7 @@ li.chouzhen.first:before {
       :width="1000"
       @ok="ruleConfigFormOk"
       @cancel="ruleConfigFormCancel"
+      v-dialog-drag
     >
       <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
         <a-row :gutter="16">
@@ -625,10 +634,9 @@ li.chouzhen.first:before {
               >
               <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'ruleConfigForm', 'campaignName')">+定向包</a-tag>
               <a-tag color="#2db7f5" @click="getChangeAll('日期', 'ruleConfigForm', 'campaignName')">+日期</a-tag>
-              <a-tag color="#2db7f5" @click="getChangeAll('渠道号(应用标记)', 'ruleConfigForm', 'campaignName')"
+              <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'ruleConfigForm', 'campaignName')"
                 >+渠道号(应用标记)</a-tag
               >
-              <a-tag color="#2db7f5" @click="getChangeAll('标号', 'ruleConfigForm', 'campaignName')">+标号</a-tag>
             </a-form-item>
           </a-col>
         </a-row>
@@ -957,11 +965,12 @@ li.chouzhen.first:before {
         <a-row :gutter="16">
           <a-col :span="16">
             <a-form-item label="" v-bind="tailFormItemLayout">
-              <a-tag color="#2db7f5" @click="getChangeAll('渠道号(应用标记)', 'unitInfo', 'unitName')"
-                >+渠道号(应用标记)</a-tag
-              >
+              <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'unitInfo', 'unitName')">+应用名称</a-tag>
               <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'unitInfo', 'unitName')">+定向包</a-tag>
               <a-tag color="#2db7f5" @click="getChangeAll('日期', 'unitInfo', 'unitName')">+日期</a-tag>
+              <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'unitInfo', 'unitName')">+渠道号(应用标记)</a-tag>
+              <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'unitInfo', 'unitName')">+创意制作方式</a-tag>
+              <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'unitInfo', 'unitName')">+广告位置</a-tag>
             </a-form-item>
           </a-col>
         </a-row>
@@ -986,8 +995,8 @@ li.chouzhen.first:before {
           zIndex: 1,
         }"
       >
-        <a-button :style="{ marginRight: '8px' }" @click="closeUnit('ruleForm')"> Cancel </a-button>
-        <a-button type="primary" @click="onClose"> Submit </a-button>
+        <a-button :style="{ marginRight: '8px' }" @click="closeUnit('ruleForm')"> 取消 </a-button>
+        <a-button type="primary" @click="onClose"> 提交 </a-button>
       </div>
     </a-drawer>
     <!-- 广告组基本信息预设结束 -->
@@ -1117,6 +1126,13 @@ li.chouzhen.first:before {
             </a-form-model-item>
           </a-col>
         </a-row>
+        <a-row :gutter="16">
+          <a-col :span="16">
+            <a-form-item label="" v-bind="tailFormItemLayout">
+              <a-checkbox value="1" v-model="creativeInfo.keep"> 存为预设 </a-checkbox>
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form-model>
       <div
         :style="{
@@ -1131,8 +1147,8 @@ li.chouzhen.first:before {
           zIndex: 1,
         }"
       >
-        <a-button :style="{ marginRight: '8px' }" @click="closeUnit('createForm')"> Cancel </a-button>
-        <a-button type="primary" @click="submitCreative"> Submit </a-button>
+        <a-button :style="{ marginRight: '8px' }" @click="closeUnit('createForm')"> 取消 </a-button>
+        <a-button type="primary" @click="submitCreative"> 提交 </a-button>
       </div>
     </a-drawer>
     <!-- 广告创意基本信息预设结束 -->
@@ -1163,6 +1179,7 @@ li.chouzhen.first:before {
       </a-table>
     </a-modal>
     <!-- 定向包选择结束 -->
+
     <!--定向预览-->
     <a-modal title="我的定向包" v-model="previewVisible" :width="1000" :footer="null">
       <a-form
@@ -1401,7 +1418,7 @@ li.chouzhen.first:before {
                         v-if="items.image.url"
                       >
                         <div style="width: 45%; height: 100%">
-                          <img :src="items.image.url" style="width: 100%; height: auto" alt="" srcset="" />
+                          <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="" />
@@ -1542,7 +1559,7 @@ li.chouzhen.first:before {
             <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setVideoData">
               <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
                 <a-checkbox
-                  :value="item.signature"
+                  :value="item.photoId"
                   style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0"
                 >
                   <img :src="item.coverUrl" alt="" style="width: 90%; margin-bottom: 30px" />
@@ -1630,6 +1647,124 @@ li.chouzhen.first:before {
       </a-row>
     </a-modal>
     <!-- 推荐广告语结束 -->
+
+    <!-- 预览应用/链接 -->
+    <a-modal
+      :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
+      v-model="appIdVisible"
+      :width="1000"
+      @ok="appIdVisible = false"
+      @cancel="appIdVisible = false"
+    >
+      <a-row :gutter="10" class="hide-checkbox">
+        <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
+          <a-card class="search-box" style="min-height: 500px">
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 140px">应用分配方式</span>
+              <a-radio-group v-model="appList.appAllocation">
+                <a-radio-button :value="1">按账户分配</a-radio-button>
+                <a-radio-button :value="2">按广告计划分配</a-radio-button>
+                <a-radio-button :value="3">按广告组分配</a-radio-button>
+              </a-radio-group>
+            </div>
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 140px">选择应用</span>
+              广告计划:{{ campaignCount }} &nbsp;&nbsp;&nbsp;&nbsp;广告组数量:{{
+                checkDirectionalList.length * materialInfo.materialList.length * campaignCount
+              }}
+              <a-card style="min-height: 300px; margin-top: 15px">
+                <a-transfer
+                  :data-source="appListArr"
+                  :target-keys="targetKeys"
+                  :disabled="disabled"
+                  :show-search="true"
+                  :filter-option="(inputValue, item) => item.appName.indexOf(inputValue) !== -1"
+                  :show-select-all="true"
+                  @change="onChangeTransFer"
+                >
+                  <template
+                    slot="children"
+                    slot-scope="{
+                      props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
+                      on: { itemSelectAll, itemSelect },
+                    }"
+                  >
+                    <a-table
+                      :row-selection="
+                        getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
+                      "
+                      :columns="direction === 'left' ? leftColumns : rightColumns"
+                      :data-source="filteredItems"
+                      size="small"
+                      :style="{ pointerEvents: listDisabled ? 'none' : null }"
+                      :custom-row="
+                        ({ key, disabled: itemDisabled }) => ({
+                          on: {
+                            click: () => {
+                              if (itemDisabled || listDisabled) return
+                              itemSelect(key, !selectedKeys.includes(key))
+                            },
+                          },
+                        })
+                      "
+                    >
+                      <div slot="action" slot-scope="text, records" @click.stop>
+                        <!-- {{ records.siteId }} -->
+                        <a-select v-model="records.siteId" style="width: 100%" @focus="getSiteList(records)" allowClear>
+                          <a-select-option
+                            v-for="appModel in records.siteList"
+                            :key="appModel.siteId"
+                            :value="appModel.siteId"
+                          >
+                            {{ appModel.name }}
+                          </a-select-option>
+                        </a-select>
+                      </div>
+                    </a-table>
+                  </template>
+                </a-transfer>
+              </a-card>
+            </div>
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 140px">链接分配方式</span>
+              <a-radio-group v-model="appList.linkAllocation" @change="setCount">
+                <a-radio-button :value="1">按账户分配</a-radio-button>
+                <a-radio-button :value="2">按广告计划分配</a-radio-button>
+                <a-radio-button :value="3">按广告组分配</a-radio-button>
+              </a-radio-group>
+            </div>
+            <!-- linkAllocation: 1,
+        clickUrlList: [],
+        clickUrlActionList: [], -->
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 140px">第三方监测链接</span>
+
+              <a-input
+                v-model="item.value"
+                placeholder="请输入第三方检测链接"
+                style="width: 60%; margin-bottom: 10px"
+                v-for="(item, index) in appList.clickUrlList"
+                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
+              >
+              </a-input>
+            </div>
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
+              <a-input
+                v-model="item.value"
+                placeholder="请输入第三方点击检测链接"
+                style="width: 60%; margin-bottom: 10px"
+                v-for="(item, index) in appList.clickUrlActionList"
+                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
+              >
+              </a-input>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-modal>
+
+    <!-- 预览应用/链接结束 -->
   </div>
 </template>
 
@@ -1657,6 +1792,32 @@ function tqFun(qcArr1) {
   }
   return bbFun(qcArr1)
 }
+
+const mockData = []
+
+const originTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key)
+
+const leftTableColumns = [
+  {
+    dataIndex: 'appName',
+    title: '应用名称',
+  },
+  {
+    dataIndex: 'appId',
+    title: '应用Id',
+  },
+]
+const rightTableColumns = [
+  {
+    dataIndex: 'appName',
+    title: '应用名称',
+  },
+  {
+    dataIndex: 'action',
+    title: '选择应用下载链接',
+    scopedSlots: { customRender: 'action' },
+  },
+]
 export default {
   name: 'GlobalHeader',
   components: {
@@ -1692,6 +1853,12 @@ export default {
   },
   data() {
     return {
+      disabled: false,
+      showSearch: false,
+      targetKeys: [],
+      leftColumns: leftTableColumns,
+      rightColumns: rightTableColumns,
+
       active: 0,
       previewVisible: false,
 
@@ -1793,6 +1960,7 @@ export default {
         creativeTag: [],
         stickerTitle: '',
         actionBarText: '',
+        keep: false,
       },
       creativeTag: [],
       creativeRules: {
@@ -1880,7 +2048,7 @@ export default {
         },
       ],
       //按创意和按创意组匹配
-      descriptionList: [{ value: '测试广告语', edit: false }],
+      descriptionList: [],
       titleVisible: false,
       options: [],
       value: '',
@@ -1890,10 +2058,21 @@ export default {
       //素材相关结束
 
       //配置应用/链接
-      appAllocation: 1, //1按账户,2按广告计划,3按广告组
-      appIds: [],
-      linkAllocation: 1,
-      clickUrlList: [],
+      appList: {
+        checkType: 'app',
+        appAllocation: 1, //1按账户,2按广告计划,3按广告组
+        appArr: [], //{ appId: '', siteId: 123123 }
+        urlArr: [],
+        linkAllocation: 1,
+        clickUrlList: [{ value: '' }],
+        clickUrlActionList: [{ value: '' }],
+      },
+      // appAllocation: 1, //1按账户,2按广告计划,3按广告组
+      // appIds: [],
+      // linkAllocation: 1,
+      // clickUrlList: [],
+      appIdVisible: false,
+      appListArr: [],
       //配置应用/链接结束
 
       stepsArr: [
@@ -1936,6 +2115,15 @@ export default {
       }
       return count
     },
+    campaignCount() {
+      if (this.campaignData.groupRule) {
+        return this.campaignData.groupRule == 1
+          ? this.checkDirectionalList.length
+          : this.campaignData.groupRule == 2
+          ? this.materialCount
+          : 0
+      }
+    },
   },
   watch: {
     accountId: function (n, o) {
@@ -2028,6 +2216,95 @@ export default {
     })
   },
   methods: {
+    okAppId() {},
+    setCount(e) {
+      if (e.target.value == 1) {
+        this.appList.clickUrlList = [{ value: '' }]
+        this.appList.clickUrlActionList = [{ value: '' }]
+      } else if (e.target.value == 2) {
+        this.appList.clickUrlList = []
+        this.appList.clickUrlActionList = []
+        for (let i = 0; i < this.campaignCount; i++) {
+          this.appList.clickUrlList.push({ value: '' })
+          this.appList.clickUrlActionList.push({ value: '' })
+        }
+      } else if (e.target.value == 3) {
+        this.appList.clickUrlList = []
+        this.appList.clickUrlActionList = []
+        var count = this.checkDirectionalList.length * this.materialInfo.materialList.length * this.campaignCount
+        for (let i = 0; i < count; i++) {
+          this.appList.clickUrlList.push({ value: '' })
+          this.appList.clickUrlActionList.push({ value: '' })
+        }
+      }
+    },
+    getAllData() {
+      var data = []
+      this.appListArr.filter((co, i) => {
+        let temp = this.targetKeys.indexOf(co.key)
+        if (temp >= 0) {
+          data.push(co)
+        }
+      })
+      return data
+    },
+    onChangeTransFer(nextTargetKeys, direction, moveKeys) {
+      this.targetKeys = nextTargetKeys
+    },
+    getSiteList(item) {
+      this.getAction('/kuaishou/batch/getPageList', {
+        accountId: this.accountId,
+        appId: item.appId,
+        viewComp: 7,
+      }).then((res) => {
+        if (res.success) {
+          console.log(item)
+          item.siteList = res.result
+        } else {
+          this.showSite = false
+        }
+      })
+    },
+    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
+      return {
+        getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
+        onSelectAll(selected, selectedRows) {
+          itemSelectAll(selected)
+        },
+        onSelect({ key }, selected) {
+          itemSelect(key, selected)
+        },
+        selectedRowKeys: selectedKeys,
+      }
+    },
+
+    checkAppIds() {
+      if (
+        this.campaignCount == 0 ||
+        this.checkDirectionalList.length * this.materialInfo.materialList.length * this.campaignCount == 0
+      ) {
+        this.$message.error('请先完成以上操作,再进行此步骤')
+        return
+      } else {
+        this.appIdVisible = true
+
+        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: [],
+              }
+            })
+          }
+        })
+      }
+    },
     moment,
     setItemDate(sum, item) {
       let i = sum
@@ -2099,6 +2376,9 @@ export default {
       this.titleVisible = true
       this.getHangye()
     },
+    addOne() {
+      this.descriptionList.push({ value: '', edit: true })
+    },
     getHangye() {
       this.getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
         if (res.success) {
@@ -2200,7 +2480,9 @@ export default {
 
       for (let i = 0; i < this.materialInfo.materialList.length; i++) {
         for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
-          this.setVideUrl(this.materialInfo.materialList[i].photoArr[j].photoId)
+          this.setVideUrl(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
+            this.materialInfo.materialList[i].photoArr[j].photoId = res
+          })
 
           this.getImageCover(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
             setTimeout(() => {
@@ -2210,6 +2492,7 @@ export default {
               }
 
               this.checkMatemalVisible = false
+              console.log(this.materialInfo.materialList)
             }, 100)
           })
         }
@@ -2217,23 +2500,31 @@ export default {
     },
     setVideUrl(photoId) {
       this.videoList = []
-      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 })
-        } else {
-        }
+      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 {
+      //   }
+      // })
     },
     getImageCover(photoId) {
       var params = {
-        videoSignature: photoId,
+        photoId: photoId,
         pageSize: 20,
         pageNo: 1,
       }
       return new Promise((resolve, reject) => {
-        this.getAction('/cutFrame/material/list', params).then((res) => {
+        this.getAction('/cutFrame/material/queryByPhotoId', params).then((res) => {
           if (res.success) {
-            resolve(res.result.records)
+            resolve(res.result)
           }
         })
       })
@@ -2529,7 +2820,112 @@ export default {
     },
     handleSubmit(e) {
       e.preventDefault()
-      this.form.validateFields((err, values) => {})
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          var params = {}
+          params.batchId = new Date().getTime()
+          if (this.campaignData.campaignName) {
+            params.campaignJson = {
+              ...this.campaignData,
+              accountId: this.accountId,
+              systemType: this.getData('systemType', 'form'),
+              campaignType: this.getData('campaignType', 'form'),
+              dayBudget: this.campaignData.dayBudget ? this.campaignData.dayBudget  : null,
+              timeStart: this.campaignData.timeStart
+                ? moment(this.campaignData.timeStart).format('YYYY-MM-DD hh:mm:ss')
+                : null,
+            }
+          } else {
+            this.$message.error('请填写规则的内容')
+            return
+          }
+          if (this.unitInfo.unitName) {
+            var str = ''
+            for (let i = 0; i < 7 * 24; i++) {
+              str += '0'
+            }
+            params.unitJson = {
+              ...this.unitInfo,
+              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,
+              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,
+              useAppMarket: this.unitInfo.useAppMarket ? 1 : 0,
+              appStore: this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null,
+              cpaBid: this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : null,
+              bid: this.unitInfo.bid ? this.unitInfo.bid * 1000 : null,
+              bidMax: this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : null,
+              bidMin: this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : null,
+            }
+          } else {
+            this.$message.error('请填写组内容')
+            return
+          }
+
+          if (this.checkDirectionalList.length > 0) {
+            params.targetIds = JSON.stringify(
+              this.checkDirectionalList.map((item) => {
+                return item.templateId
+              })
+            )
+          } else {
+            this.$message.error('请选择定向包')
+            return
+          }
+
+          params.creativeJson = {
+            ...this.creativeInfo,
+            accountId: this.accountId,
+            overlayType: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null,
+            creativeCategory: this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1],
+            creativeTag: JSON.stringify(this.creativeInfo.creativeTag),
+            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) => {
+              return {
+                ...item,
+                photoArr: item.photoArr.map((t) => {
+                  return { ...t, photoId: t.photoId.photoId }
+                }),
+              }
+            }),
+            descriptionList:
+              this.materialInfo.matchingMethod != 1
+                ? this.descriptionList.map((item) => {
+                    return item.value
+                  })
+                : null,
+          }
+          var dataArr = this.getAllData()
+          params.appList = {
+            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 }
+            }),
+            urlArr: null,
+            linkAllocation: this.appList.linkAllocation,
+            clickUrlList: this.appList.clickUrlList.map((item) => {
+              return item.value
+            }),
+            clickUrlActionList: this.appList.clickUrlActionList.map((item) => {
+              return item.value
+            }),
+          }
+          this.postDataAction('/kuaishouBatch/campaignPreview/addPreviewData', params).then((res) => {
+            if (res.success) {
+              window.open('/user/lookPreview?accountId=' + this.accountId + '&batchId=' + params.batchId, '_blank')
+            }
+          })
+        }
+      })
     },
 
     typeChange() {},
@@ -2636,9 +3032,19 @@ export default {
           // dayBudgetType: '1',
           // unitTime: '1',
           // scheduleTime: '1',
-          this.postDataAction('/template/kuaiShouBatchGroupTemplate/saveOrUpdate', params).then((res) => {
-            console.log(res)
-          })
+
+          if (this.keep) {
+            this.postDataAction('/template/kuaiShouBatchGroupTemplate/saveOrUpdate', params).then((res) => {
+              this.visible = false
+              if (res.success) {
+                this.$message.success(res.message)
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+          } else {
+            this.visible = false
+          }
         } else {
           console.log('error submit!!')
           return false
@@ -2662,9 +3068,18 @@ export default {
           // dayBudgetType: '1',
           // unitTime: '1',
           // scheduleTime: '1',
-          this.postDataAction('/template/kuaiShouBatchCreativeTemplate/saveOrUpdate', params).then((res) => {
-            console.log(res)
-          })
+          if (this.creativeInfo.keep) {
+            this.creativeVisible = false
+            this.postDataAction('/template/kuaiShouBatchCreativeTemplate/saveOrUpdate', params).then((res) => {
+              if (res.success) {
+                this.$message.success(res.message)
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+          } else {
+            this.creativeVisible = false
+          }
         } else {
           console.log('error submit!!')
           return false
@@ -2684,7 +3099,7 @@ export default {
         accountId: accountId,
       }).then((res) => {
         if (res.success) {
-          if (res.result.id) {
+          if (res.result) {
             var data = res.result
             //   params.id = this.createTiveTemplateId
             // params.accountId = this.accountId
@@ -2710,6 +3125,7 @@ export default {
             // unitTime: '1',
             // scheduleTime: '1',
           } else {
+            this.createTiveTemplateId = null
             this.closeUnit('createForm')
           }
         }
@@ -2720,7 +3136,7 @@ export default {
         accountId: accountId,
       }).then((res) => {
         if (res.success) {
-          if (res.result.id) {
+          if (res.result) {
             var str = ''
             for (let i = 0; i < 7 * 24; i++) {
               str += '0'
@@ -2745,13 +3161,14 @@ export default {
             this.unitInfo.ocpxActionType = data.ocpxActionType ? data.ocpxActionType : 2
             this.unitInfo.deepConversionType = data.deepConversionType
             this.unitInfo.templateBidType = data.templateBidType
-            this.unitInfo.cpaBid = data.cpaBid
-            this.unitInfo.bid = data.bid
-            this.unitInfo.deepConversionBid = data.deepConversionBid
-            this.unitInfo.bidMax = data.bidMax
-            this.unitInfo.bidMin = data.bidMin
+            this.unitInfo.cpaBid = data.cpaBid ? data.cpaBid / 1000 : null
+            this.unitInfo.bid = data.bid ? data.bid / 1000 : null
+            this.unitInfo.deepConversionBid = data.deepConversionBid ? data.deepConversionBid / 1000 : null
+            this.unitInfo.bidMax = data.bidMax ? data.bidMax / 1000 : null
+            this.unitInfo.bidMin = data.bidMin ? data.bidMin / 1000 : null
             this.unitInfo.unitName = data.unitName
           } else {
+            this.groupTemplateId = null
             this.closeUnit('ruleForm')
           }
         }
@@ -2762,7 +3179,7 @@ export default {
         accountId: accountId,
       }).then((res) => {
         if (res.success) {
-          if (res.result.id) {
+          if (res.result) {
             this.campaignTemplateId = res.result.id
             this.campaignData = res.result
             if (this.campaignData.timeStart) {
@@ -2780,6 +3197,7 @@ export default {
               })
             })
           } else {
+            this.campaignTemplateId = null
             this.form.resetFields()
           }
         }
@@ -2796,9 +3214,20 @@ export default {
           params.campaignType = this.getData('campaignType', 'form')
           params.dayBudget = values.dayBudget ? values.dayBudget * 1000 : null
           params.timeStart = values.timeStart ? moment(values.timeStart).format('YYYY-MM-DD hh:mm:ss') : null
-          this.postDataAction('/template/kuaiShouBatchCampaignTemplate/saveOrUpdate', params).then((res) => {
-            console.log(res)
-          })
+          this.campaignData = { ...params }
+
+          if (values.keep.length > 0) {
+            this.postDataAction('/template/kuaiShouBatchCampaignTemplate/saveOrUpdate', params).then((res) => {
+              this.ruleConfigFormCancel()
+              if (res.success) {
+                this.$message.success(res.message)
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+          } else {
+            this.ruleConfigFormCancel()
+          }
         }
       })
     },
@@ -2815,6 +3244,7 @@ export default {
               that.ruleConfigForm.setFieldsValue(
                 pick(mdl, ['budgetType', 'campaignName', 'campaignStatus', 'groupRule', 'isTime', 'keep', 'unitStatus'])
               )
+
               setTimeout(() => {
                 if (that.campaignData.isTime == '1') {
                   that.ruleConfigForm.setFieldsValue(pick(mdl, 'timeStart'))
@@ -2834,6 +3264,10 @@ export default {
     },
     getChangeAll(type, form, field) {
       var node = document.getElementById(field)
+      if (this.getData('groupRule', 'ruleConfigForm') == 2 && form == 'ruleConfigForm' && type == '定向包') {
+        this.$message.error('只有按定向包分组时,才可拼接定向包')
+        return
+      }
       var v = '{{' + type + '}}-'
       if (document.selection) {
         //IE

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

@@ -0,0 +1,465 @@
+<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-button type="primary" style="margin: 0 15px"> 全部提交审核 </a-button>
+              <a-button type="primary" style="margin: 0 15px"> 全部提交审核 </a-button>
+              <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>广告计划:{{ item.campaignName }}</span>
+                  <span>营销目标:{{ item.campaignType == 2 ? '提升应用安装' : '收集销售线索' }}</span>
+                  <span>预算:{{ item.dayBudget ? item.dayBudget / 1000 + '元' : '不限' }}</span>
+                  <a-checkbox 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>
+                    {{ text }}
+                    <a-icon type="edit" style="float: right; color: #409EFF; margin-top: 5px" class="count" />
+                  </p>
+                </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" style="color: #409EFF">
+                  已选{{ text ? text.length : 0 }}个视频素材
+                </span>
+                <span slot="dayBudget" slot-scope="text, records">
+                  <p style="text-align: left">预算:{{ 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" />
+                </span>
+                <span slot="appId" slot-scope="text, records">
+                  {{ setAppName(text) }}
+                </span>
+                <span slot="action" slot-scope="text, record">
+                  <a>删除</a>
+                  <!-- <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="isSuccess" slot-scope="text, records">{{ text ? '待提交' : '提交成功' }}</span>
+              </a-table>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </a-card>
+    </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 {
+      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: [],
+    }
+  },
+  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.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('网络开小差了,请刷新后重试')
+      }
+    })
+    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: {
+    onSelectChange(selectedRowKeys, selectionRows) {
+      this.groupCheck = selectedRowKeys
+      this.groupCheckRow = selectionRows
+    },
+    setAppName(appId) {
+      var data = this.appListArr.filter((item) => {
+        return +item.key == appId
+      })
+      return data[0].title
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>