|
@@ -0,0 +1,859 @@
|
|
|
+<style>
|
|
|
+#table_time_selected1 tr {
|
|
|
+ border: 1px solid rgb(102, 162, 243);
|
|
|
+}
|
|
|
+
|
|
|
+.plug-timer-grid th {
|
|
|
+ line-height: 25px;
|
|
|
+}
|
|
|
+.group-creat .ant-form-item-required::before {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 4px;
|
|
|
+ color: #f5222d;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: SimSun, sans-serif;
|
|
|
+ line-height: 1;
|
|
|
+ content: '';
|
|
|
+}
|
|
|
+.else-label .ant-form-item-label label::after {
|
|
|
+ content: '';
|
|
|
+ position: relative;
|
|
|
+ top: -0.5px;
|
|
|
+ margin: 0 8px 0 2px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <a-form @submit="handleSubmit" :form="form">
|
|
|
+ <a-form-item
|
|
|
+ label="目标应用"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
|
+ v-if="campaignType == '2'"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
+ placeholder="选择应用目标"
|
|
|
+ optionFilterProp="children"
|
|
|
+ style="width: 500px"
|
|
|
+ @focus="handleFocus"
|
|
|
+ @blur="handleBlur"
|
|
|
+ @change="handleChange"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option value="0">请选择目标应用</a-select-option>
|
|
|
+ <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
|
|
|
+ {{ appModel.appName }}    {{ appModel.appVersion }}   {{
|
|
|
+ appModel.platform | platform
|
|
|
+ }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a @click="addApplication" style="margin-left:10px">添加应用</a>
|
|
|
+ <creat-application ref="application" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="转化类型"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ v-if="campaignType == '3'"
|
|
|
+ >
|
|
|
+ <a-radio-group
|
|
|
+ buttonStyle="solid"
|
|
|
+ v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="1">淘宝商品</a-radio-button>
|
|
|
+ <a-radio-button value="2">淘客商品</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ :label="campaignType == '3' ? ' ' : '链接'"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ v-if="campaignType != '2'"
|
|
|
+ :class="{ elseLabel: campaignType == '3' }"
|
|
|
+ >
|
|
|
+ <!-- 请填写以http://或者https://开头的落地页地址,长度不超过1000个字符 -->
|
|
|
+ <a-input
|
|
|
+ placeholder="请填写链接"
|
|
|
+ v-decorator="['url', { rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }] }]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <div style="text-align:center;font-size:16px;margin-bottom:10px">
|
|
|
+ 目标人群
|
|
|
+ </div>
|
|
|
+ <a-form-item
|
|
|
+ label="选择模板"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
+ placeholder="选择模板"
|
|
|
+ optionFilterProp="children"
|
|
|
+ style="width: 500px"
|
|
|
+ @change="handleChangeMould"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="(appModel, index) in dataList" :key="index" :value="appModel.id">
|
|
|
+ {{ appModel.templateName }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <targeted-population
|
|
|
+ ref="population"
|
|
|
+ :populationData.sync="populationData"
|
|
|
+ :platform="getPlatForm(getData('appId'))"
|
|
|
+ />
|
|
|
+ <a-form-item
|
|
|
+ label=" "
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ class="else-label"
|
|
|
+ >
|
|
|
+ <div style="display:flex;">
|
|
|
+ <a-checkbox :checked="checkedTrue" @change="getCheck">
|
|
|
+ 是否设置为模板
|
|
|
+ </a-checkbox>
|
|
|
+ <a-input v-model="nameValue" v-if="checkedTrue" placeholder="请输入模板名称" style="width:70%" />
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <div style="text-align:center;font-size:16px">
|
|
|
+ 预算和排期
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="单日预算"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="allForm.dayBudget">
|
|
|
+ <a-radio-button value="0">不限</a-radio-button>
|
|
|
+ <a-radio-button value="1">统一预算</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </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.dayBudget == '1'"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ placeholder="不小于100,不超过100000000,仅支持输入自然数"
|
|
|
+ v-decorator="[
|
|
|
+ 'dayBudget',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '请填写预算' }, { validator: budgetValue }]
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="投放方式"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-radio-group buttonStyle="solid" v-decorator="['speed', { initialValue: 1 }]">
|
|
|
+ <a-radio-button :value="1">正常投放</a-radio-button>
|
|
|
+ <a-radio-button :value="2">平滑投放</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <br />
|
|
|
+ <span>
|
|
|
+ {{ getData('speed') == '2' ? '平滑匀速投放' : '尽快展示广告消耗预算' }}
|
|
|
+ </span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="排期"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <!-- v-decorator="['speed', { initialValue: '1' }]" -->
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="allForm.time" @change="setTime">
|
|
|
+ <a-radio-button value="1">从今天开始长期投放</a-radio-button>
|
|
|
+ <a-radio-button value="2">设置开始和结束日期</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <br />
|
|
|
+ <a-range-picker v-if="allForm.time == '2'" v-model="timeRange" format="YYYY-MM-DD" :allowClear="false" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="投放时段"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <!-- v-decorator="['speed', { initialValue: '1' }]" -->
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="allForm.scheduleTime" @change="setTimeAll">
|
|
|
+ <a-radio-button value="1">全天</a-radio-button>
|
|
|
+ <a-radio-button value="2">特定时间</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <br />
|
|
|
+ <selectCheckAll
|
|
|
+ style="width:100%"
|
|
|
+ v-show="allForm.scheduleTime == '2'"
|
|
|
+ :scheduleTime.sync="allForm.scheduleTimeData"
|
|
|
+ ref="selectCheck"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="创意展现方式"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <!-- v-decorator="['speed', { initialValue: '1' }]" -->
|
|
|
+ <a-radio-group buttonStyle="solid" v-decorator="['showMode', { initialValue: '2' }]">
|
|
|
+ <a-radio-button value="2">智能优选</a-radio-button>
|
|
|
+ <a-radio-button value="1">随机轮播</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <br />
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ getData('showMode') == '1'
|
|
|
+ ? '广告组包含的广告创意将随机展现'
|
|
|
+ : '每一次展现的时候,系统会进行CTR预估,预估CTR高的会得到展现机会'
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="场景广告位"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <!-- v-decorator="['speed', { initialValue: '1' }]" -->
|
|
|
+ <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: '1' }]">
|
|
|
+ <a-radio-button value="1">优选广告位</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <div style="text-align:center;font-size:16px">优化目标和计费</div>
|
|
|
+ <a-form-item
|
|
|
+ label=" "
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
|
|
|
+ class="else-label"
|
|
|
+ >
|
|
|
+ <div style="width:100%">
|
|
|
+ <a-layout>
|
|
|
+ <a-layout-content style="padding:10px;">
|
|
|
+ <!-- <div :style="{ marginBottom: '16px' }">
|
|
|
+ <a-button @click="addGroup" :disabled="allForm.group.length > 10">添加广告组</a-button>
|
|
|
+ </div> -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :sm="24" :md="24" :xl="24" :xxl="24" v-for="(item, index) of allForm.group" :key="index">
|
|
|
+ <a-card title :ref="item" style="height:435px">
|
|
|
+ <div style="clear:both"></div>
|
|
|
+ <a-form-item
|
|
|
+ label="优化目标"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
|
|
|
+ <a-radio-button :value="1">点击数</a-radio-button>
|
|
|
+ <a-radio-button :value="2">行为数</a-radio-button>
|
|
|
+ <a-radio-button :value="180" v-if="campaignType == '2' && allForm.groupTypeData.isActivate == '1'"
|
|
|
+ >激活</a-radio-button
|
|
|
+ >
|
|
|
+ <a-radio-button
|
|
|
+ :value="53"
|
|
|
+ v-if="(campaignType == '4' || campaignType == '5') && allForm.groupTypeData.isFormSubmit == '1'"
|
|
|
+ >表单提交</a-radio-button
|
|
|
+ >
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="深度转化目标"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ v-if="
|
|
|
+ (item.bidType == '180' || item.bidType == '53') &&
|
|
|
+ allForm.groupTypeData.deepConversionTypes.length > 0
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <a-select v-model="item.deepConversionType" allowClear>
|
|
|
+ <a-select-option
|
|
|
+ :value="items.deepConversionType"
|
|
|
+ v-for="(items, index) of allForm.groupTypeData.deepConversionTypes"
|
|
|
+ :key="index"
|
|
|
+ >{{ items.desc }}</a-select-option
|
|
|
+ >
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="计费方式"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-radio-group :defaultValue="1">
|
|
|
+ <a-radio :value="1">点击计费</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="出价"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ v-if="item.bidType == '1'"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ v-model="item.bid"
|
|
|
+ @change="showTip(index)"
|
|
|
+ :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }"
|
|
|
+ style="width:100%"
|
|
|
+ ></a-input-number>
|
|
|
+ <span style="color:red" v-if="item.showTipCheck"
|
|
|
+ >不得低于0.2元,不得高于项目最高出价{{ maxBid }}元</span
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="目标成本"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ v-model="item.cpaBid"
|
|
|
+ @change="showTip(index)"
|
|
|
+ :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }"
|
|
|
+ style="width:100%"
|
|
|
+ ></a-input-number>
|
|
|
+ <span style="color:red" v-if="item.showTipCheck">{{
|
|
|
+ item.bidType == '2'
|
|
|
+ ? '不得低于1元,不得高于项目最高出价' + maxBid + '元'
|
|
|
+ : '不得低于5元,不得高于项目最高出价' + maxBid + '元'
|
|
|
+ }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="深度转化出价"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ v-if="
|
|
|
+ (item.bidType == '180' || item.bidType == '53') &&
|
|
|
+ allForm.groupTypeData.deepConversionTypes.length > 0 &&
|
|
|
+ item.deepConversionType != ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ v-model="item.deepConversionBid"
|
|
|
+ @change="deep_conversion_bidTip(index)"
|
|
|
+ :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }"
|
|
|
+ style="width:100%"
|
|
|
+ :disabled="item.cpaBid == ''"
|
|
|
+ ></a-input-number>
|
|
|
+ <span style="color:red" v-if="item.deepConversionBidCheck"
|
|
|
+ >深度转化目标成本必须高于优化目标成本,且不得高于3000元</span
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="广告组名称"
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-input v-model="item.unitName" @change="checkGroup($event, index)"></a-input>
|
|
|
+ <span style="color:red" v-if="item.unitNameCheck">广告组名称重复</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
|
|
|
+import moment from 'moment'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import jq from 'jquery'
|
|
|
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
|
|
|
+import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'
|
|
|
+
|
|
|
+import creatApplication from '@/views/modules/kuaishouapp/account/stepForm/stepModule/creatApplication.vue'
|
|
|
+
|
|
|
+import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
|
|
|
+import pick from 'lodash.pick'
|
|
|
+export default {
|
|
|
+ name: 'new-mould',
|
|
|
+ components: {
|
|
|
+ targetedPopulation,
|
|
|
+ Treeselect,
|
|
|
+ creatApplication,
|
|
|
+ selectCheckAll
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkedTrue: false,
|
|
|
+ nameValue: '',
|
|
|
+ visible: false,
|
|
|
+ timeRange: [],
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ step: 0,
|
|
|
+ people: '2',
|
|
|
+ targeted: '2',
|
|
|
+ topMiddle: false,
|
|
|
+ topMiddleNo: false,
|
|
|
+ keyValue: '',
|
|
|
+ keyValueNo: '',
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRowKeysValue: [],
|
|
|
+ selectedRowKeysNo: [],
|
|
|
+ selectedRowKeysValueNo: [],
|
|
|
+ data: [],
|
|
|
+ populationData: {},
|
|
|
+ url: {
|
|
|
+ insertTemplateUrl: '/kuaishou/create/createGroups',
|
|
|
+ userAllocationList: '/ctop/userAllocation/list',
|
|
|
+ campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
|
|
|
+ getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
|
|
|
+ getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
|
|
|
+ appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list'
|
|
|
+ },
|
|
|
+ appList: [],
|
|
|
+ appId: '',
|
|
|
+ loading: false,
|
|
|
+ campaignTemplateId: '',
|
|
|
+ campaignType: '2',
|
|
|
+ maxBid: 0,
|
|
|
+ allForm: {
|
|
|
+ dayBudget: '0',
|
|
|
+ time: '1',
|
|
|
+ scheduleTime: '1',
|
|
|
+ scheduleTimeData:
|
|
|
+ '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
|
|
|
+ group: [],
|
|
|
+ groupTypeData: { deepConversionTypes: [], isActivate: '0', isFormSubmit: '0' },
|
|
|
+ fail: [],
|
|
|
+ success: []
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ unitId: '',
|
|
|
+ accountId: '',
|
|
|
+ planId:""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ filters: {
|
|
|
+ platform(str) {
|
|
|
+ var data = {
|
|
|
+ 1: 'Android应用下载',
|
|
|
+ 2: 'Android网页游戏',
|
|
|
+ 3: 'iOS应用下载',
|
|
|
+ 4: 'iOS网页游戏'
|
|
|
+ }
|
|
|
+ return data[str]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCheck(e) {
|
|
|
+ this.checkedTrue = e.target.checked
|
|
|
+ },
|
|
|
+ resData(index) {
|
|
|
+ this.allForm.group[index].bid = ''
|
|
|
+ this.allForm.group[index].cpaBid = ''
|
|
|
+ this.allForm.group[index].showTipCheck = false
|
|
|
+ this.allForm.group[index].deepConversionBidCheck = false
|
|
|
+ this.allForm.group[index].deepConversionType = ''
|
|
|
+ this.allForm.group[index].deepConversionBid = ''
|
|
|
+ },
|
|
|
+ removeGroup(index) {
|
|
|
+ this.allForm.group.splice(index, 1)
|
|
|
+ },
|
|
|
+ deep_conversion_bidTip(index) {
|
|
|
+ if (
|
|
|
+ this.allForm.group[index].deepConversionBid < this.allForm.group[index].cpaBid ||
|
|
|
+ this.allForm.group[index].deepConversionBid > 3000
|
|
|
+ ) {
|
|
|
+ this.allForm.group[index].deepConversionBidCheck = true
|
|
|
+ } else {
|
|
|
+ this.allForm.group[index].deepConversionBidCheck = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkGroup(e, index) {
|
|
|
+ getAction('/kuaishou/batch/checkUnitName', {
|
|
|
+ campaignId: localStorage.getItem('advertisingGroupKey'),
|
|
|
+ unitName: e.target.value
|
|
|
+ }).then(res => {
|
|
|
+ this.allForm.group[index].unitNameCheck = !res.result
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showTip(index) {
|
|
|
+ if (this.allForm.group[index].bidType == '1') {
|
|
|
+ if (this.allForm.group[index].bid < 0.2 || this.allForm.group[index].bid > this.maxBid) {
|
|
|
+ this.allForm.group[index].showTipCheck = true
|
|
|
+ } else {
|
|
|
+ this.allForm.group[index].showTipCheck = false
|
|
|
+ }
|
|
|
+ } else if (this.allForm.group[index].bidType == '2') {
|
|
|
+ if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
|
|
|
+ this.allForm.group[index].showTipCheck = true
|
|
|
+ } else {
|
|
|
+ this.allForm.group[index].showTipCheck = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.allForm.group[index].cpaBid < 5 || this.allForm.group[index].cpaBid > this.maxBid) {
|
|
|
+ this.allForm.group[index].showTipCheck = true
|
|
|
+ } else {
|
|
|
+ this.allForm.group[index].showTipCheck = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getScheduleTime(item) {
|
|
|
+ this.allForm.scheduleTimeData = item
|
|
|
+ },
|
|
|
+ setTime(e) {
|
|
|
+ // console.log(moment('2019-12-27'))
|
|
|
+ if (e.target.value == '2') {
|
|
|
+ this.timeRange[0] = moment().startOf('day')
|
|
|
+ this.timeRange[1] = moment().add(1, 'months')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setTimeAll(e) {
|
|
|
+ // console.log(moment('2019-12-27'))
|
|
|
+ // if (e.target.value == '2') {
|
|
|
+ // this.$refs.selectCheck.init()
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ getData(className) {
|
|
|
+ return this.form.getFieldValue(className)
|
|
|
+ },
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
+ if (this.campaignType == '3') {
|
|
|
+ if (value == '') {
|
|
|
+ callback('请填写链接')
|
|
|
+ }
|
|
|
+ } else if (this.campaignType == '4') {
|
|
|
+ if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback('链接不能为空且开头为http://或https://,并且长度小于10000')
|
|
|
+ }
|
|
|
+ } else if (this.campaignType == '5') {
|
|
|
+ if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback('链接不能为空且开头为http://或https://,并且长度小于10000')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ budgetValue(rule, value, callback) {
|
|
|
+ if (value < 100 || value > 100000000) {
|
|
|
+ callback('不小于100,不超过100000000,仅支持输入自然数')
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+ handleConfirmBid(rule, value, callback) {
|
|
|
+ if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
|
|
|
+ callback('不得低于0.2元,不得高于100元')
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleConfirmCpaBid(rule, value, callback) {
|
|
|
+ if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
|
|
|
+ callback('金额不得低于1元,不得高于3000元')
|
|
|
+ }
|
|
|
+ if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
|
|
|
+ callback('金额不得低于5元,不得高于3000元')
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+ onSelectChange(selectedRowKeys, selectionRows) {
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectChangeNo(selectedRowKeys, selectionRows) {
|
|
|
+ this.selectedRowKeysNo = selectedRowKeys
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ okSelect() {
|
|
|
+ this.keyValue = ''
|
|
|
+ this.topMiddle = false
|
|
|
+ for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
|
|
|
+ this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
|
|
|
+ }
|
|
|
+ },
|
|
|
+ okSelectNo() {
|
|
|
+ this.keyValueNo = ''
|
|
|
+ this.topMiddleNo = false
|
|
|
+ for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
|
|
|
+ this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + ' '
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radioChange() {
|
|
|
+ this.selectedRowKeys = []
|
|
|
+ this.selectedRowKeysValue = []
|
|
|
+ this.selectedRowKeysNo = []
|
|
|
+ this.selectedRowKeysValueNo = []
|
|
|
+ this.keyValue = ''
|
|
|
+ this.keyValueNo = ''
|
|
|
+ },
|
|
|
+
|
|
|
+ addApplication() {
|
|
|
+ this.$refs.application.showApplication()
|
|
|
+ },
|
|
|
+ getBasicsData(item) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.getAppList(item)
|
|
|
+ this.getCampaignList(item)
|
|
|
+ this.getMould(item)
|
|
|
+ getAction('/kuaishou/batch/getIsActivate', { accountId: item.accountId }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.allForm.groupTypeData = res.result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getAction('/kuaishou/batch/getProjectMaxBid', { accountId: item.accountId }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.maxBid = res.result / 1000
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTimeout(resolve(), 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleOk(item) {
|
|
|
+ this.accountId = item.accountId
|
|
|
+ this.campaignId = item.campaignId
|
|
|
+ this.planId = item.planId
|
|
|
+ this.getBasicsData(item).then(() => {
|
|
|
+ var params = {}
|
|
|
+ params.accountId = item.accountId
|
|
|
+ params.unitId = item.unitId
|
|
|
+ getAction('/kuaishou/batch/getUnitDetail', params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ var dataJson = { ...res.result.baseInfo, ...res.result.appInfo, ...res.result.target }
|
|
|
+ dataJson.dayBudget = dataJson.dayBudget / 1000
|
|
|
+ this.allForm.dayBudget = dataJson.dayBudget == 0 ? '0' : '1'
|
|
|
+ this.allForm.time = dataJson.endTime ? '2' : '1'
|
|
|
+ this.timeRange = [moment(dataJson.beginTime), moment(dataJson.endTime)]
|
|
|
+ this.allForm.scheduleTime = dataJson.scheduleTime.indexOf('1') != -1 ? '2' : '1'
|
|
|
+ this.allForm.scheduleTimeData = dataJson.scheduleTime
|
|
|
+ this.allForm.group = [
|
|
|
+ {
|
|
|
+ bidType: dataJson.ocpxActionType,
|
|
|
+ bid: dataJson.bid,
|
|
|
+ cpaBid: dataJson.cpaBid / 1000,
|
|
|
+ showTipCheck: false,
|
|
|
+ deepConversionBidCheck: false,
|
|
|
+ unitName: dataJson.unitName,
|
|
|
+ unitNameCheck: false,
|
|
|
+ deepConversionType: dataJson.deepConversionType,
|
|
|
+ deepConversionBid: dataJson.deepConversionBid
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ this.populationData = dataJson
|
|
|
+ this.populationData.population = dataJson.population ? JSON.parse(dataJson.population) : null
|
|
|
+ this.populationData.excludePopulation = dataJson.population ? JSON.parse(dataJson.excludePopulation) : null
|
|
|
+
|
|
|
+ this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
|
|
|
+ this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
|
|
|
+ this.populationData.businessInterest = dataJson.businessInterest
|
|
|
+ ? JSON.parse(dataJson.businessInterest)
|
|
|
+ : null
|
|
|
+ this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
|
|
|
+ this.populationData.interestVideo = dataJson.interestVideo ? JSON.parse(dataJson.interestVideo) : null
|
|
|
+ this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null
|
|
|
+
|
|
|
+ this.populationData.age = dataJson.ageMin ? [dataJson.ageMin, dataJson.ageMax] : []
|
|
|
+ this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
|
|
|
+ this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
|
|
|
+ this.populationData.allForm = {}
|
|
|
+ this.populationData.allForm.regionType =
|
|
|
+ dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
|
|
|
+ postAction('/kuaishou/batch/getRegionDetail', { regionArr: dataJson.region }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.populationData.allForm.region = res.result
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.populationData.allForm.ageType =
|
|
|
+ dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.ageMin ? 'ageCustom' : 'noLimit'
|
|
|
+ this.populationData.allForm.device = dataJson.deviceBrand ? '1' : '0'
|
|
|
+ this.populationData.allForm.price = dataJson.devicePrice ? '1' : '0'
|
|
|
+ this.populationData.allForm.appType = dataJson.appInterest ? '1' : dataJson.appIds ? '2' : '0'
|
|
|
+ this.populationData.allForm.fansStar = dataJson.fansStar ? '1' : '0'
|
|
|
+ this.populationData.allForm.interestVideo = dataJson.interestVideo ? '1' : '0'
|
|
|
+ this.populationData.allForm.platform_os = dataJson.platformOs + ''
|
|
|
+ this.populationData.allForm.businessInterestType = dataJson.businessInterest ? '2' : '0'
|
|
|
+ this.populationData.allForm.isOpen = dataJson.isOpen + ''
|
|
|
+ this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
|
|
|
+ this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
|
|
|
+ this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
|
|
|
+
|
|
|
+ console.log(this.populationData.allForm, dataJson.agesRange)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue(pick(dataJson, ['appId', 'urlType', 'url', 'dayBudget', 'speed', 'showMode']))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel(e) {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ handleSubmit(e) {
|
|
|
+ // this.$refs.population.handleSubmit()
|
|
|
+ e.preventDefault()
|
|
|
+ this.$refs.population.handleSubmit()
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ this.loading = true
|
|
|
+ var groupArr = this.allForm.group.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ cpaBid: item.cpaBid != '' ? item.cpaBid * 1000 : '',
|
|
|
+ bid: item.bid != '' ? item.bid * 1000 : '',
|
|
|
+ deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
|
|
|
+ ocpxActionType: item.bidType,
|
|
|
+ bidType: item.bidType == '1' ? '2' : '6'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ var json = { ...values, sceneId: [values.sceneId], dayBudget: values.dayBudget * 1000 }
|
|
|
+ var params = {
|
|
|
+ ...this.populationData,
|
|
|
+ ...json,
|
|
|
+ groupArr:groupArr,
|
|
|
+ accountId: this.accountId,
|
|
|
+ campaignId: this.planId,
|
|
|
+ unitType: 4,
|
|
|
+ beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
|
|
|
+ endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
|
|
|
+ scheduleTime: this.allForm.scheduleTimeData
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.checkedTrue) {
|
|
|
+ var data = this.populationData
|
|
|
+ postAction('/kuaishou/batch/addDirectionalTemplate', {
|
|
|
+ accountId: this.accountId,
|
|
|
+ templateName: this.nameValue,
|
|
|
+ templateContent: JSON.stringify(this.populationData)
|
|
|
+ }).then(res => {})
|
|
|
+ }
|
|
|
+ postAction('/kuaishou/batch/createUnit', params).then(res => {
|
|
|
+ if(res.success){
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onChange(value) {
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+ handleChange(value) {
|
|
|
+ // this.$refs.population.getAppList(value)
|
|
|
+ },
|
|
|
+ handleChangeMould(value) {
|
|
|
+ if (value) {
|
|
|
+ this.populationData = JSON.parse(
|
|
|
+ this.dataList.filter(item => {
|
|
|
+ return item.id == value
|
|
|
+ })[0].templateContent
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.populationData = {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPlatForm(appId) {
|
|
|
+ if (appId) {
|
|
|
+ var data = this.appList.filter(item => {
|
|
|
+ return item.appId == appId
|
|
|
+ })
|
|
|
+ return data[0].platform
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleBlur() {
|
|
|
+ console.log('blur')
|
|
|
+ },
|
|
|
+ handleFocus() {
|
|
|
+ console.log('focus')
|
|
|
+ },
|
|
|
+ filterOption(input, option) {
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ },
|
|
|
+ prevStep() {
|
|
|
+ this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
|
|
|
+ },
|
|
|
+ getMould(item) {
|
|
|
+ let params = {}
|
|
|
+ params.accountId = item.accountId
|
|
|
+ getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.dataList = res.result.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getAppList(item) {
|
|
|
+ let params = {}
|
|
|
+ params.accountId = item.accountId
|
|
|
+ getAction('/kuaishou/batch/getAppList', params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.appList = res.result.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPeople(e) {
|
|
|
+ console.log(e.target.value)
|
|
|
+ if (e.target.value == 3) {
|
|
|
+ getAction('/kuaishou/batch/getPopulationList', { accountId: item.accountId }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.data = res.result.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCampaignList(item) {
|
|
|
+ var params = {}
|
|
|
+ params.accountId = item.accountId
|
|
|
+ params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignId')
|
|
|
+ getAction('/kuaishou/batch/getCampaignList', params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.campaignType = res.result.records[0].campaignType
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getData(className) {
|
|
|
+ return this.form.getFieldValue(className)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {}
|
|
|
+}
|
|
|
+</script>
|