落地页

src/components/businessMoudle/batchGdt/configArea/basicInfo/outer.scss

@@ -8,56 +8,55 @@
   .tabelCon {
     flex: 1;
   }
+}
+.ids {
+  display: flex;
+  flex-basis: 140px;
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-width: 175px;
+  height: 100%;
+  border-right: 1px solid #ebeef5;
+}
 
-  .ids {
-    display: flex;
-    flex-basis: 140px;
-    flex-direction: column;
-    flex-grow: 0;
-    flex-shrink: 0;
-    max-width: 175px;
-    height: 100%;
-    border-right: 1px solid #ebeef5;
-  }
-
-  .title {
-    padding: 6px 30px 6px 8px;
-    font-weight: 700;
-    line-height: 23px;
-    border-bottom: 1px solid #ebeef5;
-    color: #606266;
-    height: 36px;
-  }
+.title {
+  padding: 6px 30px 6px 8px;
+  font-weight: 700;
+  line-height: 23px;
+  border-bottom: 1px solid #ebeef5;
+  color: #606266;
+  height: 36px;
+}
 
-  .refresh {
-    font-size: 12px;
-    font-weight: 400;
-    color: #197afb;
-    cursor: pointer;
-    margin-left: 20px;
-  }
+.refresh {
+  font-size: 12px;
+  font-weight: 400;
+  color: #197afb;
+  cursor: pointer;
+  margin-left: 20px;
+}
 
