configLaunchInfo.vue 119 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805
  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">提升应用安装</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='true'>收集销售线索</a-radio-button>
  39. <a-radio-button :value="7" :disabled='true'>提高应用活跃</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 />
  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 class="required-item"></div>
  77. </div>
  78. <div class="input-item">
  79. <a-form-item>
  80. <a-input v-decorator="['groupName',{ rules: [{ required: true, message: '请填写组的命名规则' }] }]" allow-clear />
  81. </a-form-item>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="moduler">
  86. <div class="moduler-title">目标应用</div>
  87. <div class="ad-range">
  88. <div class="row-item" >
  89. <div class="hint-item"></div>
  90. <div class="label-item">
  91. <div class="text-item">是否单一应用</div>
  92. <div class="required-item"></div>
  93. </div>
  94. <div class="input-item">
  95. <a-form-item >
  96. <a-radio-group v-decorator="['singleAppid', {initialValue:1 }]" @change="singleAppidChange">
  97. <a-radio-button :value="1">是</a-radio-button>
  98. <a-radio-button :value="0">否</a-radio-button>
  99. </a-radio-group>
  100. </a-form-item>
  101. </div>
  102. </div>
  103. <div class="row-item" >
  104. <div class="hint-item"></div>
  105. <div class="label-item">
  106. <div class="text-item">系统类型</div>
  107. <div class="required-item"></div>
  108. </div>
  109. <div class="input-item">
  110. <a-form-item >
  111. <a-radio-group v-model="sysType" @change="sysTypeChange">
  112. <a-radio-button :value="1">安卓</a-radio-button>
  113. <a-radio-button :value="2">IOS</a-radio-button>
  114. </a-radio-group>
  115. </a-form-item>
  116. </div>
  117. </div>
  118. <div class="row-item" v-if="getFormData('campaignType')==2||getFormData('campaignType')==7">
  119. <div class="hint-item"></div>
  120. <div class="label-item">
  121. <div class="text-item">选择应用</div>
  122. <div class="required-item"></div>
  123. </div>
  124. <div class="input-item">
  125. <a-form-item>
  126. <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
  127. placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"
  128. :filterOption="filterOption" @change="appIdChange" :mode="getFormData('singleAppid')==1?'defalut':'multiple'" :maxTagCount='1'>
  129. <a-select-option v-if="getFormData('singleAppid')==0" :value='0' @click="selectAllAppId">选择以下全部</a-select-option>
  130. <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
  131. {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
  132. appModel.platform | platform
  133. }}
  134. </a-select-option>
  135. </a-select>
  136. <a-button type="primary" @click="addApplication" style="margin-left:10px" :loading="tongbuLoading">刷新应用</a-button>
  137. </a-form-item>
  138. </div>
  139. </div>
  140. <div class="row-item" v-if="getFormData('campaignType') == 3">
  141. <div class="hint-item"></div>
  142. <div class="label-item">
  143. <div class="text-item">转化类型</div>
  144. <div class="required-item"></div>
  145. </div>
  146. <div class="input-item">
  147. <a-form-item >
  148. <a-radio-group buttonStyle="solid"
  149. v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]">
  150. <a-radio-button value="1">淘宝商品</a-radio-button>
  151. <a-radio-button value="2">淘客商品</a-radio-button>
  152. </a-radio-group>
  153. </a-form-item>
  154. </div>
  155. </div>
  156. <div class="row-item" v-if="getFormData('campaignType') == 3||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
  157. <div class="hint-item"></div>
  158. <div class="label-item">
  159. <div class="text-item">链接</div>
  160. <!-- <div class="required-item"></div> -->
  161. </div>
  162. <div class="input-item">
  163. <a-form-item v-if="getFormData('campaignType') != 2" :class="{ 'else-label': getFormData('campaignType') == 3 }">
  164. <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
  165. </a-form-item>
  166. </div>
  167. </div>
  168. <div class="row-item" v-if="getFormData('campaignType') == 2||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
  169. <div class="hint-item"></div>
  170. <div class="label-item">
  171. <div class="text-item">转化追踪</div>
  172. <!-- <div class="required-item"></div> -->
  173. </div>
  174. <div class="input-item">
  175. <a-form-item >
  176. <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
  177. <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
  178. </a-form-item>
  179. <div style="margin-top:10px">
  180. <a-form-item v-if="sysType==1" >
  181. <a-checkbox v-decorator="[
  182. 'useAppMarket',
  183. {
  184. valuePropName: 'checked',
  185. initialValue: false,
  186. },
  187. ]">
  188. 优先从系统应用商店下载
  189. </a-checkbox>
  190. </a-form-item>
  191. <a-form-item v-if="sysType==1&&getData('useAppMarket')">
  192. 请勾选投放应用已上架的应用商店(默认全选)
  193. <a-checkbox-group v-model="appStore">
  194. <a-checkbox value="huawei">华为</a-checkbox>
  195. <a-checkbox value="oppo">OPPO</a-checkbox>
  196. <a-checkbox value="vivo">VIVO</a-checkbox>
  197. <a-checkbox value="xiaomi">小米</a-checkbox>
  198. <a-checkbox value="meizu">魅族</a-checkbox>
  199. <a-checkbox value="smartisan">锤子</a-checkbox>
  200. </a-checkbox-group>
  201. </a-form-item>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div class="moduler">
  208. <div class="moduler-title">用户定向
  209. <div style="margin-left:30px;position:relative;top:-2px">
  210. <a-radio-group v-model="useDirectional" @change="useDirectionalChange">
  211. <a-radio :value="1">
  212. 不使用定向
  213. </a-radio>
  214. <!-- <a-radio :value="0">
  215. 使用定向包
  216. </a-radio> -->
  217. </a-radio-group>
  218. </div>
  219. </div>
  220. <div class="ad-range" v-if="useDirectional==1">
  221. <div class="row-item">
  222. <div class="hint-item"></div>
  223. <div class="label-item">
  224. <div class="text-item">地域</div>
  225. <div class="required-item"></div>
  226. </div>
  227. <div class="input-item">
  228. <a-form-item>
  229. <a-radio-group v-model="district" @change="cityChange">
  230. <a-radio-button value="NONE">不限</a-radio-button>
  231. <a-radio-button value="CITY">按省市</a-radio-button>
  232. <a-radio-button value="COUNTY">按区县</a-radio-button>
  233. </a-radio-group>
  234. </a-form-item>
  235. <div class="region" style="margin-top:20px" v-show="district!='NONE'">
  236. <!-- 省市 -->
  237. <div class="provincyCity" v-if="district=='CITY'">
  238. <linkMultiSelect title='省份' :listArr='regionList' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  239. </div>
  240. <!-- 区县 -->
  241. <div class="district" v-else-if="district=='COUNTY'">
  242. <linkMultiSelect title='省份' :listArr='regionList' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCountyArr'/>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="row-item">
  248. <div class="hint-item"></div>
  249. <div class="label-item">
  250. <div class="text-item">性别</div>
  251. <div class="required-item"></div>
  252. </div>
  253. <div class="input-item">
  254. <a-form-item>
  255. <a-radio-group v-decorator="['gender', {initialValue:0 }]" >
  256. <a-radio-button :value="0">不限</a-radio-button>
  257. <a-radio-button :value="2">男</a-radio-button>
  258. <a-radio-button :value="1">女</a-radio-button>
  259. </a-radio-group>
  260. </a-form-item>
  261. </div>
  262. </div>
  263. <div class="row-item">
  264. <div class="hint-item"></div>
  265. <div class="label-item">
  266. <div class="text-item">年龄</div>
  267. <div class="required-item"></div>
  268. </div>
  269. <div class="input-item">
  270. <a-form-item>
  271. <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect' />
  272. </a-form-item>
  273. </div>
  274. </div>
  275. <div class="row-item">
  276. <div class="hint-item"></div>
  277. <div class="label-item">
  278. <div class="text-item">操作系统</div>
  279. <div class="required-item"></div>
  280. </div>
  281. <div class="input-item">
  282. <a-form-item>
  283. <a-radio-group v-decorator="['platformOs', {initialValue:1 }]" @change="platformOsChange">
  284. <a-radio-button :value="0">不限</a-radio-button>
  285. <a-radio-button :value="1">Android</a-radio-button>
  286. <a-radio-button :value="2">IOS</a-radio-button>
  287. </a-radio-group>
  288. </a-form-item>
  289. <!-- <div style="margin-top:24px" v-if="getFormData('platformOs')!=0">
  290. <div v-if="getFormData('platformOs')==1">
  291. <a-form-item>
  292. <a-radio-group v-decorator="['androidOsv',{initialValue: 3,}]">
  293. <a-radio :value="3">不限</a-radio>
  294. <a-radio :value="4">4X+</a-radio>
  295. <a-radio :value="5">5x+</a-radio>
  296. <a-radio :value="6">6x+</a-radio>
  297. <a-radio :value="7">7x+</a-radio>
  298. </a-radio-group>
  299. </a-form-item>
  300. </div>
  301. <div v-if="getFormData('platformOs')==2">
  302. <a-form-item>
  303. <a-radio-group v-decorator="['iosOsv',{initialValue: 6,}]">
  304. <a-radio :value="6">不限</a-radio>
  305. <a-radio :value="7">7X+</a-radio>
  306. <a-radio :value="8">8x+</a-radio>
  307. <a-radio :value="9">9x+</a-radio>
  308. <a-radio :value="10">10x+</a-radio>
  309. </a-radio-group>
  310. </a-form-item>
  311. </div>
  312. </div> -->
  313. </div>
  314. </div>
  315. <!-- <div class="row-item" v-if="getFormData('platformOs')!=2">
  316. <div class="hint-item"></div>
  317. <div class="label-item">
  318. <div class="text-item">设备品牌</div>
  319. <div class="required-item"></div>
  320. </div>
  321. <div class="input-item">
  322. <a-form-item>
  323. <a-radio-group v-model="deviceBrand">
  324. <a-radio-button :value="0">不限</a-radio-button>
  325. <a-radio-button :value="1">选择品牌</a-radio-button>
  326. </a-radio-group>
  327. </a-form-item>
  328. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-if="deviceBrand==1">
  329. <div class="inventory-tags-lists-header" style="padding-left:15px">
  330. <div class="inventory-tags-lists-name"><strong>品牌名称</strong></div>
  331. </div>
  332. <div class="inventory-tags-lists-container" >
  333. <a-checkbox-group
  334. v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
  335. >
  336. <a-checkbox :value="1" style="margin-bottom: 8px">OPPO</a-checkbox>
  337. <a-checkbox :value="2" style="margin-bottom: 8px">VIVO</a-checkbox>
  338. <a-checkbox :value="3" style="margin-bottom: 8px">华为</a-checkbox>
  339. <a-checkbox :value="4" style="margin-bottom: 8px">小米</a-checkbox>
  340. <a-checkbox :value="5" style="margin-bottom: 8px">荣耀</a-checkbox>
  341. <a-checkbox :value="6" style="margin-bottom: 8px">三星</a-checkbox>
  342. <a-checkbox :value="7" style="margin-bottom: 8px">金立</a-checkbox>
  343. <a-checkbox :value="8" style="margin: 0 0 8px 0">魅族</a-checkbox>
  344. <a-checkbox :value="9" style="margin-bottom: 8px">乐视</a-checkbox>
  345. <a-checkbox :value="10" style="margin-bottom: 8px">其他</a-checkbox>
  346. <a-checkbox :value="11" v-if="getFormData('platformOs') == 0" style="margin-bottom: 8px">苹果</a-checkbox>
  347. </a-checkbox-group>
  348. </div>
  349. </div>
  350. </div>
  351. </div> -->
  352. <div class="row-item">
  353. <div class="hint-item"></div>
  354. <div class="label-item">
  355. <div class="text-item">自定义人群</div>
  356. <div class="required-item"></div>
  357. </div>
  358. <div class="input-item">
  359. <a-form-item>
  360. <a-radio-group v-decorator="['customCrowd', {initialValue:'0' }]" @change="customCrowdChange">
  361. <a-radio-button value="0">不限</a-radio-button>
  362. <a-radio-button value="1">定向</a-radio-button>
  363. <a-radio-button value="2">排除</a-radio-button>
  364. <a-radio-button value="3">同时定向排除</a-radio-button>
  365. </a-radio-group>
  366. </a-form-item>
  367. <div class="dingxiang_paichu" v-if="getFormData('customCrowd')&&getFormData('customCrowd')!='0'" style="width:60%">
  368. <a-tabs v-model="tabKey" @change="retargetTabChange" >
  369. <a-tab-pane key="1" tab="定向池" v-if="getFormData('customCrowd')!='2'">
  370. <a-table
  371. :columns="retargetColumns"
  372. :row-key="record => record.key"
  373. :data-source="retargetDataAll"
  374. :loading="loading"
  375. style="width:100%;margin:15px 0"
  376. :pagination='false'
  377. @change="retargetTableChange"
  378. :scroll="{ y: 250 }"
  379. :row-selection="rowSelection"
  380. bordered
  381. >
  382. <template slot="name" slot-scope="name"> {{ name }} </template>
  383. <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
  384. </a-table>
  385. </a-tab-pane>
  386. <a-tab-pane key="2" tab="排除池" v-if="getFormData('customCrowd')!='1'">
  387. <a-table
  388. :columns="retargetColumns"
  389. :row-key="record => record.key"
  390. :data-source="retargetDataAll"
  391. :loading="loading"
  392. style="width:100%;margin:15px 0"
  393. :pagination='false'
  394. @change="retargetTableChange"
  395. :scroll="{ y: 250 }"
  396. :row-selection="rowSelection2"
  397. bordered
  398. >
  399. <template slot="name" slot-scope="name"> {{ name }} </template>
  400. <template slot="populationType" slot-scope="populationType"> {{ populationType |customCrowdHandler}} </template>
  401. </a-table>
  402. </a-tab-pane>
  403. <a-button slot="tabBarExtraContent" type='primary' @click="refreshPopulation" :loading='refreshPopulationLoading'>刷新人群包</a-button>
  404. </a-tabs>
  405. </div>
  406. </div>
  407. </div>
  408. <div class="row-item">
  409. <div class="hint-item"></div>
  410. <div class="label-item">
  411. <div class="text-item">过滤已转化用户</div>
  412. <div class="required-item"></div>
  413. </div>
  414. <div class="input-item">
  415. <a-form-item>
  416. <a-radio-group v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
  417. <a-radio-button :value="0">不限</a-radio-button>
  418. <a-radio-button :value="1">广告组</a-radio-button>
  419. <a-radio-button :value="2">广告计划</a-radio-button>
  420. <a-radio-button :value="3">本账户</a-radio-button>
  421. <a-radio-button :value="4">公司主体</a-radio-button>
  422. <a-radio-button :value="5">APP</a-radio-button>
  423. </a-radio-group>
  424. </a-form-item>
  425. </div>
  426. </div>
  427. <div class="row-item" >
  428. <div class="hint-item"></div>
  429. <div class="label-item">
  430. <div class="text-item">是否开启智能扩量</div>
  431. <div class="required-item"></div>
  432. </div>
  433. <div class="input-item">
  434. <a-form-item>
  435. <a-radio-group v-decorator="['isOpen', { initialValue: 0 }]" @change="isOpenChange">
  436. <a-radio-button :value='0'>关闭</a-radio-button>
  437. <a-radio-button :value="1">开启</a-radio-button>
  438. </a-radio-group>
  439. </a-form-item>
  440. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="getFormData('isOpen')==1">
  441. <div class="inventory-tags-lists-container">
  442. <a-checkbox v-model="noAgeBreak">不可突破年龄</a-checkbox>
  443. <a-checkbox v-model="noGenderBreak">不可突破性别</a-checkbox>
  444. <a-checkbox v-model="noAreaBreak">不可突破地域</a-checkbox>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. </div>
  450. <div class="ad-range2" v-if="useDirectional==0">
  451. <div style="position:relative" class="ad-range2-title">
  452. <span>当前选择模板数量:{{directionalCheckedList.length}}</span>
  453. <a-checkbox :indeterminate="indeterminateDirectional" :checked="checkAllDirectional" @change="onCheckAllDirectionalChange" class="quanxuanDirectional">
  454. <span>点击全选</span>
  455. </a-checkbox>
  456. </div>
  457. <a-spin :spinning="directionalSpinning">
  458. <div class="title-list">
  459. <a-checkbox-group v-model="directionalCheckedList" @change="directionalChange">
  460. <div class="title-item" v-for="(item,index) in directionalList" :key='index'>
  461. <label>
  462. <a-checkbox :value='item.id'>
  463. {{item.templateName+'_('+item.id+')'}}
  464. </a-checkbox>
  465. </label>
  466. </div>
  467. </a-checkbox-group>
  468. </div>
  469. </a-spin>
  470. </div>
  471. </div>
  472. <!-- <div class="moduler">
  473. <div class="moduler-title">预算和排期</div>
  474. <div class="ad-range">
  475. <div class="row-item" >
  476. <div class="hint-item"></div>
  477. <div class="label-item">
  478. <div class="text-item">投放时间</div>
  479. <div class="required-item"></div>
  480. </div>
  481. <div class="input-item">
  482. <a-form-item>
  483. <a-radio-group v-decorator="['scheduleType', { initialValue:'SCHEDULE_FROM_NOW' }]" @change="scheduleTypeChange">
  484. <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
  485. <a-radio-button value="SCHEDULE_START_END">设置开始和结束时间</a-radio-button>
  486. </a-radio-group>
  487. <p style="margin-top:15px">
  488. <a-range-picker
  489. @change="dateChange"
  490. v-model="dateRange"
  491. :disabled-date="disabledDate"
  492. v-if="getFormData('scheduleType')=='SCHEDULE_START_END'"
  493. />
  494. </p>
  495. </a-form-item>
  496. </div>
  497. </div>
  498. <div class="row-item">
  499. <div class="hint-item"></div>
  500. <div class="label-item">
  501. <div class="text-item">投放时段</div>
  502. <div class="required-item"></div>
  503. </div>
  504. <div class="input-item">
  505. <a-form-item>
  506. <a-radio-group v-decorator="['scheduleTimes', { initialValue:'' }]" >
  507. <a-radio-button value=''>不限</a-radio-button>
  508. <a-radio-button value="SpecifiedTImePeriod">指定时间段</a-radio-button>
  509. </a-radio-group>
  510. <div
  511. v-show="getFormData('scheduleTimes')=='SpecifiedTImePeriod'"
  512. style="margin-top:15px"
  513. >
  514. <scheduleTime
  515. style="width:100%"
  516. :scheduleTime.sync="scheduleTimeData"
  517. ref="selectCheck"
  518. />
  519. </div>
  520. </a-form-item>
  521. </div>
  522. </div>
  523. <div class="row-item">
  524. <div class="hint-item">
  525. </div>
  526. <div class="label-item">
  527. <div class="text-item">策略预算</div>
  528. <div class="required-item"></div>
  529. </div>
  530. <div class="input-item">
  531. <a-form-item>
  532. <a-radio-group v-decorator="['strategyBudget', { initialValue:'' }]" >
  533. <a-radio-button value=''>不限</a-radio-button>
  534. <a-radio-button value="unifiedBudget">统一预算</a-radio-button>
  535. </a-radio-group>
  536. <a-input-group compact v-if="getFormData('strategyBudget')=='unifiedBudget'" style="margin-top:20px">
  537. <a-select :disabled="true" v-decorator="['budgetMode', { initialValue:'TOTAL' }]">
  538. <a-select-option value="TOTAL" >总预算</a-select-option>
  539. <a-select-option
  540. value="TOTAL"
  541. v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'"
  542. >总预算</a-select-option>
  543. </a-select>
  544. <a-input style="width: 25%" v-decorator="['budget', { initialValue:300 }]" />
  545. </a-input-group>
  546. <span class="tip" v-if="getFormData('budget')<300">请输入预算,不少于300元,不超过9999999.99元</span>
  547. </a-form-item>
  548. </div>
  549. </div>
  550. </div>
  551. </div> -->
  552. <div class="moduler">
  553. <div class="moduler-title">优化目标和付费</div>
  554. <div class="ad-range">
  555. <div class="row-item" >
  556. <div class="hint-item"></div>
  557. <div class="label-item">
  558. <div class="text-item">优化目标</div>
  559. <!-- <div class="required-item"></div> -->
  560. </div>
  561. <div class="input-item">
  562. <a-form-item>
  563. <a-radio-group v-decorator="['bidType', { initialValue:10 }]" @change="bidTypeChange">
  564. <!-- <a-radio-button :value="2">封面点击数</a-radio-button> -->
  565. <a-radio-button :value="10">转化数</a-radio-button>
  566. </a-radio-group>
  567. </a-form-item>
  568. </div>
  569. </div>
  570. <div class="row-item" v-if="getFormData('bidType')==10">
  571. <div class="hint-item"></div>
  572. <div class="label-item">
  573. <div class="text-item">转化目标</div>
  574. <!-- <div class="required-item"></div> -->
  575. </div>
  576. <div class="input-item">
  577. <a-form-item>
  578. <a-select size="default" v-decorator="['ocpxActionType']" style="width: 200px" @change="handleChange">
  579. <a-select-option :value="2">行为数</a-select-option>
  580. <!-- v-if="getFormData('campaignType') == 2 && groupTypeData.isActivate == 1 -->
  581. <a-select-option :value="180" >激活</a-select-option>
  582. <a-select-option :value="53" v-if="
  583. groupTypeData.isFormSubmit == '1'
  584. ">表单提交</a-select-option>
  585. <a-select-option :value="394" v-if="
  586. groupTypeData.isOrderSubmit == '1'
  587. ">订单提交</a-select-option>
  588. <a-select-option :value="348" v-if="
  589. groupTypeData.isValidClue == '1'
  590. ">使用有效线索</a-select-option>
  591. <a-select-option :value="383" v-if="
  592. groupTypeData.isCreditGrant == '1'
  593. ">授信出价</a-select-option>
  594. <a-select-option :value="384" v-if="
  595. groupTypeData.isWanJian == '1'
  596. ">完件出价</a-select-option>
  597. <a-select-option :value="190" v-if="
  598. groupTypeData.isPurchase == '1'
  599. ">付费出价</a-select-option>
  600. <a-select-option :value="191" v-if="
  601. groupTypeData.isFirstdayRoi == '1'
  602. ">首日ROI</a-select-option>
  603. <a-select-option :value="396" v-if="
  604. groupTypeData.isRegister == '1'
  605. ">注册优化目标</a-select-option>
  606. </a-select>
  607. </a-form-item>
  608. </div>
  609. </div>
  610. <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) && groupTypeData.deepConversionTypes && groupTypeData.deepConversionTypes.length > 0 ">
  611. <div class="hint-item"></div>
  612. <div class="label-item">
  613. <div class="text-item">深度转化目标</div>
  614. <!-- <div class="required-item"></div> -->
  615. </div>
  616. <div class="input-item">
  617. <a-form-item>
  618. <a-select v-decorator="['deepConversionType']" allowClear style="width: 200px">
  619. <a-select-option v-for="(items, index) of groupTypeData.deepConversionTypes" :key="index" :value='items.deepConversionType'>
  620. {{ items.desc }}</a-select-option>
  621. </a-select>
  622. </a-form-item>
  623. </div>
  624. </div>
  625. <div class="row-item" >
  626. <div class="hint-item"></div>
  627. <div class="label-item">
  628. <div class="text-item">计费方式</div>
  629. <!-- <div class="required-item"></div> -->
  630. </div>
  631. <div class="input-item">
  632. <a-form-item>
  633. <a-radio-group v-model="chargeMethods">
  634. <a-radio-button v-if="getFormData('bidType')==2" value="CPC">点击计费(CPC)</a-radio-button>
  635. <a-radio-button v-if="getFormData('bidType')==10" value="OCPM">按展示付费(oCPM)</a-radio-button>
  636. </a-radio-group>
  637. </a-form-item>
  638. </div>
  639. </div>
  640. <div class="row-item" v-if="getFormData('bidType')==2">
  641. <div class="hint-item">
  642. </div>
  643. <div class="label-item">
  644. <div class="text-item">点击出价</div>
  645. <div class="required-item"></div>
  646. </div>
  647. <div class="input-item">
  648. <a-form-item>
  649. <a-input-number
  650. style="width:200px"
  651. :max="10000"
  652. :step="0.1"
  653. v-decorator="['bid', {rules:validationRules.bid} ]"
  654. />
  655. <span style="margin-left:5px">元</span>
  656. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  657. </a-form-item>
  658. <span
  659. class="tip"
  660. v-if="getFormData('bid')<0.1"
  661. >请输入点击出价,不少于0.1元,不超过10000元</span>
  662. </div>
  663. </div>
  664. <div class="row-item" v-if="getFormData('bidType')==10">
  665. <div class="hint-item">
  666. </div>
  667. <div class="label-item">
  668. <div class="text-item">转化目标出价</div>
  669. <div class="required-item"></div>
  670. </div>
  671. <div class="input-item">
  672. <a-form-item>
  673. <a-input-number
  674. style="width:200px"
  675. :max="10000"
  676. :step="0.1"
  677. v-decorator="['cpaBid', {rules:validationRules.bid} ]"
  678. />
  679. <span style="margin-left:5px">元</span>
  680. </a-form-item>
  681. <span
  682. class="tip"
  683. v-if="getFormData('cpaBid')<0.1"
  684. >请输入点击出价,不少于0.1元,不超过10000元</span>
  685. </div>
  686. </div>
  687. <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) && groupTypeData.deepConversionTypes && groupTypeData.deepConversionTypes.length > 0 ">
  688. <div class="hint-item">
  689. </div>
  690. <div class="label-item">
  691. <div class="text-item">深度转化目标出价</div>
  692. <!-- <div class="required-item"></div> -->
  693. <!-- {{getFormData('deepConversionBid')}} -->
  694. </div>
  695. <div class="input-item">
  696. <a-form-item>
  697. <a-input-number
  698. style="width:200px"
  699. :max="10000"
  700. :step="0.1"
  701. v-decorator="['deepConversionBid' ]"
  702. />
  703. <span style="margin-left:5px">元</span>
  704. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  705. </a-form-item>
  706. <!-- <span
  707. class="tip"
  708. v-if="getFormData('deepConversionBid')<0.1"
  709. >请输入点击出价,不少于0.1元,不超过10000元</span> -->
  710. </div>
  711. </div>
  712. </div>
  713. </div>
  714. <div class="moduler">
  715. <div class="moduler-title">创意信息</div>
  716. <div class="ad-range">
  717. <div class="row-item">
  718. <div class="hint-item"></div>
  719. <div class="label-item">
  720. <div class="text-item">广告位置</div>
  721. <div class="required-item"></div>
  722. </div>
  723. <div class="input-item">
  724. <a-form-item>
  725. <a-radio-group v-model="adposition" @change="adpositionChange">
  726. <a-radio-button :value='1'>优选广告位</a-radio-button>
  727. <a-radio-button value="inventoryTypes">按媒体指定位置</a-radio-button>
  728. </a-radio-group>
  729. </a-form-item>
  730. <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="adposition=='inventoryTypes'">
  731. <div class="inventory-tags-lists-header">
  732. <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
  733. </a-checkbox>
  734. <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
  735. </div>
  736. <div class="inventory-tags-lists-container">
  737. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  738. </div>
  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="['openProgramCreate', { initialValue:2 }]">
  751. <a-radio-button :value='2'>不限</a-radio-button>
  752. <a-radio-button :value="0">自定义</a-radio-button>
  753. <a-radio-button :value="1">程序化</a-radio-button>
  754. </a-radio-group>
  755. </a-form-item>
  756. </div>
  757. </div>
  758. <div class="row-item">
  759. <div class="hint-item"></div>
  760. <div class="label-item">
  761. <div class="text-item">素材类型</div>
  762. <div class="required-item"></div>
  763. </div>
  764. <div class="input-item">
  765. <a-form-item>
  766. <a-radio-group v-decorator="['channelType', { initialValue:2 }]">
  767. <a-radio-button :value='2'>不限</a-radio-button>
  768. <a-radio-button :value="0">内部</a-radio-button>
  769. <a-radio-button :value="1">素造</a-radio-button>
  770. </a-radio-group>
  771. </a-form-item>
  772. </div>
  773. </div>
  774. <div class="row-item">
  775. <div class="hint-item"></div>
  776. <div class="label-item">
  777. <div class="text-item">是否开启历史素材挖掘</div>
  778. <div class="required-item"></div>
  779. </div>
  780. <div class="input-item">
  781. <a-form-item>
  782. <a-radio-group v-decorator="['assetMining', { initialValue:0 }]">
  783. <a-radio-button :value='1'>是</a-radio-button>
  784. <a-radio-button :value="0">否</a-radio-button>
  785. </a-radio-group>
  786. </a-form-item>
  787. </div>
  788. </div>
  789. <div class="row-item" >
  790. <div class="hint-item"></div>
  791. <div class="label-item">
  792. <div class="text-item">是否开启智能抽帧</div>
  793. <div class="required-item"></div>
  794. </div>
  795. <div class="input-item">
  796. <a-form-item>
  797. <a-radio-group v-decorator="['smartCover', { initialValue:0 }]">
  798. <a-radio-button :value='1'>是</a-radio-button>
  799. <a-radio-button :value="0">否</a-radio-button>
  800. </a-radio-group>
  801. </a-form-item>
  802. </div>
  803. </div>
  804. <!-- <div class="row-item" >
  805. <div class="hint-item"></div>
  806. <div class="label-item">
  807. <div class="text-item">下载详情</div>
  808. <div class="required-item"></div>
  809. </div>
  810. <div class="input-item" >
  811. <a-form-item>
  812. <a-select
  813. v-decorator="['siteId']"
  814. showSearch
  815. allowClear
  816. placeholder="选择应用下载详情页"
  817. optionFilterProp="children"
  818. :filterOption="filterOption"
  819. style="width:400px"
  820. >
  821. <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
  822. {{ appModel.name }}
  823. </a-select-option>
  824. </a-select>
  825. </a-form-item>
  826. </div>
  827. </div> -->
  828. <div class="row-item" >
  829. <div class="hint-item"></div>
  830. <div class="label-item">
  831. <div class="text-item">监测链接选择</div>
  832. <div class="required-item"></div>
  833. </div>
  834. <div class="input-item">
  835. <a-form-item>
  836. <a-radio-group v-decorator="['generalTrack', { initialValue: 1 }]">
  837. <a-radio-button :value="1">通用</a-radio-button>
  838. <a-radio-button :value="0">非通用</a-radio-button>
  839. </a-radio-group>
  840. </a-form-item>
  841. </div>
  842. </div>
  843. <div class="row-item" v-if="getFormData('generalTrack')==1">
  844. <div class="hint-item"></div>
  845. <div class="label-item">
  846. <div class="text-item">点击监测链接</div>
  847. </div>
  848. <div class="input-item">
  849. <a-form-item>
  850. <a-input v-decorator="['clickTrackUrl']" @focus="clickTrackUrlFocus" @blur="clickTrackUrlBlur"/>
  851. <span v-show="clickTrackUrlTip" style="font-size:14px;color:red;">填写点击检测连接的话,开始播放链接必须填写</span>
  852. </a-form-item>
  853. </div>
  854. </div>
  855. <div class="row-item" v-if="getFormData('generalTrack')==1">
  856. <div class="hint-item"></div>
  857. <div class="label-item">
  858. <div class="text-item">开始播放监测链接</div>
  859. <!-- <div class="required-item"></div> -->
  860. </div>
  861. <div class="input-item">
  862. <a-form-item>
  863. <a-input v-decorator="['impressionUrl']" />
  864. </a-form-item>
  865. </div>
  866. </div>
  867. <div class="row-item" v-if="getFormData('generalTrack')==1">
  868. <div class="hint-item"></div>
  869. <div class="label-item">
  870. <div class="text-item">点击按钮监测链接</div>
  871. <!-- <div class="required-item"></div> -->
  872. </div>
  873. <div class="input-item">
  874. <a-form-item>
  875. <a-input v-decorator="['actionbarClickUrl']" />
  876. </a-form-item>
  877. </div>
  878. </div>
  879. <!-- <div class="row-item" v-if="whiteList.actionbar_click_url_switch&&getFormData('generalTrack')==1">
  880. <div class="hint-item"></div>
  881. <div class="label-item">
  882. <div class="text-item">第三方ActionBar点击监控链接</div>
  883. <div class="required-item"></div>
  884. </div>
  885. <div class="input-item">
  886. <a-form-item >
  887. <a-input
  888. v-decorator="[
  889. 'actionbarClickUrl',
  890. {
  891. rules: [{ message: '请输入第三方点击监控链接' }],
  892. },
  893. ]"
  894. placeholder="请输入第三方点击监控链接"
  895. >
  896. </a-input>
  897. <span style="color: red; position: relative; top: -10px">仅加白使用</span>
  898. </a-form-item>
  899. </div>
  900. </div> -->
  901. <div class="row-item" v-if="whiteList.creative_category_switch==1">
  902. <div class="hint-item"></div>
  903. <div class="label-item">
  904. <div class="text-item">创意分类</div>
  905. <div class="required-item" ></div>
  906. </div>
  907. <div class="input-item">
  908. <a-form-item >
  909. <a-cascader
  910. :options="createOptions"
  911. v-decorator="['creativeCategory',{ initialValue:[],rules: [{ required: whiteList.creative_category_switch==1, message: '创意分类必填' }] }]"
  912. :fieldNames="fieldNames"
  913. placeholder="请选择创意分类"
  914. />
  915. </a-form-item>
  916. </div>
  917. </div>
  918. <div class="row-item" v-if="whiteList.creative_category_switch==1">
  919. <div class="hint-item"></div>
  920. <div class="label-item">
  921. <div class="text-item">创意标签</div>
  922. <div class="required-item" ></div>
  923. </div>
  924. <div class="input-item">
  925. <a-form-item>
  926. <a-select
  927. mode="tags"
  928. style="width: 100%"
  929. placeholder="按回车生成标签"
  930. v-decorator="['creativeTag',{initialValue:[],rules: [ {required: whiteList.creative_category_switch==1, validator: creativeTagValid }]}]"
  931. dropdownClassName="display-none-selset"
  932. :token-separators="[',', ' ', ',']"
  933. >
  934. </a-select>
  935. <span v-if="getData('creativeTag')&&getData('creativeTag').length > 10" style="color:red">创意标签最多填写10个,请删减</span>
  936. </a-form-item>
  937. </div>
  938. </div>
  939. <div class="row-item">
  940. <div class="hint-item"></div>
  941. <div class="label-item">
  942. <div class="text-item">行动号召</div>
  943. <div class="required-item"></div>
  944. </div>
  945. <div class="input-item">
  946. <a-form-item >
  947. <a-select
  948. v-decorator="['actionBarText', { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }]"
  949. showSearch
  950. allowClear
  951. placeholder="选择行动号召按钮文案"
  952. optionFilterProp="children"
  953. :filterOption="filterOption"
  954. >
  955. <a-select-option v-for="appModel in actionBarTextList" :key="appModel.id" :value="appModel.actionBarText">
  956. {{ appModel.actionBarText }}
  957. </a-select-option>
  958. </a-select>
  959. </a-form-item>
  960. </div>
  961. </div>
  962. <div class="row-item">
  963. <div class="hint-item"></div>
  964. <div class="label-item">
  965. <div class="text-item">关联封面数</div>
  966. <div class="required-item"></div>
  967. </div>
  968. <div class="input-item">
  969. <a-form-item >
  970. <a-input-number
  971. style="width:200px"
  972. :max="15"
  973. :step="1"
  974. :min='1'
  975. v-decorator="['imageCnt',{ initialValue:1, rules: [{ required: true, message: '请填写关联封面数' }] } ]"
  976. />
  977. </a-form-item>
  978. </div>
  979. </div>
  980. <div class="row-item">
  981. <div class="hint-item"> </div>
  982. <div class="label-item">
  983. <div class="text-item">广告语</div>
  984. <div class="required-item"></div>
  985. </div>
  986. <div class="input-item">
  987. <a-form-item>
  988. <div style="position:relative">
  989. <a-textarea
  990. class="rending"
  991. placeholder="请输入广告语"
  992. @change="descriptionchange"
  993. v-decorator="['description',{rules: [ { required: true, message: '请填写广告语' }] } ]"
  994. :autosize="{ minRows: 2, maxRows: 6 }"
  995. :max-length="30"
  996. ></a-textarea>
  997. <p
  998. style="
  999. font-size: 12px;
  1000. color: #b6bbc7;
  1001. letter-spacing: 0.3px;
  1002. text-align: right;
  1003. line-height: 30px;
  1004. position: absolute;
  1005. bottom: 0;
  1006. right: 6px;
  1007. width: 100%;
  1008. margin-bottom: 0;
  1009. "
  1010. >
  1011. {{ description.length }}/30
  1012. <!-- {{ getFormData('description').length }}/30 -->
  1013. </p>
  1014. </div>
  1015. </a-form-item>
  1016. </div>
  1017. </div>
  1018. </div>
  1019. </div>
  1020. <!-- <div class="moduler">
  1021. <div class="opt">
  1022. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  1023. <a-button type="primary" @click="goNext" :loading="goNextloading">下一步</a-button>
  1024. </div>
  1025. </div> -->
  1026. <div class="moduler">
  1027. <!-- <div class="moduler-title">计划名称</div> -->
  1028. <div class="opt">
  1029. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  1030. <!-- -->
  1031. <a-button type="primary" @click="goNext" :loading="goNextloading">确定</a-button>
  1032. </div>
  1033. </div>
  1034. </a-form>
  1035. <div class="infoModal">
  1036. <a-modal v-model="visible" title="提示" @ok="handleOk" :keyboard='false' :maskClosable='false'>
  1037. <ul>
  1038. <li v-for="(item,index) in errorInfo" :key="index">
  1039. <span>账户{{LHKaccountInfo[index].title}}:</span>{{item.message || '定向设置成功'}}
  1040. </li>
  1041. </ul>
  1042. <template slot="footer">
  1043. <a-button key="back" @click="handleCancel">
  1044. 返回本页
  1045. </a-button>
  1046. <a-button key="submit" type="primary" @click="handleOk">
  1047. 下一步
  1048. </a-button>
  1049. </template>
  1050. </a-modal>
  1051. </div>
  1052. <a-modal v-model="convert" title="选择转化目标">
  1053. <template slot="footer">
  1054. <a-button key="back" @click="convert=false">取消</a-button>
  1055. <a-button key="submit" type="primary" @click="convert=false">
  1056. 确定
  1057. </a-button>
  1058. </template>
  1059. <a-form-item label="追踪方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  1060. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
  1061. <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
  1062. <a-radio-button value="1" v-show="getFormData('campaignType') == 4||getFormData('campaignType') == 5">JS布玛</a-radio-button>
  1063. <a-radio-button value="2" v-show="getFormData('campaignType') == 4||getFormData('campaignType') == 5">Xpath</a-radio-button>
  1064. <a-radio-button value="3"
  1065. v-show="getFormData('campaignType') == 2">应用-SDK
  1066. </a-radio-button>
  1067. <a-radio-button value="7" v-show="getFormData('campaignType') == 2">应用-API</a-radio-button>
  1068. </a-radio-group>
  1069. </a-form-item>
  1070. <a-form-item label="选择转化" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  1071. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
  1072. <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
  1073. <a-select-option :value="item.convert_id" v-for="item in convertList" :key="item.convert_id">
  1074. {{item.convert_name}}</a-select-option>
  1075. </a-select>
  1076. </a-form-item>
  1077. </a-modal>
  1078. <a-modal v-model="useDirectionalVisible" title="选择定向包" @ok="selectDirectionalOk" width='600px' height='500px'>
  1079. <div style="position:relative">
  1080. <span>当前选择模板数量:{{directionalCheckedList.length}}</span>
  1081. <a-checkbox :indeterminate="indeterminateDirectional" :checked="checkAllDirectional" @change="onCheckAllDirectionalChange" class="quanxuanDirectional">
  1082. <span>点击全选</span>
  1083. </a-checkbox>
  1084. </div>
  1085. <a-spin :spinning="directionalSpinning">
  1086. <div class="title-list">
  1087. <a-checkbox-group v-model="directionalCheckedList" @change="directionalChange">
  1088. <div class="title-item" v-for="(item,index) in directionalList" :key='index'>
  1089. <label>
  1090. <a-checkbox :value='item.id'>
  1091. {{item.templateName+'_('+item.id+')'}}
  1092. </a-checkbox>
  1093. </label>
  1094. </div>
  1095. </a-checkbox-group>
  1096. </div>
  1097. </a-spin>
  1098. </a-modal>
  1099. </a-spin>
  1100. </div>
  1101. </template>
  1102. <script>
  1103. import moment from 'moment'
  1104. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  1105. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  1106. import { TreeSelect } from 'ant-design-vue';
  1107. import qs from 'qs'
  1108. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  1109. // import selectCheckAll from './toutiaoTime'
  1110. import radioCheck from './components/radioCheck';
  1111. import linkMultiSelect from './components/linkMultiSelect'
  1112. import singleLayersSelecte from './components/singleLayerSelecte'
  1113. import scheduleTime from '@/components/formComponents/toutiaoTime'
  1114. import $ from "jquery"
  1115. // import { filter } from 'vue/types/umd';
  1116. var str = ""
  1117. for (let i = 0; i < 7*24; i++) {
  1118. str+='0'
  1119. }
  1120. let ageArr=[
  1121. {
  1122. value:'',
  1123. title:'不限',
  1124. checked:false,
  1125. },
  1126. {
  1127. value:18,
  1128. title:' 18-23岁',
  1129. checked:false,
  1130. },
  1131. {
  1132. value:24,
  1133. title:'24-30岁',
  1134. checked:false,
  1135. },
  1136. {
  1137. value:31,
  1138. title:'31-40岁',
  1139. checked:false,
  1140. },
  1141. {
  1142. value:41,
  1143. title:'41-49岁',
  1144. checked:false,
  1145. },
  1146. {
  1147. value:50,
  1148. title:'50岁+',
  1149. checked:false,
  1150. },
  1151. ]
  1152. let autoExtendOptions=[
  1153. {
  1154. label:'地域',
  1155. value:'REGION',
  1156. },
  1157. {
  1158. label:'性别',
  1159. value:'GENDER',
  1160. },
  1161. {
  1162. label:'年龄',
  1163. value:'AGE',
  1164. },
  1165. {
  1166. label:'行为兴趣',
  1167. value:'INTEREST_ACTION',
  1168. },
  1169. {
  1170. label:'自定义人群',
  1171. value:'CUSTOM_AUDIENCE',
  1172. },
  1173. ]
  1174. let retargetColumns=[
  1175. {
  1176. title: '人群包',
  1177. dataIndex: 'name',
  1178. sorter: true,
  1179. width: '40%',
  1180. scopedSlots: { customRender: 'name' },
  1181. },
  1182. {
  1183. title: '属性',
  1184. dataIndex: 'populationType',
  1185. scopedSlots: {
  1186. customRender: 'populationType'
  1187. },
  1188. width: 200
  1189. },
  1190. {
  1191. title: '所属账号',
  1192. dataIndex: 'accountId',
  1193. sorter: true,
  1194. width: '40%',
  1195. scopedSlots: { customRender: 'accountId' },
  1196. },
  1197. ]
  1198. const plainOptions = [
  1199. {
  1200. value: 6,
  1201. label: '上下滑大屏广告'
  1202. },
  1203. {
  1204. value: 7,
  1205. label: '信息流广告'
  1206. },
  1207. {
  1208. value: 3,
  1209. label: '视频播放页广告'
  1210. },
  1211. {
  1212. value: 5,
  1213. label: '联盟广告'
  1214. },
  1215. ];
  1216. export default {
  1217. components: {
  1218. // selectCheckAll,
  1219. // newDirectedPackage,
  1220. Treeselect,
  1221. radioCheck,
  1222. linkMultiSelect,
  1223. singleLayersSelecte,
  1224. scheduleTime
  1225. },
  1226. data() {
  1227. return {
  1228. clickTrackUrlTip:false,
  1229. deviceBrand:0,
  1230. tongbuLoading:false,
  1231. refreshPopulationLoading:false,
  1232. noAreaBreak:false,
  1233. noGenderBreak:false,
  1234. noAgeBreak:false,
  1235. regionList:[],
  1236. editRecordId:'',
  1237. spinning:false,
  1238. description:'',
  1239. whiteList:{},
  1240. actionBarTextList:[],
  1241. treeData:[],
  1242. accountId:undefined,
  1243. strategyName: '',
  1244. form: this.$form.createForm(this),
  1245. goNextloading:false,
  1246. goPlanShowloading:false,
  1247. dateRange: [moment(), moment()],
  1248. visible:false,
  1249. errorInfo:[],
  1250. fieldNames: {
  1251. label: 'category_name',
  1252. value: 'category_id',
  1253. children: 'child',
  1254. },
  1255. createOptions: [],
  1256. appStore: ["huawei", "oppo", "vivo", "xiaomi", "meizu", "smartisan"],
  1257. sysType:1,
  1258. indeterminateDirectional:false,
  1259. checkAllDirectional:false,
  1260. directionalList:[],
  1261. directionalSpinning:false,
  1262. directionalCheckedList:[],
  1263. useDirectional:1,
  1264. siteList:[],
  1265. tabKey:'1',
  1266. adposition:1,
  1267. groupTypeData:{},
  1268. convert: false,
  1269. convertId: "",
  1270. convertList: [],
  1271. convertType: '1',
  1272. strategyInfo:{},
  1273. accountInfo:{},
  1274. appList: [],
  1275. appListAll:[],
  1276. dateRange: [moment(), moment()],
  1277. scheduleTime: '',
  1278. scheduleTimeData:str,
  1279. projectInfo:[],
  1280. chargeMethods:'CPC',
  1281. unionVideoType:'REWARDED_VIDEO',
  1282. district:'NONE',
  1283. sceneInventory:'',
  1284. checkedList: [],
  1285. indeterminate: false,
  1286. checkAll: false,
  1287. plainOptions,
  1288. // 定向的参数
  1289. regionValue:'NONE',
  1290. ageArr,//受众年龄
  1291. region:[],
  1292. agesRange:[],
  1293. regionCityListUrl:'/kuaishou/batch/getRegion',
  1294. regionCountyListUrl:'/kuaishou/batch/getRegion',
  1295. // 自定义人群
  1296. // 自定义人群参数
  1297. retargetColumns,
  1298. retargetData:[],
  1299. retargetDataAll:[],
  1300. loading:false,
  1301. customCrowd:'NONE',//自定义人群 选择的值
  1302. selectedRowKeys:[],
  1303. incluedSelectedRowKeys:[],
  1304. incluedSelectedKeys:[],
  1305. excludeSelectedKeys:[],
  1306. excludeSelectedRowKeys:[],
  1307. autoExtendEnabled:0,//智能放量是否开启
  1308. autoExtendOptions,//智能投放可选定向数组
  1309. autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
  1310. autoExtendTargetsChecked:[],
  1311. radioStyle: {
  1312. display: 'block',
  1313. height: '30px',
  1314. lineHeight: '30px',
  1315. padding: '0 15px'
  1316. },
  1317. goNextloading:false,
  1318. goPlanShowloading:false,
  1319. dateRange: [moment(), moment()],
  1320. visible:false,
  1321. errorInfo:[],
  1322. validationRules: {
  1323. url: [
  1324. {
  1325. required: true,
  1326. validator: this.validateURL,
  1327. },
  1328. ],
  1329. name:[{
  1330. required: true,
  1331. validator: this.validateName,
  1332. }],
  1333. bid:[{
  1334. required: true,
  1335. message:'出价信息必须填写',
  1336. // validator: this.validateBid,
  1337. }],
  1338. roi:[{
  1339. required: true,
  1340. message:'ROI系数必须填写',
  1341. // validator: this.validateBid,
  1342. }],
  1343. },
  1344. useDirectionalVisible:false,
  1345. }
  1346. },
  1347. watch: {
  1348. accountId(newValue,oldValue){
  1349. setTimeout(()=>{
  1350. this.form.setFieldsValue({
  1351. appId:undefined,
  1352. ocpxActionType:undefined
  1353. })
  1354. },0)
  1355. if(newValue){
  1356. // this.treeData.forEach(item=>{
  1357. // if(item.children){
  1358. // item.children.forEach(ele=>{
  1359. // if(ele.value==newValue){
  1360. // this.$parent.accountInfo=ele
  1361. // }
  1362. // })
  1363. // }
  1364. // })
  1365. this.getAppList()
  1366. getAction('/kuaishou/batch/getIsActivate', {
  1367. accountId: this.accountId
  1368. }).then(res => {
  1369. if (res.success) {
  1370. this.groupTypeData = res.result
  1371. }
  1372. })
  1373. getAction('/kuaishou/batch/getCreativeCategory', {
  1374. accountId:this.accountId,
  1375. }).then((res) => {
  1376. if (res.success) {
  1377. console.log(res)
  1378. this.createOptions = res.result
  1379. }
  1380. })
  1381. this.getWhiteList()
  1382. this.getpopulationlist()
  1383. }else{
  1384. }
  1385. },
  1386. },
  1387. computed: {
  1388. hasSelected() {
  1389. return this.selectedRowKeys.length > 0;
  1390. },
  1391. rowSelection() {
  1392. return {
  1393. // selectedRowKeys: this.incluedSelectedRowKeys,
  1394. onChange: (selectedRowKeys, selectedRows) => {
  1395. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  1396. this.incluedSelectedRowKeys = selectedRowKeys;
  1397. this.incluedSelectedKeys=selectedRows
  1398. },
  1399. getCheckboxProps: record => ({
  1400. props: {
  1401. disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
  1402. name: record.name,
  1403. defaultChecked:this.incluedSelectedRowKeys.indexOf(record.key)>-1
  1404. },
  1405. }),
  1406. };
  1407. },
  1408. rowSelection2() {
  1409. return {
  1410. // selectedRowKeys: this.excludeSelectedRowKeys,
  1411. onChange: (selectedRowKeys, selectedRows) => {
  1412. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  1413. // this.selectedRowKeys = selectedRowKeys;
  1414. this.excludeSelectedRowKeys = selectedRowKeys;
  1415. this.excludeSelectedKeys=selectedRows
  1416. },
  1417. getCheckboxProps: record => ({
  1418. props: {
  1419. disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
  1420. name: record.name,
  1421. defaultChecked:this.excludeSelectedRowKeys.indexOf(record.key)>-1
  1422. },
  1423. }),
  1424. };
  1425. },
  1426. },
  1427. methods: {
  1428. platformOsChange(e){
  1429. console.log(e);
  1430. this.deviceBrand=0;
  1431. this.sysType=e.target.value;
  1432. this.sysTypeChange(e)
  1433. },
  1434. refreshPopulation(){
  1435. if(this.accountId){
  1436. this.refreshPopulationLoading = true
  1437. // this.$refs.application.showApplication()
  1438. getAction('/kuaishou/batch/pullPopulationList', {
  1439. accountId: this.accountId
  1440. }).then(res => {
  1441. if (res.success) {
  1442. this.refreshPopulationLoading = false
  1443. this.$message.success(res.message)
  1444. this.retargetTabChange()
  1445. } else {
  1446. this.refreshPopulationLoading = false
  1447. this.$message.error(res.message)
  1448. }
  1449. })
  1450. }else{
  1451. this.$message.error('请先选择账户')
  1452. }
  1453. },
  1454. addApplication() {
  1455. if(this.accountId){
  1456. this.tongbuLoading = true
  1457. // this.$refs.application.showApplication()
  1458. getAction('/kuaishou/batch/syncAppList', {
  1459. accountId: this.accountId
  1460. }).then(res => {
  1461. if (res.success) {
  1462. this.tongbuLoading = false
  1463. this.$message.success(res.message)
  1464. this.getAppList()
  1465. } else {
  1466. this.tongbuLoading = false
  1467. this.$message.error(res.message)
  1468. }
  1469. })
  1470. }else{
  1471. this.$message.error('请先选择账户')
  1472. }
  1473. },
  1474. getIsActivate(val){
  1475. let params={};
  1476. params.accountId=this.accountId;
  1477. params.campaignType=this.getFormData('campaignType');
  1478. params.appId=val
  1479. getAction('/kuaishou/batch/getIsActivate',params).then(res => {
  1480. if (res.success) {
  1481. this.groupTypeData = res.result
  1482. }
  1483. })
  1484. },
  1485. isOpenChange(e){
  1486. this.noAreaBreak=false;
  1487. this.noGenderBreak=false;
  1488. this.noAgeBreak=false;
  1489. },
  1490. selectAllAppId(){
  1491. console.log(this.getFormData('appId'))
  1492. },
  1493. singleAppidChange(e){
  1494. // console.log(e.target.value,this.getFormData('appId'));
  1495. this.form.setFieldsValue({
  1496. appId:undefined
  1497. })
  1498. },
  1499. descriptionchange(e){
  1500. this.description=e.target.value
  1501. },
  1502. //获取表单的某一个属性值
  1503. getFormData(className) {
  1504. return this.form.getFieldValue(className)
  1505. },
  1506. dateChange(date, dateString) {
  1507. // console.log(date,dateString)
  1508. this.form.getFieldDecorator('startTime')
  1509. this.form.getFieldDecorator('endTime')
  1510. this.form.setFieldsValue({
  1511. startTime: date[0].format('YYYY-MM-DD HH:mm'),
  1512. endTime: date[1].format('YYYY-MM-DD HH:mm'),
  1513. })
  1514. },
  1515. //推广目的改变
  1516. campaignTypeChange(e){
  1517. console.log(e.target)
  1518. let strategyNamepart=this.campaignTypeHandle(e.target.value);
  1519. this.strategyName ='[策略]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;
  1520. this.getActionBarText()
  1521. },
  1522. goBack() {
  1523. this.$router.replace('/autoLaunch/configLaunchList')
  1524. this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  1525. this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)
  1526. },
  1527. //请求项目和账户内容
  1528. accountHttp(){
  1529. this.treeData=[];
  1530. this.accountIds=[];
  1531. getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=2', {}).then(res => {
  1532. if(res.success){
  1533. // console.log(res);
  1534. if(res.result){
  1535. res.result.forEach((element,index) => {
  1536. if(element){
  1537. this.treeData.push({});
  1538. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  1539. this.treeData[index].value='project'+element.project.projectId;
  1540. this.treeData[index].key=element.project.projectId;
  1541. this.treeData[index].mediaId=element.project.mediaId;
  1542. this.treeData[index].children=[];
  1543. if(element.account.length){
  1544. element.account.forEach((ele,i)=>{
  1545. this.treeData[index].children.push({});
  1546. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  1547. this.treeData[index].children[i].value=ele.accountId;
  1548. this.treeData[index].children[i].key=ele.accountId;
  1549. })
  1550. }
  1551. }
  1552. });
  1553. // console.log(this.treeData)
  1554. }
  1555. }
  1556. })
  1557. },
  1558. campaignTypeHandle(val){
  1559. let str='';
  1560. switch (val) {
  1561. case '2':
  1562. str='应用安装'
  1563. break;
  1564. case '3':
  1565. str='电商下单'
  1566. break;
  1567. case '4':
  1568. str='推广品牌'
  1569. break;
  1570. case '5':
  1571. str='营销线索'
  1572. break;
  1573. case '7':
  1574. str='应用活跃'
  1575. break;
  1576. default:
  1577. str='转化错误'
  1578. break;
  1579. }
  1580. return str
  1581. },
  1582. creativeTagValid(rule, value, callback) {
  1583. console.log(rule, value, callback)
  1584. if(value.length == 0 || value==undefined){
  1585. // console.log(1)
  1586. callback('创意标签必须填写')
  1587. }else if (value.length > 10) {
  1588. callback('创意标签最多填写10个,请删减')
  1589. }else{
  1590. // console.log(2)
  1591. callback()
  1592. }
  1593. },
  1594. directionalChange(checkedList) {
  1595. // console.log(checkedList)
  1596. this.indeterminateDirectional = !!checkedList.length && checkedList.length < this.directionalList.length;
  1597. this.checkAllDirectional = checkedList.length === this.directionalList.length;
  1598. },
  1599. onCheckAllDirectionalChange(e) {
  1600. console.log(e)
  1601. let valueOption=[];
  1602. valueOption=this.directionalList.map(item=>{
  1603. return item.id
  1604. })
  1605. Object.assign(this, {
  1606. directionalCheckedList: e.target.checked ? valueOption : [],
  1607. indeterminateDirectional: false,
  1608. checkAllDirectional: e.target.checked,
  1609. });
  1610. },
  1611. selectDirectionalOk(e){
  1612. this.useDirectionalVisible=false
  1613. },
  1614. useDirectionalChange(e){
  1615. console.log(e);
  1616. if(e.target.value==0){
  1617. // this.useDirectionalVisible=true;
  1618. this.getUserDirectional()
  1619. }
  1620. },
  1621. // 获取定向包
  1622. getUserDirectional(){
  1623. getAction('/kuaishou/batch/getDirectionalTemplate',{
  1624. accountId:this.accountId
  1625. }).then(res=>{
  1626. console.log(res);
  1627. this.directionalList=res.result
  1628. })
  1629. },
  1630. appIdChange(val){
  1631. console.log(val)
  1632. this.siteList=[]
  1633. // this.getPageList(val)
  1634. if(this.getFormData('singleAppid')==0){
  1635. if(val&&val.indexOf(0)>-1){
  1636. let appidArr=this.appList.map(item=>{
  1637. return item.appId
  1638. })
  1639. // setTimeout(()=>{
  1640. // this.form.setFieldsValue({
  1641. // appId:appidArr
  1642. // })
  1643. // },0)
  1644. this.$nextTick(()=>{
  1645. this.form.setFieldsValue({
  1646. appId:appidArr
  1647. })
  1648. })
  1649. }
  1650. }
  1651. if(val!=undefined || (val&&val.length>0) ){
  1652. if(this.getFormData('campaignType')==2){
  1653. if(this.getFormData('singleAppid')==1){
  1654. this.getIsActivate(val)
  1655. }else{
  1656. this.getIsActivate(val[0])
  1657. }
  1658. }
  1659. }
  1660. },
  1661. disabledDate(current) {
  1662. return current && current < moment().subtract(1, 'day')
  1663. },
  1664. bidTypeChange(e){
  1665. console.log(e);
  1666. this.chargeMethods=e.target.value==10?"OCPM":'CPC'
  1667. },
  1668. getData(className) {
  1669. return this.form.getFieldValue(className)
  1670. },
  1671. handleChange(val){
  1672. console.log(val)
  1673. },
  1674. // 投放日期改变
  1675. scheduleTypeChange(val){
  1676. console.log(val)
  1677. if(val=='SCHEDULE_FROM_NOW'){
  1678. this.dateRange=[moment(),moment().add(10,'years')]
  1679. }else{
  1680. this.dateRange=[moment(),moment().add(10,'days')]
  1681. }
  1682. },
  1683. filterOption(input, option) {
  1684. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1685. },
  1686. adpositionChange(){
  1687. if(this.adposition!='inventoryTypes'){
  1688. this.checkedList=[];
  1689. this.indeterminate=false;
  1690. this.checkAll=false;
  1691. }
  1692. },
  1693. cityChange(){
  1694. this.region=[];
  1695. },
  1696. onChange(checkedList) {
  1697. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  1698. this.checkAll = checkedList.length === plainOptions.length;
  1699. },
  1700. onCheckAllChange(e) {
  1701. let valueOption = [];
  1702. this.plainOptions.forEach((item) => {
  1703. valueOption.push(item.value)
  1704. })
  1705. Object.assign(this, {
  1706. checkedList: e.target.checked ? valueOption : [],
  1707. indeterminate: false,
  1708. checkAll: e.target.checked,
  1709. });
  1710. },
  1711. customCrowdChange(e){
  1712. console.log(e);
  1713. if(e.target.value=='1' || e.target.value=='2'){
  1714. this.retargetTabChange();
  1715. this.tabKey=e.target.value
  1716. }else if(e.target.value=='3'){
  1717. this.retargetTabChange();
  1718. this.tabKey='1'
  1719. }
  1720. },
  1721. // 自定义人群的--同时定向排除tab切换事件
  1722. retargetTabChange(){
  1723. console.log()
  1724. this.retargetDataAll=[];
  1725. this.loading=true;
  1726. getAction('/kuaishou/batch/getPopulationList',{
  1727. accountId:this.accountId
  1728. }).then((res)=>{
  1729. // console.log(res)
  1730. this.loading=false;
  1731. if(res.success){
  1732. res.result.forEach((ele)=>{
  1733. ele.key=ele.orientationId
  1734. ele.id= ele.orientationId
  1735. ele.name=ele.orientationName+"("+ele.orientationId+")"
  1736. // ele.accountName=this.accountInfo.title
  1737. ele.accountId=this.accountId
  1738. })
  1739. // this.retargetData=res.data;
  1740. this.retargetDataAll=[...this.retargetDataAll,...res.result];
  1741. }
  1742. })
  1743. },
  1744. onSelectChange(selectedRowKeys) {
  1745. // console.log('selectedRowKeys changed: ', selectedRowKeys);
  1746. this.selectedRowKeys = selectedRowKeys;
  1747. },
  1748. // 自定义人群的改变
  1749. retargetTableChange(pagination, filters, sorter){
  1750. // console.log(pagination);
  1751. },
  1752. //获取选中的城市
  1753. getSelectedCityArr(val){
  1754. console.log(val);
  1755. this.region=[];
  1756. this.region=val;
  1757. },
  1758. // 获取选中的区县
  1759. getSelectedCountyArr(val){
  1760. // console.log(val)
  1761. this.region=[];
  1762. this.region=val;
  1763. },
  1764. //获取选中的年龄段
  1765. getAgeSelect(val){
  1766. // console.log(val)
  1767. if(val.length==1&&val[0]==""){
  1768. this.agesRange=[]
  1769. }else{
  1770. this.agesRange=val;
  1771. }
  1772. },
  1773. //获取智能放量定向的值
  1774. getAutoExtendEnabled(val){
  1775. // console.log(val)
  1776. this.autoExtendTargets=[];
  1777. this.autoExtendTargets.push(...val)
  1778. },
  1779. callback(val) {
  1780. console.log(val);
  1781. },
  1782. handleOk(e) {
  1783. this.visible=false;
  1784. this.$router.push({path:'/LaunchHousekeeper/setProjectCreate'})
  1785. },
  1786. handleCancel(e) {
  1787. this.visible = false;
  1788. },
  1789. // 直达链接是否启用
  1790. useOpenUrlChange(){
  1791. this.form.setFieldsValue({
  1792. openUrl:''
  1793. })
  1794. },
  1795. //获取表单的某一个属性值
  1796. getFormData(className) {
  1797. return this.form.getFieldValue(className)
  1798. },
  1799. dateChange(date, dateString) {
  1800. // console.log(date,dateString)
  1801. this.form.getFieldDecorator('beginTime')
  1802. this.form.getFieldDecorator('endTime')
  1803. this.form.setFieldsValue({
  1804. beginTime: date[0].format('YYYY-MM-DD HH:mm'),
  1805. endTime: date[1].format('YYYY-MM-DD HH:mm'),
  1806. })
  1807. },
  1808. // 验证网址
  1809. IsURL(res) {
  1810. // var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
  1811. var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
  1812. var re = new RegExp(strRegex)
  1813. // console.log(re.test(res))
  1814. if (re.test(res)) {
  1815. return true
  1816. } else {
  1817. return false
  1818. }
  1819. },
  1820. validateURL(rule, value, callback) {
  1821. // console.log(rule, value, callback);
  1822. if (this.IsURL(value)) {
  1823. callback()
  1824. } else if (value && !this.IsURL(value)) {
  1825. callback('链接地址无法访问,请正确输入')
  1826. } else {
  1827. callback('链接必须填写')
  1828. }
  1829. },
  1830. validateName(rule, value, callback){
  1831. // console.log(rule, value, callback);
  1832. if (value) {
  1833. callback()
  1834. } else {
  1835. callback('应用包名称必须填写')
  1836. }
  1837. },
  1838. validateBid(rule, value, callback){
  1839. // console.log(rule, value, callback);
  1840. if (value) {
  1841. callback()
  1842. } else {
  1843. callback('出价必须填写')
  1844. }
  1845. },
  1846. // 保存并新建创意
  1847. goNext() {
  1848. this.$nextTick(()=>{
  1849. this.form.validateFields((err, values) => {
  1850. console.log(values)
  1851. if (!err) {
  1852. this.goNextloading=true;
  1853. if(this.district!='NONE'){
  1854. values.district=this.district
  1855. }
  1856. console.log(this.excludeSelectedKeys,this.incluedSelectedKeys)
  1857. // 设置广告位值
  1858. if(this.adposition!='inventoryTypes'){
  1859. this.checkedList=[];
  1860. values.sceneId=JSON.stringify([this.adposition])
  1861. }else{
  1862. values.sceneId=JSON.stringify(this.checkedList)
  1863. }
  1864. // 时间段值
  1865. // if(this.getFormData('scheduleTime')!=''){
  1866. // values.scheduleTime=this.scheduleTimeData
  1867. // }else{
  1868. // values.scheduleTime=''
  1869. // }
  1870. // 投放时间的值
  1871. // if(this.getFormData('scheduleType')=='SCHEDULE_FROM_NOW'){
  1872. // values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
  1873. // values.endTime= this.dateRange[1].add(10,"years").format('YYYY-MM-DD');
  1874. // }else{
  1875. // values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
  1876. // values.endTime= this.dateRange[1].format('YYYY-MM-DD');
  1877. // }
  1878. values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId):JSON.stringify([values.appId])
  1879. values.appId=undefined;
  1880. values.agesRange=JSON.stringify(this.agesRange)
  1881. values.region=JSON.stringify(this.region);
  1882. values.convertId=this.convertId==''?undefined:this.convertId;
  1883. let excludePopulation=this.excludeSelectedKeys.map(item=>{
  1884. return item.id
  1885. })
  1886. let population=this.incluedSelectedKeys.map(item=>{
  1887. return item.id
  1888. })
  1889. values.excludePopulation=excludePopulation.length>0?JSON.stringify(excludePopulation):undefined;
  1890. values.population=population.length>0?JSON.stringify(population):undefined;
  1891. values.useAppMarket=values.useAppMarket?'1':'0'
  1892. // if(this.useDirectional==0){
  1893. // values.templateId=this.directionalCheckedList
  1894. // }
  1895. if(this.sysType==1&&this.getData('useAppMarket')){
  1896. values.appStore=JSON.stringify(this.appStore)
  1897. }else if(this.sysType==1&&!this.getData('useAppMarket')){
  1898. values.appStore="[]"
  1899. }
  1900. if(values.cpaBid){
  1901. values.cpaBid=parseInt(values.cpaBid*1000)
  1902. }
  1903. if(values.deepConversionBid){
  1904. values.deepConversionBid=parseInt(values.deepConversionBid*1000)
  1905. }
  1906. if(values.creativeCategory&&values.creativeCategory.length>0){
  1907. values.creativeCategory=values.creativeCategory[values.creativeCategory.length-1]
  1908. }else{
  1909. values.creativeCategory=undefined
  1910. }
  1911. if(this.deviceBrand==0){
  1912. }
  1913. values.deviceBrand=this.deviceBrand==0?'[0]':JSON.stringify(values.deviceBrand)
  1914. values.accountId = this.accountId
  1915. values.creativeTag=values.creativeTag?JSON.stringify(values.creativeTag):undefined
  1916. values.noAreaBreak=this.noAreaBreak?1:0
  1917. values.noGenderBreak=this.noGenderBreak?1:0
  1918. values.noAgeBreak=this.noAgeBreak?1:0
  1919. console.log('Received values of form: ', values)
  1920. let url=''
  1921. if(this.editRecordId){
  1922. url='/ctop/aiKuaishouAdvertiserStrategy/edit';
  1923. values.id=this.editRecordId
  1924. }else{
  1925. url='/ctop/aiKuaishouAdvertiserStrategy/add'
  1926. }
  1927. postAction(url,values).then(res=>{
  1928. console.log(res)
  1929. this.goNextloading=false
  1930. if(res.success){
  1931. this.$router.replace('/autoLaunch/configLaunchList')
  1932. this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  1933. this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)
  1934. }else{
  1935. this.$message.error(res.message)
  1936. // this.$router.replace('/autoLaunch/configLaunchList')
  1937. // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  1938. // this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)
  1939. }
  1940. })
  1941. // $.ajax({
  1942. // url:'http://192.168.1.193:31012/add_advertiser_strategy',
  1943. // type:"POST",
  1944. // data:JSON.stringify(values),
  1945. // crossDomain:true,
  1946. // contentType:"application/json; charset=utf-8;",
  1947. // dataType:'json',
  1948. // success:(res)=>{
  1949. // this.goNextloading=false
  1950. // console.log(res)
  1951. // let result=JSON.parse(res)
  1952. // if(result.code==0){
  1953. // this.$router.replace('/autoLaunch/configLaunchList')
  1954. // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  1955. // }else{
  1956. // this.$message.error(result.message)
  1957. // this.$router.replace('/autoLaunch/configLaunchList')
  1958. // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
  1959. // }
  1960. // },
  1961. // error:(res)=>{
  1962. // console.log(res)
  1963. // }
  1964. // })
  1965. }else{
  1966. this.$message.error('请正确填写必填项目')
  1967. }
  1968. })
  1969. })
  1970. },
  1971. // 获取applist
  1972. getAppList() {
  1973. let params = {}
  1974. params.accountId = this.accountId
  1975. getAction('/kuaishou/batch/getAppList', params).then(res => {
  1976. if (res.success) {
  1977. this.appListAll = res.result.map((item, index) => {
  1978. return {
  1979. ...item,
  1980. key: index
  1981. }
  1982. })
  1983. if(this.sysType==1){
  1984. this.appList=this.appListAll.filter(item=>{
  1985. return item.platform==1||item.platform==2
  1986. })
  1987. }else if(this.sysType==2){
  1988. this.appList=this.appListAll.filter(item=>{
  1989. return item.platform==3||item.platform==4
  1990. })
  1991. }
  1992. }
  1993. })
  1994. },
  1995. convertChange() {
  1996. this.convertId = ""
  1997. },
  1998. getConvertList() {
  1999. var params = {}
  2000. params.accountId = this.accountId
  2001. params.type = this.convertType
  2002. getAction('/kuaishou/batch/getConvertList', params).then(res => {
  2003. console.log(res)
  2004. if (res.success) {
  2005. this.convertList = res.result.map(item => {
  2006. return {
  2007. ...item,
  2008. convert_id: item.convert_id + ''
  2009. }
  2010. })
  2011. }
  2012. })
  2013. },
  2014. sysTypeChange(e){
  2015. console.log(e.target.value);
  2016. this.form.setFieldsValue({
  2017. appId:undefined,
  2018. platformOs:e.target.value
  2019. })
  2020. // if(this.getFormData('campaignType')==2 || this.getFormData('campaignType')==7){
  2021. // this.appIdChange(this.getFormData('appId'))
  2022. // }
  2023. if(this.sysType==1){
  2024. this.appList=this.appListAll.filter(item=>{
  2025. return (item.platform==1 || item.platform==2)
  2026. })
  2027. }else if(this.sysType==2){
  2028. this.appList=this.appListAll.filter(item=>{
  2029. return (item.platform==3||item.platform==4)
  2030. })
  2031. }
  2032. },
  2033. getPlatForm(appId) {
  2034. if (appId) {
  2035. var data = this.appList.filter(item => {
  2036. return item.appId == appId
  2037. })
  2038. return data[0].platform
  2039. }
  2040. },
  2041. showConvert() {
  2042. this.convertChange()
  2043. if (this.getFormData('campaignType') == 2) {
  2044. if (this.getData('appId')) {
  2045. this.convert = true;
  2046. let appIdvalue=this.getData('appId');
  2047. if (this.getPlatForm(appIdvalue instanceof Array?appIdvalue[0]:appIdvalue) == 1 || this.getPlatForm(appIdvalue instanceof Array?appIdvalue[0]:appIdvalue) == 2) {
  2048. this.convertType = '3'
  2049. } else {
  2050. this.convertType = '7'
  2051. }
  2052. } else {
  2053. this.$message.error('请选择应用')
  2054. }
  2055. } else {
  2056. this.convert = true
  2057. this.convertType = '1'
  2058. }
  2059. this.getConvertList()
  2060. },
  2061. getPageList(appId) {
  2062. getAction('/kuaishou/batch/getPageList', {
  2063. accountId: this.accountId,
  2064. appId: appId,
  2065. viewComp: 7,
  2066. }).then((res) => {
  2067. if (res.success) {
  2068. this.siteList = res.result
  2069. }
  2070. })
  2071. },
  2072. // 获取行动号召按钮
  2073. getActionBarText(){
  2074. this.actionBarTextList=[]
  2075. getAction('/kuaishou/batch/getActionBarTextByType', {
  2076. type:this.getFormData('campaignType')
  2077. }).then((res) => {
  2078. if (res.success) {
  2079. this.actionBarTextList = res.result
  2080. }
  2081. })
  2082. },
  2083. // 获取创意分类创意标签白名单
  2084. getWhiteList(){
  2085. this.whiteList={}
  2086. getAction('/kuaishou/batch/getWhiteList', {
  2087. accountId: this.accountId,
  2088. }).then((res) => {
  2089. if (res.success) {
  2090. // console.log(res)
  2091. if (res.result) {
  2092. this.whiteList=res.result
  2093. }
  2094. }
  2095. })
  2096. },
  2097. editEchoPage(){
  2098. this.spinning=true;
  2099. if(this.editRecordId){
  2100. getAction('/ctop/aiKuaishouAdvertiserStrategy/queryById',{
  2101. id:this.editRecordId
  2102. }).then(res=>{
  2103. console.log(res);
  2104. this.accountId=res.result.accountId;
  2105. this.description=res.result.description
  2106. // res.result.creativeTag=res.result.creativeTag?res.result.creativeTag:[]
  2107. this.sysType=res.result.platformOs
  2108. let fngetIsActivate=new Promise((resolve,reject)=>{
  2109. getAction('/kuaishou/batch/getIsActivate', {
  2110. accountId: this.accountId
  2111. }).then(res => {
  2112. if (res.success) {
  2113. this.groupTypeData = res.result
  2114. resolve()
  2115. }
  2116. })
  2117. })
  2118. let fngetWhite=new Promise((resolve,reject)=>{
  2119. getAction('/kuaishou/batch/getIsActivate', {
  2120. accountId: this.accountId
  2121. }).then(res => {
  2122. if (res.success) {
  2123. this.groupTypeData = res.result
  2124. resolve()
  2125. }
  2126. })
  2127. })
  2128. Promise.all([fngetIsActivate,fngetWhite]).then(r=>{
  2129. // this.form.setFieldsValue({
  2130. // ...res.result,
  2131. // creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
  2132. // useAppMarket:res.result.useAppMarket==1?true:false,
  2133. // isOpen:res.result.isOpen?res.result.isOpen:0,
  2134. // cpaBid:res.result.cpaBid/1000,
  2135. // appId:res.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray)
  2136. // })
  2137. if(res.result.creativeCategory){
  2138. // let arr=[];
  2139. if(res.result.creativeCategory>10000){
  2140. res.result.creativeCategory=res.result.creativeCategory?[parseInt(res.result.creativeCategory/10000),parseInt(res.result.creativeCategory/100),res.result.creativeCategory]:[];
  2141. }else if(res.result.creativeCategory>100){
  2142. res.result.creativeCategory=res.result.creativeCategory?[parseInt(res.result.creativeCategory/100),res.result.creativeCategory]:[];
  2143. }else{
  2144. res.result.creativeCategory=res.result.creativeCategory?[res.result.creativeCategory]:[];
  2145. }
  2146. }
  2147. if(res.result.deviceBrand){
  2148. this.deviceBrand=res.result.deviceBrand.indexOf(0)>-1?0:1;
  2149. }
  2150. setTimeout(()=>{
  2151. this.form.setFieldsValue({
  2152. ...res.result,
  2153. creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
  2154. useAppMarket:res.result.useAppMarket==1?true:false,
  2155. isOpen:res.result.isOpen?res.result.isOpen:0,
  2156. cpaBid:res.result.cpaBid/1000,
  2157. appId:res.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray),
  2158. deviceBrand:res.result.deviceBrand?JSON.parse(res.result.deviceBrand):[],
  2159. })
  2160. },0)
  2161. if((res.result.ocpxActionType == 180 || res.result.ocpxActionType == 53) && this.groupTypeData.deepConversionTypes&&this.groupTypeData.deepConversionTypes.length > 0){
  2162. // console.log(1)
  2163. setTimeout(()=>{
  2164. this.form.setFieldsValue({
  2165. deepConversionType:res.result.deepConversionType,
  2166. })
  2167. if(res.result.deepConversionBid!=null){
  2168. this.form.setFieldsValue({
  2169. deepConversionBid:res.result.deepConversionBid/1000,
  2170. })
  2171. }
  2172. },0)
  2173. }
  2174. // console.log(this.getFormData('deepConversionBid'))
  2175. this.noAreaBreak=res.result.noAreaBreak?true:false
  2176. this.noGenderBreak=res.result.noGenderBreak?true:false
  2177. this.noAgeBreak=res.result.noAgeBreak?true:false
  2178. this.appStore=res.result.appStore?JSON.parse(res.result.appStore):[]
  2179. this.ageArr=[];
  2180. this.ageArr=JSON.parse(JSON.stringify(ageArr))
  2181. let agesRange=res.result.agesRange?JSON.parse(res.result.agesRange):[]
  2182. if(agesRange.length>0){
  2183. agesRange.forEach((item,index)=>{
  2184. this.ageArr.forEach((ele)=>{
  2185. if(ele.value==item){
  2186. ele.checked=true;
  2187. }
  2188. })
  2189. });
  2190. }
  2191. let sceneId=res.result.sceneId?JSON.parse(res.result.sceneId):[]
  2192. if(sceneId.length==1&&sceneId[0]==1){
  2193. this.adposition=1
  2194. }else{
  2195. this.adposition='inventoryTypes';
  2196. this.checkedList=sceneId
  2197. }
  2198. if(res.result.population&&res.result.excludePopulation){
  2199. this.form.setFieldsValue({
  2200. customCrowd:'3'
  2201. })
  2202. }else if(res.result.population&&!res.result.excludePopulation){
  2203. this.form.setFieldsValue({
  2204. customCrowd:'1'
  2205. })
  2206. }else if(!res.result.population&&!res.result.excludePopulation){
  2207. this.form.setFieldsValue({
  2208. customCrowd:'0'
  2209. })
  2210. }else{
  2211. this.form.setFieldsValue({
  2212. customCrowd:'2'
  2213. })
  2214. }
  2215. this.incluedSelectedRowKeys=res.result.population?JSON.parse(res.result.population):[]
  2216. this.excludeSelectedRowKeys=res.result.excludePopulation?JSON.parse(res.result.excludePopulation):[]
  2217. let region=res.result.region?JSON.parse(res.result.region):[]
  2218. if(region.length==0){
  2219. this.district='NONE'
  2220. }else{
  2221. this.district='CITY';
  2222. this.regionList=region
  2223. }
  2224. if(this.getFormData('customCrowd')=='1' || this.getFormData('customCrowd')=='2'){
  2225. this.tabKey=this.getFormData('customCrowd')
  2226. }else if(this.getFormData('customCrowd')=='3'){
  2227. this.tabKey='1'
  2228. }
  2229. this.spinning=false;
  2230. })
  2231. })
  2232. }
  2233. },
  2234. getpopulationlist(){
  2235. this.retargetDataAll=[]
  2236. getAction('/kuaishou/batch/getPopulationList',{
  2237. accountId:this.accountId
  2238. }).then((res)=>{
  2239. // console.log(res)
  2240. this.loading=false;
  2241. if(res.success){
  2242. res.result.forEach((ele)=>{
  2243. ele.key=ele.orientationId
  2244. ele.id= ele.orientationId
  2245. ele.name=ele.orientationName+"("+ele.orientationId+")"
  2246. ele.accountName=this.accountInfo.title
  2247. ele.accountId=this.accountId
  2248. })
  2249. // this.retargetData=res.data;
  2250. // this.retargetDataAll=[...this.retargetDataAll,...res.result];
  2251. this.retargetDataAll=[...res.result];
  2252. }
  2253. })
  2254. },
  2255. clickTrackUrlFocus(){
  2256. // console.log('focus')
  2257. this.clickTrackUrlTip=true;
  2258. },
  2259. clickTrackUrlBlur(){
  2260. // console.log('blur')
  2261. this.clickTrackUrlTip=false;
  2262. }
  2263. },
  2264. created() {
  2265. if(this.$route){
  2266. let editRecordId=this.$route.query.id;
  2267. if(editRecordId){
  2268. this.$nextTick(()=>{
  2269. this.editRecordId=editRecordId;
  2270. this.editEchoPage()
  2271. })
  2272. }
  2273. }
  2274. },
  2275. mounted() {
  2276. this.accountHttp()
  2277. // this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
  2278. let strategyNamepart=this.campaignTypeHandle(this.getFormData('campaignType'));
  2279. this.strategyName ='[预设]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;
  2280. this.getActionBarText()
  2281. },
  2282. filters: {
  2283. getDate(value) {
  2284. let date = new Date(value)
  2285. let y = date.getFullYear()
  2286. let MM = date.getMonth() + 1
  2287. MM = MM < 10 ? '0' + MM : MM
  2288. let d = date.getDate()
  2289. d = d < 10 ? '0' + d : d
  2290. return y + '-' + MM + '-' + d
  2291. },
  2292. platform(str) {
  2293. var data = {
  2294. 1: 'Android应用下载',
  2295. 2: 'Android网页游戏',
  2296. 3: 'iOS应用下载',
  2297. 4: 'iOS网页游戏'
  2298. }
  2299. return data[str]
  2300. },
  2301. customCrowdHandler(val){
  2302. let str=''
  2303. switch (val) {
  2304. case 1:
  2305. str='上传人群'
  2306. break;
  2307. case 2:
  2308. str='广告人群'
  2309. break;
  2310. case 3:
  2311. str='主题专区'
  2312. break;
  2313. case 4:
  2314. str='逻辑规则'
  2315. break;
  2316. case 5:
  2317. str='人群扩展'
  2318. break;
  2319. case 6:
  2320. str='平台定制'
  2321. break;
  2322. case 7:
  2323. str='定制付费'
  2324. break;
  2325. case 8:
  2326. str='网红粉丝类别'
  2327. break;
  2328. case 9:
  2329. str='内容付费行为'
  2330. break;
  2331. case 10:
  2332. str='移动应用安装'
  2333. break;
  2334. case 11:
  2335. str='快手使用活跃度'
  2336. break;
  2337. case 12:
  2338. str='行业分类'
  2339. break;
  2340. case 13:
  2341. str='商业兴趣'
  2342. break;
  2343. case 14:
  2344. str='固化标签'
  2345. break;
  2346. case 15:
  2347. str='行业偏好'
  2348. break;
  2349. case 16:
  2350. str='第三方标签'
  2351. break;
  2352. case 17:
  2353. str='产品关键词'
  2354. break;
  2355. default:
  2356. break;
  2357. }
  2358. return str
  2359. }
  2360. },
  2361. }
  2362. </script>
  2363. <style lang="scss">
  2364. .configLaunchInfo{
  2365. .display-none-selset {
  2366. display: none !important;
  2367. }
  2368. .ant-btn-danger {
  2369. background-color: #ff4d4f !important;
  2370. }
  2371. }
  2372. .ant-tooltip-inner,
  2373. .ant-tooltip-arrow::before {
  2374. background-color: #fff;
  2375. color: #333;
  2376. }
  2377. .ant-tooltip-inner {
  2378. span {
  2379. display: block;
  2380. }
  2381. }
  2382. .ant-tooltip {
  2383. max-width: 450px;
  2384. }
  2385. .configLaunchInfo {
  2386. .ant-radio-button-wrapper {
  2387. min-width: 80px;
  2388. text-align: center;
  2389. }
  2390. .ant-form-item {
  2391. -webkit-box-sizing: border-box;
  2392. box-sizing: border-box;
  2393. margin: 0;
  2394. padding: 0;
  2395. color: rgba(0, 0, 0, 0.65);
  2396. font-size: 14px;
  2397. font-variant: tabular-nums;
  2398. line-height: 1.5;
  2399. list-style: none;
  2400. -webkit-font-feature-settings: 'tnum';
  2401. font-feature-settings: 'tnum';
  2402. vertical-align: top;
  2403. }
  2404. .directedBody {
  2405. .ant-form-item {
  2406. margin-bottom: 20px;
  2407. }
  2408. }
  2409. .inventoryTypes{
  2410. .ant-checkbox-wrapper,
  2411. .ant-checkbox-group-item {
  2412. display: block;
  2413. padding: 5px 15px;
  2414. }
  2415. .ant-checkbox-wrapper:first-child {
  2416. padding: 0 15px 5px;
  2417. }
  2418. .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  2419. margin-left: 0px;
  2420. }
  2421. }
  2422. }
  2423. </style>
  2424. <style lang="scss" scoped>
  2425. .configLaunchInfo {
  2426. .region{
  2427. width: 100%;
  2428. }
  2429. font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  2430. color: #333;
  2431. ul,
  2432. li {
  2433. margin: 0;
  2434. padding: 0;
  2435. }
  2436. .moduler {
  2437. background: #fff;
  2438. margin-bottom: 16px;
  2439. position: relative;
  2440. padding: 32px 24px 48px 32px;
  2441. border-radius: 4px;
  2442. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  2443. .ad-range2{
  2444. width: 680px;
  2445. padding: 5px 32px;
  2446. .ad-range2-title{
  2447. background: #f9f9f9;
  2448. // line-height: 32px;
  2449. // height: 32px;
  2450. padding: 15px 15px;
  2451. border: 1px solid #eaeaea;
  2452. border-bottom: 0;
  2453. }
  2454. .quanxuanDirectional{
  2455. // padding: 0 8px;
  2456. position: absolute;
  2457. right: 10px;
  2458. top: 15px;
  2459. color: #1890ff;
  2460. }
  2461. .title-list {
  2462. // width: calc(100% + 48px);
  2463. width: 100%;
  2464. margin: 0;
  2465. margin-bottom: 0;
  2466. padding: 0;
  2467. background: #fff;
  2468. height: 363px;
  2469. border: 1px solid #eaeaea;
  2470. overflow: scroll;
  2471. overflow-x: hidden;
  2472. // margin-top: 10px;
  2473. }
  2474. .title-list .title-item{
  2475. padding: 10px 30px;
  2476. width: 100%;
  2477. // height: 32px;
  2478. // line-height: 32px;
  2479. // border-bottom: 1px solid #eaeaea;
  2480. }
  2481. }
  2482. .moduler-title {
  2483. display: flex;
  2484. align-items: center;
  2485. font-size: 22px;
  2486. margin-bottom: 20px;
  2487. }
  2488. .row-item {
  2489. display: flex;
  2490. justify-content: flex-start;
  2491. align-items: center;
  2492. margin-bottom: 32px;
  2493. }
  2494. .row-item:last-of-type {
  2495. margin-bottom: 0;
  2496. }
  2497. .row-item .hint-item {
  2498. width: 24px;
  2499. min-width: 24px;
  2500. align-self: flex-start;
  2501. line-height: 20px;
  2502. height: 20px;
  2503. margin-top: 9px;
  2504. }
  2505. .row-item .label-item {
  2506. position: relative;
  2507. align-items: flex-start;
  2508. align-self: flex-start;
  2509. line-height: 20px;
  2510. height: 20px;
  2511. margin-top: 10px;
  2512. width: 120px;
  2513. // min-width: 80px;
  2514. .text-item {
  2515. font-size: 14px;
  2516. width: 100px;
  2517. }
  2518. }
  2519. .row-item .required-item {
  2520. width: 4px;
  2521. height: 4px;
  2522. border-radius: 2px;
  2523. background: #f45858;
  2524. position: absolute;
  2525. right: 10px;
  2526. top: 50%;
  2527. transform: translateY(-50%);
  2528. }
  2529. .row-item .input-item {
  2530. min-width: 480px;
  2531. position: relative;
  2532. // height: 35px;
  2533. .tip {
  2534. font-size: 12px;
  2535. color: tomato;
  2536. }
  2537. .inventory-tags-lists-header {
  2538. background-color: #F8F9FA;
  2539. border: 1px solid #E4E9ED;
  2540. height: 36px;
  2541. line-height: 33px;
  2542. border-radius: 4px 4px 0 0;
  2543. font-weight: bold;
  2544. display: flex;
  2545. }
  2546. .inventory-tags-lists-container {
  2547. border: 1px solid #E4E9ED;
  2548. margin-top: -1px;
  2549. height: 100%;
  2550. padding: 4px 0px;
  2551. border-radius: 0 0 4px 4px;
  2552. }
  2553. .inventory-tags-lists-item {
  2554. width: 100%;
  2555. height: 37px;
  2556. line-height: 37px;
  2557. padding-left: 12px;
  2558. padding-right: 12px;
  2559. display: flex;
  2560. font-size: 14px;
  2561. color: #333;
  2562. }
  2563. }
  2564. }
  2565. .opt {
  2566. text-align: right;
  2567. }
  2568. }
  2569. </style>