12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708 |
- <template>
- <div ref="questionnaireBox" class="new-batch config-new-batch">
- <a-spin :spinning="spinning">
- <div class="chartBox">
- <a-row :gutter="20">
- <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
- <a-card class="search-box step-jump" title="选择账户">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item
- label="账户名称"
- :labelCol="formItemLayout.labelCol"
- class="account-item require-check"
- >
- <!-- <div
- v-if="$route.query.id"
- style="line-height: 40px;
- font-size: 16px;
- font-weight: bold;"
- >
- <span v-for="(item, index) in creativeTagData" :key="index"
- >{{ item.authName + '(' + item.accountId + ')'
- }}{{ index == creativeTagData.length - 1 ? '' : ',' }}</span
- >
- </div> -->
- <selectTreeAccount
- v-model="accountIds"
- ref="treeSelect"
- style="width: 100%"
- :limit="1"
- :disabled="!!$route.query.id"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="营销场景">
- <a-radio-group
- button-style="solid"
- v-decorator="[
- 'hostingScene',
- {
- rules: [{ required: true, message: '营销场景必选' }],
- initialValue: 0,
- },
- ]"
- >
- <a-radio-button :value="0">常规推广</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="投放媒体">
- <!-- { label: '视频播放页广告', value: 3 }, -->
- <checkBoxGroup
- :options="[
- { label: '优选广告位', value: 1 },
- { label: '上下滑大屏广告', value: 6 },
- { label: '快手联盟优选', value: 10 },
- { label: '激励视频广告', value: 24 },
- ]"
- v-decorator="[
- 'sceneIds',
- {
- rules: [
- {
- required: true,
- message: '投放媒体必选',
- },
- ],
- initialValue: [1],
- },
- ]"
- @change="changeData"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="营销目标">
- <a-radio-group
- button-style="solid"
- v-decorator="[
- 'campaignType',
- {
- rules: [{ required: true, message: '营销目标必选' }],
- initialValue: 2,
- },
- ]"
- @change="changeCampaign"
- >
- <a-radio-button :value="2" :disabled="!!$route.query.id"
- >提升应用安装</a-radio-button
- >
- <a-radio-button :value="5" :disabled="!!$route.query.id"
- >收集销售线索</a-radio-button
- >
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="设置基本信息">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formInformation">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="项目名称">
- <a-input
- v-decorator="[
- 'name',
- {
- rules: [{ required: true, message: '名称必填' }],
- },
- ]"
- ></a-input>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 命名规则修改后计划命名立刻生效,广告组/创意名称将在下次创建时生效,不输入将按照默认规则命名。日期/序号未设置情况下会默认在广告组名称后追加
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 自定义命名规则
- </span>
- <a-radio-group
- button-style="solid"
- v-decorator="[
- 'ruleEnable',
- {
- rules: [{ required: true, message: '自定义命名规则必选' }],
- initialValue: false,
- },
- ]"
- >
- <a-radio-button :value="false">不开启</a-radio-button>
- <a-radio-button :value="true">开启</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
- <a-col :span="16">
- <a-form-item label="计划命名规则">
- <a-input
- v-decorator="[
- 'campaignNameRule',
- { rules: [{ message: '请填写计划的命名规则' }] },
- ]"
- allow-clear
- id="campaignNameRule"
- />
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('时间', 'formInformation', 'campaignNameRule')"
- >+时间</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
- <a-col :span="16">
- <a-form-item label="组命名规则">
- <a-input
- v-decorator="[
- 'unitNameRule',
- { rules: [{ message: '请填写组命名规范' }] },
- ]"
- allow-clear
- id="unitNameRule"
- />
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('时间', 'formInformation', 'unitNameRule')"
- >+时间</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('序号', 'formInformation', 'unitNameRule')"
- >+序号</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
- <a-col :span="16">
- <a-form-item label="创意命名规则">
- <a-input
- v-decorator="[
- 'creativeNameRule',
- { rules: [{ message: '请填写创意命名规则' }] },
- ]"
- allow-clear
- id="creativeNameRule"
- />
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('时间', 'formInformation', 'creativeNameRule')"
- >+时间</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('序号', 'formInformation', 'creativeNameRule')"
- >+序号</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="目标应用">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formTargetApp">
- <div
- v-if="
- getFormData('formProject', 'campaignType') &&
- getFormData('formProject', 'campaignType') == 2
- "
- >
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="选择应用">
- <a-select
- style="width: 80%"
- allowClear
- v-decorator="[
- 'appId',
- {
- rules: [{ required: true, message: '应用必选' }],
- },
- ]"
- @change="changeAppId"
- >
- <a-select-option
- :value="item.appId"
- v-for="(item, index) in appList"
- :key="item.appId"
- >{{ item.appName }}({{ item.appVersion }}/{{
- item.platform == 1 || item.platform == 2
- ? 'android'
- : 'ios'
- }})</a-select-option
- >
- </a-select>
- <a-button type="primary" :loading="tongbuLoading" @click="tongbuClick"
- >刷新应用</a-button
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="changeAppIdVisible">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-checkbox
- v-decorator="[
- 'useAppMarket',
- {
- valuePropName: 'checked',
- initialValue: false,
- },
- ]"
- >
- 优先从系统应用商店下载
- </a-checkbox>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formTargetApp', 'useAppMarket')">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- 请勾选投放应用已上架的应用商店
- <a-checkbox-group
- v-decorator="[
- 'appStore',
- {
- initialValue: [
- 'huawei',
- 'oppo',
- 'vivo',
- 'xiaomi',
- 'meizu',
- 'smartisan',
- ],
- },
- ]"
- >
- <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-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="应用下载详情">
- <a-select
- v-decorator="['siteId']"
- showSearch
- allowClear
- placeholder="选择应用下载详情页"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="appModel in siteList"
- :key="appModel.siteId"
- :value="appModel.siteId"
- >
- {{ appModel.name }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- </div>
- <a-row
- :gutter="16"
- v-else-if="
- getFormData('formProject', 'campaignType') &&
- getFormData('formProject', 'campaignType') == 5
- "
- >
- <a-col :span="16">
- <a-form-item label="链接">
- <a-input
- placeholder="请填写链接"
- v-decorator="[
- 'webUri',
- { rules: [{ required: true, message: '链接不能为空' }] },
- ]"
- />
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump">
- <span slot="title">
- 定向包
- <a-tooltip>
- <template slot="title"> 此处定向包内容均为固定测试的定向内容 </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </span>
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formDirectional">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="自定义人群">
- <a-radio-group v-model="people" buttonStyle="solid" @change="personSelect">
- <a-radio-button value="0">不限</a-radio-button>
- <a-radio-button value="1">定向</a-radio-button>
- <a-radio-button value="2">排除</a-radio-button>
- <a-radio-button value="3">同时定向排除</a-radio-button>
- </a-radio-group>
- <a-tabs v-model="tabKey" @change="retargetAccountId" v-if="people != '0'">
- <a-button
- slot="tabBarExtraContent"
- type="primary"
- @click="refreshPopulation"
- :loading="refreshPopulationLoading"
- >刷新人群包</a-button
- >
- <a-tab-pane key="1" tab="定向池" v-if="people != '2'">
- <a-table
- :columns="retargetColumns"
- :row-key="(record) => record.key"
- :data-source="retargetDataAll"
- :loading="loading"
- style="width: 100%; margin: 15px 0"
- :pagination="false"
- :scroll="{ y: 250 }"
- :row-selection="rowSelectionMin"
- bordered
- rowKey="id"
- >
- <template slot="name" slot-scope="name">
- {{ name }}
- </template>
- <template slot="populationType" slot-scope="populationType">
- {{ populationType | customCrowdHandler }}
- </template>
- </a-table>
- </a-tab-pane>
- <a-tab-pane key="2" tab="排除池" v-if="people != '1'">
- <a-table
- :columns="retargetColumns"
- :row-key="(record) => record.key"
- :data-source="retargetDataAll"
- :loading="loading"
- style="width: 100%; margin: 15px 0"
- :pagination="false"
- :scroll="{ y: 250 }"
- :row-selection="rowSelectionMax"
- bordered
- rowKey="id"
- >
- <template slot="name" slot-scope="name">
- {{ name }}
- </template>
- <template slot="populationType" slot-scope="populationType">
- {{ populationType | customCrowdHandler }}
- </template>
- </a-table>
- </a-tab-pane>
- </a-tabs>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="地域">
- <a-radio-group v-model="district" @change="cityChange" buttonStyle="solid">
- <a-radio-button value="NONE">不限</a-radio-button>
- <a-radio-button value="CITY">按省市</a-radio-button>
- </a-radio-group>
- <div
- class="region"
- style="margin-top: 20px; width: 100%"
- v-show="district != 'NONE'"
- >
- <div class="provincyCity" v-if="district == 'CITY'">
- <select-region
- :checkData.sync="regionList"
- :dataValue="regionList"
- />
- </div>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="district == 'CITY'">
- <a-col :span="16">
- <a-form-item label="用户类型">
- <a-radio-group
- buttonStyle="solid"
- v-decorator="[
- 'userType',
- {
- initialValue: '0',
- },
- ]"
- >
- <a-radio-button value="0">实时在此的用户</a-radio-button>
- <a-radio-button value="1">常住在此的用户</a-radio-button>
- <a-radio-button value="2">不限</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="年龄">
- <a-radio-group v-model="ageType" buttonStyle="solid">
- <a-radio-button value="noLimit">不限</a-radio-button>
- <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
- <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
- </a-radio-group>
- <div v-if="ageType == 'ageLimit'" style="margin-top: 5px">
- <a-checkbox-group
- v-decorator="[
- 'agesRange',
- { rules: [{ required: true, message: '请选择年龄段' }] },
- ]"
- >
- <a-checkbox :value="18">18-23岁</a-checkbox>
- <a-checkbox :value="24">24-30岁</a-checkbox>
- <a-checkbox :value="31">31-40岁</a-checkbox>
- <a-checkbox :value="41">41-49岁</a-checkbox>
- <a-checkbox :value="50">50+</a-checkbox>
- </a-checkbox-group>
- </div>
- <div v-if="ageType == 'ageCustom'">
- <a-slider
- range
- :marks="marks"
- :min="18"
- :max="55"
- v-decorator="[
- 'age',
- {
- rules: [
- { required: true, message: '请选择年龄段' },
- { validator: handleConfirmValue },
- ],
- initialValue: [18, 18],
- },
- ]"
- />
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="性别">
- <a-radio-group
- buttonStyle="solid"
- v-decorator="[
- 'gender',
- {
- initialValue: '',
- },
- ]"
- >
- <a-radio-button :value="''">不限</a-radio-button>
- <a-radio-button value="F">女性</a-radio-button>
- <a-radio-button value="M">男性</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="操作系统版本">
- <a-radio-group
- buttonStyle="solid"
- v-decorator="[
- 'platformOs',
- {
- initialValue: 3,
- },
- ]"
- :disabled="getFormData('formProject', 'campaignType') != 5"
- >
- <a-radio-button :value="3">不限</a-radio-button>
- <a-radio-button :value="1">android</a-radio-button>
- <a-radio-button :value="2">ios</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label=""
- v-bind="tailFormItemLayout"
- v-if="
- getFormData('formDirectional', 'platformOs') &&
- getFormData('formDirectional', 'platformOs') == 1
- "
- >
- <a-select
- style="width: 300px"
- v-decorator="[
- 'platformOv',
- {
- rules: [{ required: true, message: '版本必选' }],
- initialValue: 3,
- },
- ]"
- >
- <a-select-option :value="3">不限版本</a-select-option>
- <a-select-option :value="4">4.x及以上</a-select-option>
- <a-select-option :value="5">5.x及以上</a-select-option>
- <a-select-option :value="6">6.x及以上</a-select-option>
- <a-select-option :value="7">7.x及以上</a-select-option>
- <a-select-option :value="8">8.x及以上</a-select-option>
- <a-select-option :value="9">9.x及以上</a-select-option>
- <a-select-option :value="10">10.x及以上</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item
- label=""
- v-bind="tailFormItemLayout"
- v-if="
- getFormData('formDirectional', 'platformOs') &&
- getFormData('formDirectional', 'platformOs') == 2
- "
- >
- <a-select
- style="width: 300px"
- v-decorator="[
- 'platformOv',
- {
- rules: [{ required: true, message: '版本必选' }],
- initialValue: 6,
- },
- ]"
- >
- <a-select-option :value="6">不限版本</a-select-option>
- <a-select-option :value="7">7.x及以上</a-select-option>
- <a-select-option :value="8">8.x及以上</a-select-option>
- <a-select-option :value="9">9.x及以上</a-select-option>
- <a-select-option :value="10">10.x及以上</a-select-option>
- <a-select-option :value="11">11.x及以上</a-select-option>
- <a-select-option :value="12">12.x及以上</a-select-option>
- <a-select-option :value="13">13.x及以上</a-select-option>
- <a-select-option :value="14">14.x及以上</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="智能扩量">
- <a-radio-group
- buttonStyle="solid"
- v-decorator="[
- 'isOpen',
- {
- rules: [{ required: true, message: '版本必选' }],
- initialValue: 1,
- },
- ]"
- >
- <a-radio-button :value="1">智能扩量</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-checkbox-group
- v-decorator="['expansion', { initialValue: [] }]"
- style="width: 150%"
- >
- <a-checkbox
- value="noAgeBreak"
- style="margin-bottom: 8px"
- :disabled="
- ageType == 'ageLimit'
- ? !getFormData('formDirectional', 'agesRange') ||
- getFormData('formDirectional', 'agesRange').length == 0
- : ageType == 'ageCustom'
- ? !getFormData('formDirectional', 'age') ||
- getFormData('formDirectional', 'age') == []
- : true
- "
- >不可突破年龄</a-checkbox
- >
- <a-checkbox
- value="noGenderBreak"
- style="margin-bottom: 8px"
- :disabled="
- !getFormData('formDirectional', 'gender') ||
- getFormData('formDirectional', 'gender') == ''
- "
- >不可突破性别</a-checkbox
- >
- <a-checkbox
- value="noAreaBreak"
- style="margin-bottom: 8px"
- :disabled="regionList.length == 0"
- >不可突破地域</a-checkbox
- >
- </a-checkbox-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="过滤已转化用户">
- <a-radio-group
- buttonStyle="solid"
- v-decorator="['filterConvertedLevel', { initialValue: 0 }]"
- style="width: 150%"
- >
- <a-radio-button :value="0">不限</a-radio-button>
- <a-radio-button :value="1">广告组</a-radio-button>
- <a-radio-button :value="2">广告计划</a-radio-button>
- <a-radio-button :value="3">本账户</a-radio-button>
- <a-radio-button :value="4">公司主体</a-radio-button>
- <a-radio-button :value="5">APP</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="排期预算">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formOriginality">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="投放排期">
- <a-radio-group
- button-style="solid"
- v-decorator="[
- 'today',
- {
- initialValue: 4,
- },
- ]"
- >
- <a-radio-button :value="4">从今天开始长期投放</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="投放时段">
- <a-radio-group
- button-style="solid"
- @change="changeTimeData"
- v-decorator="[
- 'scheduleTime',
- {
- 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=""
- v-bind="tailFormItemLayout"
- v-show="
- getFormData('formOriginality', 'scheduleTime') &&
- getFormData('formOriginality', 'scheduleTime') == 2
- "
- >
- <scheduleTime
- v-if="
- getFormData('formOriginality', 'scheduleTime') &&
- getFormData('formOriginality', 'scheduleTime') == 2
- "
- style="width: 100%"
- :scheduleTime.sync="scheduleTimeData"
- ref="selectCheck"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="单日预算">
- <a-input-number
- v-decorator="[
- 'dayBudget',
- {
- rules: [
- {
- required: true,
- message: '不小于500,不超过100000000,仅支持输入自然数',
- },
- ],
- },
- ]"
- :min="500"
- :max="100000000"
- style="width: 90%"
- placeholder="不小于500,不超过100000000,仅支持输入自然数"
- :precision="0"
- />
- 元
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="优化目标">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="优化目标">
- <a-radio-group
- v-decorator="['bidType', { initialValue: 10 }]"
- button-style="solid"
- >
- <a-radio-button :value="10"> 转化数 </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化目标">
- <a-select
- style="width: 300px"
- allowClear
- v-decorator="[
- 'ocpxActionType',
- { rules: [{ required: true, message: '转化目标必选' }] },
- ]"
- @change="getDeepTypesList"
- >
- <a-select-option
- :value="items.ocpx_action_type"
- v-for="items in ocpxActionList"
- >{{ items.name }}</a-select-option
- >
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计费方式">
- <a-radio-group default-value="10" button-style="solid">
- <a-radio-button value="10"> 按展示付费(oCPM) </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化目标出价">
- <a-input-number
- v-decorator="[
- 'cpaBid',
- {
- rules: [{ required: true, message: '转化目标出价必填' }],
- },
- ]"
- :min="0"
- :max="100000000"
- style="width: 90%"
- :precision="2"
- />
- 元
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col
- :span="16"
- v-if="
- (getFormData('formOptimize', 'ocpxActionType') == 180 ||
- getFormData('formOptimize', 'ocpxActionType') == 53) &&
- deepTypesList.length > 0
- "
- >
- <a-form-item label="深度转化目标">
- <a-select
- v-decorator="['deepConversionType']"
- allowClear
- style="width: 300px"
- >
- <a-select-option
- :value="items.event_type"
- v-for="(items, index) of deepTypesList"
- :key="index"
- >
- {{ items.name }}</a-select-option
- >
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col
- :span="16"
- v-if="
- (getFormData('formOptimize', 'ocpxActionType') == 180 ||
- getFormData('formOptimize', 'ocpxActionType') == 53) &&
- deepTypesList.length > 0
- "
- >
- <a-form-item label="深度转化出价">
- <a-input-number
- v-decorator="['deepConversionBid']"
- :min="0"
- :max="100000000"
- style="width: 90%"
- :precision="2"
- />
- 元
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="创意信息">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formCreative">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="智能抽帧">
- <a-radio-group
- v-decorator="['smartCover', { initialValue: 2 }]"
- button-style="solid"
- >
- <a-radio-button :value="2"> 关闭 </a-radio-button>
- <a-radio-button :value="1"> 开启 </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="行动号召按钮">
- <a-select
- v-decorator="[
- 'actionBar',
- { rules: [{ required: true, message: '请选择行动号召按钮文案' }] },
- ]"
- showSearch
- allowClear
- placeholder="选择行动号召按钮文案"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="appModel in actionBarTextList"
- :key="appModel.id"
- :value="appModel.actionBarText"
- >
- {{ appModel.actionBarText }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告语">
- <div
- style="position: relative"
- v-for="(item, index) in descriptionList"
- :key="index"
- >
- <a-textarea
- class="rending"
- placeholder="请输入广告语"
- @change="descriptionchange(item.value, index)"
- v-model.trim="item.value"
- :autosize="{ minRows: 3, maxRows: 6 }"
- :max-length="30"
- ></a-textarea>
- <p
- style="
- font-size: 12px;
- color: #b6bbc7;
- letter-spacing: 0.3px;
- text-align: right;
- line-height: 30px;
- position: absolute;
- bottom: 0;
- right: 6px;
- width: 100%;
- margin-bottom: 0;
- border: 0;
- "
- >
- {{ item.value.length }}/30
- <!-- {{ getFormData('description').length }}/30 -->
- </p>
- <div style="position: absolute; right: -50px; top: -10px">
- <a-icon
- type="plus"
- @click="addDescription()"
- style="margin-right: 15px"
- />
- <a-icon
- type="minus"
- @click="removeDescription(index)"
- v-if="descriptionList.length > 1"
- />
- </div>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="素材挖掘">
- <a-radio-group
- v-decorator="['assetMining', { initialValue: 2 }]"
- button-style="solid"
- >
- <a-radio-button :value="2"> 关闭 </a-radio-button>
- <a-radio-button :value="1"> 开启 </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="第三方点击监测链接">
- <a-input
- v-decorator="[
- 'clickUrl',
- {
- rules: [
- {
- required:
- getFormData('formProject', 'campaignType') &&
- getFormData('formProject', 'campaignType') == 2,
- message: '请填写第三方点击监测链接',
- },
- { validator: handleConfirmValueUrl },
- ],
- },
- ]"
- allow-clear
- id="clickUrl"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="第三方actionBar监测链接">
- <a-input
- v-decorator="[
- 'actionbarClickUrl',
- {
- rules: [{ validator: handleConfirmValueOkUndefind }],
- },
- ]"
- allow-clear
- id="actionbarClickUrl"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="视频数量">
- <a-input-number
- v-decorator="[
- 'videoCount',
- {
- rules: [
- {
- required: true,
- message: '视频数量必填',
- },
- ],
- },
- ]"
- :min="1"
- :max="20"
- style="width: 90%"
- :precision="0"
- />
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <div style="display: flex; justify-content: flex-end; margin-bottom: 100px">
- <div>
- <a-button
- type="primary"
- style="margin-right: 15px"
- @click="handleSubmit"
- :loading="sumbitLoading"
- :disabled="disabled"
- >
- 创建
- </a-button>
- <a-button @click="clearAllData"> 取消 </a-button>
- </div>
- </div>
- </a-col>
- </a-row>
- </div>
- </a-spin>
- </div>
- </template>
- <script>
- // import UserMenu from '../tools/UserMenu'
- // import SMenu from '../menu/'
- import { mapGetters } from 'vuex'
- import Logo from '@/components/tools/Logo.vue'
- import pick from 'lodash.pick'
- import { mixin } from '@/utils/mixin.js'
- // import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
- import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
- import moment from 'moment'
- import selectCheckAll from '@/components/formComponents/toutiaoTime'
- import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
- import uploadFile from '@/components/uploadFileMd5Push.vue'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
- import selectRegion from '@/views/modules/kuaishouapp/account/stepForm/stepModule/selectRegion'
- import scheduleTime from '@/components/formComponents/toutiaoTime'
- // import EditableCell from './editablCell'
- // import lookPreviewVue from './lookPreview.vue'
- function tqFun(qcArr1) {
- var tempArr = []
- function bbFun(qcArr) {
- for (var i = 0; i < qcArr.length; i++) {
- if (qcArr[i] instanceof Array) {
- bbFun(qcArr[i])
- } else {
- tempArr.push(qcArr[i])
- }
- }
- return tempArr
- }
- return bbFun(qcArr1)
- }
- let optionsAppActive = []
- let businessOptions = []
- let interestVideoOptions = []
- let retargetColumns = [
- {
- title: '人群包',
- dataIndex: 'name',
- sorter: true,
- width: '40%',
- scopedSlots: { customRender: 'name' },
- },
- {
- title: '属性',
- dataIndex: 'populationType',
- scopedSlots: {
- customRender: 'populationType',
- },
- width: 200,
- },
- {
- title: '所属账号',
- dataIndex: 'accountId',
- sorter: true,
- width: '40%',
- scopedSlots: { customRender: 'accountId' },
- },
- ]
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- export default {
- name: 'GlobalHeader',
- components: {
- // UserMenu,
- // SMenu,
- Logo,
- selectTreeAccount,
- selectCheckAll,
- checkBoxGroup,
- uploadFile,
- selectTable,
- selectRegion,
- scheduleTime,
- // EditableCell
- },
- mixins: [mixin],
- props: {
- mode: {
- type: String,
- // sidemenu, topmenu
- default: 'sidemenu',
- },
- theme: {
- type: String,
- required: false,
- default: 'dark',
- },
- collapsed: {
- type: Boolean,
- required: false,
- default: false,
- },
- device: {
- type: String,
- required: false,
- default: 'desktop',
- },
- },
- data() {
- return {
- spinning: false,
- accountIds: undefined,
- fansStarOptions: [],
- fansStarType: 0,
- deviceType: 0,
- priceType: 0,
- customCrowd: '0',
- tabKey: '0',
- retargetDataAll: [],
- refreshPopulationLoading: false,
- finallyRightTree: [],
- retargetColumns,
- activeKey: '',
- loading: false,
- formProject: this.$form.createForm(this), //选择账户
- formInformation: this.$form.createForm(this), //设置基本信息表单
- formTargetApp: this.$form.createForm(this), //目标应用
- formDirectional: this.$form.createForm(this), //定向包编辑表单
- platformOsDisabled: false,
- formOptimize: this.$form.createForm(this), //优化目标
- formOriginality: this.$form.createForm(this), //排期预算表单
- formCreative: this.$form.createForm(this), //创意表单
- sumbitLoading: false,
- //基本信息参数
- budgetType: '1',
- dayBudgetType: '1',
- projectId: null,
- projectName: null,
- //目标应用参数
- targetAppVisible: false,
- appList: [], //分平台数据,从总数据中筛选,避免多次请求接口
- appListAll: [], //所有的数据,做分平台的元数据
- siteList: [],
- tongbuLoading: false, //同步app按钮loading
- uriCheck: false, //调起链接,是否开启
- multipleBidDataDrawer: [],
- creativeTagData: [],
- multipleBidData: [],
- appDetail: null,
- personLoading: false,
- district: 'NONE',
- regionList: [],
- ageType: 'noLimit',
- marks: {
- 18: '18岁',
- 23: '23岁',
- 28: '28岁',
- 33: '33岁',
- 38: '38岁',
- 43: '43岁',
- 48: '48岁',
- 55: '55岁',
- },
- // convertId: null,
- // convertList: [],
- // convertType: '1',
- //目标人群参数
- people: '0',
- tabKey: '1',
- incluedSelectedRowKeys: [],
- incluedSelectedKeys: [],
- excludeSelectedKeys: [],
- excludeSelectedRowKeys: [],
- targetPersonVisible: false,
- personList: [],
- checkPerson: [],
- checkPersonAll: [],
- checkPersonElse: [],
- checkPersonOne: '',
- showCheckPerson: [],
- sumContent: 0,
- searchTemplate: '',
- scheduleTimeData: str,
- //优化目标参数
- groupTypeData: null,
- //创意信息参数
- optimizeVisible: false,
- adposition: 1,
- programUnitCnt: 60,
- customUnitCnt: 400,
- customUnitCntMax: 400,
- imageCntMax: 15,
- actionBarTextList: [],
- descriptionList: [{ value: '' }],
- fieldNames: {
- label: 'category_name',
- value: 'category_id',
- children: 'child',
- },
- createOptions: [],
- showCreativeData: null,
- //公共参数
- activeStep: 0,
- screenWidth: document.body.clientWidth,
- headerBarFixed: false,
- //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
- topMenuStyle: {
- headerIndexLeft: {},
- topNavHeader: {},
- headerIndexRight: {},
- topSmenuStyle: {},
- },
- stepsArr: [
- { title: '选择项目' },
- { title: '设置基本信息' },
- { title: '目标应用' },
- { title: '目标人群' },
- { title: '优化目标' },
- { title: '创意信息' },
- { title: '素材信息' },
- ],
- formItemLayout: {
- labelCol: { span: 4 },
- wrapperCol: { span: 16 },
- },
- formDrawerItemLayout: {
- labelCol: { span: 5 },
- wrapperCol: { span: 19 },
- },
- tailFormItemLayout: {
- wrapperCol: {
- sm: {
- span: 20,
- offset: 4,
- },
- },
- },
- tailFormItemLayoutElse: {
- wrapperCol: {
- sm: {
- span: 20,
- offset: 1,
- },
- },
- },
- tailFormDrawerItemLayout: {
- wrapperCol: {
- sm: {
- span: 19,
- offset: 5,
- },
- },
- },
- disabled: false,
- retargetDataAll: [],
- changeAppIdVisible: true,
- ocpxActionList: [],
- deepTypesList: [],
- }
- },
- computed: {
- rowSelectionMax() {
- return {
- onChange: (selectedRowKeys, selectedRows) => {
- this.excludeSelectedRowKeys = selectedRowKeys
- this.excludeSelectedKeys = selectedRows
- },
- // selectedRowKeys: this.finallyRightTree[
- // this.finallyRightTree.findIndex(item => item.key === this.activeKey)
- // ].excludeSelectedRowKeys,
- getCheckboxProps: (record) => ({
- props: {
- disabled: this.incluedSelectedRowKeys.indexOf(record.key) > -1,
- name: record.name,
- defaultChecked: this.excludeSelectedRowKeys.indexOf(record.key) > -1,
- },
- }),
- }
- },
- rowSelectionMin() {
- return {
- onChange: (selectedRowKeys, selectedRows) => {
- this.incluedSelectedRowKeys = selectedRowKeys
- this.incluedSelectedKeys = selectedRows
- },
- // selectedRowKeys: this.finallyRightTree[
- // this.finallyRightTree.findIndex(item => item.key === this.activeKey)
- // ].incluedSelectedRowKeys,
- getCheckboxProps: (record) => ({
- props: {
- disabled: this.excludeSelectedRowKeys.indexOf(record.key) > -1,
- name: record.name,
- defaultChecked: this.incluedSelectedRowKeys.indexOf(record.key) > -1,
- },
- }),
- }
- },
- },
- watch: {
- accountIds: function (n, o) {
- if (this.$route.query.id) {
- return
- } else {
- if (!!n) {
- this.descriptionList = [{ value: '' }]
- this.getAction('/kuaishou/batch/getAppList', { accountId: n }).then((res) => {
- if (res.success) {
- this.appList = res.result.map((item, index) => {
- return {
- ...item,
- key: index,
- }
- })
- }
- })
- // this.getIsActivate(null)
- this.getOcpxActionList(null)
- }
- }
- },
- activeKey: function (n, o) {
- if (n != '') {
- this.retargetAccountId(n)
- }
- },
- },
- mounted() {
- this.$nextTick(function () {
- this.getActionBarText()
- if (this.$route.query.id) {
- this.getQueryById(this.$route.query.id)
- }
- window.addEventListener('scroll', this.onScroll)
- const that = this
- window.onresize = () => {
- return (() => {
- window.screenWidth = document.body.clientWidth
- that.screenWidth = window.screenWidth
- })()
- }
- })
- },
- filters: {
- unitType(val) {
- let data = {
- 4: '自定义',
- 7: '程序化',
- 0: '不限',
- }
- return data[val]
- },
- channelType(val) {
- let data = {
- 0: '内部',
- 1: '素造',
- 2: '不限',
- }
- return data[val]
- },
- business(theme) {
- let businessInterest = businessOptions.map((item) => {
- return {
- tagId: item.tagId,
- tagName: item.tagName,
- }
- })
- return businessInterest.filter((item) => {
- return item.tagId == theme
- })[0].tagName
- },
- optionsApp(theme) {
- let optionsAppdata = optionsAppActive.map((item) => {
- return {
- tagId: item.tagId,
- tagName: item.tagName,
- }
- })
- return optionsAppdata.filter((item) => {
- return item.tagId == theme
- })[0].tagName
- },
- interestVideo(theme) {
- let interestVideoOptionsData = interestVideoOptions.map((item) => {
- return {
- tagId: item.tagId,
- tagName: item.tagName,
- }
- })
- return interestVideoOptionsData.filter((item) => {
- return item.tagId == theme
- })[0].tagName
- },
- },
- methods: {
- ...mapGetters(['userInfo']),
- moment,
- getOcpxActionList(value) {
- var params = {}
- params.accountId = this.accountIds
- params.campaignType = this.getFormData('formProject', 'campaignType')
- params.sceneCategory = 2
- params.sceneIds = this.getFormData('formProject', 'sceneIds')
- params.appId = value ? value : null
- this.postDataAction('/kuaishou/batch/conversionInfos', params).then((res) => {
- if (res.success) {
- this.ocpxActionList = res.result.data.ocpx_types
- }
- })
- },
- getDeepTypesList(data) {
- if (!!data) {
- var params = {}
- params.accountId = this.accountIds
- params.sceneCategory = 0
- params.campaignType = this.getFormData('formProject', 'campaignType')
- params.sceneIds = this.getFormData('formProject', 'sceneIds')
- params.appId = this.getFormData('formTargetApp', 'appId')
- params.ocpxActionType = data
- this.postDataAction('/kuaishou/batch/deepTypes', params).then((res) => {
- if (res.success) {
- this.deepTypesList = res.result.data.deep_types
- }
- })
- } else {
- this.deepTypesList = []
- }
- },
- changeData(data) {
- if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
- data.splice(
- data.findIndex((item) => item == 1),
- 1
- )
- } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
- data.splice(0, data.length - 1)
- } else if (data.length == 0) {
- data.push(1)
- }
- this.getOcpxActionList(null)
- },
- changeCampaign(e) {
- console.log(e.target.value)
- this.getActionBarText()
- },
- tongbuClick() {
- this.tongbuLoading = true
- // this.$refs.application.showApplication()
- this.getAction('/kuaishou/batch/syncAppList', {
- accountId: this.accountIds,
- }).then((res) => {
- if (res.success) {
- this.tongbuLoading = false
- this.$message.success(res.message)
- this.getAction('/kuaishou/batch/getAppList', { accountId: this.accountIds }).then((res) => {
- if (res.success) {
- this.appList = res.result.map((item, index) => {
- return {
- ...item,
- key: index,
- }
- })
- }
- })
- } else {
- this.tongbuLoading = false
- this.$message.error(res.message)
- }
- })
- },
- refreshPopulation() {
- if (this.accountIds) {
- this.refreshPopulationLoading = true
- // this.$refs.application.showApplication()
- this.getAction('/kuaishou/batch/pullPopulationList', {
- accountId: this.accountIds,
- }).then((res) => {
- if (res.success) {
- this.refreshPopulationLoading = false
- this.$message.success(res.message)
- this.retargetTabChange()
- } else {
- this.refreshPopulationLoading = false
- this.$message.error(res.message)
- }
- })
- } else {
- this.$message.error('请先选择账户')
- }
- },
- handleConfirmValueUrl(rule, value, callback) {
- if (
- this.getFormData('formProject', 'campaignType') &&
- this.getFormData('formProject', 'campaignType') == 2
- ) {
- if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
- callback()
- } else {
- callback('链接不能为空且开头为http://或https://或kwai://')
- }
- } else {
- if (!!!value) {
- callback()
- } else if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value)) {
- callback()
- } else {
- callback('链接开头为http://或https://或kwai://')
- }
- }
- },
- handleConfirmValueOkUndefind(rule, value, callback) {
- if (!!!value) {
- callback()
- } else if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value)) {
- callback()
- } else {
- callback('链接开头为http://或https://或kwai://')
- }
- },
- /*
- @params str{ String} 要截取的字符串
- @params start { Number } 首次截取的开始索引,每次截取后递增
- @params end { Number } 首次截取的结束索引,每次截取后递增
- @params unit { Number } 每一组个数
- */
- // 将字符串转换成unit个字符为一组的数组
- createArr(str, start, end, unit) {
- if (str) {
- let arr = [] //保存每次截取后的字符串
- let counts = Math.ceil(str.length / unit) //循环截取的次数,向上取整
- for (let i = 0; i < counts; i++) {
- let newStr = str.substring(start, end)
- arr.push(newStr.split(''))
- start = end
- end += unit
- }
- return arr
- }
- },
- changeTimeData() {
- this.scheduleTimeData = str
- },
- getIsActivate(val) {
- let params = {}
- params.accountId = this.accountIds
- params.campaignType = this.getFormData('formProject', 'campaignType')
- params.appId = val
- this.getAction('/kuaishou/batch/getIsActivate', params).then((res) => {
- if (res.success) {
- this.groupTypeData = res.result
- }
- })
- },
- handleConfirmValue(rule, value, callback) {
- if (Math.abs(value[0] - value[1]) < 5) {
- callback('自定义年龄段需要间隔大于5岁')
- }
- callback()
- },
- cityChange() {
- this.regionList = []
- },
- changeAppId(e) {
- this.getAction('/kuaishou/batch/getPageList', {
- accountId: this.accountIds,
- appId: e,
- viewComp: 7,
- }).then((res) => {
- if (res.success) {
- this.siteList = res.result
- this.formTargetApp.setFieldsValue({ siteId: undefined })
- }
- })
- // this.getIsActivate(e)
- this.getOcpxActionList(e)
- if (e) {
- var data = this.appList.filter((item) => item.appId == e)[0]
- this.formDirectional.setFieldsValue({ platformOs: data.platform == 1 || data.platform == 2 ? 1 : 2 })
- this.changeAppIdVisible = data.platform == 1 || data.platform == 2 ? true : false
- } else {
- this.changeAppIdVisible = true
- this.formDirectional.setFieldsValue({ platformOs: 3 })
- }
- },
- personSelect() {
- if (this.people === '1' || this.people === '2') {
- this.retargetAccountId()
- this.tabKey = this.people
- } else if (this.people === '3') {
- this.retargetAccountId()
- this.tabKey = '1'
- }
- this.$nextTick(() => {
- this.incluedSelectedRowKeys = []
- this.incluedSelectedKeys = []
- this.excludeSelectedKeys = []
- this.excludeSelectedRowKeys = []
- })
- },
- customCrowdChange(e) {
- if (e.target.value == '1' || e.target.value == '2') {
- this.retargetTabChange()
- this.tabKey = e.target.value
- } else if (e.target.value == '3') {
- this.retargetTabChange()
- this.tabKey = '1'
- }
- },
- // 自定义人群的--同时定向排除tab切换事件
- // 自定义人群的--同时定向排除tab切换事件
- retargetAccountId() {
- this.retargetDataAll = []
- this.loading = true
- this.getAction('/kuaishou/batch/getPopulationList', {
- accountId: this.accountIds,
- }).then((res) => {
- this.loading = false
- if (res.success) {
- res.result.forEach((ele) => {
- ele.key = ele.orientationId
- ele.id = ele.orientationId
- ele.name = ele.orientationName + '(' + ele.orientationId + ')'
- // ele.accountName=this.accountInfo.title
- ele.accountId = this.accountIds
- })
- // this.retargetData=res.data;
- this.retargetDataAll = [...this.retargetDataAll, ...res.result]
- }
- })
- },
- getQueryById(id) {
- this.spinning = true
- this.getAction('/hosting/kuaishouHostingTemplate/queryById', { id }).then((res) => {
- if (res.success) {
- this.$nextTick(() => {
- let data = res.result
- this.accountIds = data.accountId
- data.sceneIds = data.sceneIds ? JSON.parse(data.sceneIds) : [1]
- this.formProject.setFieldsValue(pick(data, 'campaignType', 'sceneIds'))
- this.$nextTick(() => {
- this.getActionBarText()
- })
- data.ruleEnable = data.ruleEnable == 1 ? true : false
- this.formInformation.setFieldsValue(pick(data, 'name', 'ruleEnable'))
- this.retargetAccountId()
- if (data.ruleEnable) {
- setTimeout(() => {
- this.formInformation.setFieldsValue(
- pick(data, 'creativeNameRule', 'unitNameRule', 'campaignNameRule')
- )
- }, 100)
- }
- this.getAction('/kuaishou/batch/getAppList', { accountId: this.accountIds }).then((res) => {
- if (res.success) {
- this.appList = res.result.map((item, index) => {
- return {
- ...item,
- key: index,
- }
- })
- }
- })
- this.changeAppIdVisible = data.platformOs == 1 ? true : false
- if (data.campaignType == 2) {
- data.useAppMarket = data.useAppMarket == 1 ? true : false
- this.formTargetApp.setFieldsValue(pick(data, 'appId', 'useAppMarket', 'siteId'))
- if (data.useAppMarket) {
- data.appStore = JSON.parse(data.appStore)
- setTimeout(() => {
- this.formTargetApp.setFieldsValue(pick(data, 'appStore'))
- }, 500)
- }
- this.getOcpxActionList(data.appId)
- setTimeout(() => {
- this.getDeepTypesList(data.ocpxActionType)
- }, 100)
- this.getAction('/kuaishou/batch/getPageList', {
- accountId: this.accountIds,
- appId: data.appId,
- viewComp: 7,
- }).then((res) => {
- if (res.success) {
- this.siteList = res.result
- }
- })
- } else {
- setTimeout(() => {
- this.formTargetApp.setFieldsValue(pick(data, 'webUri'))
- })
- this.getOcpxActionList(null)
- setTimeout(() => {
- this.getDeepTypesList(data.ocpxActionType)
- }, 100)
- }
- this.people =
- JSON.parse(data.population) &&
- JSON.parse(data.excludePopulation) &&
- JSON.parse(data.population).length > 0 &&
- JSON.parse(data.excludePopulation).length > 0
- ? '3'
- : JSON.parse(data.population) && JSON.parse(data.population).length > 0
- ? '1'
- : JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
- ? '2'
- : !JSON.parse(data.population) && !JSON.parse(data.excludePopulation)
- ? '0'
- : '0'
- this.tabKey = this.people == '2' ? '2' : '1'
- this.incluedSelectedRowKeys =
- JSON.parse(data.population) && JSON.parse(data.population).length > 0
- ? JSON.parse(data.population)
- : []
- this.incluedSelectedKeys =
- JSON.parse(data.population) && JSON.parse(data.population).length > 0
- ? JSON.parse(data.population)
- : []
- this.excludeSelectedKeys =
- JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
- ? JSON.parse(data.excludePopulation)
- : []
- this.excludeSelectedRowKeys =
- JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
- ? JSON.parse(data.excludePopulation)
- : []
- this.district =
- JSON.parse(data.regionIds) && JSON.parse(data.regionIds).length > 0 ? 'CITY' : 'NONE'
- if (this.district == 'CITY') {
- this.regionList = JSON.parse(data.regionIds)
- this.$nextTick(() => {
- this.formDirectional.setFieldsValue(pick(data, 'userType'))
- })
- } else {
- this.regionList = []
- }
- this.ageType =
- JSON.parse(data.agesRange) && JSON.parse(data.agesRange).length > 0
- ? 'ageLimit'
- : data.minAge != -1 && data.maxAge != -1
- ? 'ageCustom'
- : 'noLimit'
- if (this.ageType == 'ageCustom') {
- data.age = [data.minAge, data.maxAge]
- this.$nextTick(() => {
- this.formDirectional.setFieldsValue(pick(data, 'age'))
- })
- } else if (this.ageType == 'ageLimit') {
- data.agesRange = JSON.parse(data.agesRange)
- this.$nextTick(() => {
- this.formDirectional.setFieldsValue(pick(data, 'agesRange'))
- })
- }
- data.expansion = []
- if (data.noAgeBreak == 1) {
- data.expansion.push('noAgeBreak')
- }
- if (data.noGenderBreak == 1) {
- data.expansion.push('noGenderBreak')
- }
- if (data.noAreaBreak == 1) {
- data.expansion.push('noAreaBreak')
- }
- this.formDirectional.setFieldsValue(
- pick(data, 'gender', 'platformOs', 'isOpen', 'expansion', 'filterConvertedLevel')
- )
- setTimeout(() => {
- this.formDirectional.setFieldsValue(pick(data, 'platformOv'))
- }, 500)
- data.today = 4
- if (JSON.parse(data.schedule) && JSON.parse(data.schedule).length > 0) {
- data.scheduleTime = 2
- } else {
- data.scheduleTime = 1
- }
- data.dayBudget = data.dayBudget / 1000
- this.formOriginality.setFieldsValue(pick(data, 'today', 'scheduleTime', 'dayBudget'))
- this.$nextTick(() => {
- if (data.scheduleTime == 2) {
- var arrList = JSON.parse(data.schedule)
- for (let i = 0; i < arrList.length; i++) {
- for (let j = 0; j < arrList[i].length; j++) {
- if (arrList[i][j] == null) {
- arrList[i][j] = '0'
- } else {
- arrList[i][j] = '1'
- }
- }
- }
- var timeArr = tqFun(arrList)
- this.scheduleTimeData = str
- setTimeout(() => {
- this.scheduleTimeData = timeArr.join('')
- }, 200)
- }
- })
- data.deepConversionType =
- data.deepConversionType && data.deepConversionType != ''
- ? data.deepConversionType
- : undefined
- data.deepConversionBid =
- data.deepConversionBid && data.deepConversionBid != ''
- ? data.deepConversionBid / 1000
- : undefined
- data.cpaBid = data.cpaBid / 1000
- this.formOptimize.setFieldsValue(pick(data, 'bidType', 'ocpxActionType', 'cpaBid'))
- if (data.ocpxActionType == 180 || data.ocpxActionType == 53) {
- this.$nextTick(() => {
- setTimeout(() => {
- this.formOptimize.setFieldsValue(
- pick(data, 'deepConversionType', 'deepConversionBid')
- )
- }, 1000)
- })
- }
- this.descriptionList = res.result.captions
- ? res.result.captions.charAt(0) === '['
- ? eval(res.result.captions).map((item) => {
- return { value: item }
- })
- : [{ value: res.result.captions }]
- : []
- this.formCreative.setFieldsValue(
- pick(
- data,
- 'smartCover',
- 'actionBar',
- 'assetMining',
- 'clickUrl',
- 'actionbarClickUrl',
- 'videoCount'
- )
- )
- this.spinning = false
- })
- } else {
- this.spinning = false
- let that = this
- this.$error({
- title: '请求出错,请返回列表页',
- // JSX support
- onOk: function () {
- that.$router.replace('/autoLaunch/trusteeship')
- that.$bus.$emit(
- 'remove',
- `/autoLaunch/trusteeship/creatMaterialTest?id=${that.$route.query.id}`
- )
- },
- })
- }
- })
- },
- handleSubmit() {
- if (this.accountIds) {
- let formProjectData = new Promise((resolve, reject) => {
- this.formProject.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('选择项目表单出错')
- }
- })
- })
- let formInformationData = new Promise((resolve, reject) => {
- this.formInformation.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('基本信息出错')
- }
- })
- })
- let formOptimizeData = new Promise((resolve, reject) => {
- this.formOptimize.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('优化目标出错')
- }
- })
- })
- let formTargetAppData = new Promise((resolve, reject) => {
- this.formTargetApp.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('目标应用出错')
- }
- })
- })
- let formDirectionalData = new Promise((resolve, reject) => {
- this.formDirectional.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('定向包出错')
- }
- })
- })
- let formOriginalityData = new Promise((resolve, reject) => {
- this.formOriginality.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('排期预算出错')
- }
- })
- })
- let formCreativeData = new Promise((resolve, reject) => {
- this.formCreative.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('创意信息出错')
- }
- })
- })
- Promise.all([
- formProjectData,
- formInformationData,
- formOptimizeData,
- formTargetAppData,
- formDirectionalData,
- formOriginalityData,
- formCreativeData,
- ])
- .then((res) => {
- let isNotComplete2 = this.descriptionList.findIndex((item) => {
- return item.value === ''
- })
- if (isNotComplete2 > -1) {
- this.$message.error('广告语未填')
- return
- }
- this.sumbitLoading = true
- let params = { ...res[0], ...res[1], ...res[2], ...res[3], ...res[4], ...res[5], ...res[6] }
- params.accountId = this.accountIds
- params.userId = this.userInfo().id
- params.useAppMarket = params.useAppMarket ? 1 : 2
- params.appStore = params.appStore ? JSON.stringify(params.appStore) : '[]'
- params.sceneIds = params.sceneIds ? JSON.stringify(params.sceneIds) : '[]'
- params.regionIds =
- this.district == 'NONE'
- ? JSON.stringify([])
- : JSON.stringify(
- this.regionList.map((item) => {
- return item.value
- })
- )
- params.ruleEnable = params.ruleEnable ? 1 : 2
- if (params.campaignType == 5) {
- params.webUriType = 1
- } else {
- params.webUriType = 0
- }
- if (params.ruleEnable == 1) {
- if (!params.campaignNameRule && !params.unitNameRule && !params.creativeNameRule) {
- this.$message.error('自定义命名规则开启,至少任一规则不可为空')
- }
- }
- params.captions = JSON.stringify(
- this.descriptionList.map((item) => {
- return item.value
- })
- )
- // {{ createArr(scheduleTimeData, 0, 24, 24) }}
- // {{scheduleTime}}
- if (params.scheduleTime == 1) {
- params.schedule = JSON.stringify([])
- } else {
- var data = this.createArr(this.scheduleTimeData, 0, 24, 24)
- for (let i = 0; i < data.length; i++) {
- for (let j = 0; j < data[i].length; j++) {
- if (data[i][j] == '1') {
- data[i][j] = j
- } else {
- delete data[i][j]
- }
- }
- }
- // console.log(data)
- params.schedule = JSON.stringify(data)
- }
- if (this.ageType == 'noLimit') {
- params.minAge = -1
- params.maxAge = -1
- params.agesRange = JSON.stringify([])
- } else if (this.ageType == 'ageLimit') {
- params.minAge = -1
- params.maxAge = -1
- params.agesRange = JSON.stringify(params.agesRange)
- } else if (this.ageType == 'ageCustom') {
- params.minAge = params.age[0]
- params.maxAge = params.age[1]
- params.agesRange = JSON.stringify([])
- }
- params.isOpen = 1
- if (params.expansion.includes('noAgeBreak')) {
- params.noAgeBreak = 1
- } else {
- params.noAgeBreak = 2
- }
- if (params.expansion.includes('noGenderBreak')) {
- params.noGenderBreak = 1
- } else {
- params.noGenderBreak = 2
- }
- if (params.expansion.includes('noAreaBreak')) {
- params.noAreaBreak = 1
- } else {
- params.noAreaBreak = 2
- }
- params.population =
- this.people === '0'
- ? JSON.stringify([])
- : this.people === '1' || this.people === '3'
- ? JSON.stringify(this.incluedSelectedRowKeys)
- : JSON.stringify([])
- params.excludePopulation =
- this.people === '0'
- ? JSON.stringify([])
- : this.people === '2' || this.people === '3'
- ? JSON.stringify(this.excludeSelectedRowKeys)
- : JSON.stringify([])
- params.cpaBid = params.cpaBid * 1000
- params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid * 1000 : null
- params.singleAppid = 1
- params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
- params.dayBudget = params.dayBudget * 1000
- params.userId = this.userInfo().id
- // params.
- if (this.$route.query.id) {
- params.id = this.$route.query.id
- this.postDataAction('/hosting/kuaishouHostingTemplate/edit', params).then((res) => {
- if (res.success) {
- this.sumbitLoading = false
- this.$bus.$emit(
- 'remove',
- `/autoLaunch/trusteeship/creatMaterialTest?id=${params.id}`
- )
- this.$router.replace('/autoLaunch/trusteeship')
- } else {
- this.sumbitLoading = false
- }
- })
- } else {
- this.postDataAction('/hosting/kuaishouHostingTemplate/add', params).then((res) => {
- if (res.success) {
- this.sumbitLoading = false
- this.$bus.$emit('remove', '/autoLaunch/trusteeship/creatMaterialTest')
- this.$router.replace('/autoLaunch/trusteeship')
- } else {
- this.sumbitLoading = false
- }
- })
- }
- })
- .catch((err) => {
- this.$message.error('请填写完整')
- })
- } else {
- this.$message.error('请选择账户')
- }
- },
- clearAllData() {
- // this.$router.replace('/autoLaunch/material-test')
- // this.$bus.$emit('remove', '/autoLaunch/creatMaterialTest')
- // this.$bus.$emit('remove', `/autoLaunch/creatMaterialTest?id=${this.$route.query.id}`)
- this.$bus.$emit('remove', `/autoLaunch/trusteeship/creatMaterialTest?id=${this.$route.query.id}`)
- this.$bus.$emit('remove', '/autoLaunch/trusteeship/creatMaterialTest')
- this.$router.replace('/autoLaunch/trusteeship')
- },
- descriptionchange(val, index) {
- let data = val
- this.$nextTick(() => {
- this.descriptionList[index].value = data.replace(/\s/g, '')
- })
- },
- addDescription() {
- this.descriptionList.push({ value: '' })
- },
- removeDescription(index) {
- this.descriptionList.splice(index, 1)
- },
- // 获取行动号召按钮
- getActionBarText() {
- this.actionBarTextList = []
- let that = this
- setTimeout(() => {
- this.getAction('/kuaishou/batch/getActionBarTextByType', {
- type: this.getFormData('formProject', 'campaignType'),
- }).then((res) => {
- if (res.success) {
- that.actionBarTextList = res.result
- }
- })
- })
- },
- closeCreative() {
- this.optimizeVisible = false
- this.customUnitCntMax = 400
- this.imageCntMax = 15
- this.formOriginality.resetFields()
- },
- submitCreative() {
- this.formOriginality.validateFields((err, values) => {
- if (!err) {
- let isNotComplete = this.descriptionList.findIndex((item) => {
- return item.value === ''
- })
- if (isNotComplete > -1) {
- this.$message.error('请正确填写必填项目,广告语未填')
- return
- }
- this.showCreativeData = JSON.parse(JSON.stringify(values))
- this.optimizeVisible = false
- // this.closeCreative()
- }
- })
- },
- changeData(data) {
- if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
- data.splice(
- data.findIndex((item) => item == 1),
- 1
- )
- } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
- data.splice(0, data.length - 1)
- } else if (data.length == 0) {
- data.push(1)
- } else if (data.length > 1 && data.findIndex((item) => item == 5) == 0) {
- data.splice(
- data.findIndex((item) => item == 5),
- 1
- )
- } else if (data.length > 1 && data.findIndex((item) => item == 5) == data.length - 1) {
- data.splice(0, data.length - 1)
- }
- },
- unitTypeCheck(e) {
- if (e.target.value === 7) {
- this.imageCntMax = 8
- } else {
- this.imageCntMax = 15
- }
- },
- setImageCnt(e) {
- this.customUnitCntMax = e ? Math.floor(2000 / e) : 2000
- },
- creativeTagValid(rule, value, callback) {
- if (value.length == 0 || value == undefined) {
- callback()
- } else if (value.length > 10) {
- callback('创意标签最多填写10个,请删减')
- } else {
- callback()
- }
- },
- cpaBidValid(rule, value, callback) {
- let z = /-/g
- let a = /\//g
- let d = /\./g
- if (value === '' || value === undefined || value === 0 || value === '0') {
- callback('出价必须填写')
- } else if (value.startsWith('.') || value.endsWith('.')) {
- callback('请填写正确出价')
- } else if (value.startsWith('-') || value.endsWith('-')) {
- callback('请填写正确出价')
- } else if (value.match(a) && value.match(z)) {
- callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
- } else if (value.match(/[^0-9+-\/]/g)) {
- callback('请填写正确出价')
- } else {
- callback()
- }
- },
- deepBidValid(rule, value, callback) {
- let z = /-/g
- let a = /\//g
- let d = /\./g
- if (value === '' || value === undefined || value == 0 || value == '0') {
- callback()
- } else if (value.startsWith('.') || value.endsWith('.')) {
- callback('请填写正确出价')
- } else if (value.startsWith('-') || value.endsWith('-')) {
- callback('请填写正确出价')
- } else if (value.match(a) && value.match(z)) {
- callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
- } else if (value.match(/[^0-9+-\/]/g)) {
- callback('请填写正确出价')
- } else {
- callback()
- }
- },
- disabledDate(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(1, 'days')
- },
- disabledDateOne(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(0, 'days')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- addApplication() {},
- //设置通配符
- getChangeAll(type, form, field) {
- this.$nextTick(() => {
- var node = document.getElementById(field)
- var v = '[' + type + ']'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- if (field == 'campaignNameRule') {
- this[form].setFieldsValue({ campaignNameRule: sel.text })
- } else if (field == 'unitNameRule') {
- this[form].setFieldsValue({ unitNameRule: sel.text })
- } else {
- this[form].setFieldsValue({ creativeNameRule: sel.text })
- }
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- if (field == 'campaignNameRule') {
- this[form].setFieldsValue({ campaignNameRule: node.value })
- } else if (field == 'unitNameRule') {
- this[form].setFieldsValue({ unitNameRule: node.value })
- } else {
- this[form].setFieldsValue({ creativeNameRule: node.value })
- }
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- // this.campaignName = node.value
- } else {
- //OTHER
- node.value += v
- if (field == 'campaignNameRule') {
- this[form].setFieldsValue({ campaignNameRule: node.value })
- } else if (field == 'unitNameRule') {
- this[form].setFieldsValue({ unitNameRule: node.value })
- } else {
- this[form].setFieldsValue({ creativeNameRule: node.value })
- }
- node.focus()
- // this.campaignName = node.value
- }
- })
- },
- //获取表单的某一个属性值
- getFormData(form, className) {
- return this[form].getFieldValue(className)
- },
- onScroll() {
- // var box = document.getElementById('box')
- // var t = document.documentElement.scrollTop || document.body.scrollTop
- // box.style.top = t + 'px'
- var jump = document.querySelectorAll('.step-jump')
- var distance =
- document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
- jump.forEach((item, index) => {
- if (distance >= item.offsetTop) {
- this.activeStep = index
- }
- })
- },
- // 锚点点击
- jump(index) {
- this.activeStep = index
- // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
- // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
- let jump = document.querySelectorAll('.step-jump')
- // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
- let total = jump[index].offsetTop
- // scrollTop滚动条距离页面的距离
- let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
- // 平滑滚动,时长500ms,每10ms一跳,共50跳
- let step = total / 50
- if (total > distance) {
- smoothDown()
- } else {
- let newTotal = distance - total
- step = newTotal / 50
- smoothUp()
- }
- function smoothDown() {
- if (distance < total) {
- distance += step
- document.body.scrollTop = distance
- document.documentElement.scrollTop = distance
- window.pageYOffset = distance
- setTimeout(smoothDown, 5)
- } else {
- document.body.scrollTop = total
- document.documentElement.scrollTop = total
- window.pageYOffset = total
- }
- }
- function smoothUp() {
- if (distance > total) {
- distance -= step
- document.body.scrollTop = distance
- document.documentElement.scrollTop = distance
- window.pageYOffset = distance
- setTimeout(smoothUp, 10)
- } else {
- document.body.scrollTop = total
- document.documentElement.scrollTop = total
- window.pageYOffset = total
- }
- }
- },
- getData(className, formName) {
- return this[formName].getFieldValue(className)
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
- $height: 59px;
- .layout .header .user-wrapper .action .anticon,
- .layout .top-nav-header-index .user-wrapper .action .anticon {
- color: #999;
- }
- .layout .header .user-wrapper .action .anticon,
- .layout .top-nav-header-index .user-wrapper .action .anticon {
- color: #999;
- }
- .layout {
- .top-nav-header-index {
- .header-index-wide {
- margin-left: 10px;
- .ant-menu.ant-menu-horizontal {
- height: $height;
- line-height: $height;
- }
- }
- .trigger {
- line-height: 48px;
- font-size: 17px;
- &:hover {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- }
- .header {
- z-index: 2;
- color: #999;
- height: $height;
- background-color: #1890ff;
- transition: background 300ms;
- /* dark 样式 */
- &.dark {
- color: #000000;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
- background-color: white !important;
- }
- }
- .header,
- .top-nav-header-index {
- &.dark .trigger:hover {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- }
- .ant-layout-header {
- height: $height;
- line-height: $height;
- }
- </style>
- <style scoped lang="scss">
- .region {
- width: 100%;
- }
- .account-item {
- ::v-deep .ant-form-item-control {
- line-height: 1;
- }
- }
- ::v-deep.display-none-selset {
- display: none !important;
- }
- // .step-jump {
- // ::v-deep table tr td {
- // border-bottom: 0px;
- // }
- // }
- .bottom-to-one {
- ::v-deep .ant-form-item {
- margin-bottom: 0;
- }
- }
- .target-person-add-button {
- margin-left: 15px;
- }
- .card-person {
- width: 300px;
- ::v-deep.ant-card-head {
- padding: 0px 10px;
- }
- .card-main-case {
- height: 250px;
- overflow: auto;
- padding: 0 5px;
- }
- }
- .card-person-drawer {
- width: 100%;
- height: 90%;
- overflow: hidden;
- padding: 10px 0px;
- display: flex;
- flex-wrap: wrap;
- margin-right: -10px;
- justify-content: space-between;
- .card-item {
- width: calc(33% - 10px);
- margin-bottom: 10px;
- float: left;
- }
- .card-item-else {
- width: calc(20% - 10px);
- margin-bottom: 10px;
- float: left;
- }
- }
- .showShare {
- position: relative;
- }
- .share {
- display: none;
- }
- .showShare:hover .share {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .chouzhen {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(20% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- float: left;
- }
- li.chouzhen.first:before {
- font-size: 12px;
- content: '首帧';
- position: absolute;
- top: 7px;
- left: 5px;
- width: 36px;
- height: 20px;
- color: rgb(255, 255, 255);
- line-height: 20px;
- text-align: center;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 2px;
- z-index: 1000;
- }
- .display-none-selset {
- display: none !important;
- }
- .logo {
- padding-left: 24px;
- img {
- height: 32px !important;
- }
- .name {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ced2d9;
- // line-height: 22px;
- margin-left: 20px;
- padding-left: 21px;
- position: relative;
- }
- .name::before {
- content: '';
- width: 1px;
- height: 18px;
- background: rgba(255, 255, 255, 0.31);
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -9px;
- }
- }
- .chartBox {
- .chartBody {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- }
- .search-box {
- margin-bottom: 20px;
- }
- }
- ::v-deep .ant-descriptions-item-content {
- font-weight: bold;
- }
- .info-detail {
- ::v-deep table tr td {
- border: 0;
- }
- ::v-deep .ant-descriptions-item-label {
- color: darkgray;
- // min-width: 30px;
- white-space: nowrap;
- }
- }
- .flex-main {
- display: flex;
- margin-bottom: 10px;
- p {
- color: black;
- font-weight: 600;
- overflow: hidden; //超出的文本隐藏
- text-overflow: ellipsis; //溢出用省略号显示
- white-space: nowrap; //溢出不换行
- }
- }
- </style>
- <style lang="scss">
- .hide-checkbox .ant-table-thead .ant-table-selection {
- display: none;
- }
- .new-batch .ant-card-head-title {
- font-weight: 700;
- }
- // .new-batch textarea {
- // resize: none;
- // border: none;
- // outline: 0;
- // box-shadow: none;
- // }
- .create-info .ant-form-item {
- margin-bottom: 0 !important;
- }
- .fengmian .ant-checkbox-wrapper:first-child {
- margin-left: 8px;
- }
- @media screen and (max-width: 1200px) {
- // 这里写对应要修改的样式如:
- .new-batch .el-step__title {
- font-size: 12px;
- }
- }
- .line-height-one .ant-form-item-control {
- line-height: inherit;
- }
- .creat-all-info .ant-form-item-control {
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .config-new-batch {
- .display-none-selset {
- display: none !important;
- }
- .ant-btn-danger {
- background-color: #ff4d4f !important;
- }
- }
- </style>
|