-  .accItem {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    height: 60px;
-    padding: 6px 8px;
-    color: #606266;
-    cursor: pointer;
-    border-bottom: 1px solid #ebeef5;
+.accItem {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: 60px;
+  padding: 6px 8px;
+  color: #606266;
+  cursor: pointer;
+  border-bottom: 1px solid #ebeef5;
 
-    &.active {
-      color: #197afb;
-      background-color: #fafafa;
+  &.active {
+    color: #197afb;
+    background-color: #fafafa;
 
-    }
-  }
-  .conInfo {
-    padding: 20px;
   }
 }
+.conInfo {
+  padding: 20px;
+}
 .warn-content{
   color: #f1902b;
   font-size: 12px;

src/components/businessMoudle/batchGdt/configArea/index.vue

@@ -40,7 +40,7 @@
                   <Copywriter ref="CopywriterRef" @writerCallBack="writerCallBack"></Copywriter>
                 </template>
                 <template v-if="sub.name == '落地页'">
-                  <LandPage ref="LandPageRef"></LandPage>
+                  <LandPage ref="LandPageRef" :accIdsList="pageInfo.accIdsList" :page_type="originalityBasicInfoData?.receiveForm?.landingPageExample?.page_type"></LandPage>
                 </template>
                 <div class="noData" v-if="!sub.haveContent">暂无数据</div>
                 <!-- 定向包展示 -->
@@ -299,14 +299,7 @@ const DirectPacketExhibitionRef = ref<{get_echoAcId:()=>void,showDirectPacket:()
 
 // 打开添加 / 编辑
 const openDialogEvent = (sub:any) => {
-  if(pageInfo.accIdsList && pageInfo.accIdsList.length<=0){
-    ElMessage.error('请选择媒体账户!')
-    return
-  }
-  if(!pageInfo.targetValue || pageInfo.targetValue == ''){
-    ElMessage.error('请选择推广目标!')
-    return
-  }
+  if( !judgeEvent( sub.id ) ) return; // 判断是否完成前一模块
   if(sub.name == '定向包'){
     nextTick(()=>{
       DirectPacketExhibitionRef.value![0].showDirectPacket()
@@ -333,26 +326,63 @@ const openDialogEvent = (sub:any) => {
     }
   }
   if(sub.name == '创意文案'){
-    console.log(pageInfo)
-    if(!basicInfoData.fillBack || basicInfoData.fillBack == '' || JSON.stringify(basicInfoData.fillBack) == '{}'){
-      ElMessage.warning('请完善广告基本信息！')
-      return
-    }
-    if(!pageInfo.directObj || pageInfo.directObj == '' || JSON.stringify(pageInfo.directObj) == '{}'){
-      ElMessage.warning('请选择定向包！')
-      return
-    }
-    if(!originalityBasicInfoData.params || originalityBasicInfoData.params == '' || originalityBasicInfoData.params.length <= 0){
-      ElMessage.warning('完善创意基本信息！')
-      return;
-    }
     CopywriterRef.value![0].initFun(true)
   }
   if(sub.name == '落地页'){
     LandPageRef.value![0].initFun(true)
   }
 }
-
+/**每个模块判断是否可以点击添加 id:模块ID*/
+const judgeEvent = (id) => {
+  if(pageInfo.accIdsList && pageInfo.accIdsList.length<=0){
+    ElMessage.error('请选择媒体账户!')
+    return false
+  }
+  if(!pageInfo.targetValue || pageInfo.targetValue == ''){
+    ElMessage.error('请选择推广目标!')
+    return false
+  }
+  if(id == 2) return true;//广告基本信息
+  if(!basicInfoData.fillBack || basicInfoData.fillBack == '' || JSON.stringify(basicInfoData.fillBack) == '{}'){
+    ElMessage.warning('请完善广告基本信息！')
+    return false
+  }
+  if(id == 3) return true;//定向包
+  if(id == 5) return true;//创意基本信息
+  if(id != 6 && (!pageInfo.directObj || pageInfo.directObj == '' || JSON.stringify(pageInfo.directObj) == '{}')){
+    ElMessage.warning('请选择定向包！')
+    return false
+  }
+  if(!originalityBasicInfoData.params || originalityBasicInfoData.params == '' || originalityBasicInfoData.params.length <= 0){
+    ElMessage.warning('完善创意基本信息！')
+    return false
+  }
+  if(id == 6) return true;//创意素材 不用判断定向包是否填写
+  //  --------   创意素材是否完善判断 -------
+  if(id == 7) {//创意文案
+    if( !originalityBasicInfoData.apiResult?.adTemplateItem?.adcreative_elements?.description ){
+      ElMessage.warning('此创意形式下不可使用创意文案！')
+      return false
+    } else{
+      return true
+    }
+  };
+  // console.log(originalityBasicInfoData.receiveForm.landingPageExample.page_type)
+  if(id == 8) {
+    if(!originalityBasicInfoData?.receiveForm?.landingPageExample?.page_type){
+      ElMessage.warning('此创意形式下不可使用落地页！')
+      return false;//落地页
+    } else {
+      return true
+    }
+  }
+  if(id == -1){ // 提交预览时，判断是否全部完善
+  //  --------   创意文案是否完善判断 -------
+  //  --------   落地页是否完善判断 -------
+  // ----- 外部配置是否完善 ----- 
+  }
+  return true
+}
 
 //更新数值,判断是否有内容
 const updateHaveContent = (id:number,chooseNum?:number,minusFlag?:boolean) => {

src/components/businessMoudle/batchGdt/configArea/landPage/accMinprogram.vue

@@ -0,0 +1,100 @@
+<template>
+<div class="tabelListBox">
+    <div class="ids">
+      <div class="accItem" v-for="(item, idx) in accIdsList" :key="item.id" :class="item.id == accId ? 'active' : ''"
+        @click="accItemEvent(item)">
+        {{ item.name || '-' }}
+        <el-icon :size="14" :color="item.id == accId ? '#197afb' : '#606266'" class="lMarauto">
+          <CircleCheck v-if="true" />
+          <i-ep-ArrowRight v-else />
+        </el-icon>
+      </div>
+    </div>
+    <div class="tabelCon">
+      <LandPageList ref="LandPageListRef" :page_type="page_type" :select_count="select_count" @callBack="handleSelectionChange"></LandPageList>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import LandPageList from './landPageList.vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
+const props = defineProps({
+  accIdsList: {
+    type: Array<{ id: string, name: string }>,
+    default: () => []
+  },
+  page_type: {
+    type: String,
+    default: ''
+  },
+  select_count: {
+    type: Number,
+    default: -1
+  }
+})
+const emit = defineEmits<{
+  (event: "callBack", val?: any): void;
+}>();
+const accId = ref('')
+const LandPageListRef = ref()
+const callDataInfo = reactive({})
+const accCountInfo = reactive({})
+onMounted(()=>{
+  nextTick(()=>{
+    props.accIdsList.forEach((item)=>{
+      callDataInfo[item.id] = []
+      accCountInfo[item.id] = {
+        count: -1
+      }
+    })
+    if(props.select_count != -1) {
+      //分配条数 accCountInfo
+    }
+    accItemEvent({id: props.accIdsList[0]?.id})
+  })
+})
+/**点击媒体账户 */
+const accItemEvent = (item, type?, cb?:Function) => {
+  accId.value = item?.id;
+  LandPageListRef.value!.initFun(accId.value)
+}
+const handleSelectionChange = (val) => {
+  callDataInfo[accId.value] = val
+  let msg = '';
+  for(let i in callDataInfo){
+    if(callDataInfo[i].length == 0){
+      msg = `账户${i}，请选择落地页!`
+    }
+  }
+  if(val.length < accCountInfo[accId.value]?.count && accCountInfo[accId.value]?.count != -1){
+    msg = `当前应选择${accCountInfo[accId.value]?.count}个落地页，您的选择数量为：${val.length}`
+  }
+  emit('callBack',{
+    data: callDataInfo,
+    msg: msg
+  })
+}
+</script>
+<style scoped lang="scss">
+@import "@/components/businessMoudle/batchGdt/configArea/basicInfo/outer.scss";
+.tabelListBox{
+  margin-top: 15px;
+  height: 56vh;
+  .tabelCon{
+    overflow: auto;
+    height: 100%;
+  }
+}
+.landPageminiprogram{
+  :deep(.el-table__cell){
+    font-size: 12px !important;
+  }
+  :deep(.filter-wrap){
+    background-color: #f8f8f8;
+    padding: 10px ;
+  }
+  :deep(.page-wrap){
+    margin-top: 0;
+  }
+}
+</style>

src/components/businessMoudle/batchGdt/configArea/landPage/index.vue

@@ -17,25 +17,34 @@
     <p class="add-sec-title">文案：</p>
     <div class="add-sec-span" v-for="item in writer_list">{{ item }}</div>
   </div>
-  <LandPageDialog ref="LandPageDialogRef" @close="closeWriterDialog"></LandPageDialog>
+  <LandPageDialog ref="LandPageDialogRef" @close="closeWriterDialog" :accIdsList="accIdsList" :page_type="page_type"></LandPageDialog>
 </template>
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
+import { nextTick, reactive, ref } from 'vue';
 import LandPageDialog from './landPageDialog.vue'
+
 const selectOptions = [
   { label: '自动分配', value: 1 },
   { label: '程序化测试', value: 2 },
 ]
-const writer_list = ref<any[]>([])
 const props = defineProps({
   showFlag: {
     type: Boolean,
     default: false
+  },
+  accIdsList: {
+    type: Array<{ id: string, name: string }>,
+    default: () => []
+  },
+  page_type: {
+    type: String,
+    default: ''
   }
 })
 const emit = defineEmits<{
   (event: "writerCallBack", val?: any): void;
 }>();
+const writer_list = ref<any[]>([])
 const LandPageDialogRef = ref()
 const selectValue = ref(1)
 const tooltip = `自动匹配：将落地页分配至账户/计划/广告创意中。<br/>程序化测试：落地页与定向、创意、文案进行叉乘测试。`

src/components/businessMoudle/batchGdt/configArea/landPage/landPageDialog.vue

@@ -11,9 +11,9 @@
           </el-radio-group>
         </div>
       </div>
-      <div class="flex marT15">
+      <div class="flex marT15" v-if="allocation == 1">
         <label class="form-block-item-title">落地页分配规则</label>
-        <el-radio-group v-model="loadPageRule" size="default" @change="">
+        <el-radio-group v-model="loadPageRule" size="default" @change="loadPageRuleChange">
           <el-radio-button :label="item.id" v-for="item in loadPageRuleList">{{ item.name }}</el-radio-button>
         </el-radio-group>
         <el-tooltip placement="right" effect="light">
@@ -21,12 +21,23 @@
           <span><el-icon class="questionFilled lMar5"><QuestionFilled /></el-icon></span>
         </el-tooltip>
         <div class="num_pre">
-          <span>账户数：</span><span class="num">3，</span>
-          <span>计划数：</span><span class="num">3，</span>
-          <span>广告数：</span><span class="num">3；</span>
+          <span>账户数：</span><span class="num">{{ count_info.acc_count }}，</span>
+          <span>计划数：</span><span class="num">{{ count_info.plan_count || 0 }}，</span>
+          <span>广告数：</span><span class="num">{{ count_info.ad_count || 0 }}；</span>
         </div>
       </div>
-
+      <div class="flex marT15" v-if="allocation == 2">
+        <label class="form-block-item-title">测试规则</label>
+        <el-radio-group v-model="testRuleInfo" size="default">
+          <el-radio-button :label="item.id" v-for="item in testRules.list">{{ item.name }}</el-radio-button>
+        </el-radio-group>
+        <el-tooltip placement="right" effect="light">
+          <template #content><span v-html="testRules.msg"></span></template>
+          <span><el-icon class="questionFilled lMar5"><QuestionFilled /></el-icon></span>
+        </el-tooltip>
+      </div>
+      <LandPageList :page_type="page_type" :select_count="select_count" @callBack="handleSelectionChange" v-if="multiCopyTesting == 0" style="margin-top:20px"></LandPageList>
+      <AccMinprogram v-if="multiCopyTesting == 1" :page_type="page_type" :select_count="select_count" :accIdsList="accIdsList" @callBack="AccMinprogramChange"></AccMinprogram>
     </div>
     <template #footer>
       <div class="dialog-footer" style="text-align: right;padding:10px">
@@ -37,93 +48,162 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { onBeforeMount, reactive, ref } from 'vue';
-import {emojiList} from "@/common/emoji";
-import TextLibrary from '@/components/businessMoudle/textLibrary/index.vue'
-import WriterHelper from './writerHelper.vue'
+import { nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
+import LandPageList from './landPageList.vue';
+import AccMinprogram from './accMinprogram.vue'
 const props = defineProps({
   accIdsList: {
     type: Array<{ id: string, name: string }>,
     default: () => []
+  },
+  page_type: {
+    type: String,
+    default: ''
   }
 })
 const emit = defineEmits<{
   (event: "close", val?: any): void;
 }>();
 
-const loadPageRuleList = reactive([
-  { id: 0, name: '全部相同' },
-  { id: 1, name: '按账户分配' },
-  { id: 2, name: '分配到计划' },
-  { id: 3, name: '分配到广告' },
-])
+const count_info = reactive({
+  acc_count: 0,
+  plan_count: 3,
+  ad_count: 10
+})
+const testRuleInfo = ref(1)
+const testRules = {
+  msg: `全量测试：各个账户内资产与所有落地页叉乘；<br/>分账户测试：先将落地页均分至各个账户后，与每个账户下的资产分别叉乘；`,
+  list: [
+    {id:1,name:'全量测试'},
+    {id:2,name:'分账户测试'},
+  ]
+}
+
+const loadPageRuleList = ref<any[]>([])
 const loadPageRule = ref(0)
-const ruleTooltip = `全部相同：全部广告使用同一个落地页；<br/>按账户分配：一个账户内广告使用同一个落地页；<br/>分配到计划：一个计划内广告使用同一个落地页；<br/>分配到广告：一个广告一个落地页；`
+const ruleTooltip = ref<string>()
 const visible = ref(false)
 const loading = ref(false)
-const text_textarea = ref()
-const text_list = ref<any[]>([])
 const multiCopyTesting = ref(0)
-const WriterHelperRef = ref()
 const allocation = ref(1) // 创意文案分配方式 1自动分配 2程序化测试
-const tooltip = `您可以选择某一种文案，进行多条文案测试；<br/>测试文案为变量，将会出现在最下方，以列表形式多选；<br/>非测试文案为常量，会保持在上方；`
+const multipleSelection = ref<any[]>([])
+const select_count = ref(-1) //限制选中的条数
+const accMinprogramInfo = ref();
+
+/**自动扩量监听 */
+watch(
+  () => multiCopyTesting.value
+, (newValue, oldValue) => {
+  if(newValue == 0) {
+    loadPageRuleList.value = [
+      { id: 0, name: '全部相同' },
+      { id: 1, name: '按账户分配' },
+      { id: 2, name: '分配到计划' },
+      { id: 3, name: '分配到广告' },
+    ]
+    ruleTooltip.value = `全部相同：全部广告使用同一个落地页；<br/>按账户分配：一个账户内广告使用同一个落地页；<br/>分配到计划：一个计划内广告使用同一个落地页；<br/>分配到广告：一个广告一个落地页；`
+  }
+  if(newValue == 1){
+    loadPageRuleList.value = [
+      { id: 0, name: '全部相同' },
+      { id: 2, name: '分配到计划' },
+      { id: 3, name: '分配到广告' },
+    ]
+    ruleTooltip.value = `全部相同：全部广告使用同一个落地页；<br/>分配到计划：一个计划内广告使用同一个落地页；<br/>分配到广告：一个广告一个落地页；`
+  }
+},{ immediate: true})
 
 onBeforeMount(() => {
-  init()
 })
-const init = () => {
-}
-const appendText = (val:any) => {
-  var elInput:any = document.getElementById('emojiInput'); //根据id选择器选中对象
-  var startPos:any = elInput.selectionStart;// input 第0个字符到选中的字符
-  var endPos:any = elInput.selectionEnd;// 选中的字符到最后的字符
-  if (startPos === undefined || endPos === undefined) return
-  var txt = elInput.value;
-  // 将表情添加到选中的光标位置
-  var result = txt.substring(0, startPos) + val + txt.substring(endPos)
-  elInput.value = result;// 赋值给input的value
-  // 重新定义光标位置
-  elInput.focus();
-  elInput.selectionStart = startPos + val.length;
-  elInput.selectionEnd = endPos + val.length;
-  text_textarea.value  = result// 赋值给表单中的的字段
-}
-/**文案助手确定回调 */
-const writerHelperClose = (obj) =>{
-  if(obj && Array.isArray(obj) && obj.length > 0) {
-    text_textarea.value = obj[0].content
+const loadPageRuleChange = () => {
+  if(allocation.value == 2) {
+    select_count.value = -1
+    return
+  }
+  if( loadPageRule.value == 0 ) {
+    select_count.value = 1
+  }
+  if( loadPageRule.value == 1 ){
+    select_count.value = count_info.acc_count
+  }
+  if(loadPageRule.value == 2){
+    select_count.value = count_info.plan_count
+  }
+  if(loadPageRule.value == 3){
+    select_count.value = count_info.ad_count
   }
 }
-
 const handleClose = () => {
   visible.value = false
 }
-const selectEvent = (obj) => {
-  text_list.value = obj.map((v)=>{return v.content})
-}
 /**点击确定 */
 const submitEvent = () => {
-  if(multiCopyTesting.value == 0) {
-   if( text_textarea.value == '' || !text_textarea.value ){
-    ElMessage.warning('请输入文案！')
-    return
-   }else{
-    text_list.value = [text_textarea.value]
-   }
-  }
-  if(multiCopyTesting.value == 1 && text_list.value?.length <= 0){
-    ElMessage.warning('请选择测试的文案内容！')
-    return
+  let emitData = {}
+  if(multiCopyTesting.value == 1){//开启
+    if(allocation.value == 2) {//程序化叉乘
+      if(testRuleInfo.value == 1 ){//
+
+      }
+    }
+  }else{//不开启
+    if(allocation.value == 2) {//程序化叉乘
+      if(testRuleInfo.value == 1 ){//全量测试
+        if(multipleSelection.value.length == 0){
+          ElMessage.warning('请选择落地页!')
+          return
+        }else{
+          props.accIdsList.forEach((item)=>{
+            emitData[item.id] = multipleSelection.value
+          })
+        }
+      }
+      if(testRuleInfo.value == 2) {//分账户测试
+        props.accIdsList.forEach((item)=>{
+          emitData[item.id] = []
+        })
+        // multipleSelection.value -------再这里了
+      }
+    }
   }
-  emit('close', text_list.value)
-  visible.value = false
+    emit('close', emitData)
+  // if(multiCopyTesting.value == 1){//开启
+  //   if(allocation.value == 2) {//程序化叉乘
+  //     if(testRuleInfo.value == 1 ){//
+
+  //     }
+  //   }
+  //   if(accMinprogramInfo.value.msg != ''){
+  //     ElMessage.warning(accMinprogramInfo.value.msg)
+  //     return
+  //   }else{
+  //     visible.value = false
+  //     emit('close',accMinprogramInfo.value.data)
+  //   }
+  // }else{
+  //   if(multipleSelection.value.length < select_count.value){
+  //     ElMessage.warning(`当前应选择${select_count.value}个落地页，您的选择数量为：${multipleSelection.value.length}`)
+  //     return;
+  //   }
+  //   visible.value = false
+  //   emit('close', multipleSelection.value)
+  // } 
+}
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+const AccMinprogramChange = (obj) => {
+  accMinprogramInfo.value = obj
 }
 
 /**初始化 */
 const initFun = (flag, select) => {
   visible.value = flag
   allocation.value = select
+  nextTick(()=>{
+    count_info.acc_count = props.accIdsList.length
+    loadPageRuleChange()
+  })
 }
 // 暴露自己的属性供父组件使用
 defineExpose({

src/components/businessMoudle/batchGdt/configArea/landPage/landPageList.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="content-wrap" v-loading="loading">
+
+    <div class="filter-wrap">
+      <div class="filter-item flex">
+        <el-input style="width: 260px;" v-model.trim="keyword" placeholder="请输入小程序名称" maxlength="50" clearable
+          @keyup.enter.native.prevent.stop="onClickSearch" @clear="onClickSearch">
+          <template #append>
+            <el-button icon="Search" @click="onClickSearch" />
+          </template>
+        </el-input>
+        <div class="filter-item">
+          <el-button type="primary" size="default" text @click="onClickReset">刷新</el-button>
+        </div>
+      </div>
+      <div class="selected-text ml-10">已选择<span class="highlight">{{ multipleSelection?.length || 0 }}</span>条</div>
+    </div>
+    <el-table ref="multipleTableRef" row-key="id" :data="listData" border height="42vh" :header-row-style="headerRowStyle"
+      :header-cell-style="headerCellStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange"
+      @select-all="handleSelectionAllChange">
+      <el-table-column align="center" type="selection" reserve-selection width="55" fixed="left"
+        :selectable="selectableEvent" />
+      <el-table-column align="center" prop="appname" label="小程序名称" min-width="100" />
+      <el-table-column align="center" prop="appid" label="小程序ID" min-width="100" />
+      <el-table-column align="center" prop="applink" label="小程序链接" min-width="200">
+        <template #default="{ row }">
+          <div class="applink-wrap">
+            <div class="link">{{ row.applink }}</div>
+            <el-icon class="icon" @click="onClickCopyApplink(row.applink)">
+              <DocumentCopy />
+            </el-icon>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="remarks" label="备注" min-width="100" />
+      <el-table-column align="center" prop="account_id" label="媒体账户" min-width="100" />
+      <el-table-column align="center" prop="username" label="创建人员" min-width="100" />
+      <el-table-column align="center" prop="created_at" label="创建时间" min-width="150" />
+    </el-table>
+    <div class="pagination-wrap">
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.page_size"
+        :total="pagination.total" layout="total, prev, pager, next" @current-change="onCurrentChange" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onBeforeMount, reactive, ref, watch } from 'vue';
+import clipboard3 from 'vue-clipboard3'
+import to from 'await-to-js'
+import { ElMessage } from 'element-plus'
+import { getAdcreativesLandingPageList } from './ts/api'
+
+const props = withDefaults(defineProps<{
+  page_type: string,
+  select_count: number
+}>(), {
+})
+const emit = defineEmits<{
+  (event: "callBack", val?: any): void;
+}>();
+const keyword = ref('')
+const listData = ref<any[]>([])
+const loading = ref(false)
+const multipleSelection = ref<any[]>([])
+const pagination = reactive({
+  page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const headerRowStyle = {
+  'height': '44px',
+  'font-size': '14px',
+  'font-weight': 400,
+  'color': '#161E46',
+}
+const headerCellStyle = {
+  'background-color': '#FAFAFA',
+}
+const cellStyle = {
+  'font-size': '14px',
+  'color': '#333',
+}
+onBeforeMount(() => {
+  getList()
+})
+const getList = (account_id?) => {
+  loading.value = true
+  getAdcreativesLandingPageList({
+    account_id: account_id?account_id:'',
+    page_type: props.page_type,
+    keyword: keyword.value,
+    page: pagination.page,
+    page_size: pagination.page_size
+  }).then((res) => {
+    loading.value = false
+    if (res) {
+      listData.value = res.data;
+      pagination.total = res.pageInfo.total;
+    }
+  }).catch(() => { loading.value = false })
+}
+const onCurrentChange = (page) => {
+  pagination.page = page;
+  getList()
+}
+/**复制链接 */
+const onClickCopyApplink = async link => {
+  if (!link) return false
+  const { toClipboard } = clipboard3()
+  const [err] = await to(toClipboard(link))
+  if (err) return ElMessage.error('复制失败，请重试')
+  ElMessage.success('复制成功')
+}
+/**选择 */
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+  emit('callBack', val)
+}
+const handleSelectionAllChange = (selection) => {
+  if (selection.length > props.select_count && props.select_count != -1) {
+    selection.length = props.select_count
+  }
+  multipleSelection.value = selection
+  emit('callBack', selection)
+}
+const selectableEvent = (row) => {
+  if (multipleSelection.value.map((v) => { return v.appid }).includes(row.appid)) {
+    return true
+  }
+  if (multipleSelection.value.length == props.select_count && props.select_count != -1) {
+    return false
+  } else {
+    return true
+  }
+}
+/**点击搜索 */
+const onClickSearch = () => {
+  getList()
+}
+/**刷新 */
+const onClickReset = () => {
+  getList()
+}
+watch(
+  () => props.select_count
+, (newValue, oldValue) => {
+  handleSelectionAllChange(multipleSelection.value)
+}, { immediate: true})
+/**初始化 */
+const initFun = (account_id) => {
+  getList(account_id)
+}
+// 暴露自己的属性供父组件使用
+defineExpose({
+  initFun
+});
+</script>
+<style scoped lang="scss">
+.content-wrap {
+  :deep(.el-table__cell) {
+    font-size: 13px !important;
+  }
+}
+
+.filter-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f8f8f8;
+  border: 1px solid #ebeef5;
+  border-bottom: none;
+  padding: 10px;
+}
+
+.applink-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .link {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .icon {
+    font-size: 16px;
+    color: #3173FF;
+    margin-left: 6px;
+    cursor: pointer;
+  }
+}
+
+.pagination-wrap {
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.selected-text {
+  font-size: 14px;
+  color: #666;
+
+  .highlight {
+    color: #3173FF;
+    margin: 0 4px;
+  }
+}</style>

src/components/businessMoudle/batchGdt/configArea/landPage/ts/api.ts

@@ -0,0 +1,19 @@
+import http from '@/http/http'
+import { ElMessage } from "element-plus";
+
+/**落地页列表 */
+interface IGetAdcreativesLandingPageList {
+  account_id: string,
+  page_type: string,
+  keyword: string,
+  page: number,
+  page_size: number
+}
+export async function getAdcreativesLandingPageList(params: IGetAdcreativesLandingPageList) {
+  const res: any = await http.get('/api/adcreatives/landingPageList', params)
+  if (res.errNo == 0 && res.rst) {
+    return res.rst
+  } else {
+    return
+  }
+}

src/components/businessMoudle/batchGdt/configArea/landPage/writerHelper.vue

@@ -1,48 +0,0 @@
-<template>
-<el-dialog class="gdt-dialog" :close-on-click-modal="false" v-model="visible" title="创意文案" width="1000px" top="40px"
-:before-close="handleClose">
-  <TextLibrary source="writerHelper" :select_num="1" @select="selectEvent"></TextLibrary>
-  <template #footer>
-    <div class="dialog-footer" style="text-align: right;padding:10px">
-      <el-button @click="handleClose"> 取 消 </el-button>
-      <el-button type="primary" @click="submitEvent"> 确 定 </el-button>
-    </div>
-  </template>
-</el-dialog>
-</template>
-<script setup lang="ts">
-import TextLibrary from '@/components/businessMoudle/textLibrary/index.vue'
-import { ElMessage } from "element-plus";
-import { ref } from 'vue'
-const visible = ref(false)
-const text_info = ref<any[]>([])
-
-const emit = defineEmits<{
-  (event: "close", val?: any): void;
-}>();
-
-const handleClose = () => {
-  visible.value = false
-}
-const submitEvent = () => {
-  if(text_info.value.length <= 0){
-    ElMessage.warning('请选择文案！')
-    return
-  }
-  visible.value = false
-  emit('close', text_info.value)
-}
-const selectEvent = (val) => {
-  text_info.value = val
-}
-
-/**初始化 */
-const initFun = (flag) => {
-  visible.value = flag
-}
-// 暴露自己的属性供父组件使用
-defineExpose({
-  initFun
-});
-
-</script>

src/components/businessMoudle/batchGdt/configArea/originalityBasic/index.vue

@@ -133,7 +133,7 @@ const site_set = ref<string[]>([]); // 投放版位
 const loading = ref<boolean>(true)
 const conLoading = ref<boolean>(false)
 const fullscreenLoading = ref<boolean>(false)
-const templateType = reactive({
+const templateType = reactive<{img: any[],video:any[]}>({
   img: [],
   video: []
 })
@@ -171,7 +171,7 @@ const radioChange = (obj: object) => {
     }
     form_main[i] = obj[i]
 
-    if (i == 'originalityForm'){//创意形式
+    if (i == 'originalityForm' && form_main['originalityForm'] && form_main['originalityForm'] != ''){//创意形式
       templateCurr.value = templateType[form_main['originalityForm']][0]
       getAdcreativeTemplateInfo()
     }
@@ -184,8 +184,6 @@ const backhaul = (obj) => {
 }
 /**确认 */
 const submitEvent = () => {
-  // console.log(form)
-  // return;
   let promise_arr: any = []
   for (let i in form) {//检索是否有未填写信息
     if (form[i].required && (!form[i].api_value || JSON.stringify(form[i].api_value) == "{}" || form[i].api_value == '')) { // required 和 api_value来判断是否填写需要的信息
@@ -391,10 +389,6 @@ const initEvent = () => {
   if (Array.isArray(apiFormList.value) && apiFormList.value.length > 0) {
     return
   }
-  apiFormList.value = []
-  props.accIdsList.forEach((item) => {
-    apiFormList.value.push({ account_id: item.id, adcreative_elements: {} })
-  })
   if (props.adBasicInfo.automatic_site == '1') {// 广告版位 - 自动版位  除视频号版位，其他都用作投放版位
     site_set.value = Object.keys(specificPositionAll()).filter((v) => { return v != 'SITE_SET_MOMENTS' && v != 'SITE_SET_WECHAT' })
   } else {
@@ -407,6 +401,15 @@ const initEvent = () => {
     site_set: site_set.value,
     is_automatic_site: props.adBasicInfo.automatic_site == '1' ? 1 : 0
   }).then((res) => { // 创意形式
+    loading.value = false;
+    if(!Array.isArray(res) || res.length == 0){ 
+      ElMessage.warning('不存在任意创意形式！')
+      return
+    }
+    apiFormList.value = []
+    props.accIdsList.forEach((item) => {
+      apiFormList.value.push({ account_id: item.id, adcreative_elements: {} })
+    })
     let typeList: any = []
     templateType.video = res.filter((v) => { return v.adcreative_template_style == '视频' })
     templateType.img = res.filter((v) => { return v.adcreative_template_style == '图片' })
@@ -420,7 +423,6 @@ const initEvent = () => {
     } else {
       ElMessage.warning('不存在任意创意形式！')
     }
-    loading.value = false;
   }).catch(() => { loading.value = false })
 }
 const switchShow = async (val:boolean, obj:any)=>{
@@ -432,8 +434,8 @@ const switchShow = async (val:boolean, obj:any)=>{
       fillBackInfo.value = JSON.parse(JSON.stringify(obj.fillback))
       templateCurr.value = JSON.parse(JSON.stringify(obj?.apiResult?.templateCurr))
       adTemplateItem.value = JSON.parse(JSON.stringify(obj?.apiResult?.adTemplateItem))
-      console.log('apiFormList',apiFormList.value)
- console.log('fillBack',fillBack)
+//       console.log('apiFormList',apiFormList.value)
+//  console.log('fillBack',fillBack)
       nextTick(()=>{
         DynamicCreativeGroupUsedRef.value!.switchShow(fillBack.dynamic_creative_group_used)
         BrandRef.value!.switchShow({

src/components/businessMoudle/miniprogram/index.vue

@@ -2,7 +2,7 @@
   <div v-loading="loading">
     <!-- S 筛选 -->
     <div class="filter-wrap">
-      <div class="filter-item">
+      <div class="filter-item" v-if="isAccountSearch">
         <span class="label">媒体账户：</span>
         <el-select class="w-200" v-model="listParams.account_id" placeholder="全部" clearable @change="onClickSearch" >
           <el-option
@@ -30,25 +30,27 @@
     <div class="page-wrap">
       <!-- S 批量操作 -->
       <div class="btns-wrap">
-        <el-button type="primary" @click="onClickBtns(btns[EBtnsType.BATCH_IMPORT].value)">{{ btns[EBtnsType.BATCH_IMPORT].label }}</el-button>
-        <el-select class="w-100 ml-10" placeholder="批量操作" :disabled="!isSelected">
-          <el-option
-            v-for="btn in btns.options"
-            :key="btn.value"
-            :label="btn.label"
-            :value="btn.value"
-            @click="onClickBtns(btn.value)"
-          />
-        </el-select>
-        <div v-show="isSelected" class="selected-text ml-10">已选择<span class="highlight">{{ multipleSelection?.length || 0 }}</span>条</div>
+        <template v-if="isOperate">
+          <el-button type="primary" @click="onClickBtns(btns[EBtnsType.BATCH_IMPORT].value)">{{ btns[EBtnsType.BATCH_IMPORT].label }}</el-button>
+          <el-select class="w-100 ml-10" placeholder="批量操作" :disabled="!isSelected">
+            <el-option
+              v-for="btn in btns.options"
+              :key="btn.value"
+              :label="btn.label"
+              :value="btn.value"
+              @click="onClickBtns(btn.value)"
+            />
+          </el-select>
+        </template>
+        <div v-show="!isOperate || isSelected" class="selected-text ml-10">已选择<span class="highlight">{{ multipleSelection?.length || 0 }}</span>条</div>
       </div>
       <!-- E 批量操作 -->
 
       <!-- S 列表 -->
       <el-table ref="multipleTableRef" row-key="id" :data="listData.list" border :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" reserve-selection width="55" />
+        <el-table-column align="center" type="selection" reserve-selection width="55" fixed="left"/>
         <el-table-column align="center" prop="appname" label="小程序名称" min-width="100" />
-        <el-table-column align="center" label="操作" min-width="100">
+        <el-table-column align="center" label="操作" min-width="100" v-if="isOperate">
           <template #default="{ row }">
             <el-button type="primary" size="small" text @click="onClickDeleteRow(row)">删除</el-button>
           </template>
@@ -128,6 +130,17 @@ import useBatchEditDialog from './hooks/useBatchEditDialog'
 import useBatchImportDialog from './hooks/useBatchImportDialog'
 import useMultipleTable from './hooks/useMultipleTable'
 
+const props = defineProps({
+  isOperate: { // 是否可操作，用于广告-落地页弹框
+    type: Boolean,
+    default: true
+  },
+  isAccountSearch: { // 媒体账户搜索是否可搜
+    type: Boolean,
+    default: true
+  }
+})
+
 // S 批量操作按钮
 enum EBtnsType {
   BATCH_IMPORT = 'batchImport',
@@ -257,6 +270,19 @@ onMounted(() => {
   handleFetchList()
 })
 
+
+/**初始化 */
+const exposeEvent = ({ account_id }:{ account_id: string }) => {
+  if( account_id ){
+    listParams.account_id = account_id;
+    onClickSearch()
+  }
+}
+// 暴露自己的属性供父组件使用
+defineExpose({ 
+  exposeEvent
+});
+
 </script>
 
 <style lang="scss" scoped>