1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189 |
- <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-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
- <a-form @submit="handleSubmit" :form="form">
- <a-form-item label="目标应用" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, 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> -->
- <a-button type="primary" @click="addApplication" :loading="tongbuLoading">
- 刷新应用</a-button>
- <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="{ 'else-label': campaignType == 3 }">
- <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
- </a-form-item>
- <a-form-item label="转化目标" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="campaignType == 2||campaignType == 4||campaignType == 5">
- <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
- <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
- </a-form-item>
- <a-modal v-model="convert" title="选择转化目标">
- <template slot="footer">
- <a-button key="back" @click="convert=false">取消</a-button>
- <a-button key="submit" type="primary" @click="convert=false">
- 确定
- </a-button>
- </template>
- <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="convertType" @change="convertChange">
- <a-radio-button value="1" v-show="campaignType == 4||campaignType == 5">JS布玛</a-radio-button>
- <a-radio-button value="2" v-show="campaignType == 4||campaignType == 5">Xpath</a-radio-button>
- <a-radio-button value="3"
- v-show="campaignType == 2&&(getPlatForm(getData('appId'))==1||getPlatForm(getData('appId'))==2)">应用-SDK
- </a-radio-button>
- <a-radio-button value="7" v-show="campaignType == 2">应用-API</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 } }">
- <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
- <a-select-option :value="item.convert_id" v-for="(item) in convertList" :key="item.convert_id">
- {{item.convert_name}}</a-select-option>
- </a-select>
- </a-form-item>
- </a-modal>
- <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label"
- v-if="campaignType == '2'&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">
- <a-checkbox v-decorator="[
- 'useAppMarket',
- {
- valuePropName: 'checked',
- initialValue: false,
- },
- ]">
- 优先从系统应用商店下载
- </a-checkbox>
- </a-form-item>
- <a-form-item label=" " :labelCol="{ lg: { span: 7}, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 16 } }" class="else-label" v-if="getData('useAppMarket')&&campaignType == '2'&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">
- 请勾选投放应用已上架的应用商店(默认全选)
- <a-checkbox-group v-model="allForm.appStore">
- <a-checkbox value="huawei">华为</a-checkbox>
- <a-checkbox value="oppo">OPPO</a-checkbox>
- <a-checkbox value="vivo">VIVO</a-checkbox>
- <a-checkbox value="xiaomi">小米</a-checkbox>
- <a-checkbox value="meizu">魅族</a-checkbox>
- <a-checkbox value="smartisan">锤子</a-checkbox>
- </a-checkbox-group>
- </a-form-item>
- <a-form-item label="投放范围" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="allianceAccount">
- <a-radio-group buttonStyle="solid" v-model="allForm.allianceAccount">
- <a-radio-button value="1">默认</a-radio-button>
- <a-radio-button value="2">联盟广告</a-radio-button>
- </a-radio-group>
- </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'))" :lol="allForm.allianceAccount"/>
- <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-number placeholder="不小于100,不超过100000000,仅支持输入自然数" style="width:100%" 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: 10 }, 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: 17 }, sm: { span: 17 } }" v-if="allForm.allianceAccount == '1'">
- <!-- 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-button value="2">按场景选择广告位</a-radio-button>
- </a-radio-group>
- <!-- getData('speed') == '2' -->
- <br>
- </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="getData('sceneId') == '2'">
- <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
- <a-checkbox :value="7">信息流广告</a-checkbox>
- <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
- <a-checkbox :value="3">视频播放页广告</a-checkbox>
- </a-checkbox-group>
- </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="['unitType', { initialValue: '4' }]">
- <a-radio-button value="4">自定义</a-radio-button>
- <a-radio-button value="7" :disabled="allForm.allianceAccount=='2'">程序化创意2.0</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="12" v-for="(item, index) of allForm.group" :key="index">
- <a-card title :ref="item" style="height:435px">
- {{ index + 1 }}
- <a-icon type="close" style="float:right;cursor: pointer;" @click="removeGroup(index)" />
- <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="10">转化数</a-radio-button>
- </a-radio-group>
- <!-- // isOrderSubmit: 0 //订单提交优化目标
- // isValidClue: 0 //使用有效线索
- // isCreditGrant: 0 //授信出价
- // deepConversionTypes: [{deepConversionType: 3, desc: "付费"}]
- // isWanJian: 0 //完件出价
- // isPurchase: 1 //付费出价
- // isFirstdayRoi: 0 //首日ROI
- // isActivate: 0 //激活出价
- // isFormSubmit: 1 // 表单出价
- // isRegister: 0 //注册优化目标 -->
- </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==10">
- <a-select v-model="item.ocpxActionType">
- <a-select-option :value="2">行为数</a-select-option>
- <a-select-option :value="180"
- v-if="campaignType == '2' && allForm.groupTypeData.isActivate == '1'">激活</a-select-option>
- <a-select-option :value="53" v-if="
- (campaignType == '4' || campaignType == '5') && allForm.groupTypeData.isFormSubmit == '1'
- ">表单提交</a-select-option>
- <a-select-option :value="394" v-if="
- allForm.groupTypeData.isOrderSubmit == '1'
- ">订单提交</a-select-option>
- <a-select-option :value="348" v-if="
- allForm.groupTypeData.isValidClue == '1'
- ">使用有效线索</a-select-option>
- <a-select-option :value="383" v-if="
- allForm.groupTypeData.isCreditGrant == '1'
- ">授信出价</a-select-option>
- <a-select-option :value="384" v-if="
- allForm.groupTypeData.isWanJian == '1'
- ">完件出价</a-select-option>
- <a-select-option :value="190" v-if="
- allForm.groupTypeData.isPurchase == '1'
- ">付费出价</a-select-option>
- <a-select-option :value="191" v-if="
- allForm.groupTypeData.isFirstdayRoi == '1'
- ">首日ROI</a-select-option>
- <a-select-option :value="396" v-if="
- allForm.groupTypeData.isRegister == '1'
- ">注册优化目标</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 } }" v-if="
- (item.ocpxActionType == 180 || item.ocpxActionType == 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">{{item.bidType == 1?"点击计费":"展示计费(oCPM)"}}</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&&item.ocpxActionType==180">不得低于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 == 1
- ? '不得低于1元,不得高于项目最高出价' + maxBid + '元'
- : '不得低于1元,不得高于项目最高出价' + maxBid + '元'
- }}</span>
- <span style="color:red;font-weight:700" v-else-if="item.ocpxActionType==2&&item.cpaBid&&item.cpaBid>1">
- 行为出价大于1元,请注意!!!
- </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.ocpxActionType == 180 || item.ocpxActionType == 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-item :wrapperCol="{ span: 20 }" style="text-align: center">
- <a-button htmlType="submit" type="primary" :loading="loading">下一步</a-button>
- <!-- <a-button style="margin-left: 8px" @click="prevStep" v-show="step == 1">上一步</a-button> -->
- </a-form-item>
- </a-form>
- <a-modal v-model="visible" title="广告组创建信息">
- <div>
- 创建成功:{{ allForm.success.length }}条
- <div style="margin-top:20px">
- <p v-for="(item, index) of allForm.success" :key="index">
- <span>名称:{{ item.unitName }}</span>
- </p>
- </div>
- <br />
- 创建失败:{{ allForm.fail.length }}条
- <div style="margin-top:20px">
- <p v-for="(item, index) of allForm.fail" :key="index">
- <span>名称:{{ item.unitName }}</span><br />
- <span>错误信息:{{ item.failMessage }}</span>
- </p>
- </div>
- </div>
- <template slot="footer">
- <a-button key="back" @click="handleCancel">关闭</a-button>
- <a-button key="submit" type="primary" @click="handleOk" :disabled="allForm.success.length == 0">
- 进入创意创建
- </a-button>
- </template>
- </a-modal>
- </a-card>
- </template>
- <script>
- import {
- getAction,
- postAction
- } from '@/api/manage'
- import moment from 'moment'
- import {
- mapGetters
- } from 'vuex'
- import jq from 'jquery'
- import creatApplication from './stepModule/creatApplication.vue'
- import targetedPopulation from './stepModule/targetedPopulation.vue'
- import selectCheckAll from './stepModule/test'
- let dateQuantumRangeConst = ''
- const columns = [{
- title: '人群',
- dataIndex: 'orientationName',
- scopedSlots: {
- customRender: 'orientationName'
- },
- width: 150
- },
- {
- title: '属性',
- dataIndex: 'populationType',
- filters: [{
- text: '上传人群',
- value: '1'
- },
- {
- text: '广告人群',
- value: '2'
- },
- {
- text: '主题专区',
- value: '3'
- },
- {
- text: '逻辑规则',
- value: '4'
- },
- {
- text: '人群扩展',
- value: '5'
- },
- {
- text: '平台定制',
- value: '6'
- },
- {
- text: '定制付费',
- value: '7'
- },
- {
- text: '网红粉丝类别',
- value: '8'
- },
- {
- text: '内容付费行为',
- value: '9'
- },
- {
- text: '移动应用安装',
- value: '10'
- },
- {
- text: '快手使用活跃度',
- value: '11'
- },
- {
- text: '行业分类',
- value: '12'
- },
- {
- text: '商业兴趣',
- value: '13'
- },
- {
- text: '固化标签',
- value: '14'
- },
- {
- text: '行业偏好',
- value: '15'
- },
- {
- text: '第三方标签',
- value: '16'
- },
- {
- text: '产品关键词',
- value: '17'
- }
- ],
- onFilter: (value, record) =>
- record.populationType
- .toString()
- .toLowerCase()
- .includes(value.toLowerCase()),
- scopedSlots: {
- customRender: 'populationType'
- },
- width: 150
- },
- {
- title: '创建时间',
- dataIndex: 'createTime',
- scopedSlots: {
- customRender: 'createTime'
- },
- sorter: (a, b) => a.createTime - b.createTime
- }
- ]
- export default {
- name: 'Step2',
- components: {
- creatApplication,
- targetedPopulation,
- selectCheckAll,
- },
- props: {
- campaignId: {
- type: String,
- default () {
- return null
- }
- }
- },
- data() {
- return {
- allianceAccount:false,
- tongbuLoading: false,
- convert: false,
- convertId: "",
- convertList: [],
- checkedTrue: false,
- nameValue: '',
- visible: false,
- timeRange: [],
- form: this.$form.createForm(this),
- step: 0,
- people: '2',
- targeted: '2',
- topMiddle: false,
- topMiddleNo: false,
- keyValue: '',
- keyValueNo: '',
- columns,
- 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: {},
- fail: [],
- success: [],
- sceneId: [7],
- appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
- allianceAccount:"1"
- },
- convertType: '1',
- dataList: []
- }
- },
- computed: {
- count() {
- return moment().startOf('day')
- }
- },
- filters: {
- getDate(value) {
- let date = new Date(value)
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- return y + '-' + MM + '-' + d
- },
- platform(str) {
- var data = {
- 1: 'Android应用下载',
- 2: 'Android网页游戏',
- 3: 'iOS应用下载',
- 4: 'iOS网页游戏'
- }
- return data[str]
- }
- },
- methods: {
- showConvert() {
- this.convertChange()
- if (this.campaignType == 2) {
- if (this.getData('appId')) {
- this.convert = true
- if (this.getPlatForm(this.getData('appId')) == 1 || this.getPlatForm(this.getData('appId')) == 2) {
- this.convertType = '3'
- } else {
- this.convertType = '7'
- }
- } else {
- this.$message.error('请选择应用')
- }
- } else {
- this.convert = true
- this.convertType = '1'
- }
- this.getConvertList()
- },
- convertChange() {
- this.convertId = ""
- },
- getConvertList() {
- var params = {}
- params.accountId = localStorage.getItem('accountId')
- params.type = this.convertType
- getAction('/kuaishou/batch/getConvertList', params).then(res => {
- console.log(res)
- if (res.success) {
- this.convertList = res.result.map(item => {
- return {
- ...item,
- convert_id: item.convert_id + ''
- }
- })
- }
- })
- },
- getCheck(e) {
- this.checkedTrue = e.target.checked
- },
- addGroup() {
- if(this.campaignType=='2'||this.campaignType==2){
- if(this.getData('appId')){
- this.allForm.group.push({
- bidType: 10,
- bid: '',
- cpaBid: '',
- showTipCheck: false,
- deepConversionBidCheck: false,
- unitName: '',
- unitNameCheck: false,
- deepConversionType: '',
- deepConversionBid: '',
- ocpxActionType:this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
- })
- }else{
- this.$message.error('请选择目标应用之后添加广告组')
- }
- }else{
- this.allForm.group.push({
- bidType: 10,
- bid: '',
- cpaBid: '',
- showTipCheck: false,
- deepConversionBidCheck: false,
- unitName: '',
- unitNameCheck: false,
- deepConversionType: '',
- deepConversionBid: '',
- ocpxActionType:this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
- })
- }
- },
- 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) {
- if (e.target.value != '') {
- getAction('/kuaishou/batch/checkUnitName', {
- campaignId: localStorage.getItem('campaignId'),
- unitName: e.target.value
- }).then(res => {
- if (res.success) {
- this.allForm.group[index].unitNameCheck = !res.result
- } else {
- this.allForm.group[index].unitNameCheck = false
- }
- })
- }
- },
- 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].cpaBid < 1 || 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.$nextTick(() => {
- 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.tongbuLoading = true
- // this.$refs.application.showApplication()
- getAction('/kuaishou/batch/syncAppList', {
- accountId: localStorage.getItem('accountId')
- }).then(res => {
- if (res.success) {
- this.tongbuLoading = false
- this.$message.success(res.message)
- this.getAppList()
- } else {
- this.tongbuLoading = false
- this.$message.error(res.message)
- }
- })
- },
- handleOk() {
- var that = this
- if (this.allForm.success.length > 0) {
- that.$emit('nextStep')
- this.visible = false
- }
- },
- handleCancel(e) {
- this.visible = false
- },
- handleSubmit(e) {
- // this.$refs.population.handleSubmit()
- e.preventDefault()
- this.$refs.population.handleSubmit()
- this.form.validateFieldsAndScroll((err, values) => {
- if (!err) {
- this.loading = true
- console.log(values)
- 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.ocpxActionType,
- bidType: item.bidType == 1 ? 2 : 10
- }
- })
- var json = {
- ...values,
- convertId: this.convertId ? this.convertId.key : null,
- sceneId: this.allForm.allianceAccount=='1'?values.sceneId == 1 ? [values.sceneId] : this.allForm.sceneId:[5],
- dayBudget: values.dayBudget * 1000
- }
- var params = {
- ...this.populationData,
- ...json,
- groupArr: groupArr,
- accountId: localStorage.getItem('accountId'),
- campaignId: localStorage.getItem('campaignId'),
- 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.scheduleTime == '2' ?
- this.allForm.scheduleTimeData :
- '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
- }
- if (values.useAppMarket == true || values.useAppMarket == false) {
- params.useAppMarket = values.useAppMarket ? 1 : 0
- if (values.useAppMarket == true) {
- params.appStore = this.allForm.appStore
- }
- }
- if(this.allForm.allianceAccount=='1'){
- var {...paramsEnd} = params
- }else{
- var {fansStar,appType,businessInterestType,interestVideo,isOpen,noAgeBreak,noGenderBreak,noAreaBreak,...paramsElse} = params.allForm
- params.allForm = paramsElse
- var {businessInterestType,isOpen,noAgeBreak,noGenderBreak,noAreaBreak,...paramsEnd} = params
- }
- //fansStar appType businessInterestType interestVideo isOpen
- if (this.checkedTrue) {
- var data = this.populationData
- postAction('/kuaishou/batch/addDirectionalTemplate', {
- accountId: localStorage.getItem('accountId'),
- templateName: this.nameValue,
- templateContent: JSON.stringify(this.populationData)
- }).then(res => {})
- }
- postAction('/kuaishou/batch/createUnit', paramsEnd).then(res => {
- if (res.success) {
- this.visible = true
- this.allForm.fail = res.result.fail
- this.allForm.success = res.result.success
- this.loading = false
- if (res.result.success.length > 0) {
- var dataElse = res.result.success.map(item => {
- return {
- tab: item.unitName,
- key: item.unitId,
- bidType: item.ocpxActionType,
- sceneId:JSON.stringify(item.sceneId),
- unitType: item.unitType
- }
- })
- var dataJson = JSON.stringify(dataElse)
- localStorage.setItem('pans', dataJson)
- localStorage.setItem('appId', this.getData('appId'))
-
- }
- } else {
- this.loading = false
- this.$message.error(res.message)
- }
- })
- }
- })
- },
- onChange(value) {
- console.log(value)
- },
- handleChange(value) {
- // this.$refs.population.getAppList(value)
- this.allForm.group = []
- getAction('/kuaishou/batch/getIsActivate', {
- accountId: localStorage.getItem('accountId'),
- appId:this.getData('appId'),
- campaignType:2
- }).then(res => {
- if (res.success) {
- this.allForm.groupTypeData = res.result
- }
- })
- },
- 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() {
- let params = {}
- params.accountId = localStorage.getItem('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() {
- let params = {}
- params.accountId = localStorage.getItem('accountId')
- getAction('/kuaishou/batch/getAppList', params).then(res => {
- if (res.success) {
- this.appList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- }
- })
- },
- getCampaignList() {
- var params = {}
- params.accountId = localStorage.getItem('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
- if(this.campaignType!=2){
- getAction('/kuaishou/batch/getIsActivate', {
- accountId: localStorage.getItem('accountId'),
- campaignType:this.campaignType
- }).then(res => {
- if (res.success) {
- this.allForm.groupTypeData = res.result
- }
- })
- }
- // console.log(this.campaignType)
- }
- })
- },
- getData(className) {
- return this.form.getFieldValue(className)
- }
- },
- watch: {
- timeSeries(val) {
- console.log(val)
- }
- },
- mounted: function () {
- this.step = localStorage.getItem('step')
- this.getAppList()
- this.getCampaignList()
- this.getMould()
- getAction('/kuaishou/batch/getWhiteList',{
- accountId:localStorage.getItem('accountId')
- }).then(res=>{
- if(res.success){
- console.log(res)
- if(res.result){
- if(res.result.alliance_account == 1){
- this.allianceAccount = true
- }else{
- this.allianceAccount = false
- }
- }else{
- this.allianceAccount = false
- }
- }
- })
- getAction('/kuaishou/batch/getProjectMaxBid', {
- accountId: localStorage.getItem('accountId')
- }).then(res => {
- if (res.success) {
- this.maxBid = res.result / 1000
- }
- })
- }
- }
- </script>
- <style type="text/css">
- .plug-timer-grid {
- width: 100%;
- }
- .plug-timer-grid td,
- .plug-timer-grid th {
- border: 1px solid #97b4d1;
- text-align: center;
- /*cursor:pointer;*/
- font-size: 10px;
- line-height: 10px;
- }
- .Selected {
- background-color: rgb(102, 162, 243);
- opacity: 0.5;
- }
- .plug-timer-grid {
- border-collapse: collapse;
- z-index: 4;
- }
- .plug-timer-grid thead tr {
- display: table-row;
- vertical-align: inherit;
- border-color: inherit;
- }
- .group-creat table td {
- height: 20px;
- max-width: 5px;
- font-size: 12px;
- text-align: center;
- vertical-align: middle;
- overflow: hidden;
- transition: background 0.5s;
- -webkit-transition: background 0.5s;
- }
- .plug-timer-grid tbody th {
- width: 4%;
- }
- .plug-timer-grid tbody tr td {
- width: 2%;
- }
- /*.clear{*/
- /* margin:20px 0px 20px 0px;*/
- /*}*/
- </style>
|