瀏覽代碼

提交代码

朱鑫波 4 年之前
父節點
當前提交
5ba0540a83

+ 2 - 1
src/views/modules/kuaishouapp/account/advertisingGroup.vue

@@ -203,7 +203,8 @@
     </a-modal>
     <a-modal title="拷贝" v-model="visibleCopy" :width="900">
       <a-spin :spinning="copyLoading">
-           <span style="color:red;display:block;width:100%;text-align:center;margin:10px">快手后台抽帧,程序化创意暂不支持被复制</span>
+      <span style="color:red;display:block;width:100%;text-align:center;margin:10px">快手后台抽帧,程序化创意暂不支持被复制</span>
+      <span style="color:red;display:block;width:100%;text-align:center;margin:10px">第三方人群包不能复制</span>
       <a-form :form="form">
         <a-form-item label="广告计划名称" :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
           :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">

+ 183 - 176
src/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue

@@ -46,6 +46,7 @@ li:hover {
         <a-radio-button value="3">定向人群</a-radio-button>
         <!-- <a-radio-button value="4">付费人群</a-radio-button> -->
       </a-radio-group>
+      <span style="color: red;margin-left:10px">第三方人群包不能复制</span>
     </a-form-item>
     <a-form-item
       v-if="people == '3'"
@@ -61,12 +62,12 @@ li:hover {
       <div
         :style="{
           border: targeted == '4' ? '1px solid #f2f2f2' : '0',
-          padding: targeted == '4' ? '20px' : '0'
+          padding: targeted == '4' ? '20px' : '0',
         }"
         v-clickoutside="targetedShow"
       >
-        <div style="display:flex;margin-top:15px" v-if="targeted == '4' || targeted == '2'">
-          <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">定向池:</span>
+        <div style="display: flex; margin-top: 15px" v-if="targeted == '4' || targeted == '2'">
+          <span style="white-space: nowrap; width: 10%" v-if="targeted == '4'">定向池:</span>
           <a-input
             placeholder="请至少选择一个自定义人群"
             @focus="
@@ -80,7 +81,7 @@ li:hover {
         </div>
 
         <div
-          style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
+          style="background: white; padding: 10px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15)"
           :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
           v-show="topMiddle"
         >
@@ -89,24 +90,24 @@ li:hover {
             :dataSource="dataList"
             bordered
             :pagination="false"
-            :scroll="{ y: 300 ,x:true }"
+            :scroll="{ y: 300, x: true }"
             :rowSelection="{
               selectedRowKeys: selectedRowKeys,
               onChange: onSelectChange,
-              getCheckboxProps: getCheckboxProps
+              getCheckboxProps: getCheckboxProps,
             }"
           >
             <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
             <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
             <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
           </a-table>
-          <div style="text-align:right">
-            <a-button style="margin-right:5px" @click="topMiddle = false">取消</a-button>
+          <div style="text-align: right">
+            <a-button style="margin-right: 5px" @click="topMiddle = false">取消</a-button>
             <a-button type="primary" @click="okSelect">确定</a-button>
           </div>
         </div>
-        <div style="display:flex;margin-top:15px" v-if="targeted == '4' || targeted == '3'">
-          <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">排除池:</span>
+        <div style="display: flex; margin-top: 15px" v-if="targeted == '4' || targeted == '3'">
+          <span style="white-space: nowrap; width: 10%" v-if="targeted == '4'">排除池:</span>
           <a-input
             placeholder="请至少选择一个自定义人群"
             @focus="
@@ -120,7 +121,7 @@ li:hover {
         </div>
 
         <div
-          style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
+          style="background: white; padding: 10px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15)"
           :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
           v-show="topMiddleNo"
         >
@@ -129,19 +130,19 @@ li:hover {
             :dataSource="dataList"
             bordered
             :pagination="false"
-            :scroll="{ y: 300 ,x:true}"
+            :scroll="{ y: 300, x: true }"
             :rowSelection="{
               selectedRowKeys: selectedRowKeysNo,
               onChange: onSelectChangeNo,
-              getCheckboxProps: getCheckboxPropsNo
+              getCheckboxProps: getCheckboxPropsNo,
             }"
           >
             <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
             <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
             <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
           </a-table>
-          <div style="text-align:right">
-            <a-button style="margin-right:5px" @click="topMiddleNo = false">取消</a-button>
+          <div style="text-align: right">
+            <a-button style="margin-right: 5px" @click="topMiddleNo = false">取消</a-button>
             <a-button type="primary" @click="okSelectNo">确定</a-button>
           </div>
         </div>
@@ -156,7 +157,7 @@ li:hover {
         <a-radio-button value="noLimit">不限</a-radio-button>
         <a-radio-button value="limit">指定地区</a-radio-button>
       </a-radio-group>
-      <div v-if="allForm.regionType == 'limit'" style="margin-top:10px">
+      <div v-if="allForm.regionType == 'limit'" style="margin-top: 10px">
         <select-region :checkData.sync="allForm.region" :dataValue="allForm.region" />
       </div>
     </a-form-item>
@@ -191,8 +192,8 @@ li:hover {
             'age',
             {
               rules: [{ required: true, message: '请选择年龄段' }, { validator: handleConfirmValue }],
-              initialValue: [10, 50]
-            }
+              initialValue: [10, 50],
+            },
           ]"
         />
       </div>
@@ -207,8 +208,8 @@ li:hover {
         v-decorator="[
           'gender',
           {
-            initialValue: 0
-          }
+            initialValue: 0,
+          },
         ]"
       >
         <a-radio-button :value="0">不限</a-radio-button>
@@ -238,8 +239,8 @@ li:hover {
         v-decorator="[
           'androidOsv',
           {
-            initialValue: 3
-          }
+            initialValue: 3,
+          },
         ]"
       >
         <a-radio :value="3">不限</a-radio>
@@ -260,8 +261,8 @@ li:hover {
         v-decorator="[
           'iosOsv',
           {
-            initialValue: 6
-          }
+            initialValue: 6,
+          },
         ]"
       >
         <a-radio :value="6">不限</a-radio>
