configuration-modal.vue 108 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175
  1. <template>
  2. <div class="configuration-modal">
  3. <div>
  4. <a-form-model
  5. ref="ruleForm"
  6. class="config-form-modal"
  7. :model="configForm"
  8. :rules="rules"
  9. :label-col="labelCol"
  10. :wrapper-col="wrapperCol"
  11. >
  12. <p class="separate-title-header">{{ modalTitle === 'add' ? '新增' : '编辑'}}配置信息</p>
  13. <div class="separate-module-con">
  14. <a-form-model-item label="广告账户">
  15. <acount-search
  16. class="acount-search-class"
  17. :disabled="modalTitle === 'edit'"
  18. :appId.sync="configForm.accountId"
  19. :multiple="false"
  20. request="1,3"
  21. >
  22. </acount-search>
  23. </a-form-model-item>
  24. <a-form-model-item label="dp链接">
  25. <a-radio-group
  26. :disabled="modalTitle === 'edit'"
  27. v-model="configForm.dpLinkIndexUsed"
  28. button-style="solid"
  29. @change="handleDpLinkIndexUsed"
  30. >
  31. <a-radio-button :value="0">关闭</a-radio-button>
  32. <a-radio-button :value="1">开启</a-radio-button>
  33. </a-radio-group>
  34. </a-form-model-item>
  35. <div v-if="configForm.dpLinkIndexUsed === 1">
  36. <a-form-model-item label="dp链接范围" class="dp-link-start" prop="dpLinkStartIndex">
  37. <a-input-number
  38. class="common-input"
  39. v-model="configForm.dpLinkStartIndex"
  40. :disabled="modalTitle === 'edit'"
  41. :min="1"
  42. placeholder="请输入"
  43. @change="handleDplinkStart"
  44. />
  45. <span>~</span>
  46. </a-form-model-item>
  47. <a-form-model-item class="dp-link-end" prop="dpLinkEndIndex">
  48. <a-input-number
  49. class="common-input"
  50. v-model="configForm.dpLinkEndIndex"
  51. :disabled="modalTitle === 'edit'"
  52. :min="getEndIndex"
  53. placeholder="请输入"
  54. @change="handleDplinkEnd"
  55. />
  56. </a-form-model-item>
  57. </div>
  58. <a-form-model-item label="预算方式">
  59. <a-radio-group
  60. v-model="configForm.accountBudgetMode"
  61. button-style="solid"
  62. @change="handleAccountMode"
  63. >
  64. <a-radio-button value="1">不限预算</a-radio-button>
  65. <a-radio-button value="2">指定预算</a-radio-button>
  66. </a-radio-group>
  67. </a-form-model-item>
  68. <a-form-model-item v-if="configForm.accountBudgetMode === '2'" label="账户日预算" prop="accountBudget">
  69. <a-input-number
  70. v-model="configForm.accountBudget"
  71. :min="1000"
  72. :max="9999999.99"
  73. :step="0.01"
  74. @blur="handleAccountBudget"
  75. /> 元
  76. </a-form-model-item>
  77. </div>
  78. <div class="separate-module-con">
  79. <p class="rock-title">广告组信息</p>
  80. <a-form-model-item label="推广目标">
  81. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.campaignLandingType" button-style="solid">
  82. <a-radio-button value="APP">应用</a-radio-button>
  83. <a-radio-button value="LINK" disabled>销售线索收集</a-radio-button>
  84. <a-radio-button value="SHOP" disabled>电商店铺推广</a-radio-button>
  85. </a-radio-group>
  86. </a-form-model-item>
  87. <a-form-model-item label="广告类型">
  88. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.advertisingType" button-style="solid">
  89. <a-radio-button value="1">信息流广告</a-radio-button>
  90. <a-radio-button value="2">搜索广告</a-radio-button>
  91. </a-radio-group>
  92. </a-form-model-item>
  93. </div>
  94. <div class="separate-module-con">
  95. <p class="rock-title">基础信息</p>
  96. <a-form-model-item label="广告组名称" prop="campaignName">
  97. <a-input
  98. class="common-input-long"
  99. v-model="configForm.campaignName"
  100. allow-clear
  101. placeholder="请输入广告组名称"
  102. />
  103. </a-form-model-item>
  104. <a-form-model-item label="广告计划名称" prop="adName">
  105. <a-input
  106. class="common-input-long"
  107. id="groupName"
  108. v-model="configForm.adName"
  109. allow-clear
  110. placeholder="请输入广告计划名称"
  111. />
  112. <div>
  113. <a-tag
  114. v-for="item in adNameTags"
  115. :key="item"
  116. color="#1890ff"
  117. @click="handleGetChangeAll(item, 'groupName')"
  118. >
  119. + {{ item }}
  120. </a-tag>
  121. </div>
  122. </a-form-model-item>
  123. <a-form-model-item label="创建数量: 广告组数量" class="campaign-cnt-class" prop="campaignCnt">
  124. <a-input-number v-model="configForm.campaignCnt" :min="1" @change="handleCampaignCnt" :disabled="configForm.dpLinkIndexUsed === 0"/>
  125. <a-tooltip placement="top">
  126. <template slot="title">
  127. <span>输入的数量为每天所创建的广告组数量</span>
  128. <span>以及每个广告组创建的广告计划数量</span>
  129. </template>
  130. <a-icon class="form-itrm-icon" type="smile-o"/>
  131. </a-tooltip>
  132. <div v-if="campaignStatus" style="width: 500px;color: #f00;">单账号每天创建计划上限500个</div>
  133. </a-form-model-item>
  134. <a-form-model-item label="广告计划数量" class="campaign-ad-class" prop="campaignAdCnt">
  135. <a-input-number v-model="configForm.campaignAdCnt" :min="1" @change="handleCampaignAdCnt"/>
  136. </a-form-model-item>
  137. </div>
  138. <div class="separate-module-con">
  139. <p class="rock-title">投放内容</p>
  140. <a-form-model-item label="投放目标">
  141. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.launchTarget" button-style="solid">
  142. <a-radio-button value="OCPM">转化量</a-radio-button>
  143. <a-radio-button value="CPC" disabled>点击量</a-radio-button>
  144. <a-radio-button value="CPM" disabled>展示量</a-radio-button>
  145. </a-radio-group>
  146. </a-form-model-item>
  147. <a-form-model-item label="下载方式">
  148. <a-radio-group
  149. :disabled="modalTitle === 'edit'"
  150. v-model="configForm.adDownloadType"
  151. button-style="solid"
  152. @change="handleAdDownLoadType"
  153. >
  154. <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
  155. <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
  156. </a-radio-group>
  157. </a-form-model-item>
  158. <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="落地页链接" prop="adExternalUrl">
  159. <a-input
  160. class="common-input-long"
  161. :disabled="modalTitle === 'edit'"
  162. v-model="configForm.adExternalUrl"
  163. placeholder="请输入落地页链接"
  164. allow-clear
  165. />
  166. </a-form-model-item>
  167. <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="直达链接内容">
  168. <a-input
  169. class="common-input-long"
  170. v-model="configForm.adOpenUrl"
  171. placeholder="请输入直达链接内容"
  172. allow-clear
  173. />
  174. </a-form-model-item>
  175. <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="下载链接" prop="adDownloadUrl">
  176. <a-input
  177. class="common-input-long"
  178. :disabled="modalTitle === 'edit'"
  179. v-model="configForm.adDownloadUrl"
  180. placeholder="请输入下载链接"
  181. allow-clear
  182. @change="handleDownloadLink"
  183. />
  184. </a-form-model-item>
  185. <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="应用包名" prop="adPackage">
  186. <a-input
  187. class="common-input-long"
  188. :disabled="modalTitle === 'edit'"
  189. v-model="configForm.adPackage"
  190. placeholder="请输入应用包名"
  191. allow-clear
  192. />
  193. </a-form-model-item>
  194. </div>
  195. <div class="separate-module-con">
  196. <p class="rock-title">优化目标</p>
  197. <a-form-model-item label="转化跟踪方式" :prop="configForm.launchTarget === 'OCPM' ? 'adConvertType' : ''">
  198. <a-select
  199. class="common-input-long"
  200. :disabled="modalTitle === 'edit'"
  201. v-model="configForm.adConvertType"
  202. placeholder="请选择"
  203. @change="handleConvertTypeChange"
  204. >
  205. <a-select-option value="AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD">应用下载API</a-select-option>
  206. <a-select-option value="AD_CONVERT_SOURCE_TYPE_SDK">应用下载SDK</a-select-option>
  207. <a-select-option value="AD_CONVERT_SOURCE_TYPE_OPEN_URL">应用直达API(应用直达链接)</a-select-option>
  208. <a-select-option value="AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD">普通应用下载</a-select-option>
  209. </a-select>
  210. </a-form-model-item>
  211. <a-form-model-item label="优化目标" :prop="configForm.launchTarget === 'OCPM' ? 'adConvertId' : ''">
  212. <a-select
  213. class="common-input-long"
  214. :disabled="modalTitle === 'edit'"
  215. v-model="configForm.adConvertId"
  216. placeholder="请选择"
  217. @change="handleConvertChange"
  218. >
  219. <a-select-option
  220. v-for="(item, index) in optimizationOption"
  221. :key="index"
  222. :value="item.convert_id"
  223. >
  224. {{ item.external_name }}
  225. </a-select-option>
  226. </a-select>
  227. </a-form-model-item>
  228. </div>
  229. <div class="separate-module-con">
  230. <p class="rock-title">设置投放位置</p>
  231. <a-form-model-item label="广告位置">
  232. <a-radio-group
  233. :disabled="modalTitle === 'edit'"
  234. v-model="configForm.adverPosition"
  235. button-style="solid"
  236. @change="handleAdverPosition"
  237. >
  238. <a-radio-button value="a">系统优选广告位</a-radio-button>
  239. <a-radio-button value="b">按媒体指定位置</a-radio-button>
  240. <a-radio-button value="c">按场景指定位置</a-radio-button>
  241. </a-radio-group>
  242. </a-form-model-item>
  243. <div class="adver-position-radio">
  244. <p v-if="configForm.adverPosition === 'a'">
  245. 系统将根据您设置的定向,选择预估效果最好的广告位进行投放,并触达尽可能多的目标用户
  246. </p>
  247. <div v-if="configForm.adverPosition === 'c'" class="position-radio-change">
  248. <p>位置选择</p>
  249. <a-radio-group v-model="configForm.radioChangeValue">
  250. <a-radio :style="radioStyle" value="VIDEO_SCENE">沉浸式竖版视频场景</a-radio>
  251. <a-radio :style="radioStyle" value="FEED_SCENE">信息流场景</a-radio>
  252. <a-radio :style="radioStyle" value="TAIL_SCENE">视频后贴和尾帧场景</a-radio>
  253. </a-radio-group>
  254. </div>
  255. <div v-if="configForm.adverPosition === 'b'" class="position-radio-change">
  256. <p>位置选择</p>
  257. <a-checkbox-group v-model="configForm.checkboxChangeValue">
  258. <a-checkbox :style="radioStyle" value="INVENTORY_FEED">今日头条</a-checkbox>
  259. <a-checkbox :style="radioStyle" value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
  260. <a-checkbox :style="radioStyle" value="INVENTORY_HOTSOON_FEED">抖音火山版</a-checkbox>
  261. <a-checkbox :style="radioStyle" value="INVENTORY_AWEME_FEED">抖音短视频</a-checkbox>
  262. <a-checkbox :style="radioStyle" value="INVENTORY_UNION_SLOT">穿山甲</a-checkbox>
  263. <a-checkbox :style="radioStyle" value="UNION_BOUTIQUE_GAME">ohayoo精品游戏</a-checkbox>
  264. <a-checkbox :style="radioStyle" value="INVENTORY_TOMATO_NOVEL">番茄小说</a-checkbox>
  265. </a-checkbox-group>
  266. </div>
  267. </div>
  268. </div>
  269. <div class="separate-module-con">
  270. <a-tabs v-model="selectPackageTabs">
  271. <a-tab-pane key="1" tab="新建定向">
  272. <p class="rock-title">用户定向</p>
  273. <a-form-model-item label="地域">
  274. <a-radio-group v-model="configForm.adDistrict" button-style="solid">
  275. <a-radio-button value="NONE">不限</a-radio-button>
  276. <a-radio-button value="CITY">按省市</a-radio-button>
  277. <a-radio-button value="COUNTY" disabled>按区县</a-radio-button>
  278. </a-radio-group>
  279. </a-form-model-item>
  280. <div v-if="configForm.adDistrict === 'CITY'" class="adver-position-radio selected-city-arr">
  281. <link-multi-select
  282. title="省份"
  283. :listArr="listArr"
  284. :maxLayers="2"
  285. :listUrl="regionCityListUrl"
  286. @getSelectedArr="getSelectedCityArr"
  287. @checkedShowList="handleCheckedShowList"
  288. >
  289. </link-multi-select>
  290. <a-radio-group class="city-arr-radio-group" v-model="configForm.adLocationType">
  291. <a-radio value="HOME">居住在该地区的用户</a-radio>
  292. <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
  293. <a-radio value="ALL">该地区内的所有用户</a-radio>
  294. <a-radio value="CURRENT">正在该地区的用户</a-radio>
  295. </a-radio-group>
  296. </div>
  297. <a-form-model-item label="性别">
  298. <a-radio-group v-model="configForm.adGender" button-style="solid">
  299. <a-radio-button value="NONE">不限</a-radio-button>
  300. <a-radio-button value="GENDER_MALE">男</a-radio-button>
  301. <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
  302. </a-radio-group>
  303. </a-form-model-item>
  304. <a-form-model-item label="年龄">
  305. <radio-check v-model="configForm.adSelectAge" :options="ageArr" @change="getAgeSelect"></radio-check>
  306. </a-form-model-item>
  307. <a-form-model-item label="自定义人群">
  308. <a-radio-group v-model="configForm.customPerson" button-style="solid" @change="handleCustomPerson">
  309. <a-radio-button value="NONE">不限</a-radio-button>
  310. <a-radio-button value="a">自定义人群</a-radio-button>
  311. </a-radio-group>
  312. </a-form-model-item>
  313. <a-form-model-item v-if="configForm.customPerson === 'a'" label="定向逻辑">
  314. <a-radio-group v-model="configForm.adRetargetingTagsType" button-style="solid" @change="handleDirectionalLogic">
  315. <a-radio-button value="1">定向</a-radio-button>
  316. <a-radio-button value="2">排除</a-radio-button>
  317. <a-radio-button value="3">同时定向排除</a-radio-button>
  318. </a-radio-group>
  319. </a-form-model-item>
  320. <div v-if="configForm.customPerson === 'a' && configForm.adRetargetingTagsType === '1'" class="adver-position-radio">
  321. <div style="width: 60%;">
  322. <directional-logic ref="direct" packtype="directional" multitype="alone" :defaultlist="directionalData" :valueids="configForm.adRetargetingTagsType" :updatelistinclude="configForm.updateGetingInclude" @selection-alone-event="handleSelectionAloneEvent"></directional-logic>
  323. </div>
  324. </div>
  325. <div v-if="configForm.customPerson === 'a' && configForm.adRetargetingTagsType === '2'" class="adver-position-radio">
  326. <div style="width: 60%;">
  327. <directional-logic ref="exclude" packtype="exclude" multitype="alone" :defaultlist="directionalData" :valueids="configForm.adRetargetingTagsType" :updatelistexclude="configForm.updateGetingExclude" @selection-alone-event="handleSelectionAloneEvent"></directional-logic>
  328. </div>
  329. </div>
  330. <div v-if="configForm.customPerson === 'a' && configForm.adRetargetingTagsType === '3'" class="adver-position-radio">
  331. <div style="width: 60%;">
  332. <directional-logic ref="twoway" packtype="twoway" multitype="all" :defaultlist="directionalData" :valueids="configForm.adRetargetingTagsType" :updatelistinclude="configForm.updateGetingInclude" :updatelistexclude="configForm.updateGetingExclude" @selection-direct-event="handleDirectEvent" @selection-exclude-event="handleExcludeEvent"></directional-logic>
  333. </div>
  334. </div>
  335. <a-form-model-item label="媒体定向">
  336. <a-radio-group v-model="configForm.adSuperiorPopularityType" button-style="solid">
  337. <a-radio-button value="NONE">不限</a-radio-button>
  338. <a-radio-button value="GAME" disabled>游戏优质媒体</a-radio-button>
  339. <a-radio-button value="b" disabled>自定义</a-radio-button>
  340. </a-radio-group>
  341. </a-form-model-item>
  342. <a-form-model-item label="平台">
  343. <a-radio-group v-model="configForm.adPlatform" button-style="solid">
  344. <a-radio-button value="NONE" :disabled="platformLoadingType === 'APP_IOS' || platformLoadingType === 'APP_ANDROID'">不限</a-radio-button>
  345. <a-radio-button value="IOS" :disabled="platformLoadingType === 'APP_ANDROID'">IOS</a-radio-button>
  346. <a-radio-button value="ANDROID" :disabled="platformLoadingType === 'APP_IOS'">Andriod</a-radio-button>
  347. <a-radio-button value="PC" :disabled="platformLoadingType === 'APP_IOS' || platformLoadingType === 'APP_ANDROID'">PC</a-radio-button>
  348. </a-radio-group>
  349. </a-form-model-item>
  350. <a-form-model-item label="设备类型">
  351. <radio-check v-model="configForm.adDeviceSelectType" :options="deviceTypeList" @change="getAgeSelect"></radio-check>
  352. </a-form-model-item>
  353. <a-form-model-item v-if="configForm.adDownloadUrl" label="安卓版本">
  354. <a-radio-group v-model="configForm.adAndroidVersion" button-style="solid" @change="handleAndroidVersion">
  355. <a-radio-button value="NONE">不限</a-radio-button>
  356. <a-radio-button value="a">自定义</a-radio-button>
  357. </a-radio-group>
  358. </a-form-model-item>
  359. <div class="adver-position-radio">
  360. <div v-if="configForm.adDownloadUrl && configForm.adAndroidVersion === 'a'" class="position-radio-change">
  361. <p>安卓版本</p>
  362. <a-radio-group v-model="configForm.androidChangeValue">
  363. <a-radio :style="radioStyle" value="9.0">Andriod 9.0及以上</a-radio>
  364. <a-radio :style="radioStyle" value="8.1">Andriod 8.1及以上</a-radio>
  365. <a-radio :style="radioStyle" value="8.0">Andriod 8.0及以上</a-radio>
  366. <a-radio :style="radioStyle" value="7.1">Andriod 7.1及以上</a-radio>
  367. <a-radio :style="radioStyle" value="7.0">Andriod 7.0及以上</a-radio>
  368. <a-radio :style="radioStyle" value="6.0">Andriod 6.0及以上</a-radio>
  369. <a-radio :style="radioStyle" value="5.1">Andriod 5.1及以上</a-radio>
  370. </a-radio-group>
  371. </div>
  372. </div>
  373. <a-form-model-item label="网络">
  374. <radio-check v-model="configForm.adSelectAc" :options="adAcList" @change="getAgeSelect"></radio-check>
  375. </a-form-model-item>
  376. <a-form-model-item label="已安装用户">
  377. <a-radio-group v-model="configForm.adHideIfExists" button-style="solid">
  378. <a-radio-button value="0">不限</a-radio-button>
  379. <a-radio-button value="1">过滤</a-radio-button>
  380. <a-radio-button value="2">定向</a-radio-button>
  381. </a-radio-group>
  382. </a-form-model-item>
  383. <a-form-model-item v-if="configForm.adConvertType" label="过滤已转化用户">
  384. <a-radio-group v-model="configForm.adHideIfConverted" button-style="solid">
  385. <a-radio-button
  386. v-for="item in adHideIfConvertedDataOption"
  387. :key="item.id"
  388. :value="item.id"
  389. >
  390. {{ item.name }}
  391. </a-radio-button>
  392. </a-radio-group>
  393. </a-form-model-item>
  394. <a-form-model-item label="智能放量">
  395. <a-radio-group v-model="configForm.adAutoExtendEnabled" button-style="solid">
  396. <a-radio-button value="0">不开启</a-radio-button>
  397. <a-radio-button value="1">开启</a-radio-button>
  398. </a-radio-group>
  399. </a-form-model-item>
  400. </a-tab-pane>
  401. <a-tab-pane key="2" tab="选择定向包">
  402. <a-form-model-item class="select-orientation-class" label="选择已有定向包" prop="adAudiencePackageId">
  403. <a-select
  404. class="common-input-long"
  405. v-model="configForm.adAudiencePackageId"
  406. allow-clear
  407. placeholder="请选择已有定向包名称"
  408. :disabled="selectOrientPlaceholder !== 'able'"
  409. @change="handleSelectiveOrientation"
  410. >
  411. <a-select-option
  412. v-for="(item, index) in selectiveList"
  413. :key="index"
  414. :value="item.audience_package_id"
  415. >
  416. {{ item.name }}
  417. </a-select-option>
  418. </a-select>
  419. <span style="margin-left: 20px;">
  420. <a-button :disabled="selectOrientPlaceholder !== 'able'" type="primary" @click="handleAsyncPackage">同步定向包</a-button>
  421. </span>
  422. <a-tooltip placement="top">
  423. <template slot="title">
  424. <span>已有定向包只展示当前推广目的和投放范围下,定向功能升级后仍可用的定向包</span>
  425. </template>
  426. <a-icon class="form-itrm-icon orientation-icon" type="smile-o"/>
  427. </a-tooltip>
  428. </a-form-model-item>
  429. <span v-if="selectOrientPlaceholder !== 'able'" style="color: #f00; margin-left: 198px;">{{ selectOrientPlaceholder }}</span>
  430. <div class="select-orientation-content">
  431. <p class="orientation-header-title">已选定向信息</p>
  432. <div v-if="packageMessageDetail.length" class="orientation-content-substance">
  433. <div class="content-substance-singal">
  434. <span class="singal-spn">定向人群包:</span>
  435. <span>{{ packageMessageDetail[0].description }}</span>
  436. </div>
  437. <div class="content-substance-singal">
  438. <span class="singal-spn">地域:</span>
  439. <span>{{ packageMessageDetail[0].replaceCitys }}</span>
  440. </div>
  441. <div class="content-substance-singal">
  442. <span class="singal-spn">性别:</span>
  443. <span>{{ packageMessageDetail[0].replaceSex }}</span>
  444. </div>
  445. <div class="content-substance-singal">
  446. <span class="singal-spn">年龄:</span>
  447. <span>{{ packageMessageDetail[0].replaceAge }}</span>
  448. </div>
  449. <div class="content-substance-singal">
  450. <span class="singal-spn">平台:</span>
  451. <span>{{ packageMessageDetail[0].replacePlate }}</span>
  452. </div>
  453. <div class="content-substance-singal">
  454. <span class="singal-spn">智能放量:</span>
  455. <span>{{ packageMessageDetail[0].replaceEnabled }}</span>
  456. </div>
  457. </div>
  458. <div v-else class="orientation-content-msg">
  459. <div class="icon"><a-icon type="container"/></div>
  460. <div>请在上方选择一个已有定向包</div>
  461. </div>
  462. </div>
  463. </a-tab-pane>
  464. </a-tabs>
  465. </div>
  466. <div class="separate-module-con">
  467. <p class="rock-title">预算与出价</p>
  468. <a-form-model-item label="投放场景">
  469. <a-radio-group v-model="configForm.adSmartBidType" button-style="solid">
  470. <a-radio-button value="SMART_BID_CUSTOM" :disabled="modalTitle === 'edit'">常规投放</a-radio-button>
  471. <a-radio-button value="SMART_BID_CONSERVATIVE" disabled>放量投放</a-radio-button>
  472. </a-radio-group>
  473. </a-form-model-item>
  474. <a-form-model-item label="预算">
  475. <a-input-group compact>
  476. <a-select
  477. :disabled="modalTitle === 'edit'"
  478. v-model="configForm.adBudgetMode"
  479. @change="handleBudgetMode"
  480. >
  481. <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
  482. <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
  483. </a-select>
  484. <a-input-number
  485. class="common-input"
  486. v-model="configForm.adBudget"
  487. :min="adBudgetNum"
  488. :step="0.01"
  489. @blur="handleAdBudgetBlur"
  490. />
  491. </a-input-group>
  492. <div v-if="adBudgetShowTitle" style="width: 500px;color: #f00;">单次修改预算幅度, 不能低于100.0元</div>
  493. <span class="especial-label budget-mode-label">*</span>
  494. </a-form-model-item>
  495. <a-form-model-item label="投放时间">
  496. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adScheduleType" button-style="solid" @change="handleAdScheduleType">
  497. <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
  498. <a-radio-button value="SCHEDULE_START_END">设置开始和结束日期</a-radio-button>
  499. </a-radio-group>
  500. </a-form-model-item>
  501. <div class="adver-position-radio">
  502. <div v-if="configForm.adScheduleType === 'SCHEDULE_START_END'" class="position-radio-change">
  503. <a-range-picker
  504. v-model="configForm.launchDateRange"
  505. :disabled="modalTitle === 'edit'"
  506. format="YYYY-MM-DD"
  507. @change="handleLaunchData"
  508. />
  509. </div>
  510. </div>
  511. <a-form-model-item label="投放时段">
  512. <a-radio-group v-model="configForm.launchTimeInterval" button-style="solid" @change="handleLaunchTimeInterval">
  513. <a-radio-button value="buxian">不限</a-radio-button>
  514. <a-radio-button value="a">指定时间段</a-radio-button>
  515. </a-radio-group>
  516. </a-form-model-item>
  517. <div class="adver-position-radio">
  518. <div v-if="configForm.launchTimeInterval === 'a'" class="position-radio-change">
  519. <selectCheckAll
  520. style="width:100%"
  521. :scheduleTime.sync="configForm.scheduleTimeData"
  522. ref="selectCheck"
  523. />
  524. </div>
  525. </div>
  526. <a-form-model-item label="付费方式">
  527. <a-radio-group v-model="configForm.adPricing" button-style="solid">
  528. <a-radio-button value="PRICING_OCPM" :disabled="modalTitle === 'edit'">按展示付费(oCPM)</a-radio-button>
  529. </a-radio-group>
  530. </a-form-model-item>
  531. <a-form-model-item label="出价方式">
  532. <a-radio-group v-model="configForm.adBidCreateType" button-style="solid" @change="handleBiddingMethod">
  533. <a-radio-button value="FIX">固定出价</a-radio-button>
  534. <a-radio-button value="RAND">随机出价</a-radio-button>
  535. <a-radio-button value="STEP">阶梯出价</a-radio-button>
  536. </a-radio-group>
  537. </a-form-model-item>
  538. <a-form-model-item v-if="configForm.adBidCreateType === 'FIX'" label="目标转化出价" :prop="configForm.launchTarget === 'OCPM' ? 'adCpaBid' : ''">
  539. <a-input-number
  540. class="common-input"
  541. v-model="configForm.adCpaBid"
  542. :min="0.1"
  543. :step="0.01"
  544. @blur="handleAdCpaBidBlur"
  545. /> 元
  546. <div v-if="isAdCpaBidBlur" style="width: 500px;color: #f00;">{{ adCpaBidBlurTxt }}</div>
  547. </a-form-model-item>
  548. <div v-if="configForm.adBidCreateType === 'RAND'">
  549. <a-form-model-item label="目标转化出价"
  550. class="dp-link-start" prop="adMinBid">
  551. <a-input-number
  552. class="common-input"
  553. v-model="configForm.adMinBid"
  554. :min="0.1"
  555. :max="10000"
  556. :step="0.01"
  557. placeholder="请输入"
  558. />
  559. <span>~</span>
  560. </a-form-model-item>
  561. <a-form-model-item class="dp-link-end" prop="adMaxBid">
  562. <a-input-number
  563. class="common-input"
  564. v-model="configForm.adMaxBid"
  565. :min="0.1"
  566. :max="10000"
  567. :step="0.01"
  568. placeholder="请输入"
  569. /> 元
  570. </a-form-model-item>
  571. </div>
  572. <div v-if="configForm.adBidCreateType === 'STEP'">
  573. <a-form-model-item label="目标转化出价" class="dp-link-start" prop="adMinBid">
  574. <a-input-number
  575. class="common-input"
  576. v-model="configForm.adMinBid"
  577. :min="0.1"
  578. :max="10000"
  579. :step="0.01"
  580. placeholder="请输入"
  581. />
  582. <span>~</span>
  583. </a-form-model-item>
  584. <a-form-model-item class="dp-link-end" prop="adMaxBid">
  585. <a-input-number
  586. class="common-input"
  587. v-model="configForm.adMaxBid"
  588. :min="0.1"
  589. :max="10000"
  590. :step="0.01"
  591. placeholder="请输入"
  592. /> 元
  593. </a-form-model-item>
  594. <a-form-model-item label="浮动间隔" prop="adStepBid">
  595. <a-input-number
  596. class="common-input"
  597. v-model="configForm.adStepBid"
  598. :step="0.01"
  599. placeholder="请输入"
  600. @blur="handleFloatingInterval"
  601. /> 元
  602. </a-form-model-item>
  603. </div>
  604. </div>
  605. <div class="separate-module-con">
  606. <p class="rock-title">第三方检测链接</p>
  607. <a-form-model-item label="点击监测">
  608. <a-input
  609. class="common-input-long"
  610. placeholder="请输入链接地址"
  611. v-model="configForm.creativeActionTrackUrl"
  612. allow-clear
  613. />
  614. </a-form-model-item>
  615. </div>
  616. <div class="separate-module-con">
  617. <p class="rock-title">创意信息</p>
  618. <a-form-model-item label="创意方式">
  619. <a-radio-group v-model="configForm.creativeMaterialMode" button-style="solid">
  620. <a-radio-button value="STATIC_ASSEMBLE" :disabled="modalTitle === 'edit'">程序化创意</a-radio-button>
  621. <a-radio-button value="NONE" :disabled="modalTitle === 'edit'">自定义创意</a-radio-button>
  622. </a-radio-group>
  623. </a-form-model-item>
  624. <a-form-model-item label="创意内容">
  625. <a-radio-group v-model="configForm.creativeImageMode" button-style="solid">
  626. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
  627. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
  628. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
  629. <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
  630. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
  631. </a-radio-group>
  632. </a-form-model-item>
  633. <a-form-model-item label="卡片主图">
  634. <a-upload
  635. name="avatar"
  636. list-type="picture-card"
  637. class="avatar-uploader"
  638. :show-upload-list="false"
  639. :before-upload="beforeUpload"
  640. >
  641. <div v-if="imageUrl" class="upload-img-class" @mouseover="handleChangeActive">
  642. <div class="img-flex-url">
  643. <img :src="imageUrl" alt="avatar"/>
  644. </div>
  645. <!-- TODO 划过图片显示覆盖层 -->
  646. <!-- <div v-if="isCoverImgDiv" class="cover-img-div" @mouseleave="handleRemoveActive">
  647. <a-icon class="delete-icon-class" type="delete" @click.stop="handleDeleteImg"/>
  648. </div> -->
  649. </div>
  650. <div v-else>
  651. <a-icon type="plus" style="margin-top: 10px;"/>
  652. <div class="ant-upload-text">Upload</div>
  653. </div>
  654. </a-upload>
  655. <span class="especial-label">*</span>
  656. </a-form-model-item>
  657. <a-form-model-item label="卡片标题" prop="creativeProductDescription">
  658. <a-input
  659. class="common-input-long"
  660. placeholder="请输入卡片标题"
  661. v-model="configForm.creativeProductDescription"
  662. allow-clear
  663. />
  664. </a-form-model-item>
  665. <a-form-model-item label="推广卖点">
  666. <a-button type="primary" @click="handleAddOrigin">
  667. <a-icon type="plus" />推广卖点
  668. </a-button>
  669. <span class="especial-label">*</span>
  670. </a-form-model-item>
  671. <div class="adver-position-radio">
  672. <a-form-model-item
  673. v-for="(item, index) in configForm.defaultFormList"
  674. :key="item.id"
  675. class="examin-form-model"
  676. :prop="'defaultFormList.' + index + '.value'"
  677. :rules="[
  678. {required: true, message: '请输入', trigger: 'blur'},
  679. {min: 6, max: 9, message: '请输入6-9个字', trigger: 'blur'},
  680. ]"
  681. >
  682. <a-input class="common-input-long" v-model="item.value" placeholder="请输入" allow-clear/>
  683. <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
  684. </a-form-model-item>
  685. </div>
  686. <a-form-model-item label="行动号召">
  687. <a-radio-group v-model="configForm.creativeEnablePersonalAction" button-style="solid">
  688. <a-radio-button :value="true">开启智能优选</a-radio-button>
  689. <a-radio-button :value="false">关闭智能优选</a-radio-button>
  690. </a-radio-group>
  691. <span class="especial-label">*</span>
  692. </a-form-model-item>
  693. <div class="adver-position-radio">
  694. <a-form-model-item prop="creativeCallToAction">
  695. <a-select
  696. class="common-input-long"
  697. v-model="configForm.creativeCallToAction"
  698. >
  699. <a-select-option
  700. v-for="(item, index) in configForm.creativeOptions"
  701. :key="index + 1"
  702. :value="item"
  703. >
  704. {{ item }}
  705. </a-select-option>
  706. </a-select>
  707. </a-form-model-item>
  708. </div>
  709. <a-form-model-item label="来源" :prop="getSource">
  710. <a-input
  711. class="common-input-long"
  712. placeholder="请输入来源"
  713. v-model="configForm.creativeSource"
  714. allow-clear
  715. />
  716. </a-form-model-item>
  717. </div>
  718. <div class="separate-module-con">
  719. <p class="rock-title">创意分类</p>
  720. <a-form-model-item label="创意分类" prop="creativeThirdIndustryIds">
  721. <a-cascader
  722. v-model="configForm.creativeThirdIndustryIds"
  723. class="common-input-long"
  724. :options="createOptions"
  725. :fieldNames="fieldNames"
  726. placeholder="请选择创意分类"
  727. />
  728. </a-form-model-item>
  729. <a-form-model-item label="创意标签">
  730. <a-select
  731. v-model="configForm.creativeLabel"
  732. :token-separators="[',', ' ', ',']"
  733. mode="tags"
  734. style="width: 320px"
  735. placeholder="按回车生成标签"
  736. dropdownClassName="display-none-selset"
  737. @change="handleEnterChang"
  738. >
  739. </a-select>
  740. <span class="especial-label">*</span>
  741. </a-form-model-item>
  742. <div class="adver-position-radio">
  743. <div class="creative-label-content">
  744. <p>已选:{{ creativeTag.length || 0 }}</p>
  745. <div class="label-content-select-tag">
  746. <a-tag
  747. v-for="item in creativeTag"
  748. :key="item"
  749. :closable="true"
  750. class="tag-select-class"
  751. @close="handleTagsClose(item)"
  752. >
  753. {{ item }}
  754. </a-tag>
  755. </div>
  756. </div>
  757. </div>
  758. </div>
  759. <div class="separate-module-con btn-Unique-con">
  760. <a-button class="sure-btn" type="primary" @click="handleRelaxSure">确定</a-button>
  761. <a-button class="cancel-btn" @click="handleRelaxCancel">取消</a-button>
  762. </div>
  763. </a-form-model>
  764. </div>
  765. </div>
  766. </template>
  767. <script>
  768. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  769. import SelectCheckAll from '../../BatchCreate/toutiaoTime';
  770. import radioCheck from '@/components/formComponents/checkBoxGroup';
  771. import linkMultiSelect from '@/views/modules/BatchCreate/linkMultiSelect';
  772. import DirectionalLogic from './directional-logic/directional-logic';
  773. import moment from 'moment';
  774. import BMF from 'browser-md5-file';
  775. import {urlAcount} from '../account-config-server.js';
  776. import {getAction, postAction, putAction} from '@/api/manage';
  777. import {mapGetters} from 'vuex';
  778. let COS = require('cos-js-sdk-v5');
  779. let cos = new COS({
  780. SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  781. SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
  782. });
  783. let str = '';
  784. for (let i = 0; i < 7 * 48; i++) {
  785. str += '0';
  786. }
  787. export default {
  788. name: 'configuration-modal',
  789. props: {
  790. visible: {
  791. type: Boolean,
  792. default: false
  793. }
  794. },
  795. components: {
  796. AcountSearch,
  797. SelectCheckAll,
  798. radioCheck,
  799. linkMultiSelect,
  800. DirectionalLogic
  801. },
  802. data() {
  803. let handleConfirmValue = (rule, value, callback) => {
  804. const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  805. if (urlregex.test(value)) {
  806. callback();
  807. }
  808. else {
  809. callback('请输入正确的格式');
  810. }
  811. };
  812. let handleCharacterLen100 = (rule, value, callback) => {
  813. this.handleExportRules(value, 1, 100, callback);
  814. };
  815. let handleCharacterLen20 = (rule, value, callback) => {
  816. this.handleExportRules(value, 4, 20, callback);
  817. };
  818. let floatingIntervalValidator = (rule, value, callback) => {
  819. const finallyResult = Number(this.configForm.adMinBid) + Number(value);
  820. if (finallyResult < Number(this.configForm.adMaxBid)) {
  821. callback();
  822. }
  823. else {
  824. callback('最低出价+浮动间隔<最高出价');
  825. }
  826. };
  827. let adMinBidValidator = (rule, value, callback) => {
  828. const finallyResult = Number(this.configForm.adMaxBid);
  829. if (finallyResult && value && Number(value) < finallyResult) {
  830. this.$refs['ruleForm'].clearValidate(['adMaxBid']);
  831. callback();
  832. }
  833. else {
  834. callback('最低出价不能高于最高出价');
  835. }
  836. };
  837. let adMaxBidValidator = (rule, value, callback) => {
  838. const finallyResult = Number(this.configForm.adMinBid);
  839. if (finallyResult && value && Number(value) > finallyResult) {
  840. this.$refs['ruleForm'].clearValidate(['adMinBid']);
  841. callback();
  842. }
  843. else {
  844. callback('最高出价不能低于最低出价');
  845. }
  846. };
  847. return {
  848. directionalData: [],
  849. platformLoadingType: '',
  850. selectPackageTabs: '1',
  851. deviceTypeList: [
  852. {
  853. value: 'NONE',
  854. label: '不限'
  855. },
  856. {
  857. value: 'MOBILE',
  858. label: '智能手机'
  859. },
  860. {
  861. value: 'PAD',
  862. label: '平板'
  863. }
  864. ],
  865. adAcList: [
  866. {
  867. value: 'NONE',
  868. label: '不限'
  869. },
  870. {
  871. value: 'WIFI',
  872. label: 'WI-FI'
  873. },
  874. {
  875. value: '2G',
  876. label: '2G'
  877. },
  878. {
  879. value: '3G',
  880. label: '3G'
  881. },
  882. {
  883. value: '4G',
  884. label: '4G'
  885. },
  886. ],
  887. adHideIfConvertedDataOption: [ // 过滤已转化用户option
  888. {
  889. id: 'NO_EXCLUDE',
  890. name: '不限'
  891. },
  892. {
  893. id: 'AD',
  894. name: '广告计划'
  895. },
  896. {
  897. id: 'CAMPAIGN',
  898. name: '广告组'
  899. },
  900. {
  901. id: 'ADVERTISER',
  902. name: '广告账户'
  903. },
  904. {
  905. id: 'CUSTOMER',
  906. name: '公司账户'
  907. },
  908. {
  909. id: 'APP',
  910. name: 'APP'
  911. }
  912. ],
  913. packageMessageDetail: [],
  914. selectiveList: [],
  915. isLadderBlur: false,
  916. ladderBlurTxt: '',
  917. isAdCpaBid11Blur: false,
  918. adCpaBid11BlurTxt: '',
  919. isAdCpaBidBlur: false,
  920. adCpaBidBlurTxt: '',
  921. listArr: [],
  922. regionCityListUrl: 'ctop/bytedanceAreaInfo/list',
  923. defaultAdBudget: '',
  924. adBudgetShowTitle: false,
  925. adBudgetNum: 1,
  926. campaignStatus: false,
  927. detailData: {},
  928. modalTitle: '',
  929. toolConvertList: [],
  930. optimizationOption: [],
  931. md5Result: '',
  932. urlResult: '',
  933. createOptions: [],
  934. adNameTags: ['出价方式', '素材名称', '日期', '创意方式'],
  935. fieldNames: {
  936. label: 'industryName',
  937. value: 'industryId',
  938. children: 'children'
  939. },
  940. ageArr: [
  941. {
  942. value: 'NONE',
  943. label: '不限'
  944. },
  945. {
  946. value: 'AGE_BETWEEN_18_23',
  947. label: '18-23岁'
  948. },
  949. {
  950. value: 'AGE_BETWEEN_24_30',
  951. label: '24-30岁'
  952. },
  953. {
  954. value: 'AGE_BETWEEN_31_40',
  955. label: '31-40岁'
  956. },
  957. {
  958. value: 'AGE_BETWEEN_41_49',
  959. label: '41-49岁'
  960. },
  961. {
  962. value: 'AGE_ABOVE_50',
  963. label: '50岁+'
  964. }
  965. ],
  966. fileList: [],
  967. isCoverImgDiv: false,
  968. imageUrl: '',
  969. creativeTag: [],
  970. radioStyle: {
  971. display: 'block',
  972. height: '30px',
  973. lineHeight: '30px',
  974. marginLeft: 0
  975. },
  976. labelCol: {span: 4},
  977. wrapperCol: {span: 14},
  978. rules: {
  979. adExternalUrl: [
  980. {required: true, message: '请输入', trigger: 'blur'},
  981. {validator: handleConfirmValue, trigger: 'blur'}
  982. ],
  983. adPackage: [
  984. {required: true, message: '请输入', trigger: 'blur'}
  985. ],
  986. adDownloadUrl: [
  987. {required: true, message: '请输入', trigger: 'blur'},
  988. {validator: handleConfirmValue, trigger: 'blur'}
  989. ],
  990. campaignCnt: [
  991. {required: true, message: '请输入', trigger: 'blur'}
  992. ],
  993. campaignAdCnt: [
  994. {required: true, message: '请输入', trigger: 'blur'}
  995. ],
  996. dpLinkStartIndex: [
  997. {required: true, message: '请输入', trigger: 'blur'}
  998. ],
  999. dpLinkEndIndex: [
  1000. {required: true, message: '请输入', trigger: 'blur'}
  1001. ],
  1002. accountBudget: [
  1003. {required: true, message: '请输入', trigger: 'blur'}
  1004. ],
  1005. campaignName: [
  1006. {required: true, message: '请输入广告组名称', trigger: 'blur'},
  1007. {validator: handleCharacterLen100, trigger: 'blur'}
  1008. ],
  1009. creativeSource: [
  1010. {required: true, message: '请输入', trigger: 'blur'},
  1011. {validator: handleCharacterLen20, trigger: 'blur'}
  1012. ],
  1013. adCpaBid: [
  1014. {required: true, message: '请输入', trigger: 'blur'}
  1015. ],
  1016. adStepBid: [
  1017. {required: true, message: '请输入', trigger: 'blur'},
  1018. {validator: floatingIntervalValidator, trigger: 'blur'}
  1019. ],
  1020. adMinBid: [
  1021. {required: true, message: '请输入最低出价', trigger: 'blur'},
  1022. {validator: adMinBidValidator, trigger: 'blur'}
  1023. ],
  1024. adMaxBid: [
  1025. {required: true, message: '请输入最高出价', trigger: 'blur'},
  1026. {validator: adMaxBidValidator, trigger: 'blur'}
  1027. ],
  1028. adName: [
  1029. {required: true, message: '请输入广告计划名称'},
  1030. {validator: handleCharacterLen100, trigger: 'blur'}
  1031. ],
  1032. creativeProductDescription: [
  1033. {required: true, message: '请输入', trigger: 'blur'},
  1034. {min: 1, max: 7, message: '请输入1-7个字', trigger: 'blur'}
  1035. ],
  1036. adAudiencePackageId: [{required: true, message: '请选择', trigger: 'change'}],
  1037. creativeCallToAction: [{required: true, message: '请选择', trigger: 'change'}],
  1038. adConvertType: [{required: true, message: '请选择', trigger: 'change'}],
  1039. adConvertId: [{required: true, message: '请选择', trigger: 'change'}],
  1040. creativeThirdIndustryIds: [{required: true, message: '请选择', trigger: 'change'}]
  1041. },
  1042. configForm: {
  1043. dpLinkIndexUsed: 0,
  1044. adRetargetingTagsType: '',
  1045. adAudiencePackageId: undefined,
  1046. adStepBid: 0,
  1047. ladderOne: '',
  1048. ladderTwo: '',
  1049. adMinBid: '',
  1050. adMaxBid: '',
  1051. adBidCreateType: 'FIX',
  1052. creativeOptions: [],
  1053. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  1054. adLocationType: 'HOME',
  1055. adCity: '',
  1056. adSelectCity: [],
  1057. defaultFormList: [],
  1058. productSellingPoints: [], // 商品买点
  1059. adBudgetMode: 'BUDGET_MODE_DAY', // 预算类型
  1060. adDownloadUrl: '', // 下载链接
  1061. accountBudget: 0, // 账户日预算
  1062. accountId: undefined, // 账户
  1063. dpLinkStartIndex: 1,
  1064. dpLinkEndIndex: 2,
  1065. accountBudgetMode: '1', // 预算方式
  1066. campaignLandingType: 'APP', // 推广目标
  1067. advertisingType: '1', // 广告类型
  1068. campaignName: '', // 广告组名称
  1069. adName: '', // 广告计划名称
  1070. campaignCnt: 1, // 广告组计划数量
  1071. campaignAdCnt: 1, // 广告计划数量
  1072. launchTarget: 'OCPM', // 投放目标
  1073. adDownloadType: 'EXTERNAL_URL', // 下载方式
  1074. adExternalUrl: '', // 落地页链接
  1075. adOpenUrl: '', // 直达链接内容
  1076. adPackage: '', // 应用包名
  1077. adConvertType: '', // 转化跟踪方式
  1078. adConvertId: '', // 优化目标 -- 走接口
  1079. adverPosition: 'a', // 广告位置
  1080. radioChangeValue: '', // 广告位置-按照场景指定位置
  1081. checkboxChangeValue: [], // 广告位置-按照媒体指定位置
  1082. adDistrict: 'NONE', // 定向-区域
  1083. adGender: 'NONE', // 定向-性别
  1084. adAge: '', // 定向-年龄
  1085. adSelectAge: ['NONE'],
  1086. customPerson: 'NONE', // 定向-自定义
  1087. adSuperiorPopularityType: 'NONE', // 定向-媒体定向
  1088. adPlatform: 'NONE', // 定向-平台
  1089. adDeviceSelectType: ['NONE'],
  1090. adSelectAc: ['NONE'],
  1091. adAc: '', // 定向-网络
  1092. adHideIfExists: '0', // 定向-已安装用户
  1093. adHideIfConverted: 'NO_EXCLUDE', // 定向-已转化用户
  1094. adAutoExtendEnabled: '0', // 定向-智能播放
  1095. adAndroidVersion: 'NONE', // 定向-安卓版本
  1096. androidChangeValue: '', // 安卓版本-自定义
  1097. adSmartBidType: 'SMART_BID_CUSTOM', // 投放场景
  1098. adBudget: 1, // 预算
  1099. adScheduleType: 'SCHEDULE_FROM_NOW', // 投放时间
  1100. launchDateRange: [], // 设置开始和结束时间
  1101. launchTimeInterval: 'buxian', // 投放时段
  1102. scheduleTimeData: str, // 指定时段选择
  1103. adPricing: 'PRICING_OCPM', // 付费方式
  1104. adCpaBid: 0.1, // 目标转化出价
  1105. creativeActionTrackUrl: '', // 监测地址
  1106. creativeMaterialMode: 'STATIC_ASSEMBLE', // 创意方式
  1107. creativeImageMode: 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL', // 创意内容
  1108. creativeProductDescription: '', // 卡片标题
  1109. creativeEnablePersonalAction: true, // 智能优选
  1110. creativeSource: '', // 来源
  1111. creativeThirdIndustryId: '', // 创意分类
  1112. creativeThirdIndustryIds: [], // 创意分类
  1113. adKeywords: [], // 创意标签
  1114. updateGetingInclude: [],
  1115. updateGetingExclude: [],
  1116. adRetargetingTagsInclude: '',
  1117. adRetargetingTagsExclude: '',
  1118. creativeCallToAction: '', // 行动号召
  1119. creativeLabel: undefined // 倡议标签
  1120. }
  1121. };
  1122. },
  1123. computed: {
  1124. selectOrientPlaceholder() {
  1125. if (!this.configForm.accountId) {
  1126. return '请选择账户';
  1127. }
  1128. else if (this.configForm.adDownloadType === 'DOWNLOAD_URL' && !this.platformLoadingType) {
  1129. return '请填写投放内容';
  1130. }
  1131. else if (this.configForm.adDownloadType === 'EXTERNAL_URL' && !this.configForm.adExternalUrl) {
  1132. return '请填写投放内容';
  1133. }
  1134. else {
  1135. return 'able';
  1136. }
  1137. },
  1138. getEndIndex() {
  1139. return Number(this.configForm.dpLinkStartIndex) + 1;
  1140. },
  1141. getSource() {
  1142. if (this.configForm.campaignLandingType !== 'APP' || (this.configForm.campaignLandingType === 'APP' && this.configForm.adDownloadType === 'EXTERNAL_URL')) {
  1143. return 'creativeSource';
  1144. }
  1145. },
  1146. NewAountId() {
  1147. return this.configForm.accountId;
  1148. },
  1149. NewAdPackage() {
  1150. return this.configForm.adPackage;
  1151. },
  1152. NewAdExternalUrl() {
  1153. return this.configForm.adExternalUrl;
  1154. }
  1155. },
  1156. watch: {
  1157. NewAdExternalUrl(newVal, oldVal) {
  1158. if (newVal && this.configForm.accountId) {
  1159. const paramsData = {
  1160. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  1161. advertiserId: this.configForm.accountId,
  1162. deliveryRange: 'DEFAULT',
  1163. externalUrl: this.configForm.adExternalUrl,
  1164. landingType: this.configForm.campaignLandingType,
  1165. promotionContent: this.configForm.adDownloadType
  1166. };
  1167. this.handleGetOptimizationObjective(paramsData);
  1168. this.handleGetAdAudiencePackage();
  1169. }
  1170. },
  1171. NewAdPackage(newVal, oldVal) {
  1172. if (newVal && this.configForm.accountId) {
  1173. const paramsData = {
  1174. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  1175. advertiserId: this.configForm.accountId,
  1176. appType: 'APP_ANDROID',
  1177. deliveryRange: 'DEFAULT',
  1178. externalUrl: this.configForm.adExternalUrl,
  1179. landingType: this.configForm.campaignLandingType,
  1180. packageName: this.configForm.adPackage,
  1181. promotionContent: this.configForm.adDownloadType
  1182. };
  1183. this.handleGetOptimizationObjective(paramsData);
  1184. }
  1185. },
  1186. platformLoadingType(newVal, oldVal) {
  1187. if (newVal && this.configForm.accountId) {
  1188. this.handleGetAdAudiencePackage();
  1189. }
  1190. },
  1191. NewAountId(newVal, oldVal) {
  1192. if (newVal && this.configForm.adPackage) {
  1193. const paramsData = {
  1194. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  1195. advertiserId: this.configForm.accountId,
  1196. appType: 'APP_ANDROID',
  1197. deliveryRange: 'DEFAULT',
  1198. externalUrl: this.configForm.adExternalUrl,
  1199. landingType: this.configForm.campaignLandingType,
  1200. packageName: this.configForm.adPackage,
  1201. promotionContent: this.configForm.adDownloadType
  1202. };
  1203. this.handleGetOptimizationObjective(paramsData);
  1204. }
  1205. if (newVal && this.platformLoadingType) {
  1206. this.handleGetAdAudiencePackage();
  1207. }
  1208. if (newVal) {
  1209. this.handleGetCreativeClassification();
  1210. this.handleGetAdvertiserStrategy();
  1211. this.handleDirectionalList();
  1212. }
  1213. else {
  1214. this.createOptions = [];
  1215. this.creativeOptions = [];
  1216. this.selectiveList = [];
  1217. this.optimizationOption = [];
  1218. }
  1219. }
  1220. },
  1221. mounted() {
  1222. const routeQuery = JSON.parse(localStorage.getItem('queryList'));
  1223. if (routeQuery.accountModal === 'edit') {
  1224. this.modalTitle = 'edit';
  1225. this.handleGetDetailList();
  1226. }
  1227. else if (routeQuery.accountModal === 'add') {
  1228. this.modalTitle = 'add';
  1229. }
  1230. },
  1231. methods: {
  1232. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  1233. moment,
  1234. handleCustomPerson(e) {
  1235. const defaultValue = e.target.value;
  1236. if (defaultValue === 'NONE') {
  1237. this.configForm.updateGetingInclude = [];
  1238. this.configForm.adRetargetingTagsInclude = '';
  1239. this.configForm.adRetargetingTagsExclude = '';
  1240. this.configForm.updateGetingExclude = [];
  1241. this.configForm.adRetargetingTagsType = '';
  1242. }
  1243. else if (defaultValue === 'a') {
  1244. this.configForm.adRetargetingTagsType = '1';
  1245. }
  1246. },
  1247. handleAsyncPackage() {
  1248. this.handleGetAdAudiencePackage();
  1249. this.configForm.adAudiencePackageId = undefined;
  1250. this.packageMessageDetail = [];
  1251. },
  1252. handleDpLinkIndexUsed(e) {
  1253. const defaultId = e.target.value;
  1254. if (defaultId === 0) {
  1255. this.adNameTags.pop();
  1256. this.configForm.dpLinkStartIndex = 1;
  1257. this.configForm.dpLinkEndIndex = 2;
  1258. this.configForm.campaignCnt = 1;
  1259. }
  1260. else if (defaultId === 1) {
  1261. this.adNameTags.push('dp链接标识');
  1262. }
  1263. },
  1264. handleDplinkStart(e) {
  1265. this.configForm.dpLinkStartIndex = Math.round(e);
  1266. },
  1267. handleDplinkEnd(e) {
  1268. this.configForm.dpLinkEndIndex = Math.round(e);
  1269. },
  1270. handleFloatingInterval(e) {
  1271. this.configForm.adStepBid = Number(Number(e.target.value).toFixed(2));
  1272. },
  1273. handleDirectionalList() {
  1274. const paramsData = {
  1275. accountId: this.configForm.accountId
  1276. };
  1277. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getDMPCustomAudience', paramsData).then(result => {
  1278. if (result.code === 0) {
  1279. result.result.forEach(item => {
  1280. item.key = item.custom_audience_id;
  1281. });
  1282. this.directionalData = result.result;
  1283. }
  1284. else {
  1285. this.$message.error(result.message);
  1286. }
  1287. }).catch(error => {
  1288. console.log(error, 'eeee');
  1289. });
  1290. },
  1291. handleSelectionAloneEvent(list) {
  1292. if (this.configForm.adRetargetingTagsType === '1') {
  1293. this.configForm.updateGetingInclude = list;
  1294. this.configForm.adRetargetingTagsInclude = list && list.join(',');
  1295. this.configForm.adRetargetingTagsExclude = '';
  1296. this.configForm.updateGetingExclude = [];
  1297. }
  1298. else if (this.configForm.adRetargetingTagsType === '2') {
  1299. this.configForm.updateGetingExclude = list;
  1300. this.configForm.adRetargetingTagsExclude = list && list.join(',');
  1301. this.configForm.updateGetingInclude = [];
  1302. this.configForm.adRetargetingTagsInclude = '';
  1303. }
  1304. },
  1305. handleDirectEvent(list) {
  1306. this.configForm.updateGetingInclude = list;
  1307. this.configForm.adRetargetingTagsInclude = list && list.join(',');
  1308. },
  1309. handleExcludeEvent(list) {
  1310. this.configForm.updateGetingExclude = list;
  1311. this.configForm.adRetargetingTagsExclude = list && list.join(',');
  1312. },
  1313. handleDirectionalLogic(e) {
  1314. const selectValue = e.target.value;
  1315. this.handleDirectionalList();
  1316. if (selectValue === '1') {
  1317. this.$refs.exclude.aloneInput = '';
  1318. this.$refs.twoway.directInput = '';
  1319. this.$refs.twoway.excludeInput = '';
  1320. }
  1321. else if (selectValue === '2') {
  1322. this.$refs.direct.aloneInput = '';
  1323. this.$refs.twoway.directInput = '';
  1324. this.$refs.twoway.excludeInput = '';
  1325. }
  1326. else if (selectValue === '3') {
  1327. this.$refs.direct.aloneInput = '';
  1328. this.$refs.exclude.aloneInput = '';
  1329. }
  1330. },
  1331. handleGetAdAudiencePackage() {
  1332. const params = {
  1333. accountId: this.configForm.accountId,
  1334. landingType: this.configForm.adDownloadType === 'DOWNLOAD_URL' ? this.platformLoadingType : 'EXTERNAL'
  1335. };
  1336. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', params)
  1337. .then(result => {
  1338. if (result.code === 0) {
  1339. this.selectiveList = result.result || [];
  1340. }
  1341. else {
  1342. this.$message.error(result.message);
  1343. }
  1344. })
  1345. .catch(error => {
  1346. console.log(error, 'eeee');
  1347. });
  1348. },
  1349. handleSelectiveOrientation(e) {
  1350. const ageUpdateList = [];
  1351. const defaultData = this.selectiveList.filter(item => item.audience_package_id === e);
  1352. defaultData.forEach(item => {
  1353. item.replaceSex = item.audience.gender === 'NONE' ? '不限' : item.audience.gender === 'GENDER_FEMALE' ? '女' : '男';
  1354. item.replaceEnabled = item.audience.auto_extend_enabled === 1 ? '开启' : '不开启';
  1355. item.replacePlate = item.audience.platform && item.audience.platform.length ? item.audience.platform.join(',') : '不限';
  1356. item.replaceCitys = item.audience.cityNames && item.audience.cityNames.length ? item.audience.cityNames.join(',') : '不限';
  1357. this.ageArr.forEach(val => {
  1358. if (item.audience.age && item.audience.age.length && item.audience.age.includes(val.value)) {
  1359. ageUpdateList.push(val.label);
  1360. }
  1361. });
  1362. item.replaceAge = ageUpdateList.length ? ageUpdateList.join(',') : '不限';
  1363. });
  1364. this.packageMessageDetail = defaultData;
  1365. },
  1366. handleBiddingMethod(e) {
  1367. this.configForm.adCpaBid = 0;
  1368. this.configForm.adMinBid = '';
  1369. this.configForm.adMaxBid = '';
  1370. this.configForm.adStepBid = 0;
  1371. this.$refs['ruleForm'].clearValidate(['adMinBid']);
  1372. this.$refs['ruleForm'].clearValidate(['adMaxBid']);
  1373. },
  1374. handleAdCpaBidBlur(e) {
  1375. const defaultValue = e.target.value;
  1376. if (this.configForm.adBudget > 0 && defaultValue > this.configForm.adBudget) {
  1377. this.isAdCpaBidBlur = true;
  1378. this.adCpaBidBlurTxt = '出价不能大于预算';
  1379. }
  1380. else if (defaultValue > 10000) {
  1381. this.isAdCpaBidBlur = true;
  1382. this.adCpaBidBlurTxt = '目标转化出价不少于0.1元,不超过10000元,请正确输入';
  1383. }
  1384. else {
  1385. this.isAdCpaBidBlur = false;
  1386. }
  1387. },
  1388. handleGetAdvertiserStrategy() {
  1389. const params = {
  1390. accountId: this.configForm.accountId,
  1391. landingType: this.configForm.campaignLandingType,
  1392. advancedCreativeType: 'ATTACHED_CREATIVE_NONE'
  1393. };
  1394. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdActionText', params)
  1395. .then(result => {
  1396. if (result.code === 0) {
  1397. this.configForm.creativeOptions = result.result;
  1398. }
  1399. else {
  1400. this.$message.error(result.message);
  1401. }
  1402. })
  1403. .catch(error => {
  1404. console.log(error, 'eeee');
  1405. });
  1406. },
  1407. // 获取选中的城市
  1408. getSelectedCityArr(val) {
  1409. setTimeout(() => {
  1410. this.configForm.adSelectCity = val;
  1411. }, 200);
  1412. },
  1413. handleCheckedShowList(val) {
  1414. if (val.length) {
  1415. this.configForm.adSelectCity = val.map(item => item.code);
  1416. }
  1417. else {
  1418. this.configForm.adSelectCity = [];
  1419. }
  1420. },
  1421. getAgeSelect(data) {
  1422. if (data.length > 1 && data.findIndex(item => item === 'NONE') === 0) {
  1423. data.splice(data.findIndex(item => item === 'NONE'), 1);
  1424. }
  1425. else if (data.length > 1 && data.findIndex(item => item === 'NONE') === data.length - 1) {
  1426. data.splice(0, data.length - 1);
  1427. }
  1428. else if (data.length === 0) {
  1429. data.push('NONE');
  1430. }
  1431. },
  1432. handleAdBudgetBlur(e) {
  1433. const adBudgetInput = e.target.value;
  1434. this.configForm.adBudget = Number(Number(adBudgetInput).toFixed(2));
  1435. if (this.configForm.adCpaBid > adBudgetInput) {
  1436. this.isAdCpaBidBlur = true;
  1437. this.adCpaBidBlurTxt = '出价不能大于预算';
  1438. }
  1439. else {
  1440. this.isAdCpaBidBlur = false;
  1441. }
  1442. if (this.modalTitle === 'edit') {
  1443. if (Number(adBudgetInput) >= Number(this.defaultAdBudget) && Number(adBudgetInput) < (Number(this.defaultAdBudget) + 100)) {
  1444. this.adBudgetShowTitle = true;
  1445. }
  1446. else if (Number(adBudgetInput) <= Number(this.defaultAdBudget) && Number(adBudgetInput) > (Number(this.defaultAdBudget) - 100)) {
  1447. this.adBudgetShowTitle = true;
  1448. }
  1449. else {
  1450. this.adBudgetShowTitle = false;
  1451. }
  1452. }
  1453. },
  1454. handleAccountBudget(e) {
  1455. this.configForm.accountBudget = Number(Number(e.target.value).toFixed(2));
  1456. },
  1457. handleExportRules(value, min, max, callback) {
  1458. let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
  1459. let length = 0;
  1460. let strArr = value.split('');
  1461. strArr.forEach(item => {
  1462. if (cnReg.test(item)) {
  1463. length += 2;
  1464. }
  1465. else {
  1466. length += 1;
  1467. }
  1468. });
  1469. if (min <= length && length <= max) {
  1470. callback();
  1471. }
  1472. else {
  1473. callback(`只能输入${min}-${max}个字符`);
  1474. }
  1475. },
  1476. handleGetPackage() {
  1477. const params = {
  1478. urlPath: this.configForm.adDownloadUrl
  1479. };
  1480. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getPackageNameByUrl', params)
  1481. .then(result => {
  1482. if (result.code === 0) {
  1483. this.configForm.adPackage = result.result.package || '';
  1484. this.platformLoadingType = result.result.platform || '';
  1485. if (result.result.platform && result.result.platform === 'APP_ANDROID') {
  1486. this.configForm.adPlatform = 'ANDROID';
  1487. }
  1488. else if (result.result.platform && result.result.platform === 'APP_IOS') {
  1489. this.configForm.adPlatform = 'IOS';
  1490. }
  1491. }
  1492. else {
  1493. this.$message.error(result.message);
  1494. }
  1495. })
  1496. .catch(error => {
  1497. console.log(error, 'eeee');
  1498. });
  1499. },
  1500. handleAndroidVersion(e) {
  1501. if (e.target.value === 'NONE') {
  1502. this.configForm.androidChangeValue = '';
  1503. }
  1504. },
  1505. handleAdScheduleType(e) {
  1506. if (e.target.value === 'SCHEDULE_FROM_NOW') {
  1507. this.configForm.launchDateRange = [];
  1508. }
  1509. },
  1510. handleLaunchTimeInterval(e) {
  1511. if (e.target.value === 'buxian') {
  1512. this.configForm.scheduleTimeData = str;
  1513. }
  1514. },
  1515. handleAdverPosition(e) {
  1516. if (e.target.value === 'a') {
  1517. this.configForm.radioChangeValue = '';
  1518. this.configForm.checkboxChangeValue = [];
  1519. }
  1520. else if (e.target.value === 'b') {
  1521. this.configForm.radioChangeValue = '';
  1522. }
  1523. else if (e.target.value === 'c') {
  1524. this.configForm.checkboxChangeValue = [];
  1525. }
  1526. },
  1527. handleAccountMode(e) {
  1528. this.configForm.accountBudget = 0;
  1529. },
  1530. handleAdDownLoadType(e) {
  1531. this.optimizationOption = [];
  1532. const defaultValue = e.target.value;
  1533. if (defaultValue === 'DOWNLOAD_URL') {
  1534. this.configForm.adExternalUrl = '';
  1535. this.configForm.adOpenUrl = '';
  1536. this.$refs.ruleForm.clearValidate(['adExternalUrl']);
  1537. }
  1538. else if (defaultValue === 'EXTERNAL_URL') {
  1539. this.configForm.adDownloadUrl = '';
  1540. this.configForm.adPackage = '';
  1541. this.configForm.adConvertId = '';
  1542. this.$refs.ruleForm.clearValidate(['adDownloadUrl']);
  1543. this.$refs.ruleForm.clearValidate(['adPackage']);
  1544. }
  1545. },
  1546. handleCampaignCnt(e) {
  1547. const finallyResult = e * this.configForm.campaignAdCnt;
  1548. if (finallyResult > 500) {
  1549. this.campaignStatus = true;
  1550. }
  1551. else {
  1552. this.campaignStatus = false;
  1553. }
  1554. },
  1555. handleCampaignAdCnt(e) {
  1556. const finallyResult = e * this.configForm.campaignCnt;
  1557. if (finallyResult > 500) {
  1558. this.campaignStatus = true;
  1559. }
  1560. else {
  1561. this.campaignStatus = false;
  1562. }
  1563. },
  1564. handleConvertChange(e) {
  1565. const convertTitle = this.optimizationOption.filter(item => item.convert_id === e);
  1566. this.configForm.creativeActionTrackUrl = convertTitle[0].action_track_url;
  1567. },
  1568. handleGetDetailList() {
  1569. const routeQuery = JSON.parse(localStorage.getItem('queryList'));
  1570. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/queryById', {id: routeQuery.id})
  1571. .then(result => {
  1572. if (result.code === 0) {
  1573. const detailData = result.result;
  1574. this.configForm.accountId = detailData.accountId;
  1575. if (detailData.adAudiencePackageId) {
  1576. this.selectPackageTabs = '2';
  1577. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', {accountId: detailData.accountId})
  1578. .then(result => {
  1579. if (result.code === 0) {
  1580. this.selectiveList = result.result || [];
  1581. this.configForm.adAudiencePackageId = Number(detailData.adAudiencePackageId);
  1582. this.handleSelectiveOrientation(Number(detailData.adAudiencePackageId));
  1583. }
  1584. else {
  1585. this.$message.error(result.message);
  1586. }
  1587. })
  1588. .catch(error => {
  1589. console.log(error, 'eeee');
  1590. });
  1591. }
  1592. else {
  1593. this.selectPackageTabs = '1';
  1594. }
  1595. this.configForm.dpLinkStartIndex = detailData.dpLinkStartIndex;
  1596. this.configForm.dpLinkEndIndex = detailData.dpLinkEndIndex;
  1597. this.configForm.accountBudgetMode = detailData.accountBudgetMode;
  1598. this.configForm.accountBudget = detailData.accountBudget;
  1599. this.configForm.campaignLandingType = detailData.campaignLandingType;
  1600. this.configForm.advertisingType = detailData.advertisingType || '1';
  1601. this.configForm.campaignName = detailData.campaignName || '';
  1602. this.configForm.dpLinkIndexUsed = detailData.dpLinkIndexUsed;
  1603. if (detailData.dpLinkIndexUsed === 1) {
  1604. this.adNameTags.push('dp链接标识');
  1605. }
  1606. this.configForm.adName = detailData.adName || '';
  1607. this.configForm.campaignCnt = detailData.campaignCnt || '';
  1608. this.configForm.campaignAdCnt = detailData.campaignAdCnt || '';
  1609. this.configForm.launchTarget = detailData.launchTarget || 'OCPM';
  1610. this.configForm.adDownloadType = detailData.adDownloadType || 'DOWNLOAD_URL';
  1611. this.configForm.adExternalUrl = detailData.adExternalUrl || '';
  1612. this.configForm.adOpenUrl = detailData.adOpenUrl || '';
  1613. this.configForm.adDownloadUrl = detailData.adDownloadUrl || '';
  1614. this.configForm.adPackage = detailData.adPackage || '';
  1615. this.configForm.adConvertType = detailData.adConvertType || '';
  1616. this.configForm.adDistrict = detailData.adDistrict || 'NONE';
  1617. setTimeout(() => {
  1618. this.listArr = detailData.adCity.split(',');
  1619. this.configForm.adSelectCity = detailData.adCity.split(',');
  1620. }, 200);
  1621. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getDMPCustomAudience', {accountId: detailData.accountId}).then(result => {
  1622. if (result.code === 0) {
  1623. result.result.forEach(item => {
  1624. item.key = item.custom_audience_id;
  1625. });
  1626. this.directionalData = result.result;
  1627. this.configForm.adRetargetingTagsType = detailData.adRetargetingTagsType || '1';
  1628. if (detailData.adRetargetingTagsType === '3') {
  1629. this.configForm.customPerson = 'a';
  1630. this.configForm.adRetargetingTagsInclude = detailData.adRetargetingTagsInclude;
  1631. this.configForm.adRetargetingTagsExclude = detailData.adRetargetingTagsExclude;
  1632. this.configForm.updateGetingExclude = detailData.adRetargetingTagsExclude ? detailData.adRetargetingTagsExclude.split(',').map(item => Number(item)) : [];
  1633. this.configForm.updateGetingInclude = detailData.adRetargetingTagsInclude ? detailData.adRetargetingTagsInclude.split(',').map(item => Number(item)) : [];
  1634. }
  1635. else if (detailData.adRetargetingTagsType === '2') {
  1636. this.configForm.customPerson = 'a';
  1637. this.configForm.adRetargetingTagsExclude = detailData.adRetargetingTagsExclude;
  1638. this.configForm.updateGetingExclude = detailData.adRetargetingTagsExclude.split(',').map(item => Number(item));
  1639. this.configForm.updateGetingInclude = [];
  1640. }
  1641. else if (detailData.adRetargetingTagsType === '1') {
  1642. this.configForm.customPerson = 'a';
  1643. this.configForm.adRetargetingTagsInclude = detailData.adRetargetingTagsInclude;
  1644. this.configForm.updateGetingExclude = [];
  1645. this.configForm.updateGetingInclude = detailData.adRetargetingTagsInclude.split(',').map(item => Number(item));
  1646. }
  1647. else {
  1648. this.configForm.customPerson = 'NONE';
  1649. this.configForm.adRetargetingTagsExclude = '';
  1650. this.configForm.updateGetingExclude = '';
  1651. this.configForm.updateGetingInclude = [];
  1652. this.configForm.updateGetingExclude = [];
  1653. }
  1654. }
  1655. else {
  1656. this.$message.error(result.message);
  1657. }
  1658. }).catch(error => {
  1659. console.log(error, 'eeee');
  1660. });
  1661. this.configForm.adGender = detailData.adGender || 'NONE';
  1662. this.configForm.adLocationType = detailData.adLocationType;
  1663. this.configForm.adSelectAge = detailData.adAge.split(',');
  1664. this.configForm.adSelectAc = detailData.adAc.split(',');
  1665. this.configForm.adDeviceSelectType = detailData.adDeviceType.split(',');
  1666. this.configForm.adSuperiorPopularityType = detailData.adSuperiorPopularityType;
  1667. this.configForm.adPlatform = detailData.adPlatform;
  1668. this.configForm.adAc = detailData.adAc;
  1669. this.configForm.adHideIfExists = String(detailData.adHideIfExists);
  1670. this.configForm.adHideIfConverted = detailData.adHideIfConverted;
  1671. this.configForm.adAutoExtendEnabled = detailData.adAutoExtendEnabled;
  1672. this.configForm.adSmartBidType = detailData.adSmartBidType;
  1673. this.configForm.adBudgetMode = detailData.adBudgetMode;
  1674. this.configForm.adBudget = detailData.adBudget;
  1675. this.defaultAdBudget = detailData.adBudget;
  1676. this.configForm.adScheduleType = detailData.adScheduleType;
  1677. this.configForm.launchDateRange[0] = detailData.adStartTime;
  1678. this.configForm.launchDateRange[1] = detailData.adEndTime;
  1679. this.configForm.adPricing = detailData.adPricing;
  1680. this.configForm.adCpaBid = detailData.adCpaBid;
  1681. this.configForm.creativeActionTrackUrl = detailData.creativeActionTrackUrl;
  1682. this.configForm.creativeMaterialMode = detailData.creativeMaterialMode;
  1683. this.configForm.creativeImageMode = detailData.creativeImageMode;
  1684. this.configForm.creativeProductDescription = detailData.creativeProductDescription;
  1685. this.configForm.creativeEnablePersonalAction = detailData.creativeEnablePersonalAction;
  1686. this.configForm.creativeCallToAction = detailData.creativeCallToAction;
  1687. this.configForm.creativeSource = detailData.creativeSource;
  1688. this.configForm.adBidCreateType = detailData.adBidCreateType;
  1689. this.configForm.adMinBid = detailData.adMinBid;
  1690. this.configForm.adMaxBid = detailData.adMaxBid;
  1691. this.configForm.adStepBid = detailData.adStepBid;
  1692. this.configForm.adBidCreateType = detailData.adBidCreateType;
  1693. this.configForm.creativeThirdIndustryIds[0] = detailData.creativeThirdIndustryId.substr(0, 4);
  1694. this.configForm.creativeThirdIndustryIds[1] = detailData.creativeThirdIndustryId.substr(0, 6);
  1695. this.configForm.creativeThirdIndustryIds[2] = detailData.creativeThirdIndustryId;
  1696. this.imageUrl = detailData.imageUrl;
  1697. this.urlResult = detailData.imageUrl;
  1698. this.md5Result = detailData.creativeProductImageCode;
  1699. this.handleGetPackage();
  1700. if (detailData.adAndroidOsv !== 'NONE') {
  1701. this.configForm.adAndroidVersion = 'a';
  1702. this.configForm.androidChangeValue = detailData.adAndroidOsv;
  1703. }
  1704. else {
  1705. this.configForm.adAndroidVersion = 'NONE';
  1706. }
  1707. if (detailData.productSellingPoints) {
  1708. let productPointsList = [];
  1709. const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
  1710. detailData.productSellingPoints.forEach((item, index) => {
  1711. productPointsList.push({
  1712. id: randomNum + index,
  1713. value: item
  1714. });
  1715. });
  1716. this.configForm.defaultFormList = productPointsList;
  1717. }
  1718. if (detailData.adScheduleTime.indexOf(1) !== -1) {
  1719. this.configForm.launchTimeInterval = 'a';
  1720. this.configForm.scheduleTimeData = detailData.adScheduleTime;
  1721. }
  1722. else {
  1723. this.configForm.launchTimeInterval = 'buxian';
  1724. }
  1725. if (detailData.creativeSceneInventory) {
  1726. this.configForm.adverPosition = 'c';
  1727. this.configForm.radioChangeValue = detailData.creativeSceneInventory;
  1728. }
  1729. else if (detailData.creativeInventoryType) {
  1730. this.configForm.adverPosition = 'b';
  1731. this.configForm.checkboxChangeValue = detailData.creativeInventoryType.split(',');
  1732. }
  1733. else {
  1734. this.configForm.adverPosition = 'a';
  1735. }
  1736. if (detailData.adKeywords) {
  1737. this.creativeTag = detailData.adKeywords;
  1738. }
  1739. let paramsData = {};
  1740. if (this.configForm.adDownloadType === 'DOWNLOAD_URL') {
  1741. paramsData = {
  1742. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  1743. advertiserId: this.configForm.accountId,
  1744. appType: 'APP_ANDROID',
  1745. deliveryRange: 'DEFAULT',
  1746. externalUrl: this.configForm.adExternalUrl,
  1747. landingType: this.configForm.campaignLandingType,
  1748. packageName: this.configForm.adPackage,
  1749. promotionContent: this.configForm.adDownloadType
  1750. };
  1751. }
  1752. else if (this.configForm.adDownloadType === 'EXTERNAL_URL') {
  1753. paramsData = {
  1754. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  1755. advertiserId: this.configForm.accountId,
  1756. deliveryRange: 'DEFAULT',
  1757. externalUrl: this.configForm.adExternalUrl,
  1758. landingType: this.configForm.campaignLandingType,
  1759. promotionContent: this.configForm.adDownloadType
  1760. };
  1761. }
  1762. postAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getToolConvert', paramsData).then(result => {
  1763. if (result.code === 0) {
  1764. const updateResult = result.result.filter(item => item.external_actions.length > 0);
  1765. this.configForm.adConvertType = updateResult[0].convert_type;
  1766. this.optimizationOption = updateResult[0].external_actions;
  1767. setTimeout(() => {
  1768. this.configForm.adConvertId = detailData.adConvertId;
  1769. }, 300);
  1770. }
  1771. else {
  1772. this.$message.error(result.message);
  1773. }
  1774. }).catch(error => {
  1775. console.log(error, 'eeee');
  1776. });
  1777. }
  1778. else {
  1779. this.$message.error(result.message);
  1780. }
  1781. })
  1782. .catch(error => {
  1783. console.log(error, 'eeee');
  1784. });
  1785. },
  1786. handleConvertTypeChange(e) {
  1787. this.configForm.adConvertId = '';
  1788. this.toolConvertList.forEach(item => {
  1789. if (item.convert_type === e) {
  1790. this.optimizationOption = item.external_actions;
  1791. }
  1792. });
  1793. },
  1794. // 优化目标数据获取
  1795. handleGetOptimizationObjective(paramsData) {
  1796. postAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getToolConvert', paramsData).then(result => {
  1797. if (result.code === 0) {
  1798. this.toolConvertList = result.result;
  1799. if (this.configForm.adConvertType) {
  1800. this.handleConvertTypeChange(this.configForm.adConvertType);
  1801. }
  1802. }
  1803. else {
  1804. this.$message.error(result.message);
  1805. }
  1806. }).catch(error => {
  1807. console.log(error, 'eeee');
  1808. });
  1809. },
  1810. // 创意分类接口
  1811. handleGetCreativeClassification() {
  1812. const paramsData = {
  1813. accountId: this.configForm.accountId
  1814. };
  1815. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getIndustryList', paramsData).then(result => {
  1816. if (result.code === 0) {
  1817. this.createOptions = result.result;
  1818. }
  1819. else {
  1820. this.$message.error(result.message);
  1821. }
  1822. }).catch(error => {
  1823. console.log(error, 'eeee');
  1824. });
  1825. },
  1826. handleAddList(data) {
  1827. postAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/addBytedanceStrategy', data).then(result => {
  1828. if (result.code === 0) {
  1829. this.$message.success('创建成功');
  1830. this.$router.replace('/account-config/account-config');
  1831. this.$bus.$emit('remove', '/account-config/components/configuration-modal');
  1832. }
  1833. else {
  1834. this.$message.error(result.message);
  1835. }
  1836. }).catch(error => {
  1837. console.log(error, 'eeee');
  1838. });
  1839. },
  1840. // 点击获取光标位置进行字段插入
  1841. handleGetChangeAll(item, field) {
  1842. let node = document.getElementById(field);
  1843. let startPos = node.selectionStart; // input 第0个字符到选中的字符
  1844. let endPos = node.selectionEnd; // 选中的字符到最后的字符
  1845. let txt = node.value;
  1846. if (startPos === 0 || endPos === 0) {
  1847. this.configForm.adName += '-{{' + item + '}}-';
  1848. }
  1849. else {
  1850. this.configForm.adName = txt.substring(0, startPos) + '-{{' + item + '}}-' + txt.substring(endPos);
  1851. node.selectionStart = startPos + item.length + 6;
  1852. node.selectionEnd = startPos + item.length + 6;
  1853. }
  1854. node.focus();
  1855. node.blur();
  1856. },
  1857. handleLaunchData(date, dateString) {
  1858. this.configForm.launchDateRange = dateString;
  1859. },
  1860. handleBudgetMode(e) {
  1861. if (e === 'BUDGET_MODE_TOTAL') {
  1862. this.configForm.adScheduleType = 'SCHEDULE_START_END';
  1863. this.adBudgetNum = this.configForm.launchTarget === 'OCPM' ? 300 : 0;
  1864. this.configForm.adBudget = 300;
  1865. if (Number(this.configForm.adCpaBid) > Number(this.configForm.adBudget)) {
  1866. this.isAdCpaBidBlur = true;
  1867. this.adCpaBidBlurTxt = '出价不能大于预算';
  1868. }
  1869. else {
  1870. this.isAdCpaBidBlur = false;
  1871. this.adCpaBidBlurTxt = '';
  1872. }
  1873. this.$message.warning('请设置投放时间');
  1874. }
  1875. else if (e === 'BUDGET_MODE_DAY') {
  1876. this.adBudgetNum = 0;
  1877. this.configForm.adBudget = 0;
  1878. }
  1879. },
  1880. handleDelOrigin(list) {
  1881. let formData = this.configForm.defaultFormList;
  1882. this.configForm.defaultFormList = formData.filter(item => list.id !== item.id);
  1883. },
  1884. handleAddOrigin() {
  1885. if (this.configForm.defaultFormList.length >= 10) {
  1886. this.$message.error('最多可以添加10个卖点');
  1887. return;
  1888. }
  1889. const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
  1890. this.$nextTick(() => {
  1891. this.configForm.defaultFormList.push({
  1892. id: randomNum,
  1893. value: ''
  1894. });
  1895. });
  1896. },
  1897. handleDownloadLink(e) {
  1898. this.handleGetPackage();
  1899. },
  1900. handleDeleteImg() {
  1901. this.imageUrl = '';
  1902. this.isCoverImgDiv = false;
  1903. },
  1904. handleChangeActive() {
  1905. this.isCoverImgDiv = true;
  1906. },
  1907. handleRemoveActive() {
  1908. this.isCoverImgDiv = false;
  1909. },
  1910. getBase64(img, callback) {
  1911. const reader = new FileReader();
  1912. reader.addEventListener('load', () => callback(reader.result));
  1913. reader.readAsDataURL(img);
  1914. },
  1915. beforeUpload(info) {
  1916. const isZip = info.type.includes('png') || info.type.includes('jpeg');
  1917. const fileOvesize = info.size > (1024 * 1024);
  1918. if (!isZip) {
  1919. this.$message.error('请上传正确类型的图片');
  1920. this.imageUrl = '';
  1921. this.urlResult = '';
  1922. this.md5Result = '';
  1923. return;
  1924. }
  1925. if (fileOvesize) {
  1926. this.$message.error('图片大小不能超过1M');
  1927. this.imageUrl = '';
  1928. this.urlResult = '';
  1929. this.md5Result = '';
  1930. return;
  1931. }
  1932. new Promise(function (resolve, reject) {
  1933. let width = 108;
  1934. let height = 108;
  1935. let _URL = window.URL || window.webkitURL;
  1936. let img = new Image();
  1937. img.onload = function () {
  1938. let valid = img.width === width && img.height === height;
  1939. valid ? resolve() : reject();
  1940. };
  1941. img.src = _URL.createObjectURL(info);
  1942. }).then(() => {
  1943. this.handleMd5(info);
  1944. this.getBase64(info, imageUrl => {
  1945. this.imageUrl = imageUrl;
  1946. });
  1947. }, () => {
  1948. this.$message.error('图片尺寸必须是108*108!');
  1949. this.imageUrl = '';
  1950. this.urlResult = '';
  1951. this.md5Result = '';
  1952. return Promise.reject();
  1953. });
  1954. },
  1955. cosUpload(file) {
  1956. let that = this;
  1957. let date = new Date();
  1958. let y = date.getFullYear();
  1959. let MM = date.getMonth() + 1;
  1960. MM = MM < 10 ? '0' + MM : MM;
  1961. let d = date.getDate();
  1962. d = d < 10 ? '0' + d : d;
  1963. let timeElse = new Date().getTime();
  1964. let arr = file.name.split('.');
  1965. let str = '';
  1966. for (let i = 0; i < arr.length; i++) {
  1967. if (i === arr.length - 1) {
  1968. }
  1969. else {
  1970. if (i === arr.length - 2) {
  1971. str += arr[i];
  1972. }
  1973. else {
  1974. str += arr[i] + '.';
  1975. }
  1976. }
  1977. }
  1978. cos.putObject(
  1979. {
  1980. Bucket: 'media-1301855440',
  1981. Region: 'ap-chongqing',
  1982. // 存储桶所在地域,必须字段
  1983. Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
  1984. StorageClass: 'STANDARD',
  1985. Body: file // 上传文件对象
  1986. },
  1987. function (err, data) {
  1988. if (err) {
  1989. that.$message.error('上传失败!!!' + err);
  1990. return;
  1991. }
  1992. that.loadingElse = false;
  1993. that.fileList.push({
  1994. uid: file.name,
  1995. name: file.name,
  1996. status: 'done',
  1997. url: '//' + data.Location
  1998. });
  1999. that.urlResult = '//' + data.Location;
  2000. }
  2001. );
  2002. },
  2003. handleMd5(file) {
  2004. let bmf = new BMF();
  2005. let that = this;
  2006. return new Promise(function (resolve, reject) {
  2007. bmf.md5(file, (err, md5) => {
  2008. that.md5Result = md5;
  2009. getAction('/file/imageCheck', {code: md5}).then(result => {
  2010. if (result.code === -206) {
  2011. that.cosUpload(file);
  2012. resolve();
  2013. }
  2014. else {
  2015. that.urlResult = result.url;
  2016. // reject();
  2017. }
  2018. }).catch(error => {
  2019. console.log(error, 'eeee');
  2020. reject();
  2021. });
  2022. });
  2023. });
  2024. },
  2025. handleRelaxSure() {
  2026. let paramsFormData = this.configForm;
  2027. if (this.configForm.adDistrict === 'CITY') {
  2028. if (!this.configForm.adSelectCity.length) {
  2029. this.$message.error('请选择省市');
  2030. return;
  2031. }
  2032. }
  2033. if (this.selectPackageTabs === '2' && !this.configForm.adAudiencePackageId) {
  2034. this.$message.error('请选择已有定向包');
  2035. return;
  2036. }
  2037. if (this.configForm.adScheduleType === 'SCHEDULE_START_END' && !this.configForm.launchDateRange.length) {
  2038. this.$message.error('请选择投放时间');
  2039. return;
  2040. }
  2041. if (this.configForm.launchTimeInterval === 'a' && this.configForm.scheduleTimeData === str) {
  2042. this.$message.error('请选择投放时段');
  2043. return;
  2044. }
  2045. if (!this.urlResult) {
  2046. this.$message.error('请上传图片');
  2047. return;
  2048. }
  2049. if (!this.configForm.defaultFormList.length) {
  2050. this.$message.error('请添加卖点');
  2051. return;
  2052. }
  2053. if (!this.creativeTag.length) {
  2054. this.$message.error('请添加标签');
  2055. return;
  2056. }
  2057. if (this.campaignStatus) {
  2058. return;
  2059. }
  2060. if (this.configForm.adBudget < this.configForm.adCpaBid) {
  2061. this.isAdCpaBidBlur = true;
  2062. this.adCpaBidBlurTxt = '出价不能大于预算';
  2063. return;
  2064. }
  2065. else {
  2066. this.isAdCpaBidBlur = false;
  2067. }
  2068. if (paramsFormData.adverPosition === 'a') {
  2069. paramsFormData.creativeSmartInventory = 1;
  2070. }
  2071. else if (paramsFormData.adverPosition === 'b') {
  2072. paramsFormData.creativeInventoryTypes = paramsFormData.checkboxChangeValue;
  2073. }
  2074. else if (paramsFormData.adverPosition === 'c') {
  2075. paramsFormData.creativeSceneInventory = paramsFormData.radioChangeValue;
  2076. }
  2077. if (paramsFormData.launchTimeInterval === 'buxian') {
  2078. paramsFormData.adScheduleTime = '';
  2079. }
  2080. else if (paramsFormData.launchTimeInterval === 'a') {
  2081. paramsFormData.adScheduleTime = paramsFormData.scheduleTimeData;
  2082. }
  2083. if (paramsFormData.adScheduleType === 'SCHEDULE_START_END') {
  2084. paramsFormData.adStartTime = paramsFormData.launchDateRange[0];
  2085. paramsFormData.adEndTime = paramsFormData.launchDateRange[1];
  2086. }
  2087. else if (paramsFormData.adScheduleType === 'SCHEDULE_FROM_NOW') {
  2088. paramsFormData.adStartTime = '';
  2089. paramsFormData.adEndTime = '';
  2090. }
  2091. if (paramsFormData.launchTimeInterval === 'buxian') {
  2092. paramsFormData.adScheduleTime = str;
  2093. }
  2094. else if (paramsFormData.launchTimeInterval === 'a') {
  2095. paramsFormData.adScheduleTime = paramsFormData.scheduleTimeData;
  2096. }
  2097. if (paramsFormData.adAndroidVersion === 'a') {
  2098. paramsFormData.adAndroidOsv = paramsFormData.androidChangeValue;
  2099. }
  2100. else {
  2101. paramsFormData.adAndroidOsv = 'NONE';
  2102. }
  2103. paramsFormData.adCity = paramsFormData.adSelectCity.join(',');
  2104. paramsFormData.adAge = paramsFormData.adSelectAge.join(',');
  2105. paramsFormData.adAc = paramsFormData.adSelectAc.join(',');
  2106. paramsFormData.adDeviceType = paramsFormData.adDeviceSelectType.join(',');
  2107. paramsFormData.productSellingPoints = this.configForm.defaultFormList && this.configForm.defaultFormList.map(item => item.value);
  2108. paramsFormData.creativeThirdIndustryId = paramsFormData.creativeThirdIndustryIds[2];
  2109. paramsFormData.creativeProductImageCode = this.md5Result;
  2110. paramsFormData.imageUrl = this.urlResult;
  2111. paramsFormData.adKeywords = this.creativeTag;
  2112. paramsFormData.userId = this.userInfo().id;
  2113. this.$refs.ruleForm.validate(valid => {
  2114. if (valid) {
  2115. if (this.modalTitle === 'add') {
  2116. this.handleAddList(paramsFormData);
  2117. }
  2118. else if (this.modalTitle === 'edit') {
  2119. this.handleEditList(paramsFormData);
  2120. }
  2121. }
  2122. else {
  2123. console.log('error submit!!');
  2124. return false;
  2125. }
  2126. });
  2127. },
  2128. handleEditList(data) {
  2129. const queryData = data;
  2130. const routeQuery = JSON.parse(localStorage.getItem('queryList'));
  2131. queryData.id = routeQuery.id;
  2132. putAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/edit', queryData).then(result => {
  2133. if (result.code === 0) {
  2134. this.$message.success(result.message);
  2135. this.$router.replace('/account-config/account-config');
  2136. this.$bus.$emit('remove', '/account-config/components/configuration-modal');
  2137. }
  2138. else {
  2139. this.$message.error(result.message);
  2140. }
  2141. }).catch(error => {
  2142. console.log(error, 'eeee');
  2143. });
  2144. },
  2145. handleRelaxCancel() {
  2146. this.$router.replace('/account-config/account-config');
  2147. this.$bus.$emit('remove', '/account-config/components/configuration-modal');
  2148. },
  2149. handleEnterChang(value) {
  2150. this.creativeTag.push(...value);
  2151. this.creativeTag = [...new Set(this.creativeTag)];
  2152. for (let i = 0; i < this.creativeTag.length; i++) {
  2153. if (this.creativeTag[i].length > 10) {
  2154. this.creativeTag.splice(i, 1);
  2155. this.$message.error('创意标签最多只能十个字符,超过的已清除');
  2156. }
  2157. }
  2158. this.configForm.creativeLabel = [];
  2159. },
  2160. handleTagsClose(removedTag) {
  2161. const tags = this.creativeTag.filter(tag => tag !== removedTag);
  2162. this.creativeTag = tags;
  2163. }
  2164. }
  2165. };
  2166. </script>
  2167. <style lang="less">
  2168. @import "configuration-modal";
  2169. .display-none-selset {
  2170. display: none !important;
  2171. }
  2172. </style>