configLaunchInfo.vue 158 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627
  1. <template>
  2. <div class="configLaunchInfo">
  3. <a-spin :spinning="spinning">
  4. <a-form :form="form">
  5. <!-- 投放范围 -->
  6. <div class="moduler">
  7. <div class="moduler-title">选择账户</div>
  8. <div>
  9. <div class="row-item">
  10. <div class="hint-item"></div>
  11. <div class="label-item">
  12. <div class="text-item">账户</div>
  13. <div class="required-item"></div>
  14. </div>
  15. <div class="input-item">
  16. <Treeselect :appId.sync="accountId" :multiple="false" request="2,4" ref="treeSelect" style="margin-bottom:8px;width:600px " />
  17. <!-- <Treeselect :appId.sync="accountId" :multiple="false" request="2" reqUrl='/ctop/projectMember/getProjectAccountByUserId' ref="treeSelect" style="margin-bottom:8px;width:580px " /> -->
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. <!-- 推广目的 -->
  23. <div class="moduler">
  24. <div class="moduler-title">请选择营销目标</div>
  25. <div class="row-item">
  26. <div class="hint-item">
  27. </div>
  28. <div class="label-item">
  29. <div class="text-item">营销目标</div>
  30. <div class="required-item"></div>
  31. </div>
  32. <div class="input-item">
  33. <a-form-item >
  34. <a-radio-group v-decorator="['campaignType',{initialValue:2 }]" @change="campaignTypeChange">
  35. <a-radio-button :value="2" :disabled="editRecordId!==''">提升应用安装</a-radio-button>
  36. <a-radio-button :value="3" :disabled='true'>获取电商下单</a-radio-button>
  37. <a-radio-button :value="4" :disabled='true'>推广品牌活动</a-radio-button>
  38. <a-radio-button :value="5" :disabled="editRecordId!==''">收集销售线索</a-radio-button>
  39. <a-radio-button :value="7" :disabled="editRecordId!==''">提高应用活跃</a-radio-button>
  40. </a-radio-group>
  41. </a-form-item>
  42. </div>
  43. </div>
  44. </div>
  45. <!-- 基础信息 -->
  46. <div class="moduler">
  47. <div class="moduler-title">请设置基本信息</div>
  48. <!-- <div class="row-item">
  49. <div class="hint-item"> </div>
  50. <div class="label-item">
  51. <div class="text-item">模板名称</div>
  52. <div class="required-item"></div>
  53. </div>
  54. <div class="input-item">
  55. <a-form-item>
  56. <a-input v-model="strategyName" allow-clear />
  57. </a-form-item>
  58. </div>
  59. </div> -->
  60. <div class="row-item">
  61. <div class="hint-item"> </div>
  62. <div class="label-item">
  63. <div class="text-item">计划命名规范</div>
  64. <div class="required-item"></div>
  65. </div>
  66. <div class="input-item">
  67. <a-form-item>
  68. <a-input v-decorator="['campaignName',{ rules: [{ required: true, message: '请填写计划的命名规则' }] }]" allow-clear id="campaignName"/>
  69. </a-form-item>
  70. </div>
  71. </div>
  72. <div class="row-item">
  73. <div class="hint-item"> </div>
  74. <div class="label-item">
  75. <div class="text-item"></div>
  76. </div>
  77. <div class="input-item">
  78. <a-form-item>
  79. <a-tag color="#2db7f5" @click="getChangeAll('日期', 'form', 'campaignName')"
  80. >+日期</a-tag
  81. >
  82. <!-- <a-tag color="#2db7f5" @click="getChangeAll('应用包名', 'form', 'campaignName')"
  83. >+应用包名</a-tag
  84. >
  85. <a-tag color="#2db7f5" @click="getChangeAll('自定义', 'form', 'campaignName')"
  86. >+自定义</a-tag
  87. > -->
  88. </a-form-item>
  89. </div>
  90. </div>
  91. <div class="row-item">
  92. <div class="hint-item"> </div>
  93. <div class="label-item">
  94. <div class="text-item">广告计划单日预算</div>
  95. <div class="required-item"></div>
  96. </div>
  97. <div class="input-item">
  98. <a-form-item>
  99. <a-radio-group v-model="budgetType">
  100. <a-radio-button value="1">不限</a-radio-button>
  101. <a-radio-button value="2">统一预算</a-radio-button>
  102. </a-radio-group>
  103. </a-form-item>
  104. </div>
  105. </div>
  106. <div class="row-item" v-if="budgetType == '2'">
  107. <div class="hint-item"> </div>
  108. <div class="label-item">
  109. <div class="text-item"></div>
  110. <div class="required-item"></div>
  111. </div>
  112. <div class="input-item">
  113. <a-form-item>
  114. <a-input-number
  115. v-decorator="[
  116. 'campaignDayBudget',
  117. {
  118. rules: [{ required: true, message: '不小于500, 不超过100000000,仅支持输入自然数' }],
  119. },
  120. ]"
  121. :min="500"
  122. :precision="0"
  123. :max="100000000"
  124. style="width: 100%"
  125. placeholder="不小于500, 不超过100000000,仅支持输入自然数"
  126. />
  127. </a-form-item>
  128. </div>
  129. </div>
  130. <div class="row-item">
  131. <div class="hint-item"> </div>
  132. <div class="label-item">
  133. <div class="text-item">组命名规范</div>
  134. <div class="required-item"></div>
  135. </div>
  136. <div class="input-item">
  137. <a-form-item>
  138. <a-input v-decorator="['groupName',{ rules: [{ required: true, message: '请填写组的命名规则' }] }]" allow-clear id="groupName"/>
  139. </a-form-item>
  140. </div>
  141. </div>
  142. <div class="row-item">
  143. <div class="hint-item"> </div>
  144. <div class="label-item">
  145. <div class="text-item"></div>
  146. </div>
  147. <div class="input-item">
  148. <a-form-item>
  149. <a-tag color="#2db7f5" @click="getChangeAll('日期', 'form', 'groupName')">+日期</a-tag>
  150. <a-tag color="#2db7f5" @click="getChangeAll('素材名称', 'form', 'groupName')">+素材名称</a-tag>
  151. <!-- <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'form', 'groupName')"
  152. >+定向包</a-tag
  153. > -->
  154. <!-- <a-tag color="#2db7f5" @click="getChangeAll('日期', 'form', 'groupName')">+日期</a-tag>
  155. <a-tag color="#2db7f5" @click="getChangeAll('标号', 'form', 'groupName')">+标号</a-tag> -->
  156. <a-tag color="#2db7f5" @click="getChangeAll('应用包名', 'form', 'groupName')"
  157. >+应用包名</a-tag
  158. >
  159. <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'form', 'groupName')"
  160. >+创意制作方式</a-tag
  161. >
  162. <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'form', 'groupName')"
  163. >+广告位置</a-tag
  164. >
  165. <!-- <a-tag color="#2db7f5" @click="getChangeAll('自定义', 'form', 'groupName')"
  166. >+自定义</a-tag
  167. > -->
  168. </a-form-item>
  169. </div>
  170. </div>
  171. <div class="row-item">
  172. <div class="hint-item"> </div>
  173. <div class="label-item">
  174. <div class="text-item">广告组单日预算</div>
  175. <div class="required-item"></div>
  176. </div>
  177. <div class="input-item">
  178. <a-form-item>
  179. <a-radio-group v-model="dayBudgetType">
  180. <a-radio-button value="1">不限</a-radio-button>
  181. <a-radio-button value="2">统一预算</a-radio-button>
  182. </a-radio-group>
  183. </a-form-item>
  184. </div>
  185. </div>
  186. <div class="row-item" v-if="dayBudgetType=='2'">
  187. <div class="hint-item"> </div>
  188. <div class="label-item">
  189. <div class="text-item"></div>
  190. <div class="required-item"></div>
  191. </div>
  192. <div class="input-item">
  193. <a-form-item>
  194. <a-input-number
  195. v-decorator="[
  196. 'unitDayBudget',
  197. {
  198. rules: [{ required: true, message: '不小于500, 不超过100000000,仅支持输入自然数' }],
  199. },
  200. ]"
  201. style="width: 100%"
  202. placeholder="不小于500, 不超过100000000,仅支持输入自然数"
  203. :min="500"
  204. :precision="0"
  205. />
  206. </a-form-item>
  207. </div>
  208. </div>
  209. </div>
  210. <div class="moduler" v-if="getData('campaignType') === 2">
  211. <div class="moduler-title">目标应用</div>
  212. <div class="ad-range">
  213. <div class="row-item" >
  214. <div class="hint-item"></div>
  215. <div class="label-item">
  216. <div class="text-item">是否单一应用</div>
  217. <div class="required-item"></div>
  218. </div>
  219. <div class="input-item">
  220. <a-form-item >
  221. <a-radio-group v-decorator="['singleAppid', {initialValue:1 }]" @change="singleAppidChange">
  222. <a-radio-button :value="1">是</a-radio-button>
  223. <a-radio-button :value="0">否</a-radio-button>
  224. </a-radio-group>
  225. </a-form-item>
  226. </div>
  227. </div>
  228. <div class="row-item" >
  229. <div class="hint-item"></div>
  230. <div class="label-item">
  231. <div class="text-item">系统类型</div>
  232. <div class="required-item"></div>
  233. </div>
  234. <div class="input-item">
  235. <a-form-item >
  236. <a-radio-group v-model="sysType" @change="sysTypeChange">
  237. <a-radio-button :value="1">安卓</a-radio-button>
  238. <a-radio-button :value="2">IOS</a-radio-button>
  239. </a-radio-group>
  240. </a-form-item>
  241. </div>
  242. </div>
  243. <div class="row-item" v-if="getFormData('campaignType')==2||getFormData('campaignType')==7">
  244. <div class="hint-item"></div>
  245. <div class="label-item">
  246. <div class="text-item">选择应用</div>
  247. <div class="required-item"></div>
  248. </div>
  249. <div class="input-item">
  250. <a-form-item>
  251. <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
  252. placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"
  253. :filterOption="filterOption" @change="appIdChange" :mode="getFormData('singleAppid')==1?'defalut':'multiple'" :maxTagCount='1'>
  254. <a-select-option v-if="getFormData('singleAppid')==0" :value='0' @click="selectAllAppId">选择以下全部</a-select-option>
  255. <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
  256. {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
  257. appModel.platform | platform
  258. }}
  259. </a-select-option>
  260. </a-select>
  261. <a-button type="primary" @click="addApplication" style="margin-left:10px" :loading="tongbuLoading">刷新应用</a-button>
  262. </a-form-item>
  263. </div>
  264. </div>
  265. <div class="row-item">
  266. <div class="hint-item"></div>
  267. <div class="label-item">
  268. <div class="text-item">调起链接</div>
  269. </div>
  270. <div class="input-item">
  271. <a-form-item>
  272. <a-switch default-checked v-model="uriCheck"/>
  273. <span style="color:red"> 需加白使用</span>
  274. <div v-if="uriCheck">
  275. <a-input placeholder="请填写链接" v-decorator="['schemaUri', { rules: [{ message:'链接不能为空'}] }]" />
  276. </div>
  277. </a-form-item>
  278. </div>
  279. </div>
  280. <div class="row-item" v-if="getFormData('campaignType') == 3">
  281. <div class="hint-item"></div>
  282. <div class="label-item">
  283. <div class="text-item">转化类型</div>
  284. <div class="required-item"></div>
  285. </div>
  286. <div class="input-item">
  287. <a-form-item >
  288. <a-radio-group buttonStyle="solid"
  289. v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]">
  290. <a-radio-button value="1">淘宝商品</a-radio-button>
  291. <a-radio-button value="2">淘客商品</a-radio-button>
  292. </a-radio-group>
  293. </a-form-item>
  294. </div>
  295. </div>
  296. <div class="row-item" v-if="getFormData('campaignType') == 3||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
  297. <div class="hint-item"></div>
  298. <div class="label-item">
  299. <div class="text-item">链接</div>
  300. <!-- <div class="required-item"></div> -->
  301. </div>
  302. <div class="input-item">
  303. <a-form-item v-if="getFormData('campaignType') != 2" :class="{ 'else-label': getFormData('campaignType') == 3 }">
  304. <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
  305. </a-form-item>
  306. </div>
  307. </div>
  308. <div class="row-item" v-if="getFormData('campaignType') == 2||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
  309. <div class="hint-item"></div>
  310. <div class="label-item">
  311. <div class="text-item">转化追踪</div>
  312. <!-- <div class="required-item"></div> -->
  313. </div>
  314. <div class="input-item">
  315. <a-form-item >
  316. <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
  317. <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
  318. </a-form-item>
  319. <div style="margin-top:10px">
  320. <a-form-item v-if="sysType==1" >
  321. <a-checkbox v-decorator="[
  322. 'useAppMarket',
  323. {
  324. valuePropName: 'checked',
  325. initialValue: false,
  326. },
  327. ]">
  328. 优先从系统应用商店下载
  329. </a-checkbox>
  330. </a-form-item>
  331. <a-form-item v-if="sysType==1&&getData('useAppMarket')">
  332. 请勾选投放应用已上架的应用商店(默认全选)
  333. <a-checkbox-group v-model="appStore">
  334. <a-checkbox value="huawei">华为</a-checkbox>
  335. <a-checkbox value="oppo">OPPO</a-checkbox>
  336. <a-checkbox value="vivo">VIVO</a-checkbox>
  337. <a-checkbox value="xiaomi">小米</a-checkbox>
  338. <a-checkbox value="meizu">魅族</a-checkbox>
  339. <a-checkbox value="smartisan">锤子</a-checkbox>
  340. </a-checkbox-group>
  341. </a-form-item>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. <div class="moduler" v-if="getData('campaignType') === 5">
  348. <div class="moduler-title">链接</div>
  349. <div class="ad-range">
  350. <div class="row-item">
  351. <div class="hint-item"></div>
  352. <div class="label-item">
  353. <div class="text-item">链接</div>
  354. <div class="required-item"></div>
  355. </div>
  356. <div class="input-item">
  357. <a-form-item>
  358. <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
  359. </a-form-item>
  360. </div>
  361. </div>
  362. <div class="row-item" v-if="getFormData('campaignType') == 2||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
  363. <div class="hint-item"></div>
  364. <div class="label-item">
  365. <div class="text-item">转化追踪</div>
  366. <!-- <div class="required-item"></div> -->
  367. </div>
  368. <div class="input-item">
  369. <a-form-item >
  370. <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
  371. <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
  372. </a-form-item>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. <div class="moduler" v-if="getData('campaignType') === 7">
  378. <div class="moduler-title">链接</div>
  379. <div class="row-item">
  380. <div class="hint-item"></div>
  381. <div class="label-item">
  382. <div class="text-item">选择应用</div>
  383. <div class="required-item"></div>
  384. </div>
  385. <div class="input-item">
  386. <a-form-item>
  387. <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
  388. placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"
  389. :filterOption="filterOption" @change="appIdChange">
  390. <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
  391. {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
  392. appModel.platform | platform
  393. }}
  394. </a-select-option>
  395. </a-select>
  396. <a-button type="primary" @click="addApplication" style="margin-left:10px" :loading="tongbuLoading">刷新应用</a-button>
  397. </a-form-item>
  398. </div>
  399. </div>
  400. <div class="row-item">
  401. <div class="hint-item"></div>
  402. <div class="label-item">
  403. <div class="text-item">调起链接</div>
  404. <div class="required-item"></div>
  405. </div>
  406. <div class="input-item">
  407. <a-form-item>
  408. <a-input placeholder="请填写链接" v-decorator="['schemaUri', { rules: [{ required: true,message:'链接不能为空'}] }]" />
  409. </a-form-item>
  410. </div>
  411. </div>
  412. <div class="row-item">
  413. <div class="hint-item"></div>
  414. <div class="label-item">
  415. <div class="text-item">H5链接</div>
  416. <div class="required-item"></div>
  417. </div>
  418. <div class="input-item">
  419. <a-form-item>
  420. <a-input placeholder="请填写H5链接" v-decorator="['url', { rules: [{ required: true,message:'H5链接不能为空'}] }]" />
  421. </a-form-item>
  422. </div>
  423. </div>
  424. </div>
  425. <div class="moduler">
  426. <div class="moduler-title">用户定向
  427. <!-- <div style="margin-left:30px;position:relative;top:-2px">
  428. <a-radio-group v-model="useDirectional" @change="useDirectionalChange">
  429. <a-radio :value="1">
  430. 不使用定向
  431. </a-radio>
  432. <a-radio :value="0">
  433. 使用定向包
  434. </a-radio>
  435. </a-radio-group>
  436. </div> -->
  437. </div>
  438. <div class="ad-range" v-if="useDirectional==1">
  439. <div class="row-item">
  440. <div class="hint-item"></div>
  441. <div class="label-item">
  442. <div class="text-item">地域</div>
  443. <div class="required-item"></div>
  444. </div>
  445. <div class="input-item">
  446. <a-form-item>
  447. <a-radio-group v-model="district" @change="cityChange">
  448. <a-radio-button value="NONE">不限</a-radio-button>
  449. <a-radio-button value="CITY">按省市</a-radio-button>
  450. <a-radio-button value="COUNTY">按区县</a-radio-button>
  451. </a-radio-group>
  452. </a-form-item>
  453. <div class="region" style="margin-top:20px" v-show="district!='NONE'">
  454. <!-- 省市 -->
  455. <div class="provincyCity" v-if="district=='CITY'">
  456. <linkMultiSelect title='省份' :listArr='regionList' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  457. </div>
  458. <!-- 区县 -->
  459. <div class="district" v-else-if="district=='COUNTY'">
  460. <linkMultiSelect title='省份' :listArr='regionList' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCountyArr'/>
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465. <div class="row-item">
  466. <div class="hint-item"></div>
  467. <div class="label-item">
  468. <div class="text-item">性别</div>
  469. <div class="required-item"></div>
  470. </div>
  471. <div class="input-item">
  472. <a-form-item>
  473. <a-radio-group v-decorator="['gender', {initialValue:0 }]" >
  474. <a-radio-button :value="0">不限</a-radio-button>
  475. <a-radio-button :value="2">男</a-radio-button>
  476. <a-radio-button :value="1">女</a-radio-button>
  477. </a-radio-group>
  478. </a-form-item>
  479. </div>
  480. </div>
  481. <div class="row-item">
  482. <div class="hint-item"></div>
  483. <div class="label-item">
  484. <div class="text-item">年龄</div>
  485. <div class="required-item"></div>
  486. </div>
  487. <div class="input-item">
  488. <a-form-item>
  489. <radioCheck v-model="agesRange" :options="ageArr" @change='getAgeSelect' />
  490. </a-form-item>
  491. </div>
  492. </div>
  493. <div class="row-item">
  494. <div class="hint-item"></div>
  495. <div class="label-item">
  496. <div class="text-item">操作系统</div>
  497. <div class="required-item"></div>
  498. </div>
  499. <div class="input-item">
  500. <a-form-item>
  501. <a-radio-group v-decorator="['platformOs', {initialValue:1 }]" @change="platformOsChange">
  502. <a-radio-button :value="0">不限</a-radio-button>
  503. <a-radio-button :value="1">Android</a-radio-button>
  504. <a-radio-button :value="2">IOS</a-radio-button>
  505. </a-radio-group>
  506. </a-form-item>
  507. <div style="margin-top:24px" v-if="getFormData('platformOs')!=0">
  508. <div v-if="getFormData('platformOs')==1">
  509. <a-form-item>
  510. <a-radio-group v-decorator="['androidOsv',{initialValue: 3,}]">
  511. <a-radio :value="3">不限</a-radio>
  512. <a-radio :value="4">4x+</a-radio>
  513. <a-radio :value="5">5x+</a-radio>
  514. <a-radio :value="6">6x+</a-radio>
  515. <a-radio :value="7">7x+</a-radio>
  516. </a-radio-group>
  517. </a-form-item>
  518. </div>
  519. <div v-if="getFormData('platformOs')==2">
  520. <a-form-item>
  521. <a-radio-group v-decorator="['iosOsv',{initialValue: 6,}]">
  522. <a-radio :value="6">不限</a-radio>
  523. <a-radio :value="7">7x+</a-radio>
  524. <a-radio :value="8">8x+</a-radio>
  525. <a-radio :value="9">9x+</a-radio>
  526. <a-radio :value="10">10x+</a-radio>
  527. </a-radio-group>
  528. </a-form-item>
  529. </div>
  530. </div>
  531. </div>
  532. </div>
  533. <div class="row-item" v-if="getFormData('platformOs')!=2">
  534. <div class="hint-item"></div>
  535. <div class="label-item">
  536. <div class="text-item">设备品牌</div>
  537. <div class="required-item"></div>
  538. </div>
  539. <div class="input-item">
  540. <a-form-item>
  541. <a-radio-group v-model="deviceBrand">
  542. <a-radio-button :value="0">不限</a-radio-button>
  543. <a-radio-button :value="1">选择品牌</a-radio-button>
  544. </a-radio-group>
  545. </a-form-item>
  546. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-if="deviceBrand==1">
  547. <div class="inventory-tags-lists-header" style="padding-left:15px">
  548. <div class="inventory-tags-lists-name"><strong>品牌名称</strong></div>
  549. </div>
  550. <div class="inventory-tags-lists-container" >
  551. <a-form-item>
  552. <a-checkbox-group
  553. v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
  554. >
  555. <a-checkbox :value="1" style="margin-bottom: 8px">OPPO</a-checkbox>
  556. <a-checkbox :value="2" style="margin-bottom: 8px">VIVO</a-checkbox>
  557. <a-checkbox :value="3" style="margin-bottom: 8px">华为</a-checkbox>
  558. <a-checkbox :value="4" style="margin-bottom: 8px">小米</a-checkbox>
  559. <a-checkbox :value="5" style="margin-bottom: 8px">荣耀</a-checkbox>
  560. <a-checkbox :value="6" style="margin-bottom: 8px">三星</a-checkbox>
  561. <a-checkbox :value="7" style="margin-bottom: 8px">金立</a-checkbox>
  562. <a-checkbox :value="8" style="margin: 0 0 8px 0">魅族</a-checkbox>
  563. <a-checkbox :value="9" style="margin-bottom: 8px">乐视</a-checkbox>
  564. <a-checkbox :value="10" style="margin-bottom: 8px">其他</a-checkbox>
  565. <a-checkbox :value="11" v-if="getFormData('platformOs') == 0" style="margin-bottom: 8px">苹果</a-checkbox>
  566. </a-checkbox-group>
  567. </a-form-item>
  568. </div>
  569. </div>
  570. </div>
  571. </div>
  572. <div class="row-item">
  573. <div class="hint-item"></div>
  574. <div class="label-item">
  575. <div class="text-item">设备价格</div>
  576. <div class="required-item"></div>
  577. </div>
  578. <div class="input-item">
  579. <a-form-item>
  580. <a-radio-group v-model="devicePrice">
  581. <a-radio-button :value="0">不限</a-radio-button>
  582. <a-radio-button :value="1">选择价格</a-radio-button>
  583. </a-radio-group>
  584. </a-form-item>
  585. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-if="devicePrice==1">
  586. <div class="inventory-tags-lists-header" style="padding-left:15px">
  587. <div class="inventory-tags-lists-name"><strong>价格区间</strong></div>
  588. </div>
  589. <div class="inventory-tags-lists-container" >
  590. <a-form-item>
  591. <a-checkbox-group
  592. v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
  593. style="width: 120%"
  594. >
  595. <a-checkbox :value="1" style="margin-bottom: 8px">1500以下</a-checkbox>
  596. <a-checkbox :value="2" style="margin-bottom: 8px">1501~2000</a-checkbox>
  597. <a-checkbox :value="3" style="margin-bottom: 8px">2001~2500</a-checkbox>
  598. <a-checkbox :value="4" style="margin-bottom: 8px">2501~3000</a-checkbox>
  599. <a-checkbox :value="5" style="margin-left: 0; margin-bottom: 8px">3001~3500</a-checkbox>
  600. <a-checkbox :value="6" style="margin-bottom: 8px">3501~4000</a-checkbox>
  601. <a-checkbox :value="7" style="margin-bottom: 8px">4001~4500</a-checkbox>
  602. <a-checkbox :value="8" style="margin-bottom: 8px">4501~5000</a-checkbox>
  603. <a-checkbox :value="9" style="margin-left: 0; margin-bottom: 8px">5001~5500</a-checkbox>
  604. <a-checkbox :value="10" style="margin-bottom: 8px">5500以上</a-checkbox>
  605. </a-checkbox-group>
  606. </a-form-item>
  607. </div>
  608. </div>
  609. </div>
  610. </div>
  611. <div class="row-item" v-if="getFormData('platformOs')==1">
  612. <div class="hint-item"></div>
  613. <div class="label-item">
  614. <div class="text-item">APP行为</div>
  615. <div class="required-item"></div>
  616. </div>
  617. <div class="input-item">
  618. <a-form-item>
  619. <a-radio-group v-model="appType" @change="getAppType">
  620. <a-radio-button value="0">不限</a-radio-button>
  621. <a-radio-button value="1">按分类</a-radio-button>
  622. <a-radio-button value="2">按APP名称</a-radio-button>
  623. </a-radio-group>
  624. </a-form-item>
  625. <a-form-item v-if="appType==='1'">
  626. <a-select
  627. mode="multiple"
  628. style="width: 100%"
  629. optionFilterProp="children"
  630. showSearch
  631. :filterOption="filterOption"
  632. v-decorator="['appInterest', { rules: [{ required: true, message: '请选择APP行为' }] }]"
  633. >
  634. <a-select-option v-for="item in optionsAppActive" :key="item.tagId" :value="item.tagId">{{
  635. item.tagName
  636. }}</a-select-option>
  637. </a-select>
  638. </a-form-item>
  639. <a-form-item v-if="appType==='2'">
  640. <div style="position: relative" v-clickoutside="handleClose">
  641. <a-input
  642. placeholder="请输入搜索内容"
  643. @change="getAppAll"
  644. @focus="getAppAllElse"
  645. style="width: 100%; position: relative"
  646. v-model="appListValue"
  647. />
  648. <div
  649. style="
  650. width: 100%;
  651. position: absolute;
  652. z-index: 10;
  653. height: 200px;
  654. background: white;
  655. overflow: auto;
  656. box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  657. "
  658. v-if="closeDialog"
  659. >
  660. <ul>
  661. <li style="padding: 0 10px">
  662. <a-checkbox
  663. style="float: left; margin: 0 5px"
  664. @change="onCheckAllChangeApp"
  665. :indeterminate="indeterminateApp"
  666. :checked="checkAllApp"
  667. ></a-checkbox
  668. >全选
  669. </li>
  670. <a-checkbox-group @change="onChangeApp" v-model="checkArr" class="home-card" style="width: 100%">
  671. <li style="padding: 0 10px; width: 100%" v-for="item of optionsApp" :key="item.appId">
  672. <a-checkbox :value="item.appId" style="float: left; margin: 0 5px"></a-checkbox>{{ item.appName }}
  673. </li>
  674. </a-checkbox-group>
  675. </ul>
  676. </div>
  677. <div style="width: 100%" v-if="optionsAll.length > 0">
  678. <a-tag v-for="item of optionsAll" :key="item" closable :afterClose="() => log(item)">
  679. {{ showAppName(item) ? showAppName(item) : item }}
  680. </a-tag>
  681. </div>
  682. </div>
  683. </a-form-item>
  684. </div>
  685. </div>
  686. <div class="row-item">
  687. <div class="hint-item"></div>
  688. <div class="label-item">
  689. <div class="text-item">自定义人群</div>
  690. <div class="required-item"></div>
  691. </div>
  692. <div class="input-item">
  693. <a-form-item>
  694. <a-radio-group v-decorator="['customCrowd', {initialValue:'0' }]" @change="customCrowdChange">
  695. <a-radio-button value="0">不限</a-radio-button>
  696. <a-radio-button value="1">定向</a-radio-button>
  697. <a-radio-button value="2">排除</a-radio-button>
  698. <a-radio-button value="3">同时定向排除</a-radio-button>
  699. </a-radio-group>
  700. </a-form-item>
  701. <div class="dingxiang_paichu" v-if="getFormData('customCrowd')&&getFormData('customCrowd')!='0'" style="width:60%">
  702. <a-tabs v-model="tabKey" @change="retargetTabChange" >
  703. <a-tab-pane key="1" tab="定向池" v-if="getFormData('customCrowd')!='2'">
  704. <a-table
  705. :columns="retargetColumns"
  706. :row-key="record => record.key"
  707. :data-source="retargetDataAll"
  708. :loading="loading"
  709. style="width:100%;margin:15px 0"
  710. :pagination='false'
  711. @change="retargetTableChange"
  712. :scroll="{ y: 250 }"
  713. :row-selection="rowSelection"
  714. bordered
  715. >
  716. <template slot="name" slot-scope="name"> {{ name }} </template>
  717. <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
  718. </a-table>
  719. </a-tab-pane>
  720. <a-tab-pane key="2" tab="排除池" v-if="getFormData('customCrowd')!='1'">
  721. <a-table
  722. :columns="retargetColumns"
  723. :row-key="record => record.key"
  724. :data-source="retargetDataAll"
  725. :loading="loading"
  726. style="width:100%;margin:15px 0"
  727. :pagination='false'
  728. @change="retargetTableChange"
  729. :scroll="{ y: 250 }"
  730. :row-selection="rowSelection2"
  731. bordered
  732. >
  733. <template slot="name" slot-scope="name"> {{ name }} </template>
  734. <template slot="populationType" slot-scope="populationType"> {{ populationType |customCrowdHandler}} </template>
  735. </a-table>
  736. </a-tab-pane>
  737. <a-button slot="tabBarExtraContent" type='primary' @click="refreshPopulation" :loading='refreshPopulationLoading'>刷新人群包</a-button>
  738. </a-tabs>
  739. </div>
  740. </div>
  741. </div>
  742. <div class="row-item">
  743. <div class="hint-item"></div>
  744. <div class="label-item">
  745. <div class="text-item">过滤已转化用户</div>
  746. <div class="required-item"></div>
  747. </div>
  748. <div class="input-item">
  749. <a-form-item>
  750. <a-radio-group v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
  751. <a-radio-button :value="0">不限</a-radio-button>
  752. <a-radio-button :value="1">广告组</a-radio-button>
  753. <a-radio-button :value="2">广告计划</a-radio-button>
  754. <a-radio-button :value="3">本账户</a-radio-button>
  755. <a-radio-button :value="4">公司主体</a-radio-button>
  756. <a-radio-button :value="5" :disabled="getData('campaignType')===5||getData('campaignType')===7">APP</a-radio-button>
  757. </a-radio-group>
  758. </a-form-item>
  759. </div>
  760. </div>
  761. <div class="row-item" >
  762. <div class="hint-item"></div>
  763. <div class="label-item">
  764. <div class="text-item">是否开启智能扩量</div>
  765. <div class="required-item"></div>
  766. </div>
  767. <div class="input-item">
  768. <a-form-item>
  769. <a-radio-group v-decorator="['isOpen', { initialValue: 0 }]" @change="isOpenChange">
  770. <a-radio-button :value='0'>关闭</a-radio-button>
  771. <a-radio-button :value="1">开启</a-radio-button>
  772. </a-radio-group>
  773. </a-form-item>
  774. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="getFormData('isOpen')==1">
  775. <div class="inventory-tags-lists-container">
  776. <a-checkbox v-model="noAgeBreak">不可突破年龄</a-checkbox>
  777. <a-checkbox v-model="noGenderBreak">不可突破性别</a-checkbox>
  778. <a-checkbox v-model="noAreaBreak">不可突破地域</a-checkbox>
  779. </div>
  780. </div>
  781. </div>
  782. </div>
  783. </div>
  784. <div class="ad-range2" v-if="useDirectional==0">
  785. <div style="position:relative" class="ad-range2-title">
  786. <span>当前选择模板数量:{{directionalCheckedList.length}}</span>
  787. <a-checkbox :indeterminate="indeterminateDirectional" :checked="checkAllDirectional" @change="onCheckAllDirectionalChange" class="quanxuanDirectional">
  788. <span>点击全选</span>
  789. </a-checkbox>
  790. </div>
  791. <a-spin :spinning="directionalSpinning">
  792. <div class="title-list">
  793. <a-checkbox-group v-model="directionalCheckedList" @change="directionalChange">
  794. <div class="title-item" v-for="(item,index) in directionalList" :key='index'>
  795. <label>
  796. <a-checkbox :value='item.id'>
  797. {{item.templateName+'_('+item.id+')'}}
  798. </a-checkbox>
  799. </label>
  800. </div>
  801. </a-checkbox-group>
  802. </div>
  803. </a-spin>
  804. </div>
  805. </div>
  806. <!-- <div class="moduler">
  807. <div class="moduler-title">预算和排期</div>
  808. <div class="ad-range">
  809. <div class="row-item" >
  810. <div class="hint-item"></div>
  811. <div class="label-item">
  812. <div class="text-item">投放时间</div>
  813. <div class="required-item"></div>
  814. </div>
  815. <div class="input-item">
  816. <a-form-item>
  817. <a-radio-group v-decorator="['scheduleType', { initialValue:'SCHEDULE_FROM_NOW' }]" @change="scheduleTypeChange">
  818. <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
  819. <a-radio-button value="SCHEDULE_START_END">设置开始和结束时间</a-radio-button>
  820. </a-radio-group>
  821. <p style="margin-top:15px">
  822. <a-range-picker
  823. @change="dateChange"
  824. v-model="dateRange"
  825. :disabled-date="disabledDate"
  826. v-if="getFormData('scheduleType')=='SCHEDULE_START_END'"
  827. />
  828. </p>
  829. </a-form-item>
  830. </div>
  831. </div>
  832. <div class="row-item">
  833. <div class="hint-item"></div>
  834. <div class="label-item">
  835. <div class="text-item">投放时段</div>
  836. <div class="required-item"></div>
  837. </div>
  838. <div class="input-item">
  839. <a-form-item>
  840. <a-radio-group v-decorator="['scheduleTimes', { initialValue:'' }]" >
  841. <a-radio-button value=''>不限</a-radio-button>
  842. <a-radio-button value="SpecifiedTImePeriod">指定时间段</a-radio-button>
  843. </a-radio-group>
  844. <div
  845. v-show="getFormData('scheduleTimes')=='SpecifiedTImePeriod'"
  846. style="margin-top:15px"
  847. >
  848. <scheduleTime
  849. style="width:100%"
  850. :scheduleTime.sync="scheduleTimeData"
  851. ref="selectCheck"
  852. />
  853. </div>
  854. </a-form-item>
  855. </div>
  856. </div>
  857. <div class="row-item">
  858. <div class="hint-item">
  859. </div>
  860. <div class="label-item">
  861. <div class="text-item">策略预算</div>
  862. <div class="required-item"></div>
  863. </div>
  864. <div class="input-item">
  865. <a-form-item>
  866. <a-radio-group v-decorator="['strategyBudget', { initialValue:'' }]" >
  867. <a-radio-button value=''>不限</a-radio-button>
  868. <a-radio-button value="unifiedBudget">统一预算</a-radio-button>
  869. </a-radio-group>
  870. <a-input-group compact v-if="getFormData('strategyBudget')=='unifiedBudget'" style="margin-top:20px">
  871. <a-select :disabled="true" v-decorator="['budgetMode', { initialValue:'TOTAL' }]">
  872. <a-select-option value="TOTAL" >总预算</a-select-option>
  873. <a-select-option
  874. value="TOTAL"
  875. v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'"
  876. >总预算</a-select-option>
  877. </a-select>
  878. <a-input style="width: 25%" v-decorator="['budget', { initialValue:300 }]" />
  879. </a-input-group>
  880. <span class="tip" v-if="getFormData('budget')<300">请输入预算,不少于300元,不超过9999999.99元</span>
  881. </a-form-item>
  882. </div>
  883. </div>
  884. </div>
  885. </div> -->
  886. <div class="moduler">
  887. <div class="moduler-title">优化目标和付费</div>
  888. <div class="ad-range">
  889. <div class="row-item" >
  890. <div class="hint-item"></div>
  891. <div class="label-item">
  892. <div class="text-item">优化目标</div>
  893. <!-- <div class="required-item"></div> -->
  894. </div>
  895. <div class="input-item">
  896. <a-form-item>
  897. <a-radio-group v-decorator="['bidType', { initialValue:10 }]" @change="bidTypeChange">
  898. <!-- <a-radio-button :value="2">封面点击数</a-radio-button> -->
  899. <a-radio-button :value="10">转化数</a-radio-button>
  900. </a-radio-group>
  901. </a-form-item>
  902. </div>
  903. </div>
  904. <div class="row-item" v-if="getFormData('bidType')==10">
  905. <div class="hint-item"></div>
  906. <div class="label-item">
  907. <div class="text-item">转化目标</div>
  908. <!-- <div class="required-item"></div> -->
  909. </div>
  910. <div class="input-item">
  911. <a-form-item>
  912. <a-select size="default" v-decorator="['ocpxActionType']" style="width: 200px" @change="handleChange">
  913. <a-select-option :value="2">行为数</a-select-option>
  914. <!-- v-if="getFormData('campaignType') == 2 && groupTypeData.isActivate == 1 -->
  915. <a-select-option :value="180" >激活</a-select-option>
  916. <a-select-option :value="53" v-if="
  917. groupTypeData.isFormSubmit == '1'
  918. ">表单提交</a-select-option>
  919. <a-select-option :value="394" v-if="
  920. groupTypeData.isOrderSubmit == '1'
  921. ">订单提交</a-select-option>
  922. <a-select-option :value="348" v-if="
  923. groupTypeData.isValidClue == '1'
  924. ">使用有效线索</a-select-option>
  925. <a-select-option :value="383" v-if="
  926. groupTypeData.isCreditGrant == '1'
  927. ">授信出价</a-select-option>
  928. <a-select-option :value="384" v-if="
  929. groupTypeData.isWanJian == '1'
  930. ">完件出价</a-select-option>
  931. <a-select-option :value="190" v-if="
  932. groupTypeData.isPurchase == '1'
  933. ">付费出价</a-select-option>
  934. <a-select-option :value="191" v-if="
  935. groupTypeData.isFirstdayRoi == '1'
  936. ">首日ROI</a-select-option>
  937. <a-select-option :value="396" v-if="
  938. groupTypeData.isRegister == '1'
  939. ">注册优化目标</a-select-option>
  940. <a-select-option :value="324" v-if="
  941. groupTypeData.isAppInvoked == '1'
  942. ">唤起应用</a-select-option>
  943. <a-select-option :value="715" v-if="
  944. groupTypeData.isAddWechat == '1'
  945. ">微信复制优化目标</a-select-option>
  946. <a-select-option :value="716" v-if="
  947. groupTypeData.isMultiConversion == '1'
  948. ">多转化事件</a-select-option>
  949. <a-select-option :value="717" v-if="
  950. groupTypeData.isAdWatchTimes == '1'
  951. ">广告观看次数</a-select-option>
  952. </a-select>
  953. </a-form-item>
  954. </div>
  955. </div>
  956. <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) && groupTypeData.deepConversionTypes && groupTypeData.deepConversionTypes.length > 0 ">
  957. <div class="hint-item"></div>
  958. <div class="label-item">
  959. <div class="text-item">深度转化目标</div>
  960. <!-- <div class="required-item"></div> -->
  961. </div>
  962. <div class="input-item">
  963. <a-form-item>
  964. <a-select v-decorator="['deepConversionType']" allowClear style="width: 200px">
  965. <a-select-option v-for="(items, index) of groupTypeData.deepConversionTypes" :key="index" :value='items.deepConversionType'>
  966. {{ items.desc }}</a-select-option>
  967. </a-select>
  968. </a-form-item>
  969. </div>
  970. </div>
  971. <div class="row-item" >
  972. <div class="hint-item"></div>
  973. <div class="label-item">
  974. <div class="text-item">计费方式</div>
  975. <!-- <div class="required-item"></div> -->
  976. </div>
  977. <div class="input-item">
  978. <a-form-item>
  979. <a-radio-group v-model="chargeMethods">
  980. <a-radio-button v-if="getFormData('bidType')==2" value="CPC">点击计费(CPC)</a-radio-button>
  981. <a-radio-button v-if="getFormData('bidType')==10" value="OCPM">按展示付费(oCPM)</a-radio-button>
  982. </a-radio-group>
  983. </a-form-item>
  984. </div>
  985. </div>
  986. <div class="row-item" v-if="getFormData('bidType')==2">
  987. <div class="hint-item">
  988. </div>
  989. <div class="label-item">
  990. <div class="text-item">点击出价</div>
  991. <div class="required-item"></div>
  992. </div>
  993. <div class="input-item">
  994. <a-form-item>
  995. <a-input-number
  996. style="width:200px"
  997. :max="10000"
  998. :step="0.1"
  999. v-decorator="['bid', {rules:validationRules.bid} ]"
  1000. />
  1001. <span style="margin-left:5px">元</span>
  1002. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  1003. </a-form-item>
  1004. <span
  1005. class="tip"
  1006. v-if="getFormData('bid')<0.1"
  1007. >请输入点击出价,不少于0.1元,不超过10000元</span>
  1008. </div>
  1009. </div>
  1010. <div class="row-item" v-if="getFormData('bidType')==10&&getFormData('ocpxActionType')!= 191">
  1011. <div class="hint-item">
  1012. </div>
  1013. <div class="label-item">
  1014. <div class="text-item">转化目标出价</div>
  1015. <div class="required-item"></div>
  1016. </div>
  1017. <div class="input-item">
  1018. <a-form-item>
  1019. <a-input-number
  1020. style="width:200px"
  1021. :max="10000"
  1022. :step="0.1"
  1023. v-decorator="['cpaBid', {rules:validationRules.bid} ]"
  1024. />
  1025. <span style="margin-left:5px">元</span>
  1026. </a-form-item>
  1027. <span
  1028. class="tip"
  1029. v-if="getFormData('cpaBid')<0.1"
  1030. >请输入点击出价,不少于0.1元,不超过10000元</span>
  1031. </div>
  1032. </div>
  1033. <div class="row-item" v-if="getFormData('bidType')==10&&getFormData('ocpxActionType') == 191">
  1034. <div class="hint-item">
  1035. </div>
  1036. <div class="label-item">
  1037. <div class="text-item">ROI系数</div>
  1038. <div class="required-item"></div>
  1039. </div>
  1040. <div class="input-item">
  1041. <a-form-item>
  1042. <a-input-number
  1043. style="width:200px"
  1044. :max="100"
  1045. :min="0"
  1046. :step="0.01"
  1047. v-decorator="['roiRatio', { rules: [{ required: true, message: 'ROI系数必填' }] }]"
  1048. />
  1049. <span style="margin-left:5px">元</span>
  1050. </a-form-item>
  1051. <span
  1052. class="tip"
  1053. v-if="getFormData('cpaBid')<0.1"
  1054. >请输入点击出价,不少于0.1元,不超过10000元</span>
  1055. </div>
  1056. </div>
  1057. <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) && groupTypeData.deepConversionTypes && groupTypeData.deepConversionTypes.length > 0 ">
  1058. <div class="hint-item">
  1059. </div>
  1060. <div class="label-item">
  1061. <div class="text-item">深度转化目标出价</div>
  1062. <!-- <div class="required-item"></div> -->
  1063. <!-- {{getFormData('deepConversionBid')}} -->
  1064. </div>
  1065. <div class="input-item">
  1066. <a-form-item>
  1067. <a-input-number
  1068. style="width:200px"
  1069. :max="10000"
  1070. :step="0.1"
  1071. v-decorator="['deepConversionBid' ]"
  1072. />
  1073. <span style="margin-left:5px">元</span>
  1074. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  1075. </a-form-item>
  1076. <!-- <span
  1077. class="tip"
  1078. v-if="getFormData('deepConversionBid')<0.1"
  1079. >请输入点击出价,不少于0.1元,不超过10000元</span> -->
  1080. </div>
  1081. </div>
  1082. </div>
  1083. </div>
  1084. <div class="moduler">
  1085. <div class="moduler-title">创意信息</div>
  1086. <div class="ad-range">
  1087. <div class="row-item">
  1088. <div class="hint-item"></div>
  1089. <div class="label-item">
  1090. <div class="text-item">创意制作方式</div>
  1091. <div class="required-item"></div>
  1092. </div>
  1093. <div class="input-item">
  1094. <a-form-item>
  1095. <a-radio-group v-decorator="['openProgramCreate', { initialValue:2 }]" @change="adposition=1;checkedList=[];checkAll=false">
  1096. <a-radio-button :value='2'>不限</a-radio-button>
  1097. <a-radio-button :value="0">自定义</a-radio-button>
  1098. <a-radio-button :value="1">程序化</a-radio-button>
  1099. </a-radio-group>
  1100. </a-form-item>
  1101. </div>
  1102. </div>
  1103. <div class="row-item">
  1104. <div class="hint-item"></div>
  1105. <div class="label-item">
  1106. <div class="text-item">广告位置</div>
  1107. <div class="required-item"></div>
  1108. </div>
  1109. <div class="input-item">
  1110. <a-form-item>
  1111. <a-radio-group v-model="adposition" @change="adpositionChange">
  1112. <a-radio-button :value='1'>优选广告位</a-radio-button>
  1113. <a-radio-button value="inventoryTypes">按媒体指定位置</a-radio-button>
  1114. <a-radio-button :value='5' :disabled="getData('openProgramCreate')==1">联盟广告</a-radio-button>
  1115. </a-radio-group>
  1116. </a-form-item>
  1117. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="adposition=='inventoryTypes'">
  1118. <div class="inventory-tags-lists-header">
  1119. <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
  1120. </a-checkbox>
  1121. <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
  1122. </div>
  1123. <div class="inventory-tags-lists-container">
  1124. <a-checkbox-group v-model="checkedList" @change="onChange" >
  1125. <a-checkbox :value="item.value" v-for="(item,index) in plainOptions" :key="index" :disabled="item.value==3&&getData('openProgramCreate')==1">
  1126. {{item.label}}
  1127. </a-checkbox>
  1128. </a-checkbox-group>
  1129. </div>
  1130. </div>
  1131. </div>
  1132. </div>
  1133. <div class="row-item">
  1134. <div class="hint-item"></div>
  1135. <div class="label-item">
  1136. <div class="text-item">关联封面数</div>
  1137. <div class="required-item"></div>
  1138. </div>
  1139. <div class="input-item">
  1140. <a-form-item >
  1141. <a-input-number
  1142. style="width:200px"
  1143. :max="15"
  1144. :step="1"
  1145. :min='1'
  1146. v-decorator="['imageCnt',{ initialValue:5, rules: [{ required: true, message: '请填写关联封面数' }] } ]"
  1147. @change="setImageCnt"
  1148. />
  1149. </a-form-item>
  1150. </div>
  1151. </div>
  1152. <div class="row-item" v-if="getData('openProgramCreate')!=1">
  1153. <div class="hint-item"></div>
  1154. <div class="label-item">
  1155. <div class="text-item">自定义组上限</div>
  1156. <div class="required-item"></div>
  1157. </div>
  1158. <div class="input-item">
  1159. <a-form-item>
  1160. <a-input-number
  1161. v-decorator="['customUnitCnt',{ initialValue:400, rules: [{ required: true, message: '请填写自定义组上限' }] } ]"
  1162. style="width: 100%"
  1163. placeholder="仅支持输入自然数"
  1164. :max="customUnitCntMax"
  1165. :precision="0"
  1166. />
  1167. </a-form-item>
  1168. </div>
  1169. </div>
  1170. <div class="row-item" v-if="getData('openProgramCreate')!=0">
  1171. <div class="hint-item"></div>
  1172. <div class="label-item">
  1173. <div class="text-item">程序化组上限</div>
  1174. <div class="required-item"></div>
  1175. </div>
  1176. <div class="input-item">
  1177. <a-form-item>
  1178. <a-input-number
  1179. v-decorator="['programUnitCnt',{ initialValue:60, rules: [{ required: true, message: '请填写程序化组上限' }] } ]"
  1180. style="width: 100%"
  1181. placeholder="仅支持输入自然数"
  1182. :max="60"
  1183. :precision="0"
  1184. />
  1185. </a-form-item>
  1186. </div>
  1187. </div>
  1188. <div class="row-item">
  1189. <div class="hint-item"></div>
  1190. <div class="label-item">
  1191. <div class="text-item">素材类型</div>
  1192. <div class="required-item"></div>
  1193. </div>
  1194. <div class="input-item">
  1195. <a-form-item>
  1196. <a-radio-group v-decorator="['channelType', { initialValue:2 }]">
  1197. <a-radio-button :value='2'>不限</a-radio-button>
  1198. <a-radio-button :value="0">内部</a-radio-button>
  1199. <a-radio-button :value="1">素造</a-radio-button>
  1200. </a-radio-group>
  1201. </a-form-item>
  1202. </div>
  1203. </div>
  1204. <div class="row-item">
  1205. <div class="hint-item"></div>
  1206. <div class="label-item">
  1207. <div class="text-item">是否开启历史素材挖掘</div>
  1208. <div class="required-item"></div>
  1209. </div>
  1210. <div class="input-item">
  1211. <a-form-item>
  1212. <a-radio-group v-decorator="['assetMining', { initialValue:0 }]">
  1213. <a-radio-button :value='1'>是</a-radio-button>
  1214. <a-radio-button :value="0">否</a-radio-button>
  1215. </a-radio-group>
  1216. </a-form-item>
  1217. </div>
  1218. </div>
  1219. <div class="row-item" >
  1220. <div class="hint-item"></div>
  1221. <div class="label-item">
  1222. <div class="text-item">是否开启智能抽帧</div>
  1223. <div class="required-item"></div>
  1224. </div>
  1225. <div class="input-item">
  1226. <a-form-item>
  1227. <a-radio-group v-decorator="['smartCover', { initialValue:0 }]">
  1228. <a-radio-button :value='1'>是</a-radio-button>
  1229. <a-radio-button :value="0">否</a-radio-button>
  1230. </a-radio-group>
  1231. </a-form-item>
  1232. </div>
  1233. </div>
  1234. <!-- <div class="row-item" >
  1235. <div class="hint-item"></div>
  1236. <div class="label-item">
  1237. <div class="text-item">下载详情</div>
  1238. <div class="required-item"></div>
  1239. </div>
  1240. <div class="input-item" >
  1241. <a-form-item>
  1242. <a-select
  1243. v-decorator="['siteId']"
  1244. showSearch
  1245. allowClear
  1246. placeholder="选择应用下载详情页"
  1247. optionFilterProp="children"
  1248. :filterOption="filterOption"
  1249. style="width:400px"
  1250. >
  1251. <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
  1252. {{ appModel.name }}
  1253. </a-select-option>
  1254. </a-select>
  1255. </a-form-item>
  1256. </div>
  1257. </div> -->
  1258. <div class="row-item" >
  1259. <div class="hint-item"></div>
  1260. <div class="label-item">
  1261. <div class="text-item">监测链接选择</div>
  1262. <div class="required-item"></div>
  1263. </div>
  1264. <div class="input-item">
  1265. <a-form-item>
  1266. <a-radio-group v-decorator="['generalTrack', { initialValue: 1 }]">
  1267. <a-radio-button :value="1">通用</a-radio-button>
  1268. <a-radio-button :value="0">非通用</a-radio-button>
  1269. </a-radio-group>
  1270. </a-form-item>
  1271. </div>
  1272. </div>
  1273. <div class="row-item" v-if="getFormData('generalTrack')==1">
  1274. <div class="hint-item"></div>
  1275. <div class="label-item">
  1276. <div class="text-item">第三方点击监测链接</div>
  1277. </div>
  1278. <div class="input-item">
  1279. <a-form-item>
  1280. <a-input v-decorator="['clickTrackUrl']" @focus="clickTrackUrlFocus" @blur="clickTrackUrlBlur"/>
  1281. <span v-show="clickTrackUrlTip" style="font-size:14px;color:red;">填写点击检测连接的话,开始播放链接必须填写</span>
  1282. </a-form-item>
  1283. </div>
  1284. </div>
  1285. <div class="row-item" v-if="getFormData('generalTrack')==1">
  1286. <div class="hint-item"></div>
  1287. <div class="label-item">
  1288. <div class="text-item">第三方开始播放监测链接</div>
  1289. <!-- <div class="required-item"></div> -->
  1290. </div>
  1291. <div class="input-item">
  1292. <a-form-item>
  1293. <a-input v-decorator="['impressionUrl']" />
  1294. </a-form-item>
  1295. </div>
  1296. </div>
  1297. <div class="row-item" v-if="whiteList.actionbar_click_url_switch==1&&getFormData('generalTrack')==1">
  1298. <div class="hint-item"></div>
  1299. <div class="label-item">
  1300. <div class="text-item">第三方actionBar监测链接</div>
  1301. <!-- <div class="required-item"></div> -->
  1302. </div>
  1303. <div class="input-item">
  1304. <a-form-item>
  1305. <a-input v-decorator="['actionbarClickUrl']" />
  1306. </a-form-item>
  1307. </div>
  1308. </div>
  1309. <!-- <div class="row-item" v-if="whiteList.actionbar_click_url_switch&&getFormData('generalTrack')==1">
  1310. <div class="hint-item"></div>
  1311. <div class="label-item">
  1312. <div class="text-item">第三方ActionBar点击监控链接</div>
  1313. <div class="required-item"></div>
  1314. </div>
  1315. <div class="input-item">
  1316. <a-form-item >
  1317. <a-input
  1318. v-decorator="[
  1319. 'actionbarClickUrl',
  1320. {
  1321. rules: [{ message: '请输入第三方点击监控链接' }],
  1322. },
  1323. ]"
  1324. placeholder="请输入第三方点击监控链接"
  1325. >
  1326. </a-input>
  1327. <span style="color: red; position: relative; top: -10px">仅加白使用</span>
  1328. </a-form-item>
  1329. </div>
  1330. </div> -->
  1331. <div class="row-item" v-if="whiteList.creative_category_switch==1">
  1332. <div class="hint-item"></div>
  1333. <div class="label-item">
  1334. <div class="text-item">创意分类</div>
  1335. <div class="required-item" ></div>
  1336. </div>
  1337. <div class="input-item">
  1338. <a-form-item >
  1339. <a-cascader
  1340. :options="createOptions"
  1341. v-decorator="['creativeCategory',{ initialValue:[],rules: [{ required: whiteList.creative_category_switch==1, message: '创意分类必填' }] }]"
  1342. :fieldNames="fieldNames"
  1343. placeholder="请选择创意分类"
  1344. />
  1345. </a-form-item>
  1346. </div>
  1347. </div>
  1348. <div class="row-item" v-if="whiteList.creative_category_switch==1">
  1349. <div class="hint-item"></div>
  1350. <div class="label-item">
  1351. <div class="text-item">创意标签</div>
  1352. <div class="required-item" ></div>
  1353. </div>
  1354. <div class="input-item">
  1355. <a-form-item>
  1356. <a-select
  1357. mode="tags"
  1358. style="width: 100%"
  1359. placeholder="按回车生成标签"
  1360. v-decorator="['creativeTag',{initialValue:[],rules: [ {required: whiteList.creative_category_switch==1, validator: creativeTagValid }]}]"
  1361. dropdownClassName="display-none-selset"
  1362. :token-separators="[',', ' ', ',']"
  1363. >
  1364. </a-select>
  1365. <span v-if="getData('creativeTag')&&getData('creativeTag').length > 10" style="color:red">创意标签最多填写10个,请删减</span>
  1366. </a-form-item>
  1367. </div>
  1368. </div>
  1369. <div class="row-item">
  1370. <div class="hint-item"></div>
  1371. <div class="label-item">
  1372. <div class="text-item">行动号召</div>
  1373. <div class="required-item"></div>
  1374. </div>
  1375. <div class="input-item">
  1376. <a-form-item >
  1377. <a-select
  1378. v-decorator="['actionBarText', { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }]"
  1379. showSearch
  1380. allowClear
  1381. placeholder="选择行动号召按钮文案"
  1382. optionFilterProp="children"
  1383. :filterOption="filterOption"
  1384. >
  1385. <a-select-option v-for="appModel in actionBarTextList" :key="appModel.id" :value="appModel.actionBarText">
  1386. {{ appModel.actionBarText }}
  1387. </a-select-option>
  1388. </a-select>
  1389. </a-form-item>
  1390. </div>
  1391. </div>
  1392. <div class="row-item">
  1393. <div class="hint-item"> </div>
  1394. <div class="label-item">
  1395. <div class="text-item">广告语</div>
  1396. <div class="required-item"></div>
  1397. </div>
  1398. <div class="input-item">
  1399. <a-form-item>
  1400. <div style="position:relative">
  1401. <a-textarea
  1402. class="rending"
  1403. placeholder="请输入广告语"
  1404. @change="descriptionchange"
  1405. v-decorator="['description',{rules: [ { required: true, message: '请填写广告语' }] } ]"
  1406. :autosize="{ minRows: 2, maxRows: 6 }"
  1407. :max-length="30"
  1408. ></a-textarea>
  1409. <p
  1410. style="
  1411. font-size: 12px;
  1412. color: #b6bbc7;
  1413. letter-spacing: 0.3px;
  1414. text-align: right;
  1415. line-height: 30px;
  1416. position: absolute;
  1417. bottom: 0;
  1418. right: 6px;
  1419. width: 100%;
  1420. margin-bottom: 0;
  1421. "
  1422. >
  1423. {{ description.length }}/30
  1424. <!-- {{ getFormData('description').length }}/30 -->
  1425. </p>
  1426. </div>
  1427. </a-form-item>
  1428. </div>
  1429. </div>
  1430. <div class="row-item">
  1431. <div class="hint-item"> </div>
  1432. <div class="label-item">
  1433. <div class="text-item">素材关键字</div>
  1434. </div>
  1435. <div class="input-item">
  1436. <a-form-item>
  1437. <div style="position:relative">
  1438. <a-textarea
  1439. class="rending"
  1440. placeholder="请输入素材关键字"
  1441. v-decorator="['materialKeyword']"
  1442. :autosize="{ minRows: 2, maxRows: 6 }"
  1443. ></a-textarea>
  1444. </div>
  1445. </a-form-item>
  1446. </div>
  1447. </div>
  1448. <div class="row-item">
  1449. <div class="hint-item"> </div>
  1450. <div class="label-item">
  1451. <div class="text-item">是否高质量素材复建</div>
  1452. </div>
  1453. <div class="input-item">
  1454. <a-form-item>
  1455. <a-radio-group v-decorator="['historyTop', { initialValue: 0 }]">
  1456. <a-radio-button :value="0">是</a-radio-button>
  1457. <a-radio-button :value="1">否</a-radio-button>
  1458. </a-radio-group>
  1459. </a-form-item>
  1460. </div>
  1461. </div>
  1462. </div>
  1463. </div>
  1464. <!-- <div class="moduler">
  1465. <div class="opt">
  1466. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  1467. <a-button type="primary" @click="goNext" :loading="goNextloading">下一步</a-button>
  1468. </div>
  1469. </div> -->
  1470. <div class="moduler">
  1471. <!-- <div class="moduler-title">计划名称</div> -->
  1472. <div class="opt">
  1473. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  1474. <!-- -->
  1475. <a-button type="primary" @click="goNext" :loading="goNextloading">确定</a-button>
  1476. </div>
  1477. </div>
  1478. </a-form>
  1479. <div class="infoModal">
  1480. <a-modal v-model="visible" title="提示" @ok="handleOk" :keyboard='false' :maskClosable='false'>
  1481. <ul>
  1482. <li v-for="(item,index) in errorInfo" :key="index">
  1483. <span>账户{{LHKaccountInfo[index].title}}:</span>{{item.message || '定向设置成功'}}
  1484. </li>
  1485. </ul>
  1486. <template slot="footer">
  1487. <a-button key="back" @click="handleCancel">
  1488. 返回本页
  1489. </a-button>
  1490. <a-button key="submit" type="primary" @click="handleOk">
  1491. 下一步
  1492. </a-button>
  1493. </template>
  1494. </a-modal>
  1495. </div>
  1496. <a-modal v-model="convert" title="选择转化目标">
  1497. <template slot="footer">
  1498. <a-button key="back" @click="convert=false">取消</a-button>
  1499. <a-button key="submit" type="primary" @click="convertOk">
  1500. 确定
  1501. </a-button>
  1502. </template>
  1503. <a-form-item label="追踪方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  1504. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
  1505. <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
  1506. <a-radio-button value="1" v-show="getFormData('campaignType') == 4||getFormData('campaignType') == 5">JS布玛</a-radio-button>
  1507. <a-radio-button value="2" v-show="getFormData('campaignType') == 4||getFormData('campaignType') == 5">Xpath</a-radio-button>
  1508. <a-radio-button value="3"
  1509. v-show="getFormData('campaignType') == 2">应用-SDK
  1510. </a-radio-button>
  1511. <a-radio-button value="7" v-show="getFormData('campaignType') == 2">应用-API</a-radio-button>
  1512. </a-radio-group>
  1513. </a-form-item>
  1514. <a-form-item label="选择转化" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  1515. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
  1516. <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
  1517. <a-select-option :value="item.convert_id" v-for="item in convertList" :key="item.convert_id">
  1518. {{item.convert_name}}</a-select-option>
  1519. </a-select>
  1520. </a-form-item>
  1521. </a-modal>
  1522. <a-modal v-model="useDirectionalVisible" title="选择定向包" @ok="selectDirectionalOk" width='600px' height='500px'>
  1523. <div style="position:relative">
  1524. <span>当前选择模板数量:{{directionalCheckedList.length}}</span>
  1525. <a-checkbox :indeterminate="indeterminateDirectional" :checked="checkAllDirectional" @change="onCheckAllDirectionalChange" class="quanxuanDirectional">
  1526. <span>点击全选</span>
  1527. </a-checkbox>
  1528. </div>
  1529. <a-spin :spinning="directionalSpinning">
  1530. <div class="title-list">
  1531. <a-checkbox-group v-model="directionalCheckedList" @change="directionalChange">
  1532. <div class="title-item" v-for="(item,index) in directionalList" :key='index'>
  1533. <label>
  1534. <a-checkbox :value='item.id'>
  1535. {{item.templateName+'_('+item.id+')'}}
  1536. </a-checkbox>
  1537. </label>
  1538. </div>
  1539. </a-checkbox-group>
  1540. </div>
  1541. </a-spin>
  1542. </a-modal>
  1543. </a-spin>
  1544. </div>
  1545. </template>
  1546. <script>
  1547. import moment from 'moment'
  1548. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  1549. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  1550. import { TreeSelect } from 'ant-design-vue';
  1551. import qs from 'qs'
  1552. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  1553. // import selectCheckAll from './toutiaoTime'
  1554. // import radioCheck from './components/radioCheck';
  1555. import radioCheck from '@/components/formComponents/checkBoxGroup'
  1556. import linkMultiSelect from './components/linkMultiSelect'
  1557. import singleLayersSelecte from './components/singleLayerSelecte'
  1558. import scheduleTime from '@/components/formComponents/toutiaoTime'
  1559. import $ from "jquery"
  1560. // import { filter } from 'vue/types/umd';
  1561. var str = ""
  1562. for (let i = 0; i < 7*24; i++) {
  1563. str+='0'
  1564. }
  1565. let ageArr=[
  1566. {
  1567. value:1,
  1568. label:'不限',
  1569. },
  1570. {
  1571. value:18,
  1572. label:' 18-23岁'
  1573. },
  1574. {
  1575. value:24,
  1576. label:'24-30岁',
  1577. },
  1578. {
  1579. value:31,
  1580. label:'31-40岁',
  1581. },
  1582. {
  1583. value:41,
  1584. label:'41-49岁',
  1585. },
  1586. {
  1587. value:50,
  1588. label:'50岁+',
  1589. },
  1590. ]
  1591. let autoExtendOptions=[
  1592. {
  1593. label:'地域',
  1594. value:'REGION',
  1595. },
  1596. {
  1597. label:'性别',
  1598. value:'GENDER',
  1599. },
  1600. {
  1601. label:'年龄',
  1602. value:'AGE',
  1603. },
  1604. {
  1605. label:'行为兴趣',
  1606. value:'INTEREST_ACTION',
  1607. },
  1608. {
  1609. label:'自定义人群',
  1610. value:'CUSTOM_AUDIENCE',
  1611. },
  1612. ]
  1613. let retargetColumns=[
  1614. {
  1615. title: '人群包',
  1616. dataIndex: 'name',
  1617. sorter: true,
  1618. width: '40%',
  1619. scopedSlots: { customRender: 'name' },
  1620. },
  1621. {
  1622. title: '属性',
  1623. dataIndex: 'populationType',
  1624. scopedSlots: {
  1625. customRender: 'populationType'
  1626. },
  1627. width: 200
  1628. },
  1629. {
  1630. title: '所属账号',
  1631. dataIndex: 'accountId',
  1632. sorter: true,
  1633. width: '40%',
  1634. scopedSlots: { customRender: 'accountId' },
  1635. },
  1636. ]
  1637. const plainOptions = [
  1638. {
  1639. value: 6,
  1640. label: '上下滑大屏广告'
  1641. },
  1642. {
  1643. value: 7,
  1644. label: '信息流广告'
  1645. },
  1646. {
  1647. value: 3,
  1648. label: '视频播放页广告'
  1649. },
  1650. ];
  1651. export default {
  1652. components: {
  1653. // selectCheckAll,
  1654. // newDirectedPackage,
  1655. Treeselect,
  1656. radioCheck,
  1657. linkMultiSelect,
  1658. singleLayersSelecte,
  1659. scheduleTime
  1660. },
  1661. data() {
  1662. return {
  1663. appType: '0',
  1664. uriCheck: false,
  1665. programUnitCnt:60,
  1666. customUnitCnt:400,
  1667. customUnitCntMax:400,
  1668. budgetType:'1',
  1669. dayBudgetType:'1',
  1670. clickTrackUrlTip:false,
  1671. deviceBrand:0,
  1672. devicePrice:0,
  1673. tongbuLoading:false,
  1674. refreshPopulationLoading:false,
  1675. noAreaBreak:false,
  1676. noGenderBreak:false,
  1677. noAgeBreak:false,
  1678. regionList:[],
  1679. editRecordId:'',
  1680. spinning:false,
  1681. description:'',
  1682. whiteList:{},
  1683. actionBarTextList:[],
  1684. treeData:[],
  1685. accountId:undefined,
  1686. strategyName: '',
  1687. form: this.$form.createForm(this),
  1688. goNextloading:false,
  1689. goPlanShowloading:false,
  1690. dateRange: [moment(), moment()],
  1691. visible:false,
  1692. errorInfo:[],
  1693. fieldNames: {
  1694. label: 'category_name',
  1695. value: 'category_id',
  1696. children: 'child',
  1697. },
  1698. createOptions: [],
  1699. appStore: ["huawei", "oppo", "vivo", "xiaomi", "meizu", "smartisan"],
  1700. sysType:1,
  1701. indeterminateDirectional:false,
  1702. checkAllDirectional:false,
  1703. directionalList:[],
  1704. directionalSpinning:false,
  1705. directionalCheckedList:[],
  1706. useDirectional:1,
  1707. siteList:[],
  1708. tabKey:'1',
  1709. adposition:1,
  1710. groupTypeData:{},
  1711. convert: false,
  1712. convertId: "",
  1713. convertList: [],
  1714. convertType: '1',
  1715. strategyInfo:{},
  1716. accountInfo:{},
  1717. appList: [],
  1718. appListAll:[],
  1719. dateRange: [moment(), moment()],
  1720. scheduleTime: '',
  1721. scheduleTimeData:str,
  1722. projectInfo:[],
  1723. chargeMethods:'CPC',
  1724. unionVideoType:'REWARDED_VIDEO',
  1725. district:'NONE',
  1726. sceneInventory:'',
  1727. checkedList: [],
  1728. indeterminate: false,
  1729. checkAll: false,
  1730. plainOptions,
  1731. // 定向的参数
  1732. regionValue:'NONE',
  1733. ageArr,//受众年龄
  1734. region:[],
  1735. agesRange:[1],
  1736. regionCityListUrl:'/kuaishou/batch/getRegion',
  1737. regionCountyListUrl:'/kuaishou/batch/getRegion',
  1738. // 自定义人群
  1739. // 自定义人群参数
  1740. retargetColumns,
  1741. retargetData:[],
  1742. retargetDataAll:[],
  1743. loading:false,
  1744. customCrowd:'NONE',//自定义人群 选择的值
  1745. selectedRowKeys:[],
  1746. incluedSelectedRowKeys:[],
  1747. incluedSelectedKeys:[],
  1748. excludeSelectedKeys:[],
  1749. excludeSelectedRowKeys:[],
  1750. autoExtendEnabled:0,//智能放量是否开启
  1751. autoExtendOptions,//智能投放可选定向数组
  1752. autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
  1753. autoExtendTargetsChecked:[],
  1754. radioStyle: {
  1755. display: 'block',
  1756. height: '30px',
  1757. lineHeight: '30px',
  1758. padding: '0 15px'
  1759. },
  1760. goNextloading:false,
  1761. goPlanShowloading:false,
  1762. dateRange: [moment(), moment()],
  1763. visible:false,
  1764. errorInfo:[],
  1765. validationRules: {
  1766. url: [
  1767. {
  1768. required: true,
  1769. validator: this.validateURL,
  1770. },
  1771. ],
  1772. name:[{
  1773. required: true,
  1774. validator: this.validateName,
  1775. }],
  1776. bid:[{
  1777. required: true,
  1778. message:'出价信息必须填写',
  1779. // validator: this.validateBid,
  1780. }],
  1781. roi:[{
  1782. required: true,
  1783. message:'ROI系数必须填写',
  1784. // validator: this.validateBid,
  1785. }],
  1786. },
  1787. optionsApp: [],
  1788. optionsAppActive: [],
  1789. checkArr: [],
  1790. closeDialog: false,
  1791. indeterminateApp: false,
  1792. useDirectionalVisible:false,
  1793. appListValue: '',
  1794. checkOptions: [],
  1795. checkAllApp: false,
  1796. optionsAll: []
  1797. }
  1798. },
  1799. watch: {
  1800. checkArr(n, o) {
  1801. this.optionsAll.push(...n)
  1802. this.optionsAll = [...new Set(this.optionsAll)]
  1803. if (n.length != o.length) {
  1804. if (n.length < o.length) {
  1805. var a = new Set(n)
  1806. var b = new Set(o)
  1807. var c = new Set([...b].filter((item) => !a.has(item))) // {1}
  1808. var d = this.optionsAll.indexOf(...c)
  1809. if (d > 0) {
  1810. this.optionsAll.splice(d, 1)
  1811. }
  1812. }
  1813. }
  1814. },
  1815. accountId(newValue,oldValue){
  1816. setTimeout(()=>{
  1817. this.form.setFieldsValue({
  1818. appId:undefined,
  1819. ocpxActionType:undefined
  1820. })
  1821. },0)
  1822. if(newValue){
  1823. // this.treeData.forEach(item=>{
  1824. // if(item.children){
  1825. // item.children.forEach(ele=>{
  1826. // if(ele.value==newValue){
  1827. // this.$parent.accountInfo=ele
  1828. // }
  1829. // })
  1830. // }
  1831. // })
  1832. this.getAppList()
  1833. getAction('/kuaishou/batch/getIsActivate', {
  1834. accountId: this.accountId
  1835. }).then(res => {
  1836. if (res.success) {
  1837. this.groupTypeData = res.result
  1838. }
  1839. })
  1840. getAction('/kuaishou/batch/getCreativeCategory', {
  1841. accountId:this.accountId,
  1842. }).then((res) => {
  1843. if (res.success) {
  1844. //console.log(res)
  1845. this.createOptions = res.result
  1846. }
  1847. })
  1848. this.getWhiteList()
  1849. this.getpopulationlist()
  1850. }else{
  1851. }
  1852. },
  1853. },
  1854. computed: {
  1855. hasSelected() {
  1856. return this.selectedRowKeys.length > 0;
  1857. },
  1858. rowSelection() {
  1859. return {
  1860. // selectedRowKeys: this.incluedSelectedRowKeys,
  1861. onChange: (selectedRowKeys, selectedRows) => {
  1862. //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  1863. this.incluedSelectedRowKeys = selectedRowKeys;
  1864. this.incluedSelectedKeys=selectedRows
  1865. },
  1866. getCheckboxProps: record => ({
  1867. props: {
  1868. disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
  1869. name: record.name,
  1870. defaultChecked:this.incluedSelectedRowKeys.indexOf(record.key)>-1
  1871. },
  1872. }),
  1873. };
  1874. },
  1875. rowSelection2() {
  1876. return {
  1877. // selectedRowKeys: this.excludeSelectedRowKeys,
  1878. onChange: (selectedRowKeys, selectedRows) => {
  1879. // //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  1880. // this.selectedRowKeys = selectedRowKeys;
  1881. this.excludeSelectedRowKeys = selectedRowKeys;
  1882. this.excludeSelectedKeys=selectedRows
  1883. },
  1884. getCheckboxProps: record => ({
  1885. props: {
  1886. disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
  1887. name: record.name,
  1888. defaultChecked:this.excludeSelectedRowKeys.indexOf(record.key)>-1
  1889. },
  1890. }),
  1891. };
  1892. },
  1893. },
  1894. methods: {
  1895. convertOk() {
  1896. var dataLink = []
  1897. dataLink = this.convertList.filter((item) => {
  1898. return item.convert_id == this.convertId.key
  1899. })
  1900. if (dataLink.length > 0) {
  1901. this.form.setFieldsValue({ clickTrackUrl: dataLink[0].click_url })
  1902. this.convert = false
  1903. }
  1904. },
  1905. getDataType(type, dataList) {
  1906. getAction('/kuaishou/batch/getTargetList', { tagType: type }).then((res) => {
  1907. if (res.success) {
  1908. this[dataList] = res.result
  1909. }
  1910. })
  1911. },
  1912. clearAll() {
  1913. this.$nextTick(()=>{
  1914. this.checkArr = []
  1915. this.optionsAll = []
  1916. this.indeterminateApp = false
  1917. this.checkAllApp = false
  1918. })
  1919. },
  1920. log(appId) {
  1921. var index = this.optionsAll.findIndex((item) => item === appId)
  1922. this.optionsAll.splice(index, 1)
  1923. if (this.optionsAll.length == 0) {
  1924. this.indeterminateApp = false
  1925. this.checkAllApp = false
  1926. }
  1927. },
  1928. getAppType(e) {
  1929. this.optionsApp = []
  1930. this.form.setFieldsValue({ appInterest: [] })
  1931. this.checkArr = []
  1932. if (e.target.value == '1') {
  1933. getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then((res) => {
  1934. if (res.success) {
  1935. this.optionsApp = res.result
  1936. }
  1937. })
  1938. }
  1939. },
  1940. handleClose(e) {
  1941. this.closeDialog = false
  1942. },
  1943. showAppName(appId) {
  1944. if (this.checkOptions.length > 0) {
  1945. var data = this.checkOptions.filter((item) => {
  1946. return item.appId == appId
  1947. })
  1948. if (data[0]) {
  1949. return data[0].appName
  1950. } else {
  1951. return null
  1952. }
  1953. } else {
  1954. return null
  1955. }
  1956. },
  1957. getAppAllElse(e) {
  1958. this.checkArr = this.optionsAll
  1959. if (this.appListValue != '') {
  1960. getAction('/kuaishou/batch/getAppSearch', {
  1961. accountId: this.accountId,
  1962. appName: e.target.value,
  1963. }).then((res) => {
  1964. if (res.result) {
  1965. this.optionsApp = res.result
  1966. this.checkOptions.push(...res.result)
  1967. this.closeDialog = true
  1968. } else {
  1969. this.optionsApp = []
  1970. this.closeDialog = false
  1971. }
  1972. })
  1973. } else {
  1974. this.optionsApp = []
  1975. this.closeDialog = false
  1976. }
  1977. },
  1978. getAppAll(e) {
  1979. if (e.target.value !== '') {
  1980. getAction('/kuaishou/batch/getAppSearch', {
  1981. accountId:this.accountId,
  1982. appName: e.target.value,
  1983. }).then((res) => {
  1984. if (res.result) {
  1985. this.optionsApp = res.result
  1986. this.checkOptions.push(...res.result)
  1987. this.closeDialog = true
  1988. } else {
  1989. this.optionsApp = []
  1990. this.closeDialog = false
  1991. }
  1992. })
  1993. } else {
  1994. this.optionsApp = []
  1995. this.closeDialog = false
  1996. }
  1997. },
  1998. onCheckAllChangeApp(e) {
  1999. Object.assign(this, {
  2000. checkArr: e.target.checked
  2001. ? this.optionsApp.map((item) => {
  2002. return item.appId
  2003. })
  2004. : [],
  2005. indeterminateApp: false,
  2006. checkAllApp: e.target.checked,
  2007. })
  2008. this.$nextTick(()=>{
  2009. if (this.optionsAll.length > 20) {
  2010. this.$message.error('最多选择20个APP行为')
  2011. this.checkArr = []
  2012. this.optionsAll = []
  2013. this.indeterminateApp = false
  2014. this.checkAllApp = false
  2015. }
  2016. })
  2017. },
  2018. onChangeApp(checkedList) {
  2019. this.indeterminateApp =
  2020. !!checkedList.length &&
  2021. checkedList.length <
  2022. this.optionsApp.map((item) => {
  2023. return item.appId
  2024. }).length
  2025. this.checkAllApp =
  2026. checkedList.length ===
  2027. this.optionsApp.map((item) => {
  2028. return item.appId
  2029. }).length
  2030. },
  2031. setImageCnt(e){
  2032. this.customUnitCntMax = e?Math.floor(2000/e):2000
  2033. },
  2034. platformOsChange(e){
  2035. //console.log(e);
  2036. this.deviceBrand=0;
  2037. this.sysType=e.target.value;
  2038. this.sysTypeChange(e)
  2039. },
  2040. refreshPopulation(){
  2041. if(this.accountId){
  2042. this.refreshPopulationLoading = true
  2043. // this.$refs.application.showApplication()
  2044. getAction('/kuaishou/batch/pullPopulationList', {
  2045. accountId: this.accountId
  2046. }).then(res => {
  2047. if (res.success) {
  2048. this.refreshPopulationLoading = false
  2049. this.$message.success(res.message)
  2050. this.retargetTabChange()
  2051. } else {
  2052. this.refreshPopulationLoading = false
  2053. this.$message.error(res.message)
  2054. }
  2055. })
  2056. }else{
  2057. this.$message.error('请先选择账户')
  2058. }
  2059. },
  2060. addApplication() {
  2061. if(this.accountId){
  2062. this.tongbuLoading = true
  2063. // this.$refs.application.showApplication()
  2064. getAction('/kuaishou/batch/syncAppList', {
  2065. accountId: this.accountId
  2066. }).then(res => {
  2067. if (res.success) {
  2068. this.tongbuLoading = false
  2069. this.$message.success(res.message)
  2070. this.getAppList()
  2071. } else {
  2072. this.tongbuLoading = false
  2073. this.$message.error(res.message)
  2074. }
  2075. })
  2076. }else{
  2077. this.$message.error('请先选择账户')
  2078. }
  2079. },
  2080. getIsActivate(val){
  2081. let params={};
  2082. params.accountId=this.accountId;
  2083. params.campaignType=this.getFormData('campaignType');
  2084. params.appId=val
  2085. getAction('/kuaishou/batch/getIsActivate',params).then(res => {
  2086. if (res.success) {
  2087. this.groupTypeData = res.result
  2088. }
  2089. })
  2090. },
  2091. isOpenChange(e){
  2092. this.noAreaBreak=false;
  2093. this.noGenderBreak=false;
  2094. this.noAgeBreak=false;
  2095. },
  2096. selectAllAppId(){
  2097. //console.log(this.getFormData('appId'))
  2098. },
  2099. singleAppidChange(e){
  2100. // //console.log(e.target.value,this.getFormData('appId'));
  2101. this.form.setFieldsValue({
  2102. appId:undefined
  2103. })
  2104. },
  2105. descriptionchange(e){
  2106. if(this.getData('description')){
  2107. this.$nextTick(()=>{
  2108. this.form.setFieldsValue({
  2109. description: this.getData('description').replace(/\s/g,'')
  2110. })
  2111. })
  2112. }
  2113. this.description=e.target.value.replace(/\s/g,'')
  2114. },
  2115. //获取表单的某一个属性值
  2116. getFormData(className) {
  2117. return this.form.getFieldValue(className)
  2118. },
  2119. dateChange(date, dateString) {
  2120. // //console.log(date,dateString)
  2121. this.form.getFieldDecorator('startTime')
  2122. this.form.getFieldDecorator('endTime')
  2123. this.form.setFieldsValue({
  2124. startTime: date[0].format('YYYY-MM-DD HH:mm'),
  2125. endTime: date[1].format('YYYY-MM-DD HH:mm'),
  2126. })
  2127. },
  2128. //推广目的改变
  2129. campaignTypeChange(e){
  2130. //console.log(e.target)
  2131. let strategyNamepart=this.campaignTypeHandle(e.target.value);
  2132. this.strategyName ='[策略]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;
  2133. this.getActionBarText()
  2134. },
  2135. goBack() {
  2136. this.$router.replace('/autoLaunch/configLaunchList')
  2137. this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  2138. this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)
  2139. },
  2140. //请求项目和账户内容
  2141. accountHttp(){
  2142. this.treeData=[];
  2143. this.accountIds=[];
  2144. getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=2', {}).then(res => {
  2145. if(res.success){
  2146. // //console.log(res);
  2147. if(res.result){
  2148. res.result.forEach((element,index) => {
  2149. if(element){
  2150. this.treeData.push({});
  2151. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  2152. this.treeData[index].value='project'+element.project.projectId;
  2153. this.treeData[index].key=element.project.projectId;
  2154. this.treeData[index].mediaId=element.project.mediaId;
  2155. this.treeData[index].children=[];
  2156. if(element.account.length){
  2157. element.account.forEach((ele,i)=>{
  2158. this.treeData[index].children.push({});
  2159. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  2160. this.treeData[index].children[i].value=ele.accountId;
  2161. this.treeData[index].children[i].key=ele.accountId;
  2162. })
  2163. }
  2164. }
  2165. });
  2166. // //console.log(this.treeData)
  2167. }
  2168. }
  2169. })
  2170. },
  2171. campaignTypeHandle(val){
  2172. let str='';
  2173. switch (val) {
  2174. case '2':
  2175. str='应用安装'
  2176. break;
  2177. case '3':
  2178. str='电商下单'
  2179. break;
  2180. case '4':
  2181. str='推广品牌'
  2182. break;
  2183. case '5':
  2184. str='营销线索'
  2185. break;
  2186. case '7':
  2187. str='应用活跃'
  2188. break;
  2189. default:
  2190. str='转化错误'
  2191. break;
  2192. }
  2193. return str
  2194. },
  2195. creativeTagValid(rule, value, callback) {
  2196. //console.log(rule, value, callback)
  2197. if(value.length == 0 || value==undefined){
  2198. // //console.log(1)
  2199. callback('创意标签必须填写')
  2200. }else if (value.length > 10) {
  2201. callback('创意标签最多填写10个,请删减')
  2202. }else{
  2203. // //console.log(2)
  2204. callback()
  2205. }
  2206. },
  2207. directionalChange(checkedList) {
  2208. // //console.log(checkedList)
  2209. this.indeterminateDirectional = !!checkedList.length && checkedList.length < this.directionalList.length;
  2210. this.checkAllDirectional = checkedList.length === this.directionalList.length;
  2211. },
  2212. onCheckAllDirectionalChange(e) {
  2213. //console.log(e)
  2214. let valueOption=[];
  2215. valueOption=this.directionalList.map(item=>{
  2216. return item.id
  2217. })
  2218. Object.assign(this, {
  2219. directionalCheckedList: e.target.checked ? valueOption : [],
  2220. indeterminateDirectional: false,
  2221. checkAllDirectional: e.target.checked,
  2222. });
  2223. },
  2224. selectDirectionalOk(e){
  2225. this.useDirectionalVisible=false
  2226. },
  2227. useDirectionalChange(e){
  2228. //console.log(e);
  2229. if(e.target.value==0){
  2230. // this.useDirectionalVisible=true;
  2231. this.getUserDirectional()
  2232. }
  2233. },
  2234. // 获取定向包
  2235. getUserDirectional(){
  2236. getAction('/kuaishou/batch/getDirectionalTemplate',{
  2237. accountId:this.accountId
  2238. }).then(res=>{
  2239. //console.log(res);
  2240. this.directionalList=res.result
  2241. })
  2242. },
  2243. appIdChange(val){
  2244. //console.log(val)
  2245. this.siteList=[]
  2246. // this.getPageList(val)
  2247. if(this.getFormData('singleAppid')==0){
  2248. if(val&&val.indexOf(0)>-1){
  2249. let appidArr=this.appList.map(item=>{
  2250. return item.appId
  2251. })
  2252. // setTimeout(()=>{
  2253. // this.form.setFieldsValue({
  2254. // appId:appidArr
  2255. // })
  2256. // },0)
  2257. this.$nextTick(()=>{
  2258. this.form.setFieldsValue({
  2259. appId:appidArr
  2260. })
  2261. })
  2262. }
  2263. }
  2264. if(val!=undefined || (val&&val.length>0) ){
  2265. if(this.getFormData('campaignType')==2){
  2266. if(this.getFormData('singleAppid')==1){
  2267. this.getIsActivate(val)
  2268. }else{
  2269. this.getIsActivate(val[0])
  2270. }
  2271. }
  2272. }
  2273. },
  2274. disabledDate(current) {
  2275. return current && current < moment().subtract(1, 'day')
  2276. },
  2277. bidTypeChange(e){
  2278. //console.log(e);
  2279. this.chargeMethods=e.target.value==10?"OCPM":'CPC'
  2280. },
  2281. getData(className) {
  2282. return this.form.getFieldValue(className)
  2283. },
  2284. handleChange(val){
  2285. //console.log(val)
  2286. },
  2287. // 投放日期改变
  2288. scheduleTypeChange(val){
  2289. //console.log(val)
  2290. if(val=='SCHEDULE_FROM_NOW'){
  2291. this.dateRange=[moment(),moment().add(10,'years')]
  2292. }else{
  2293. this.dateRange=[moment(),moment().add(10,'days')]
  2294. }
  2295. },
  2296. filterOption(input, option) {
  2297. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  2298. },
  2299. adpositionChange(){
  2300. if(this.adposition!='inventoryTypes'){
  2301. this.checkedList=[];
  2302. this.indeterminate=false;
  2303. this.checkAll=false;
  2304. }
  2305. },
  2306. cityChange(){
  2307. this.region=[];
  2308. },
  2309. onChange(checkedList) {
  2310. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  2311. this.checkAll = checkedList.length === plainOptions.length;
  2312. },
  2313. onCheckAllChange(e) {
  2314. let valueOption = [];
  2315. this.plainOptions.forEach((item) => {
  2316. if(this.getData('openProgramCreate')==1){
  2317. if(item.value!=3){
  2318. valueOption.push(item.value)
  2319. }
  2320. }else{
  2321. valueOption.push(item.value)
  2322. }
  2323. })
  2324. Object.assign(this, {
  2325. checkedList: e.target.checked ? valueOption : [],
  2326. indeterminate: false,
  2327. checkAll: e.target.checked,
  2328. });
  2329. },
  2330. customCrowdChange(e){
  2331. //console.log(e);
  2332. if(e.target.value=='1' || e.target.value=='2'){
  2333. this.retargetTabChange();
  2334. this.tabKey=e.target.value
  2335. }else if(e.target.value=='3'){
  2336. this.retargetTabChange();
  2337. this.tabKey='1'
  2338. }
  2339. },
  2340. // 自定义人群的--同时定向排除tab切换事件
  2341. retargetTabChange(){
  2342. //console.log()
  2343. this.retargetDataAll=[];
  2344. this.loading=true;
  2345. getAction('/kuaishou/batch/getPopulationList',{
  2346. accountId:this.accountId
  2347. }).then((res)=>{
  2348. // //console.log(res)
  2349. this.loading=false;
  2350. if(res.success){
  2351. res.result.forEach((ele)=>{
  2352. ele.key=ele.orientationId
  2353. ele.id= ele.orientationId
  2354. ele.name=ele.orientationName+"("+ele.orientationId+")"
  2355. // ele.accountName=this.accountInfo.title
  2356. ele.accountId=this.accountId
  2357. })
  2358. // this.retargetData=res.data;
  2359. this.retargetDataAll=[...this.retargetDataAll,...res.result];
  2360. this.retargetDataAll = this.retargetDataAll.filter(item=>{
  2361. return item.populationType !== 7
  2362. })
  2363. }
  2364. })
  2365. },
  2366. onSelectChange(selectedRowKeys) {
  2367. // //console.log('selectedRowKeys changed: ', selectedRowKeys);
  2368. this.selectedRowKeys = selectedRowKeys;
  2369. },
  2370. // 自定义人群的改变
  2371. retargetTableChange(pagination, filters, sorter){
  2372. // //console.log(pagination);
  2373. },
  2374. //获取选中的城市
  2375. getSelectedCityArr(val){
  2376. //console.log(val);
  2377. this.region=[];
  2378. this.region=val;
  2379. },
  2380. // 获取选中的区县
  2381. getSelectedCountyArr(val){
  2382. // //console.log(val)
  2383. this.region=[];
  2384. this.region=val;
  2385. },
  2386. //获取选中的年龄段
  2387. getAgeSelect(data){
  2388. if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
  2389. data.splice(data.findIndex((item) => item == 1),1)
  2390. } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
  2391. data.splice(0, data.length - 1)
  2392. } else if (data.length == 0) {
  2393. data.push(1)
  2394. }
  2395. // //console.log(val)
  2396. // if(val.length==1&&val[0]==""){
  2397. // this.agesRange=[]
  2398. // }else{
  2399. // this.agesRange=val;
  2400. // }
  2401. },
  2402. //获取智能放量定向的值
  2403. getAutoExtendEnabled(val){
  2404. // //console.log(val)
  2405. this.autoExtendTargets=[];
  2406. this.autoExtendTargets.push(...val)
  2407. },
  2408. callback(val) {
  2409. //console.log(val);
  2410. },
  2411. handleOk(e) {
  2412. this.visible=false;
  2413. this.$router.push({path:'/LaunchHousekeeper/setProjectCreate'})
  2414. },
  2415. handleCancel(e) {
  2416. this.visible = false;
  2417. },
  2418. // 直达链接是否启用
  2419. useOpenUrlChange(){
  2420. this.form.setFieldsValue({
  2421. openUrl:''
  2422. })
  2423. },
  2424. //获取表单的某一个属性值
  2425. getFormData(className) {
  2426. return this.form.getFieldValue(className)
  2427. },
  2428. dateChange(date, dateString) {
  2429. // //console.log(date,dateString)
  2430. this.form.getFieldDecorator('beginTime')
  2431. this.form.getFieldDecorator('endTime')
  2432. this.form.setFieldsValue({
  2433. beginTime: date[0].format('YYYY-MM-DD HH:mm'),
  2434. endTime: date[1].format('YYYY-MM-DD HH:mm'),
  2435. })
  2436. },
  2437. // 验证网址
  2438. IsURL(res) {
  2439. // var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
  2440. var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
  2441. var re = new RegExp(strRegex)
  2442. // //console.log(re.test(res))
  2443. if (re.test(res)) {
  2444. return true
  2445. } else {
  2446. return false
  2447. }
  2448. },
  2449. validateURL(rule, value, callback) {
  2450. // //console.log(rule, value, callback);
  2451. if (this.IsURL(value)) {
  2452. callback()
  2453. } else if (value && !this.IsURL(value)) {
  2454. callback('链接地址无法访问,请正确输入')
  2455. } else {
  2456. callback('链接必须填写')
  2457. }
  2458. },
  2459. validateName(rule, value, callback){
  2460. // //console.log(rule, value, callback);
  2461. if (value) {
  2462. callback()
  2463. } else {
  2464. callback('应用包名称必须填写')
  2465. }
  2466. },
  2467. validateBid(rule, value, callback){
  2468. // //console.log(rule, value, callback);
  2469. if (value) {
  2470. callback()
  2471. } else {
  2472. callback('出价必须填写')
  2473. }
  2474. },
  2475. // 保存并新建创意
  2476. goNext() {
  2477. this.$nextTick(()=>{
  2478. this.form.validateFields((err, values) => {
  2479. //console.log(values)
  2480. if (!err) {
  2481. // console.log(values)
  2482. this.goNextloading=true;
  2483. if(this.district!='NONE'){
  2484. values.district=this.district
  2485. }
  2486. // //console.log(this.excludeSelectedKeys,this.incluedSelectedKeys)
  2487. // 设置广告位值
  2488. if(this.adposition!='inventoryTypes'){
  2489. this.checkedList=[];
  2490. values.sceneId=JSON.stringify([this.adposition])
  2491. }else{
  2492. values.sceneId=JSON.stringify(this.checkedList)
  2493. }
  2494. // 时间段值
  2495. // if(this.getFormData('scheduleTime')!=''){
  2496. // values.scheduleTime=this.scheduleTimeData
  2497. // }else{
  2498. // values.scheduleTime=''
  2499. // }
  2500. // 投放时间的值
  2501. // if(this.getFormData('scheduleType')=='SCHEDULE_FROM_NOW'){
  2502. // values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
  2503. // values.endTime= this.dateRange[1].add(10,"years").format('YYYY-MM-DD');
  2504. // }else{
  2505. // values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
  2506. // values.endTime= this.dateRange[1].format('YYYY-MM-DD');
  2507. // }
  2508. if(this.getData('campaignType') === 2 ) {
  2509. values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId):JSON.stringify([values.appId])
  2510. values.appId=undefined;
  2511. }else if(this.getData('campaignType') === 7){
  2512. values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId):JSON.stringify([values.appId])
  2513. values.appId=undefined;
  2514. values.singleAppid = 1
  2515. }else {
  2516. values.singleAppid = 1
  2517. values.appIdArray=JSON.stringify([])
  2518. }
  2519. values.appId = undefined
  2520. values.agesRange=this.agesRange[0]==1?JSON.stringify([]):JSON.stringify(this.agesRange)
  2521. values.region=JSON.stringify(this.region);
  2522. values.convertId=this.convertId==''?undefined:this.convertId.key;
  2523. values.appInterest = JSON.stringify(values.appInterest)
  2524. if (this.appType == '2') {
  2525. values.appIds = JSON.stringify(this.optionsAll)
  2526. values.appInterest = JSON.stringify([])
  2527. }else if(this.appType == '0'){
  2528. values.appIds = JSON.stringify([])
  2529. values.appInterest = JSON.stringify([])
  2530. }else {
  2531. values.appIds = JSON.stringify([])
  2532. }
  2533. // let excludePopulation=this.excludeSelectedKeys.map(item=>{
  2534. // return item.id
  2535. // })
  2536. // //console.log(this.excludeSelectedKeys)
  2537. // let population=this.incluedSelectedKeys.map(item=>{
  2538. // return item.id
  2539. // })
  2540. if(values.customCrowd==0){
  2541. values.excludePopulation='[]';
  2542. values.population='[]';
  2543. }else{
  2544. values.excludePopulation=this.excludeSelectedRowKeys.length>0?JSON.stringify(this.excludeSelectedRowKeys):'[]';
  2545. values.population=this.incluedSelectedRowKeys.length>0?JSON.stringify(this.incluedSelectedRowKeys):'[]';
  2546. }
  2547. values.useAppMarket=values.useAppMarket?'1':'0'
  2548. // if(this.useDirectional==0){
  2549. // values.templateId=this.directionalCheckedList
  2550. // }
  2551. if(this.sysType==1&&this.getData('useAppMarket')){
  2552. values.appStore=JSON.stringify(this.appStore)
  2553. }else if(this.sysType==1&&!this.getData('useAppMarket')){
  2554. values.appStore="[]"
  2555. }
  2556. if(values.cpaBid){
  2557. values.cpaBid=parseInt(values.cpaBid*1000)
  2558. }else{
  2559. values.cpaBid=0
  2560. }
  2561. if(values.deepConversionBid){
  2562. values.deepConversionBid=parseInt(values.deepConversionBid*1000)
  2563. }else{
  2564. values.deepConversionBid=0
  2565. }
  2566. if(values.creativeCategory&&values.creativeCategory.length>0){
  2567. values.creativeCategory=values.creativeCategory[values.creativeCategory.length-1]
  2568. }else{
  2569. values.creativeCategory=undefined
  2570. }
  2571. values.deviceBrand=this.deviceBrand==0?'[]':JSON.stringify(values.deviceBrand)
  2572. values.devicePrice=this.devicePrice==0?'[]':JSON.stringify(values.devicePrice)
  2573. values.accountId = this.accountId
  2574. values.creativeTag=values.creativeTag?JSON.stringify(values.creativeTag):undefined
  2575. values.noAreaBreak=this.noAreaBreak?1:0
  2576. values.noGenderBreak=this.noGenderBreak?1:0
  2577. values.noAgeBreak=this.noAgeBreak?1:0
  2578. values.campaignDayBudget = this.budgetType =='1'?0: values.campaignDayBudget*1000
  2579. values.unitDayBudget = this.dayBudgetType =='1'?0: values.unitDayBudget*1000
  2580. let url=''
  2581. if(this.editRecordId){
  2582. url='/ctop/aiKuaishouAdvertiserStrategy/edit';
  2583. values.id=this.editRecordId
  2584. }else{
  2585. url='/ctop/aiKuaishouAdvertiserStrategy/add'
  2586. }
  2587. postAction(url,values).then(res=>{
  2588. //console.log(res)
  2589. this.goNextloading=false
  2590. if(res.success){
  2591. this.$router.replace('/autoLaunch/configLaunchList')
  2592. this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  2593. this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)
  2594. }else{
  2595. this.$message.error(res.message)
  2596. // this.$router.replace('/autoLaunch/configLaunchList')
  2597. // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  2598. // this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)
  2599. }
  2600. })
  2601. // $.ajax({
  2602. // url:'http://192.168.1.193:31012/add_advertiser_strategy',
  2603. // type:"POST",
  2604. // data:JSON.stringify(values),
  2605. // crossDomain:true,
  2606. // contentType:"application/json; charset=utf-8;",
  2607. // dataType:'json',
  2608. // success:(res)=>{
  2609. // this.goNextloading=false
  2610. // //console.log(res)
  2611. // let result=JSON.parse(res)
  2612. // if(result.code==0){
  2613. // this.$router.replace('/autoLaunch/configLaunchList')
  2614. // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  2615. // }else{
  2616. // this.$message.error(result.message)
  2617. // this.$router.replace('/autoLaunch/configLaunchList')
  2618. // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  2619. // }
  2620. // },
  2621. // error:(res)=>{
  2622. // //console.log(res)
  2623. // }
  2624. // })
  2625. }else{
  2626. this.$message.error('请正确填写必填项目')
  2627. }
  2628. })
  2629. })
  2630. },
  2631. // 获取applist
  2632. getAppList() {
  2633. let params = {}
  2634. params.accountId = this.accountId
  2635. getAction('/kuaishou/batch/getAppList', params).then(res => {
  2636. if (res.success) {
  2637. this.appListAll = res.result.map((item, index) => {
  2638. return {
  2639. ...item,
  2640. key: index
  2641. }
  2642. })
  2643. if(this.sysType==1){
  2644. this.appList=this.appListAll.filter(item=>{
  2645. return item.platform==1||item.platform==2
  2646. })
  2647. }else if(this.sysType==2){
  2648. this.appList=this.appListAll.filter(item=>{
  2649. return item.platform==3||item.platform==4
  2650. })
  2651. }
  2652. }
  2653. })
  2654. },
  2655. convertChange() {
  2656. this.convertId = ""
  2657. },
  2658. getConvertList() {
  2659. var params = {}
  2660. params.accountId = this.accountId
  2661. params.type = this.convertType
  2662. getAction('/kuaishou/batch/getConvertList', params).then(res => {
  2663. //console.log(res)
  2664. if (res.success) {
  2665. this.convertList = res.result.map(item => {
  2666. return {
  2667. ...item,
  2668. convert_id: item.convert_id + ''
  2669. }
  2670. })
  2671. }
  2672. })
  2673. },
  2674. sysTypeChange(e){
  2675. //console.log(e.target.value);
  2676. this.form.setFieldsValue({
  2677. appId:undefined,
  2678. platformOs:e.target.value
  2679. })
  2680. // if(this.getFormData('campaignType')==2 || this.getFormData('campaignType')==7){
  2681. // this.appIdChange(this.getFormData('appId'))
  2682. // }
  2683. if(this.sysType==1){
  2684. this.appList=this.appListAll.filter(item=>{
  2685. return (item.platform==1 || item.platform==2)
  2686. })
  2687. }else if(this.sysType==2){
  2688. this.appList=this.appListAll.filter(item=>{
  2689. return (item.platform==3||item.platform==4)
  2690. })
  2691. }
  2692. },
  2693. getPlatForm(appId) {
  2694. if (appId) {
  2695. var data = this.appList.filter(item => {
  2696. return item.appId == appId
  2697. })
  2698. return data[0].platform
  2699. }
  2700. },
  2701. showConvert() {
  2702. this.convertChange()
  2703. if (this.getFormData('campaignType') == 2) {
  2704. if (this.getData('appId')) {
  2705. this.convert = true;
  2706. let appIdvalue=this.getData('appId');
  2707. if (this.getPlatForm(appIdvalue instanceof Array?appIdvalue[0]:appIdvalue) == 1 || this.getPlatForm(appIdvalue instanceof Array?appIdvalue[0]:appIdvalue) == 2) {
  2708. this.convertType = '3'
  2709. } else {
  2710. this.convertType = '7'
  2711. }
  2712. } else {
  2713. this.$message.error('请选择应用')
  2714. }
  2715. } else {
  2716. this.convert = true
  2717. this.convertType = '1'
  2718. }
  2719. this.getConvertList()
  2720. },
  2721. getPageList(appId) {
  2722. getAction('/kuaishou/batch/getPageList', {
  2723. accountId: this.accountId,
  2724. appId: appId,
  2725. viewComp: 7,
  2726. }).then((res) => {
  2727. if (res.success) {
  2728. this.siteList = res.result
  2729. }
  2730. })
  2731. },
  2732. // 获取行动号召按钮
  2733. getActionBarText(){
  2734. this.actionBarTextList=[]
  2735. let that = this
  2736. setTimeout(()=>{
  2737. getAction('/kuaishou/batch/getActionBarTextByType', {
  2738. type:that.getFormData('campaignType')
  2739. }).then((res) => {
  2740. if (res.success) {
  2741. that.actionBarTextList = res.result
  2742. }
  2743. })
  2744. })
  2745. },
  2746. // 获取创意分类创意标签白名单
  2747. getWhiteList(){
  2748. this.whiteList={}
  2749. getAction('/kuaishou/batch/getWhiteList', {
  2750. accountId: this.accountId,
  2751. }).then((res) => {
  2752. if (res.success) {
  2753. // //console.log(res)
  2754. if (res.result) {
  2755. this.whiteList=res.result
  2756. }
  2757. }
  2758. })
  2759. },
  2760. editEchoPage(){
  2761. this.spinning=true;
  2762. if(this.editRecordId){
  2763. getAction('/ctop/aiKuaishouAdvertiserStrategy/queryById',{
  2764. id:this.editRecordId
  2765. }).then(res=>{
  2766. //console.log(res);
  2767. this.accountId=res.result.accountId;
  2768. this.description=res.result.description
  2769. this.appType = res.result.appInterest ? '1' : res.result.appIds ? '2' : '0'
  2770. // if(this.appType === '2') {
  2771. // postAction('/kuaishou/batch/getAppNames',{accountId:this.accountId,appIds:res.result.appIds}).then((result) => {
  2772. // if (result.success) {
  2773. // this.checkOptions = result.result.map(i=>{
  2774. // return {
  2775. // appId: i.id,
  2776. // appName: i.name
  2777. // }
  2778. // })
  2779. // }
  2780. // })
  2781. // }
  2782. // res.result.creativeTag=res.result.creativeTag?res.result.creativeTag:[]
  2783. this.sysType=res.result.platformOs
  2784. let fngetIsActivate=new Promise((resolve,reject)=>{
  2785. getAction('/kuaishou/batch/getIsActivate', {
  2786. accountId: this.accountId
  2787. }).then(res => {
  2788. if (res.success) {
  2789. this.groupTypeData = res.result
  2790. resolve()
  2791. }
  2792. })
  2793. })
  2794. let fngetWhite=new Promise((resolve,reject)=>{
  2795. getAction('/kuaishou/batch/getWhiteList', {
  2796. accountId: this.accountId,
  2797. }).then((res) => {
  2798. if (res.success) {
  2799. this.whiteList=res.result
  2800. resolve()
  2801. }
  2802. })
  2803. })
  2804. Promise.all([fngetIsActivate,fngetWhite]).then(r=>{
  2805. // this.form.setFieldsValue({
  2806. // ...res.result,
  2807. // creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
  2808. // useAppMarket:res.result.useAppMarket==1?true:false,
  2809. // isOpen:res.result.isOpen?res.result.isOpen:0,
  2810. // cpaBid:res.result.cpaBid/1000,
  2811. // appId:res.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray)
  2812. // })
  2813. if(res.result.creativeCategory){
  2814. // let arr=[];
  2815. if(res.result.creativeCategory>10000){
  2816. res.result.creativeCategory=res.result.creativeCategory?[parseInt(res.result.creativeCategory/10000),parseInt(res.result.creativeCategory/100),res.result.creativeCategory]:[];
  2817. }else if(res.result.creativeCategory>100){
  2818. res.result.creativeCategory=res.result.creativeCategory?[parseInt(res.result.creativeCategory/100),res.result.creativeCategory]:[];
  2819. }else{
  2820. res.result.creativeCategory=res.result.creativeCategory?[res.result.creativeCategory]:[];
  2821. }
  2822. }
  2823. this.deviceBrand=res.result.deviceBrand?JSON.parse(res.result.deviceBrand).length>0?1:0:0;
  2824. this.devicePrice=res.result.devicePrice?JSON.parse(res.result.devicePrice).length>0?1:0:0
  2825. this.budgetType = res.result.campaignDayBudget?res.result.campaignDayBudget>0?'2':'1':'1'
  2826. this.dayBudgetType = res.result.unitDayBudget?res.result.unitDayBudget>0?'2':'1':'1'
  2827. this.customUnitCnt = res.result.customUnitCnt
  2828. this.programUnitCnt = res.result.programUnitCnt
  2829. this.customUnitCntMax = Math.floor(2000/res.result.imageCnt)
  2830. this.uriCheck = res.result.schemaUri ? true : false
  2831. this.appType = res.result.appInterest&&JSON.parse(res.result.appInterest).length>0 ? '1' : res.result.appIds&&JSON.parse(res.result.appIds).length>0 ? '2' : '0'
  2832. this.checkArr = this.appType === '2' ? JSON.parse(res.result.appIds) : []
  2833. this.optionsAll = res.result.appIds ? (typeof res.result.appIds == 'string' ? JSON.parse(res.result.appIds) : res.result.appIds) : []
  2834. this.checkAllApp = false
  2835. res.result.appInterest = res.result.appInterest?JSON.parse(res.result.appInterest):[]
  2836. setTimeout(()=>{
  2837. this.form.setFieldsValue({
  2838. ...res.result,
  2839. creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
  2840. isOpen:res.result.isOpen?res.result.isOpen:0,
  2841. cpaBid:res.result.cpaBid/1000,
  2842. deviceBrand:res.result.deviceBrand?JSON.parse(res.result.deviceBrand):[],
  2843. devicePrice:res.result.devicePrice?JSON.parse(res.result.devicePrice):[],
  2844. useAppMarket:res.result.useAppMarket==1?true:false,
  2845. campaignDayBudget:res.result.campaignDayBudget?res.result.campaignDayBudget/1000:null,
  2846. unitDayBudget:res.result.unitDayBudget?res.result.unitDayBudget/1000:null,
  2847. })
  2848. },0)
  2849. setTimeout(()=>{
  2850. this.form.setFieldsValue({
  2851. androidOsv:res.result.androidOsv?res.result.androidOsv:3,
  2852. iosOsv:res.result.iosOsv?res.result.iosOsv:6,
  2853. url:res.result.url,
  2854. schemaUri:res.result.schemaUri,
  2855. appId:res.result.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray),
  2856. appInterest:res.result.appInterest,
  2857. roiRatio:res.result.roiRatio?res.result.roiRatio:null,
  2858. })
  2859. },100)
  2860. if((res.result.ocpxActionType == 180 || res.result.ocpxActionType == 53) && this.groupTypeData.deepConversionTypes&&this.groupTypeData.deepConversionTypes.length > 0){
  2861. // //console.log(1)
  2862. setTimeout(()=>{
  2863. this.form.setFieldsValue({
  2864. deepConversionType:res.result.deepConversionType,
  2865. })
  2866. if(res.result.deepConversionBid!=null){
  2867. this.form.setFieldsValue({
  2868. deepConversionBid:res.result.deepConversionBid/1000,
  2869. })
  2870. }
  2871. },0)
  2872. }
  2873. // //console.log(this.getFormData('deepConversionBid'))
  2874. this.noAreaBreak=res.result.noAreaBreak?true:false
  2875. this.noGenderBreak=res.result.noGenderBreak?true:false
  2876. this.noAgeBreak=res.result.noAgeBreak?true:false
  2877. this.appStore=res.result.appStore?JSON.parse(res.result.appStore):[]
  2878. this.ageArr=[];
  2879. this.ageArr=JSON.parse(JSON.stringify(ageArr))
  2880. this.agesRange=res.result.agesRange?JSON.parse(res.result.agesRange).length>0?JSON.parse(res.result.agesRange):[1]:[1]
  2881. // if(agesRange.length>0){
  2882. // agesRange.forEach((item,index)=>{
  2883. // this.ageArr.forEach((ele)=>{
  2884. // if(ele.value==item){
  2885. // ele.checked=true;
  2886. // }
  2887. // })
  2888. // });
  2889. // }
  2890. let sceneId=res.result.sceneId?JSON.parse(res.result.sceneId):[]
  2891. if(sceneId.length==1&&sceneId[0]==1){
  2892. this.adposition=1
  2893. }else if(sceneId.length==1&&sceneId[0]==5){
  2894. this.adposition=5
  2895. }else{
  2896. this.adposition='inventoryTypes';
  2897. this.checkedList=sceneId
  2898. }
  2899. let population=res.result.population?JSON.parse(res.result.population):[]
  2900. let excludePopulation=res.result.excludePopulation?JSON.parse(res.result.excludePopulation):[]
  2901. if(population.length&&excludePopulation.length){
  2902. this.form.setFieldsValue({
  2903. customCrowd:'3'
  2904. })
  2905. }else if(population.length&&!excludePopulation.length){
  2906. this.form.setFieldsValue({
  2907. customCrowd:'1'
  2908. })
  2909. }else if(!population.length&&!excludePopulation.length){
  2910. this.form.setFieldsValue({
  2911. customCrowd:'0'
  2912. })
  2913. }else{
  2914. this.form.setFieldsValue({
  2915. customCrowd:'2'
  2916. })
  2917. }
  2918. this.incluedSelectedRowKeys=res.result.population?JSON.parse(res.result.population):[]
  2919. this.excludeSelectedRowKeys=res.result.excludePopulation?JSON.parse(res.result.excludePopulation):[]
  2920. let region=res.result.region?JSON.parse(res.result.region):[]
  2921. if(region.length==0){
  2922. this.district='NONE'
  2923. }else{
  2924. this.district='CITY';
  2925. this.regionList=region
  2926. }
  2927. if(this.getFormData('customCrowd')=='1' || this.getFormData('customCrowd')=='2'){
  2928. this.tabKey=this.getFormData('customCrowd')
  2929. }else if(this.getFormData('customCrowd')=='3'){
  2930. this.tabKey='1'
  2931. }
  2932. this.spinning=false;
  2933. })
  2934. })
  2935. }
  2936. },
  2937. getpopulationlist(){
  2938. this.retargetDataAll=[]
  2939. getAction('/kuaishou/batch/getPopulationList',{
  2940. accountId:this.accountId
  2941. }).then((res)=>{
  2942. // //console.log(res)
  2943. this.loading=false;
  2944. if(res.success){
  2945. res.result.forEach((ele)=>{
  2946. ele.key=ele.orientationId
  2947. ele.id= ele.orientationId
  2948. ele.name=ele.orientationName+"("+ele.orientationId+")"
  2949. ele.accountName=this.accountInfo.title
  2950. ele.accountId=this.accountId
  2951. })
  2952. // this.retargetData=res.data;
  2953. // this.retargetDataAll=[...this.retargetDataAll,...res.result];
  2954. this.retargetDataAll=[...res.result];
  2955. this.retargetDataAll = this.retargetDataAll.filter(item=>{
  2956. return item.populationType !== 7
  2957. })
  2958. }
  2959. })
  2960. },
  2961. clickTrackUrlFocus(){
  2962. // //console.log('focus')
  2963. this.clickTrackUrlTip=true;
  2964. },
  2965. clickTrackUrlBlur(){
  2966. // //console.log('blur')
  2967. this.clickTrackUrlTip=false;
  2968. },
  2969. getChangeAll(type, form, field) {
  2970. var node = document.getElementById(field)
  2971. var v = '-{{' + type + '}}-'
  2972. if (document.selection) {
  2973. //IE
  2974. node.focus()
  2975. var sel = document.selection.createRange()
  2976. sel.text = v
  2977. sel.select()
  2978. if (field == 'campaignName') {
  2979. this[form].setFieldsValue({ campaignName: sel.text })
  2980. } else if (field == 'groupName') {
  2981. this[form].setFieldsValue({ groupName: sel.text })
  2982. }
  2983. } else if (node.selectionStart || node.selectionStart == '0') {
  2984. //MOZILLA/GOOGLE
  2985. var startPos = node.selectionStart
  2986. var endPos = node.selectionEnd
  2987. var restoreTop = node.scrollTop
  2988. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  2989. if (restoreTop > 0) {
  2990. node.scrollTop = restoreTop
  2991. }
  2992. if (field == 'campaignName') {
  2993. this[form].setFieldsValue({ campaignName: node.value })
  2994. } else if (field == 'groupName') {
  2995. this[form].setFieldsValue({ groupName: node.value })
  2996. }
  2997. node.focus()
  2998. node.selectionStart = startPos + v.length
  2999. node.selectionEnd = startPos + v.length
  3000. // this.campaignName = node.value
  3001. } else {
  3002. //OTHER
  3003. node.value += v
  3004. // console.log(node.value)
  3005. if (field == 'campaignName') {
  3006. this[form].setFieldsValue({ campaignName: node.value })
  3007. } else if (field == 'groupName') {
  3008. this[form].setFieldsValue({ groupName: node.value })
  3009. }
  3010. node.focus()
  3011. // this.campaignName = node.value
  3012. }
  3013. },
  3014. },
  3015. created() {
  3016. if(this.$route){
  3017. let editRecordId=this.$route.query.id;
  3018. if(editRecordId){
  3019. this.$nextTick(()=>{
  3020. this.editRecordId=editRecordId;
  3021. this.editEchoPage()
  3022. })
  3023. }
  3024. }
  3025. },
  3026. mounted() {
  3027. this.accountHttp()
  3028. this.getDataType('APP_INTEREST', 'optionsAppActive')
  3029. // this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
  3030. let strategyNamepart=this.campaignTypeHandle(this.getFormData('campaignType'));
  3031. this.strategyName ='[预设]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;
  3032. this.getActionBarText()
  3033. },
  3034. filters: {
  3035. getDate(value) {
  3036. let date = new Date(value)
  3037. let y = date.getFullYear()
  3038. let MM = date.getMonth() + 1
  3039. MM = MM < 10 ? '0' + MM : MM
  3040. let d = date.getDate()
  3041. d = d < 10 ? '0' + d : d
  3042. return y + '-' + MM + '-' + d
  3043. },
  3044. platform(str) {
  3045. var data = {
  3046. 1: 'Android应用下载',
  3047. 2: 'Android网页游戏',
  3048. 3: 'iOS应用下载',
  3049. 4: 'iOS网页游戏'
  3050. }
  3051. return data[str]
  3052. },
  3053. customCrowdHandler(val){
  3054. let str=''
  3055. switch (val) {
  3056. case 1:
  3057. str='上传人群'
  3058. break;
  3059. case 2:
  3060. str='广告人群'
  3061. break;
  3062. case 3:
  3063. str='主题专区'
  3064. break;
  3065. case 4:
  3066. str='逻辑规则'
  3067. break;
  3068. case 5:
  3069. str='人群扩展'
  3070. break;
  3071. case 6:
  3072. str='平台定制'
  3073. break;
  3074. case 7:
  3075. str='定制付费'
  3076. break;
  3077. case 8:
  3078. str='网红粉丝类别'
  3079. break;
  3080. case 9:
  3081. str='内容付费行为'
  3082. break;
  3083. case 10:
  3084. str='移动应用安装'
  3085. break;
  3086. case 11:
  3087. str='快手使用活跃度'
  3088. break;
  3089. case 12:
  3090. str='行业分类'
  3091. break;
  3092. case 13:
  3093. str='商业兴趣'
  3094. break;
  3095. case 14:
  3096. str='固化标签'
  3097. break;
  3098. case 15:
  3099. str='行业偏好'
  3100. break;
  3101. case 16:
  3102. str='第三方标签'
  3103. break;
  3104. case 17:
  3105. str='产品关键词'
  3106. break;
  3107. default:
  3108. break;
  3109. }
  3110. return str
  3111. }
  3112. },
  3113. }
  3114. </script>
  3115. <style lang="scss">
  3116. .configLaunchInfo{
  3117. .display-none-selset {
  3118. display: none !important;
  3119. }
  3120. .ant-btn-danger {
  3121. background-color: #ff4d4f !important;
  3122. }
  3123. }
  3124. .ant-tooltip-inner,
  3125. .ant-tooltip-arrow::before {
  3126. background-color: #fff;
  3127. color: #333;
  3128. }
  3129. .ant-tooltip-inner {
  3130. span {
  3131. display: block;
  3132. }
  3133. }
  3134. .ant-tooltip {
  3135. max-width: 450px;
  3136. }
  3137. .configLaunchInfo {
  3138. .ant-radio-button-wrapper {
  3139. min-width: 80px;
  3140. text-align: center;
  3141. }
  3142. .ant-form-item {
  3143. -webkit-box-sizing: border-box;
  3144. box-sizing: border-box;
  3145. margin: 0;
  3146. padding: 0;
  3147. color: rgba(0, 0, 0, 0.65);
  3148. font-size: 14px;
  3149. font-variant: tabular-nums;
  3150. line-height: 1.5;
  3151. list-style: none;
  3152. -webkit-font-feature-settings: 'tnum';
  3153. font-feature-settings: 'tnum';
  3154. vertical-align: top;
  3155. }
  3156. .directedBody {
  3157. .ant-form-item {
  3158. margin-bottom: 20px;
  3159. }
  3160. }
  3161. .inventoryTypes{
  3162. .ant-checkbox-wrapper,
  3163. .ant-checkbox-group-item {
  3164. display: block;
  3165. padding: 5px 15px;
  3166. }
  3167. .ant-checkbox-wrapper:first-child {
  3168. padding: 0 15px 5px;
  3169. }
  3170. .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  3171. margin-left: 0px;
  3172. }
  3173. }
  3174. }
  3175. </style>
  3176. <style lang="scss" scoped>
  3177. .configLaunchInfo {
  3178. .region{
  3179. width: 100%;
  3180. }
  3181. font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  3182. color: #333;
  3183. ul,
  3184. li {
  3185. margin: 0;
  3186. padding: 0;
  3187. }
  3188. .moduler {
  3189. background: #fff;
  3190. margin-bottom: 16px;
  3191. position: relative;
  3192. padding: 32px 24px 48px 32px;
  3193. border-radius: 4px;
  3194. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  3195. .ad-range2{
  3196. width: 680px;
  3197. padding: 5px 32px;
  3198. .ad-range2-title{
  3199. background: #f9f9f9;
  3200. // line-height: 32px;
  3201. // height: 32px;
  3202. padding: 15px 15px;
  3203. border: 1px solid #eaeaea;
  3204. border-bottom: 0;
  3205. }
  3206. .quanxuanDirectional{
  3207. // padding: 0 8px;
  3208. position: absolute;
  3209. right: 10px;
  3210. top: 15px;
  3211. color: #1890ff;
  3212. }
  3213. .title-list {
  3214. // width: calc(100% + 48px);
  3215. width: 100%;
  3216. margin: 0;
  3217. margin-bottom: 0;
  3218. padding: 0;
  3219. background: #fff;
  3220. height: 363px;
  3221. border: 1px solid #eaeaea;
  3222. overflow: scroll;
  3223. overflow-x: hidden;
  3224. // margin-top: 10px;
  3225. }
  3226. .title-list .title-item{
  3227. padding: 10px 30px;
  3228. width: 100%;
  3229. // height: 32px;
  3230. // line-height: 32px;
  3231. // border-bottom: 1px solid #eaeaea;
  3232. }
  3233. }
  3234. .moduler-title {
  3235. display: flex;
  3236. align-items: center;
  3237. font-size: 22px;
  3238. margin-bottom: 20px;
  3239. }
  3240. .row-item {
  3241. display: flex;
  3242. justify-content: flex-start;
  3243. align-items: center;
  3244. margin-bottom: 32px;
  3245. }
  3246. .row-item:last-of-type {
  3247. margin-bottom: 0;
  3248. }
  3249. .row-item .hint-item {
  3250. width: 24px;
  3251. min-width: 24px;
  3252. align-self: flex-start;
  3253. line-height: 20px;
  3254. height: 20px;
  3255. margin-top: 9px;
  3256. }
  3257. .row-item .label-item {
  3258. position: relative;
  3259. align-items: flex-start;
  3260. align-self: flex-start;
  3261. line-height: 20px;
  3262. height: 20px;
  3263. margin-top: 10px;
  3264. width: 120px;
  3265. // min-width: 80px;
  3266. .text-item {
  3267. font-size: 14px;
  3268. width: 100px;
  3269. }
  3270. }
  3271. .row-item .required-item {
  3272. width: 4px;
  3273. height: 4px;
  3274. border-radius: 2px;
  3275. background: #f45858;
  3276. position: absolute;
  3277. right: 10px;
  3278. top: 50%;
  3279. transform: translateY(-50%);
  3280. }
  3281. .row-item .input-item {
  3282. min-width: 480px;
  3283. position: relative;
  3284. // height: 35px;
  3285. .tip {
  3286. font-size: 12px;
  3287. color: tomato;
  3288. }
  3289. .inventory-tags-lists-header {
  3290. background-color: #F8F9FA;
  3291. border: 1px solid #E4E9ED;
  3292. height: 36px;
  3293. line-height: 33px;
  3294. border-radius: 4px 4px 0 0;
  3295. font-weight: bold;
  3296. display: flex;
  3297. }
  3298. .inventory-tags-lists-container {
  3299. border: 1px solid #E4E9ED;
  3300. margin-top: -1px;
  3301. height: 100%;
  3302. padding: 4px 0px;
  3303. border-radius: 0 0 4px 4px;
  3304. }
  3305. .inventory-tags-lists-item {
  3306. width: 100%;
  3307. height: 37px;
  3308. line-height: 37px;
  3309. padding-left: 12px;
  3310. padding-right: 12px;
  3311. display: flex;
  3312. font-size: 14px;
  3313. color: #333;
  3314. }
  3315. }
  3316. }
  3317. .opt {
  3318. text-align: right;
  3319. }
  3320. }
  3321. </style>