@@ -281,10 +282,10 @@ li:hover {
         <a-radio-button value="0">不限</a-radio-button>
         <a-radio-button value="1">选择品牌</a-radio-button>
       </a-radio-group>
-      <div v-if="allForm.device == '1'" style="width:120%">
+      <div v-if="allForm.device == '1'" style="width: 120%">
         <a-checkbox-group
           v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
-          style="width:120%"
+          style="width: 120%"
         >
           <a-checkbox :value="1">OPPO</a-checkbox>
           <a-checkbox :value="2">VIVO</a-checkbox>
@@ -309,10 +310,10 @@ li:hover {
         <a-radio-button value="0">不限</a-radio-button>
         <a-radio-button value="1">选择价格</a-radio-button>
       </a-radio-group>
-      <div v-if="allForm.price == '1'" style="width:120%">
+      <div v-if="allForm.price == '1'" style="width: 120%">
         <a-checkbox-group
           v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
-          style="width:120%"
+          style="width: 120%"
         >
           <a-checkbox :value="1">1500以下</a-checkbox>
           <a-checkbox :value="2">1501~2000</a-checkbox>
@@ -331,7 +332,7 @@ li:hover {
       label="APP行为"
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-      v-if="allForm.platform_os == 1&&allForm.platform_os&&lol=='1'"
+      v-if="allForm.platform_os == 1 && allForm.platform_os && lol == '1'"
     >
       <a-radio-group buttonStyle="solid" v-model="allForm.appType" @change="getAppType">
         <a-radio-button value="0">不限</a-radio-button>
@@ -343,7 +344,7 @@ li:hover {
       label=" "
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-      v-if="allForm.platform_os == 1 && allForm.appType == '1'&&lol=='1'"
+      v-if="allForm.platform_os == 1 && allForm.appType == '1' && lol == '1'"
       class="else-label"
     >
       <a-select
@@ -363,43 +364,51 @@ li:hover {
       label=" "
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-      v-if="allForm.platform_os == 1 && allForm.appType == '2'&&lol=='1'"
+      v-if="allForm.platform_os == 1 && allForm.appType == '2' && lol == '1'"
       class="else-label"
     >
-      <div style="position:relative;" v-clickoutside="handleClose">
+      <div style="position: relative" v-clickoutside="handleClose">
         <a-input
           placeholder="请输入搜索内容"
           @change="getAppAll"
           @focus="getAppAllElse"
-          style="width:100%;position:relative;"
+          style="width: 100%; position: relative"
           v-model="appListValue"
         />
         <div
-          style="width:100%;position:absolute;z-index:10;height:200px;background:white;overflow:auto;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
+          style="
+            width: 100%;
+            position: absolute;
+            z-index: 10;
+            height: 200px;
+            background: white;
+            overflow: auto;
+            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+          "
           v-if="closeDialog"
         >
           <ul>
-            <li style="padding:0 10px">
+            <li style="padding: 0 10px">
               <a-checkbox
-                style="float:left;margin:0 5px"
+                style="float: left; margin: 0 5px"
                 @change="onCheckAllChange"
                 :indeterminate="indeterminate"
                 :checked="checkAll"
               ></a-checkbox
               >全选
             </li>
-            <a-checkbox-group @change="onChange" v-model="checkArr" class="home-card" style="width:100%">
-              <li style="padding:0 10px;width:100%;" v-for="item of optionsApp" :key="item.appId">
-                <a-checkbox :value="item.appId" style="float:left;margin:0 5px"></a-checkbox>{{ item.appName }}
+            <a-checkbox-group @change="onChange" v-model="checkArr" class="home-card" style="width: 100%">
+              <li style="padding: 0 10px; width: 100%" v-for="item of optionsApp" :key="item.appId">
+                <a-checkbox :value="item.appId" style="float: left; margin: 0 5px"></a-checkbox>{{ item.appName }}
               </li>
             </a-checkbox-group>
           </ul>
         </div>
-        <div style="width:100%" v-if="optionsAll.length > 0">
+        <div style="width: 100%" v-if="optionsAll.length > 0">
           <a-button @click="clearAll">清空</a-button>
           <br />
           <a-tag v-for="item of optionsAll" :key="item" closable :afterClose="() => log(item)">
-            {{ showAppName(item)?showAppName(item):item }}
+            {{ showAppName(item) ? showAppName(item) : item }}
           </a-tag>
         </div>
       </div>
@@ -408,22 +417,24 @@ li:hover {
       label="商业兴趣"
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-       v-if="lol=='1'"
+      v-if="lol == '1'"
     >
       <a-radio-group buttonStyle="solid" @change="businessInterest" v-model="allForm.businessInterestType">
         <a-radio-button :value="0">不限</a-radio-button>
         <a-radio-button :value="1">智能推荐</a-radio-button>
         <a-radio-button :value="2">兴趣标签</a-radio-button>
       </a-radio-group>
-      <br>
-      <span v-if="allForm.businessInterestType==1">商业兴趣定向会根据您的投放计划,智能精选出最匹配人群,帮助您获取更满足投放意图的人群,以达到最好的投放效果。</span>
+      <br />
+      <span v-if="allForm.businessInterestType == 1"
+        >商业兴趣定向会根据您的投放计划,智能精选出最匹配人群,帮助您获取更满足投放意图的人群,以达到最好的投放效果。</span
+      >
     </a-form-item>
     <a-form-item
       label=" "
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
       class="else-label"
-      v-if="allForm.businessInterestType == 2&&lol=='1'"
+      v-if="allForm.businessInterestType == 2 && lol == '1'"
     >
       <a-select
         mode="multiple"
@@ -448,8 +459,8 @@ li:hover {
         v-decorator="[
           'network',
           {
-            initialValue: 0
-          }
+            initialValue: 0,
+          },
         ]"
       >
         <a-radio-button :value="0">不限</a-radio-button>
@@ -462,7 +473,7 @@ li:hover {
       label="网红粉丝"
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-      v-if="lol=='1'"
+      v-if="lol == '1'"
     >
       <a-radio-group buttonStyle="solid" v-model="allForm.fansStar" @change="fansStar">
         <a-radio-button value="0">不限</a-radio-button>
@@ -474,7 +485,7 @@ li:hover {
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
       class="else-label"
-      v-if="allForm.fansStar == '1'&&lol=='1'"
+      v-if="allForm.fansStar == '1' && lol == '1'"
     >
       <a-select
         mode="multiple"
@@ -494,7 +505,7 @@ li:hover {
       label="兴趣视频用户"
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-      v-if="lol=='1'"
+      v-if="lol == '1'"
     >
       <a-radio-group buttonStyle="solid" v-model="allForm.interestVideo" @change="interestVideo">
         <a-radio-button value="0">不限</a-radio-button>
@@ -506,7 +517,7 @@ li:hover {
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
       class="else-label"
-      v-if="allForm.interestVideo == '1'&&lol=='1'"
+      v-if="allForm.interestVideo == '1' && lol == '1'"
     >
       <a-select
         mode="multiple"
@@ -533,7 +544,7 @@ li:hover {
             initialValue: '0'
           }
         ]" -->
-     <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel',{initialValue: 0}]">
+      <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
         <a-radio-button :value="0">不限</a-radio-button>
         <a-radio-button :value="1">广告组</a-radio-button>
         <a-radio-button :value="2">广告计划</a-radio-button>
@@ -546,7 +557,7 @@ li:hover {
       label="智能扩量"
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
-      v-if="lol=='1'"
+      v-if="lol == '1'"
     >
       <!-- v-decorator="[
           'isOpen',
@@ -564,7 +575,7 @@ li:hover {
       :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
       :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
       class="else-label"
-      v-if="allForm.isOpen == 1&&lol=='1'"
+      v-if="allForm.isOpen == 1 && lol == '1'"
     >
       <a-checkbox :disabled="allForm.ageType == 'noLimit'" :checked="allForm.noAgeBreak" @change="getAge"
         >不可突破年龄</a-checkbox
@@ -572,7 +583,10 @@ li:hover {
       <a-checkbox :disabled="getData('gender') == '0'" :checked="allForm.noGenderBreak" @change="getGender"
         >不可突破性别</a-checkbox
       >
-      <a-checkbox :disabled="allForm.regionType != 'limit'||allForm.region.length==0" :checked="allForm.noAreaBreak" @change="getArea"
+      <a-checkbox
+        :disabled="allForm.regionType != 'limit' || allForm.region.length == 0"
+        :checked="allForm.noAreaBreak"
+        @change="getArea"
         >不可突破地域</a-checkbox
       >
     </a-form-item>
@@ -611,7 +625,7 @@ const clickoutside = {
     // 解除事件监听
     document.removeEventListener('click', el.__vueClickOutside__)
     delete el.__vueClickOutside__
-  }
+  },
 }
 
 const columns = [
@@ -619,7 +633,7 @@ const columns = [
     title: '人群',
     dataIndex: 'orientationName',
     scopedSlots: { customRender: 'orientationName' },
-    width: 150
+    width: 150,
   },
   {
     title: '属性',
@@ -641,22 +655,18 @@ const columns = [
       { text: '固化标签', value: '14' },
       { text: '行业偏好', value: '15' },
       { text: '第三方标签', value: '16' },
-      { text: '产品关键词', value: '17' }
+      { text: '产品关键词', value: '17' },
     ],
-    onFilter: (value, record) =>
-      record.populationType
-        .toString()
-        .toLowerCase()
-        .includes(value.toLowerCase()),
+    onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
     scopedSlots: { customRender: 'populationType' },
-    width: 150
+    width: 150,
   },
   {
     title: '创建时间',
     dataIndex: 'putTime',
     scopedSlots: { customRender: 'putTime' },
-    sorter: (a, b) => a.putTime - b.putTime
-  }
+    sorter: (a, b) => a.putTime - b.putTime,
+  },
 ]
 
 export default {
@@ -667,20 +677,20 @@ export default {
       type: String,
       default() {
         return null
-      }
+      },
     },
     platform: {
       default() {
         return null
-      }
+      },
     },
     populationData: {},
-    lol:{
-      type:String,
-      default(){
-        return "1"
-      }
-    }
+    lol: {
+      type: String,
+      default() {
+        return '1'
+      },
+    },
   },
   filters: {
     getDate(value) {
@@ -697,7 +707,7 @@ export default {
         1: 'Android应用下载',
         2: 'Android网页游戏',
         3: 'iOS应用下载',
-        4: 'iOS网页游戏'
+        4: 'iOS网页游戏',
       }
       return data[str]
     },
@@ -719,10 +729,10 @@ export default {
         14: '固化标签',
         15: '行业偏好',
         16: '第三方标签',
-        17: '产品关键词'
+        17: '产品关键词',
       }
       return data[str]
-    }
+    },
   },
   watch: {
     platform(n, o) {
@@ -749,10 +759,10 @@ export default {
           this.allForm.noAreaBreak = n.noAreaBreak == '0' ? false : true
           this.selectedRowKeys = n.population ? n.population : []
           this.selectedRowKeysNo = n.excludePopulation ? n.excludePopulation : []
-          this.optionsAll = n.appIds?(typeof n.appIds)=='string'? JSON.parse(n.appIds):n.appIds:[]
+          this.optionsAll = n.appIds ? (typeof n.appIds == 'string' ? JSON.parse(n.appIds) : n.appIds) : []
           this.targeted = n.excludePopulation ? (n.population ? '4' : '3') : '2'
           this.people = n.excludePopulation ? '3' : n.population ? '3' : '2'
-          this.getPeople().then(res => {
+          this.getPeople().then((res) => {
             if (n.excludePopulation) {
               this.keyValueNo = ''
               this.selectedRowKeysValueNo = []
@@ -762,7 +772,7 @@ export default {
                     this.keyValueNo += res[i].orientationName + '   '
                     this.selectedRowKeysValueNo.push({
                       orientationId: res[i].orientationId,
-                      orientationName: res[i].orientationName
+                      orientationName: res[i].orientationName,
                     })
                     this.selectedRowKeysNo.push()
                   }
@@ -778,7 +788,7 @@ export default {
                     this.keyValue += res[i].orientationName + '   '
                     this.selectedRowKeysValue.push({
                       orientationId: res[i].orientationId,
-                      orientationName: res[i].orientationName
+                      orientationName: res[i].orientationName,
                     })
                   }
                 }
@@ -800,7 +810,7 @@ export default {
                 'deviceBrand',
                 'devicePrice',
                 'businessInterest',
-                'filterConvertedLevel'
+                'filterConvertedLevel',
               ])
             )
           })
@@ -827,10 +837,10 @@ export default {
             isOpen: 0,
             noAgeBreak: false,
             noGenderBreak: false,
-            noAreaBreak: false
+            noAreaBreak: false,
           }
         }
-      }
+      },
     },
     checkArr(n, o) {
       console.log(n, o)
@@ -853,7 +863,7 @@ export default {
   directives: { clickoutside },
   data() {
     return {
-      optionsAll:[],
+      optionsAll: [],
       formAll: this.$form.createForm(this),
       marks: {
         5: '5岁',
@@ -866,12 +876,12 @@ export default {
         40: '40岁',
         45: '45岁',
         50: '50岁',
-        55: '55岁'
+        55: '55岁',
       },
       step: 0,
       loading: false,
       checkArr: [],
-      appListValue:"",
+      appListValue: '',
       checkAll: false,
       allForm: {
         regionType: 'noLimit',
@@ -894,7 +904,7 @@ export default {
         topMiddle: false,
         topMiddleNo: false,
         keyValue: '',
-        keyValueNo: ''
+        keyValueNo: '',
       },
       options: [],
       optionsAll: [],
@@ -903,7 +913,7 @@ export default {
         label: 'name',
         children: 'children',
         multiple: true,
-        emitPath: false
+        emitPath: false,
         // checkStrictly: true
       },
       optionsApp: [],
@@ -917,7 +927,7 @@ export default {
         label: 'tagName',
         children: 'children',
         multiple: true,
-        emitPath: false
+        emitPath: false,
       },
       getApp: '0',
       closeDialog: false,
@@ -935,20 +945,20 @@ export default {
       selectedRowKeysNo: [],
       selectedRowKeysValueNo: [],
       dataList: [],
-      dataElse:[]
+      dataElse: [],
     }
   },
   computed: {},
   methods: {
     getPeople() {
       return new Promise((resolve, reject) => {
-        getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then(res => {
+        getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then((res) => {
           if (res.success) {
             if (res.result) {
               this.dataList = res.result.map((item, index) => {
                 return {
                   ...item,
-                  key: index
+                  key: index,
                 }
               })
               this.dataElse = this.dataList
@@ -968,28 +978,28 @@ export default {
     },
     onSelectChange(selectedRowKeys, selectionRows) {
       this.selectedRowKeys = selectedRowKeys
-      this.selectedRowKeysValue = selectionRows.map(item => {
+      this.selectedRowKeysValue = selectionRows.map((item) => {
         return { orientationId: item.orientationId, orientationName: item.orientationName }
       })
     },
     getCheckboxProps(record) {
       return {
         props: {
-          disabled: this.selectedRowKeysValueNo.some(item => item.orientationId === record.orientationId)
-        }
+          disabled: this.selectedRowKeysValueNo.some((item) => item.orientationId === record.orientationId),
+        },
       }
     },
     onSelectChangeNo(selectedRowKeys, selectionRows) {
       this.selectedRowKeysNo = selectedRowKeys
-      this.selectedRowKeysValueNo = selectionRows.map(item => {
+      this.selectedRowKeysValueNo = selectionRows.map((item) => {
         return { orientationId: item.orientationId, orientationName: item.orientationName }
       })
     },
     getCheckboxPropsNo(record) {
       return {
         props: {
-          disabled: this.selectedRowKeysValue.some(item => item.orientationId === record.orientationId)
-        }
+          disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
+        },
       }
     },
     okSelect() {
@@ -1006,19 +1016,19 @@ export default {
         this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + '   '
       }
     },
-    showOne(){
-    //    this.keyValueNo =orientationName
-        var data = this.keyValue.split('   ')
-        this.dataList = this.dataElse.filter(item => {
-          return item.orientationName.toLowerCase().indexOf(data[data.length-1].toLowerCase()) > -1
-        })
+    showOne() {
+      //    this.keyValueNo =orientationName
+      var data = this.keyValue.split('   ')
+      this.dataList = this.dataElse.filter((item) => {
+        return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
+      })
     },
-    showTwo(){
-    //    this.keyValueNo =orientationName
-        var data = this.keyValueNo.split('   ')
-        this.dataList = this.dataElse.filter(item => {
-          return item.orientationName.toLowerCase().indexOf(data[data.length-1].toLowerCase()) > -1
-        })
+    showTwo() {
+      //    this.keyValueNo =orientationName
+      var data = this.keyValueNo.split('   ')
+      this.dataList = this.dataElse.filter((item) => {
+        return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
+      })
     },
     getAge(e) {
       this.allForm.noAgeBreak = e.target.checked
@@ -1044,20 +1054,18 @@ export default {
       }
     },
     showAppName(appId) {
-        if(this.checkOptions.length>0){
-            var data = this.checkOptions.filter(item => {
-                return item.appId == appId
-            })
-            if(data[0]){
-              return data[0].appName
-            }else{
-              return null
-            }
-            
-        }else{
-            return null
+      if (this.checkOptions.length > 0) {
+        var data = this.checkOptions.filter((item) => {
+          return item.appId == appId
+        })
+        if (data[0]) {
+          return data[0].appName
+        } else {
+          return null
         }
-     
+      } else {
+        return null
+      }
     },
     log(appId) {
       var index = this.optionsAll.findIndex((item) => item === appId)
@@ -1070,9 +1078,9 @@ export default {
     handleClose(e) {
       this.closeDialog = false
     },
-    targetedShow(e){
-        this.topMiddle = false
-        this.topMiddleNo = false
+    targetedShow(e) {
+      this.topMiddle = false
+      this.topMiddleNo = false
     },
     clearAll() {
       this.checkArr = []
@@ -1083,24 +1091,24 @@ export default {
       this.indeterminate =
         !!checkedList.length &&
         checkedList.length <
-          this.optionsApp.map(item => {
+          this.optionsApp.map((item) => {
             return item.appId
           }).length
       this.checkAll =
         checkedList.length ===
-        this.optionsApp.map(item => {
+        this.optionsApp.map((item) => {
           return item.appId
         }).length
     },
     onCheckAllChange(e) {
       Object.assign(this, {
         checkArr: e.target.checked
-          ? this.optionsApp.map(item => {
+          ? this.optionsApp.map((item) => {
               return item.appId
             })
           : [],
         indeterminate: false,
-        checkAll: e.target.checked
+        checkAll: e.target.checked,
       })
       if (this.optionsAll.length > 20) {
         this.$message.error('最多选择20个APP行为')
@@ -1127,32 +1135,32 @@ export default {
             json.appIds = this.optionsAll
           }
           if (this.allForm.regionType == 'limit') {
-            json.region = this.allForm.region.map(item => {
+            json.region = this.allForm.region.map((item) => {
               return item.value
             })
           }
           var jsonData = {}
-          if(this.people == '3'){
+          if (this.people == '3') {
             if (this.targeted == '2') {
-                jsonData.population = this.selectedRowKeysValue.map(item => {
+              jsonData.population = this.selectedRowKeysValue.map((item) => {
                 return item.orientationId
-                })
+              })
             } else if (this.targeted == '3') {
-                jsonData.excludePopulation = this.selectedRowKeysValueNo.map(item => {
+              jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
                 return item.orientationId
-                })
+              })
             } else if (this.targeted == '4') {
-                jsonData.population = this.selectedRowKeysValue.map(item => {
+              jsonData.population = this.selectedRowKeysValue.map((item) => {
                 return item.orientationId
-                })
-                jsonData.excludePopulation = this.selectedRowKeysValueNo.map(item => {
+              })
+              jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
                 return item.orientationId
-                })
+              })
             } else {
-                jsonData = {}
+              jsonData = {}
             }
           }
-          
+
           var dataJson = {
             ...values,
             platformOs: this.allForm.platform_os,
@@ -1163,7 +1171,7 @@ export default {
             noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
             noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
             allForm: this.allForm,
-            ...jsonData
+            ...jsonData,
           }
           this.$emit('update:populationData', dataJson)
         }
@@ -1186,42 +1194,42 @@ export default {
     },
     search(e) {},
     put() {
-      var data = this.allForm.region.map(item => {
+      var data = this.allForm.region.map((item) => {
         return item[1] + ''
       })
-      var dataElse = data.map(item => {
+      var dataElse = data.map((item) => {
         return [item.substring(0, 2), item]
       })
     },
-    getAppAllElse(e){
-        this.checkArr = this.optionsAll
-        // this.getAppAll()
-        
-        if(this.appListValue!=''){
-           getAction('/kuaishou/batch/getAppSearch', {
-              accountId: localStorage.getItem('accountId'),
-              appName: e.target.value
-            }).then(res => {
-              if (res.result) {
-                this.optionsApp = res.result
-                this.checkOptions.push(...res.result)
-                this.closeDialog = true
-              } else {
-                this.optionsApp = []
-                this.closeDialog = false
-              }
-            })
-        }else {
-          this.optionsApp = []
-          this.closeDialog = false
-        }
+    getAppAllElse(e) {
+      this.checkArr = this.optionsAll
+      // this.getAppAll()
+
+      if (this.appListValue != '') {
+        getAction('/kuaishou/batch/getAppSearch', {
+          accountId: localStorage.getItem('accountId'),
+          appName: e.target.value,
+        }).then((res) => {
+          if (res.result) {
+            this.optionsApp = res.result
+            this.checkOptions.push(...res.result)
+            this.closeDialog = true
+          } else {
+            this.optionsApp = []
+            this.closeDialog = false
+          }
+        })
+      } else {
+        this.optionsApp = []
+        this.closeDialog = false
+      }
     },
     getAppAll(e) {
       if (e.target.value !== '') {
         getAction('/kuaishou/batch/getAppSearch', {
           accountId: localStorage.getItem('accountId'),
-          appName: e.target.value
-        }).then(res => {
+          appName: e.target.value,
+        }).then((res) => {
           if (res.result) {
             this.optionsApp = res.result
             this.checkOptions.push(...res.result)
@@ -1241,7 +1249,7 @@ export default {
       this.formAll.setFieldsValue({ appInterest: [] })
       this.checkArr = []
       if (e.target.value == '1') {
-        getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then(res => {
+        getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then((res) => {
           if (res.success) {
             this.optionsApp = res.result
           }
@@ -1268,7 +1276,7 @@ export default {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
     getDataType(type, dataList) {
-      getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
+      getAction('/kuaishou/batch/getTargetList', { tagType: type }).then((res) => {
         if (res.success) {
           this[dataList] = res.result
         }
@@ -1276,15 +1284,14 @@ export default {
     },
     getData(className) {
       return this.formAll.getFieldValue(className)
-    }
+    },
   },
-  mounted: function() {
+  mounted: function () {
     this.getDataType('APP_INTEREST', 'optionsAppActive')
     this.getDataType('BUSINESS_INTEREST', 'businessOptions')
     this.getDataType('FANS_STAR', 'fansStarOptions')
     this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
-
-  }
+  },
 }
 </script>
 

+ 405 - 0
src/views/modules/kuaishouapp/crossAccount/createCreative.vue

@@ -0,0 +1,405 @@
+<style lang="scss">
+.display-none-selset {
+  display: none !important;
+}
+.chouzhen span {
+  display: inline-block;
+}
+
+.check-video .ant-tabs-nav-container {
+  text-align: center;
+  font-size: 20px;
+}
+
+.step3-image {
+  span {
+    padding: 0;
+  }
+
+  .ant-checkbox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+}
+
+.step3-modal {
+  .ant-checkbox {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 100;
+  }
+}
+
+.onlny-click-track {
+  .ant-list-item-content {
+    width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.sticker-styles .ant-radio-wrapper {
+  margin-right: 0;
+}
+</style>
+<style>
+.create-creative .ant-form-item-control {
+  line-height: inherit;
+}
+.create-creative .ant-tabs-bar {
+  width: 50%;
+  margin: auto;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #e8e8e8;
+  outline: none;
+  -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.create-creative .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
+  color: #fff;
+  background: #1890ff !important;
+  border-color: #1890ff !important;
+  border-bottom: 1px solid #1890ff !important;
+}
+.create-creative .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
+  height: 40px;
+  margin: 0;
+  margin-right: 2px;
+  padding: 0 16px;
+  line-height: 38px;
+  background: #fafafa;
+  border: 1px solid #e8e8e8 !important;
+  border-radius: 4px 4px 0 0 !important;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+</style>
+<template>
+  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="create-creative">
+    <a-form-model ref="unitCreate" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-tabs type="card" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-tab-pane :key="pane.unitId" :tab="'组:' + pane.unitName" v-for="(pane, index) of form.accountArr">
+          <!-- <a-tabs style="width: 50%; margin: 0 auto" type="editable-card" hideAdd @edit="remove">
+      <a-tab-pane
+        v-for="(pane, bestIndex) in pans"
+        :tab="pane.tab"
+        :key="pane.key"
+        v-model="pansKey"
+        disabled
+        :closable="pane.closable"
+        class="shishishis"
+      > -->
+          <!-- <a-form @submit="handleSubmit" :form="form" style="margin-top: 20px" :hideRequiredMark="true"> -->
+          <a-layout style="margin: auto; width: 50%">
+            <a-layout-content style="padding: 10px">
+              <a-row>
+                <a-col :span="24" v-for="(item, index) of pane.photoArr" :key="index">
+                  <a-card title :ref="item">
+                    <a-icon
+                      type="close"
+                      style="float: right; cursor: pointer"
+                      @click="deleteCreative(bestIndex, index)"
+                    />
+                    <div style="clear: both"></div>
+                    <a-form-model-item label="素材类型">
+                      <a-radio-group buttonStyle="solid" v-model="item.creativeMaterialType" @change="changeType(item)">
+                        <a-radio-button value="1">竖版视频</a-radio-button>
+                        <a-radio-button value="2">横版视频</a-radio-button>
+                        <!-- <a-radio-button value="4" v-if="JSON.parse(pane.sceneId).indexOf(7)>0">便利贴创意</a-radio-button> -->
+                      </a-radio-group>
+                    </a-form-model-item>
+                  </a-card>
+                </a-col>
+              </a-row>
+              <div :style="{ marginBottom: '16px' }">
+                <a-button @click="addCreative(bestIndex)"> 添加创意</a-button>
+              </div>
+            </a-layout-content>
+          </a-layout>
+        </a-tab-pane>
+      </a-tabs>
+    </a-form-model>
+
+    <a-form-model :wrapperCol="{ span: 24 }" style="text-align: center">
+      <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
+    </a-form-model>
+  </a-card>
+</template>
+
+<script>
+import { getAction, postAction, deleteAction } from '@/api/manage'
+import { mapGetters } from 'vuex'
+import UploadToAli from '@femessage/upload-to-ali'
+import moment from 'moment'
+import VuePreview from 'vue-preview'
+import jq from 'jquery'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+import checkMatemal from '../account/stepForm/stepModule/checkMatemal'
+import BMF from 'browser-md5-file'
+import uploadFile from '@/components/uploadFile.vue'
+let nowIndex = 0
+let bestIndex = 0
+let showRemove = false
+export default {
+  name: 'create-creative',
+  components: {
+    UploadToAli,
+    VuePreview,
+    checkMatemal,
+    uploadFile,
+  },
+  data() {
+    return {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 17 },
+      formItemLayout: {
+        labelCol: {
+          xs: { span: 7 },
+          sm: { span: 7 },
+        },
+        wrapperCol: {
+          xs: { span: 17, offset: 0 },
+          sm: { span: 17, offset: 7 },
+        },
+      },
+
+      form: {
+        accountArr: [
+          {
+            sceneId: [1],
+            accountId: 23212,
+            unitId: 1213211,
+            unitName: '测试啊',
+            photoArr: [
+              {
+                creativeMaterialType: '1',
+                creativeName: '测试',
+                photo_id: 122312121,
+                imageToken: ['swadasdfasdfa', 'swadasdfasdfa'],
+                stickyImageTokens: ['creative_material_type为4存在'],
+                action_bar_text: '行动号召按钮文案',
+                description: '广告语',
+                short_slogan: '便利贴创意短广告语',
+                sticker_title: '封面广告语标题',
+                overlay_type: '贴纸样式类型',
+                expose_tag: '广告标签',
+                new_expose_tag: ['广告标签2期'],
+                site_id: '安卓下载中间页ID',
+                click_track_url: '第三方点击检测链接',
+                impression_url: '第三方开始播放监测链接',
+                ad_photo_played_t3s_ur: '第三方有效播放监测链接',
+                creative_category: '创意分类',
+                creative_tag: '创意标签',
+              },
+            ],
+          },
+        ],
+      },
+    }
+  },
+  methods: {},
+  computed: {},
+  watch: {},
+  mounted: function () {
+    this.$nextTick(() => {
+      Splitting()
+    })
+  },
+}
+</script>
+<style lang="scss" scope>
+$colors: #f9ca24, #3498db, #ff7979, #1abc9c, #e74c3c, #f8c291;
+
+/* Recommended styles for Splitting */
+.splitting .word,
+.splitting .char {
+  display: inline-block;
+}
+
+/* Psuedo-element chars */
+.splitting .char {
+  position: relative;
+}
+
+/**
+ * Populate the psuedo elements with the character to allow for expanded effects
+ * Set to `display: none` by default; just add `display: block` when you want
+ * to use the psuedo elements
+ */
+.splitting .char::before,
+.splitting .char::after {
+  content: attr(data-char);
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  transition: inherit;
+  user-select: none;
+}
+
+/* Expanded CSS Variables */
+
+.splitting {
+  /* The center word index */
+  --word-center: calc((var(--word-total) - 1) / 2);
+
+  /* The center character index */
+  --char-center: calc((var(--char-total) - 1) / 2);
+
+  /* The center character index */
+  --line-center: calc((var(--line-total) - 1) / 2);
+}
+
+.splitting .word {
+  /* Pecent (0-1) of the word's position */
+  --word-percent: calc(var(--word-index) / var(--word-total));
+
+  /* Pecent (0-1) of the line's position */
+  --line-percent: calc(var(--line-index) / var(--line-total));
+}
+
+.splitting .char {
+  /* Percent (0-1) of the char's position */
+  --char-percent: calc(var(--char-index) / var(--char-total));
+
+  /* Offset from center, positive & negative */
+  --char-offset: calc(var(--char-index) - var(--char-center));
+
+  /* Absolute distance from center, only positive */
+  --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));
+
+  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
+  --distance-sine: calc(var(--char-offset) / var(--char-center));
+
+  /* Distance from center where 1 is far left/far right, 0 is center */
+  --distance-percent: calc((var(--distance) / var(--char-center)));
+}
+
+* {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+// html, body {
+//   height: 100%;
+// }
+
+.headline {
+  align-items: center;
+  // background-color: var(--color);
+  display: flex;
+  font-family: 'Lexend Deca', sans-serif;
+  font-weight: 400;
+  // font-size: calc(1rem + 15vmin);
+  height: 72px;
+  justify-content: center;
+  // overflow: hidden;
+  perspective: 1000px;
+  scroll-snap-align: start;
+  width: 100%;
+}
+
+.word,
+.char {
+  animation-delay: var(--del);
+  animation-direction: var(--dir, normal);
+  animation-duration: var(--dur);
+  animation-iteration-count: infinite;
+  animation-name: var(--name);
+  animation-timing-function: var(--tf);
+  display: inline-block;
+  position: relative;
+  transform-origin: 50% 100%;
+  z-index: 1;
+}
+
+// =========================
+// Headline animations
+// =========================
+
+.headline--yell .char {
+  --name: yell;
+  --dur: 2s;
+  --tf: ease;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+@-webkit-keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+    transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+    transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+  }
+}
+@keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+    transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+    transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+  }
+}
+</style>

文件差異過大導致無法顯示
+ 1301 - 147
src/views/modules/kuaishouapp/crossAccount/createUnit.vue


+ 2 - 2
vue.config.js

@@ -68,7 +68,7 @@ module.exports = {
     open : true,
     proxy: {
       '/jeecg-boot': {
-        //  target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+         target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.188:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
@@ -77,7 +77,7 @@ module.exports = {
         // target: 'http://192.168.1.43:8888', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
-         target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+        //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目