configuration-modal.vue 57 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033
  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 :disabled="modalTitle === 'edit'" class="acount-search-class" :appId.sync="configForm.accountId" :multiple="false" request="1,3"></acount-search>
  16. </a-form-model-item>
  17. <a-form-model-item label="dp链接范围" class="dp-link-start" prop="dpLinkStartIndex">
  18. <a-input class="common-input" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkStartIndex" placeholder="请输入" allow-clear/>
  19. <span>~</span>
  20. </a-form-model-item>
  21. <a-form-model-item label="" class="dp-link-end" prop="dpLinkEndIndex">
  22. <a-input class="common-input" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkEndIndex" placeholder="请输入" allow-clear/>
  23. </a-form-model-item>
  24. <a-form-model-item label="预算方式">
  25. <a-radio-group v-model="configForm.accountBudgetMode" button-style="solid">
  26. <a-radio-button value="1">不限于算</a-radio-button>
  27. <a-radio-button value="2">指定预算</a-radio-button>
  28. </a-radio-group>
  29. </a-form-model-item>
  30. <a-form-model-item v-if="configForm.accountBudgetMode === '2'" label="账户日预算" prop="accountBudget">
  31. <a-input-number v-model="configForm.accountBudget" :min="1000" :max="9999999.99" :step="0.01"/> 元
  32. </a-form-model-item>
  33. </div>
  34. <div class="separate-module-con">
  35. <p class="rock-title">广告组信息</p>
  36. <a-form-model-item label="推广目标">
  37. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.campaignLandingType" button-style="solid">
  38. <a-radio-button value="APP">应用</a-radio-button>
  39. <a-radio-button value="LINK" disabled>销售线索收集</a-radio-button>
  40. <a-radio-button value="SHOP" disabled>电商店铺推广</a-radio-button>
  41. </a-radio-group>
  42. </a-form-model-item>
  43. <a-form-model-item label="广告类型">
  44. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.advertisingType" button-style="solid">
  45. <a-radio-button value="1">信息流广告</a-radio-button>
  46. <a-radio-button value="2">搜索广告</a-radio-button>
  47. </a-radio-group>
  48. </a-form-model-item>
  49. </div>
  50. <div class="separate-module-con">
  51. <p class="rock-title">基础信息</p>
  52. <a-form-model-item label="广告组名称" prop="campaignName">
  53. <a-input class="common-input-long" v-model="configForm.campaignName" allow-clear placeholder="请输入广告组名称"/>
  54. </a-form-model-item>
  55. <a-form-model-item label="广告计划名称" prop="adName">
  56. <a-input class="common-input-long" id="groupName" v-model="configForm.adName" allow-clear placeholder="请输入广告计划名称"/>
  57. <div>
  58. <a-tag v-for="item in adNameTags" :key="item" color="#1890ff" @click="handleGetChangeAll(item, 'groupName')">+ {{ item }}</a-tag>
  59. </div>
  60. </a-form-model-item>
  61. <a-form-model-item label="创建数量: 广告组数量" class="campaign-cnt-class" prop="campaignCnt">
  62. <a-input-number v-model="configForm.campaignCnt" :min="1"/>
  63. <a-tooltip placement="top">
  64. <template slot="title">
  65. <span>输入的数量为每天所创建的广告组数量</span>
  66. <span>以及每个广告组创建的广告计划数量</span>
  67. </template>
  68. <a-icon class="form-itrm-icon" type="smile-o"/>
  69. </a-tooltip>
  70. </a-form-model-item>
  71. <a-form-model-item label="广告计划数量" class="campaign-ad-class" prop="campaignAdCnt">
  72. <a-input-number v-model="configForm.campaignAdCnt" :min="1"/>
  73. </a-form-model-item>
  74. </div>
  75. <div class="separate-module-con">
  76. <p class="rock-title">投放内容</p>
  77. <a-form-model-item label="投放目标">
  78. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.launchTarget" button-style="solid">
  79. <a-radio-button value="OCPM">转量化</a-radio-button>
  80. <a-radio-button value="CPC" disabled>点击量</a-radio-button>
  81. <a-radio-button value="CPM" disabled>展示量</a-radio-button>
  82. </a-radio-group>
  83. </a-form-model-item>
  84. <a-form-model-item :disabled="modalTitle === 'edit'" label="下载方式">
  85. <a-radio-group v-model="configForm.adDownloadType" button-style="solid">
  86. <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
  87. <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
  88. </a-radio-group>
  89. </a-form-model-item>
  90. <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="落地页链接">
  91. <a-input class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adExternalUrl" placeholder="请输入落地页链接" allow-clear/>
  92. </a-form-model-item>
  93. <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="直达链接内容">
  94. <a-input class="common-input-long" v-model="configForm.adOpenUrl" placeholder="请输入直达链接内容" allow-clear/>
  95. </a-form-model-item>
  96. <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="下载链接">
  97. <a-input class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adDownloadUrl" placeholder="请输入下载链接" allow-clear @change="handleDownloadLink"/>
  98. </a-form-model-item>
  99. <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="应用包名">
  100. <a-input class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adPackage" placeholder="请输入应用包名" allow-clear/>
  101. </a-form-model-item>
  102. </div>
  103. <div class="separate-module-con">
  104. <p class="rock-title">优化目标</p>
  105. <a-form-model-item label="转化跟踪方式">
  106. <a-select class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adConvertType" placeholder="请选择" @change="handleConvertTypeChange">
  107. <a-select-option value="AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD">应用下载API</a-select-option>
  108. <a-select-option value="AD_CONVERT_SOURCE_TYPE_SDK">应用下载SDK</a-select-option>
  109. <a-select-option value="AD_CONVERT_SOURCE_TYPE_OPEN_URL">应用直达API(应用直达链接)</a-select-option>
  110. <a-select-option value="AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD">普通应用下载</a-select-option>
  111. </a-select>
  112. </a-form-model-item>
  113. <a-form-model-item label="优化目标">
  114. <a-select class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adConvertId" placeholder="请选择" @change="handleConvertChange">
  115. <a-select-option
  116. v-for="(item, index) in optimizationOption"
  117. :key="index"
  118. :value="item.convert_id "
  119. >
  120. {{ item.external_name }}
  121. </a-select-option>
  122. </a-select>
  123. </a-form-model-item>
  124. </div>
  125. <div class="separate-module-con">
  126. <p class="rock-title">设置投放位置</p>
  127. <a-form-model-item label="广告位置">
  128. <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adverPosition" button-style="solid">
  129. <a-radio-button value="a">系统优选广告位</a-radio-button>
  130. <a-radio-button value="b">按媒体指定位置</a-radio-button>
  131. <a-radio-button value="c">按场景指定位置</a-radio-button>
  132. </a-radio-group>
  133. </a-form-model-item>
  134. <div class="adver-position-radio">
  135. <p v-if="configForm.adverPosition === 'a'">系统将根据您设置的定向,选择预估效果最好的广告位进行投放,并触达尽可能多的目标用户</p>
  136. <div v-if="configForm.adverPosition === 'c'" class="position-radio-change">
  137. <p>位置选择</p>
  138. <a-radio-group v-model="configForm.radioChangeValue">
  139. <a-radio :style="radioStyle" value="VIDEO_SCENE">沉浸式竖版视频场景</a-radio>
  140. <a-radio :style="radioStyle" value="FEED_SCENE">信息流场景</a-radio>
  141. <a-radio :style="radioStyle" value="TAIL_SCENE">视频后贴和尾帧场景</a-radio>
  142. </a-radio-group>
  143. </div>
  144. <div v-if="configForm.adverPosition === 'b'" class="position-radio-change">
  145. <p>位置选择</p>
  146. <a-checkbox-group v-model="configForm.checkboxChangeValue">
  147. <a-checkbox :style="radioStyle" value="INVENTORY_FEED">今日头条</a-checkbox>
  148. <a-checkbox :style="radioStyle" value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
  149. <a-checkbox :style="radioStyle" value="INVENTORY_HOTSOON_FEED">抖音火山版</a-checkbox>
  150. <a-checkbox :style="radioStyle" value="INVENTORY_AWEME_FEED">抖音短视频</a-checkbox>
  151. <a-checkbox :style="radioStyle" value="INVENTORY_UNION_SLOT">穿山甲</a-checkbox>
  152. </a-checkbox-group>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="separate-module-con">
  157. <p class="rock-title">用户定向--新建定向</p>
  158. <a-form-model-item label="地域">
  159. <a-radio-group v-model="configForm.adDistrict" button-style="solid">
  160. <a-radio-button value="NONE">不限</a-radio-button>
  161. <a-radio-button value="CITY">按省市</a-radio-button>
  162. <a-radio-button value="COUNTY">按区县</a-radio-button>
  163. <a-radio-button value="BUSINESS_DISTRICT">按商圈</a-radio-button>
  164. </a-radio-group>
  165. </a-form-model-item>
  166. <a-form-model-item label="性别">
  167. <a-radio-group v-model="configForm.adGender" button-style="solid">
  168. <a-radio-button value="NONE">不限</a-radio-button>
  169. <a-radio-button value="GENDER_MALE">男</a-radio-button>
  170. <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
  171. </a-radio-group>
  172. </a-form-model-item>
  173. <a-form-model-item label="年龄">
  174. <a-radio-group v-model="configForm.adAge" button-style="solid">
  175. <a-radio-button value="NONE">不限</a-radio-button>
  176. <a-radio-button value="AGE_BETWEEN_18_23">18-23</a-radio-button>
  177. <a-radio-button value="AGE_BETWEEN_24_30">24-30</a-radio-button>
  178. <a-radio-button value="AGE_BETWEEN_31_40">31-40</a-radio-button>
  179. <a-radio-button value="AGE_BETWEEN_41_49">41-49</a-radio-button>
  180. <a-radio-button value="AGE_ABOVE_50">50+</a-radio-button>
  181. </a-radio-group>
  182. </a-form-model-item>
  183. <a-form-model-item label="自定义人群">
  184. <a-radio-group v-model="configForm.adRetargetingTagsInclude" button-style="solid">
  185. <a-radio-button value="NONE">不限</a-radio-button>
  186. <a-radio-button value="a" disabled>自定义人群</a-radio-button>
  187. </a-radio-group>
  188. </a-form-model-item>
  189. <a-form-model-item label="媒体定向">
  190. <a-radio-group v-model="configForm.adSuperiorPopularityType" button-style="solid">
  191. <a-radio-button value="NONE">不限</a-radio-button>
  192. <a-radio-button value="GAME" disabled>游戏优质媒体</a-radio-button>
  193. <a-radio-button value="b" disabled>自定义</a-radio-button>
  194. </a-radio-group>
  195. </a-form-model-item>
  196. <a-form-model-item label="平台">
  197. <a-radio-group v-model="configForm.adPlatform" button-style="solid">
  198. <a-radio-button value="NONE" :disabled="!!configForm.adDownloadUrl">不限</a-radio-button>
  199. <a-radio-button value="IOS" :disabled="!!configForm.adDownloadUrl">IOS</a-radio-button>
  200. <a-radio-button value="ANDROID">Andriod</a-radio-button>
  201. <a-radio-button value="PC" :disabled="!!configForm.adDownloadUrl">PC</a-radio-button>
  202. </a-radio-group>
  203. </a-form-model-item>
  204. <a-form-model-item v-if="configForm.adDownloadUrl" label="安卓版本">
  205. <a-radio-group v-model="configForm.adAndroidOsv" button-style="solid">
  206. <a-radio-button value="NONE">不限</a-radio-button>
  207. <a-radio-button value="a">自定义</a-radio-button>
  208. </a-radio-group>
  209. </a-form-model-item>
  210. <div class="adver-position-radio">
  211. <div v-if="configForm.adAndroidOsv === 'a'" class="position-radio-change">
  212. <p>安卓版本</p>
  213. <a-radio-group v-model="configForm.androidChangeValue">
  214. <a-radio :style="radioStyle" value="8.0">Andriod 8.0以上</a-radio>
  215. <a-radio :style="radioStyle" value="7.1">Andriod 7.1以上</a-radio>
  216. <a-radio :style="radioStyle" value="7.0">Andriod 7.0以上</a-radio>
  217. <a-radio :style="radioStyle" value="6.0">Andriod 6.0以上</a-radio>
  218. </a-radio-group>
  219. </div>
  220. </div>
  221. <a-form-model-item label="网络">
  222. <a-radio-group v-model="configForm.adAc" button-style="solid">
  223. <a-radio-button value="NONE">不限</a-radio-button>
  224. <a-radio-button value="WIFI">Wi-Fi</a-radio-button>
  225. <a-radio-button value="2G">2G</a-radio-button>
  226. <a-radio-button value="3G">3G</a-radio-button>
  227. <a-radio-button value="4G">4G</a-radio-button>
  228. </a-radio-group>
  229. </a-form-model-item>
  230. <a-form-model-item label="已安装用户">
  231. <a-radio-group v-model="configForm.adHideIfExists" button-style="solid">
  232. <a-radio-button value="0">不限</a-radio-button>
  233. <a-radio-button value="1">过滤</a-radio-button>
  234. <a-radio-button value="2">定向</a-radio-button>
  235. </a-radio-group>
  236. </a-form-model-item>
  237. <a-form-model-item v-if="configForm.adConvertType" label="过滤已转化用户">
  238. <a-radio-group v-model="configForm.adHideIfConverted" button-style="solid">
  239. <a-radio-button value="NO_EXCLUDE">不限</a-radio-button>
  240. <a-radio-button value="AD">广告计划</a-radio-button>
  241. <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
  242. <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
  243. <a-radio-button value="CUSTOMER">公司账户</a-radio-button>
  244. <a-radio-button value="APP">APP</a-radio-button>
  245. </a-radio-group>
  246. </a-form-model-item>
  247. <a-form-model-item label="智能放量">
  248. <a-radio-group v-model="configForm.adAutoExtendEnabled" button-style="solid">
  249. <a-radio-button value="0">不开启</a-radio-button>
  250. <a-radio-button value="1">开启</a-radio-button>
  251. </a-radio-group>
  252. </a-form-model-item>
  253. </div>
  254. <div class="separate-module-con">
  255. <p class="rock-title">预算与出价</p>
  256. <a-form-model-item label="投放场景">
  257. <a-radio-group v-model="configForm.adSmartBidType" button-style="solid">
  258. <a-radio-button value="SMART_BID_CUSTOM" :disabled="modalTitle === 'edit'">常规投放</a-radio-button>
  259. <a-radio-button value="SMART_BID_CONSERVATIVE" disabled>放量投放</a-radio-button>
  260. </a-radio-group>
  261. </a-form-model-item>
  262. <a-form-model-item label="预算">
  263. <a-input-group compact>
  264. <a-select :disabled="modalTitle === 'edit'" v-model="configForm.adBudgetMode" @change="handleBudgetMode">
  265. <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
  266. <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
  267. </a-select>
  268. <a-input-number class="common-input" v-model="configForm.adBudget" :min="1" :step="0.01"/>
  269. </a-input-group>
  270. </a-form-model-item>
  271. <a-form-model-item label="投放时间">
  272. <a-radio-group v-model="configForm.adScheduleType" button-style="solid">
  273. <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
  274. <a-radio-button value="SCHEDULE_START_END">设置开始和结束日期</a-radio-button>
  275. </a-radio-group>
  276. </a-form-model-item>
  277. <div class="adver-position-radio">
  278. <div v-if="configForm.adScheduleType === 'SCHEDULE_START_END'" class="position-radio-change">
  279. <a-range-picker v-model="configForm.launchDateRange" format="YYYY-MM-DD" @change="handleLaunchData"/>
  280. </div>
  281. </div>
  282. <a-form-model-item label="投放时段">
  283. <a-radio-group v-model="configForm.launchTimeInterval" button-style="solid">
  284. <a-radio-button value="buxian">不限</a-radio-button>
  285. <a-radio-button value="a">指定时间段</a-radio-button>
  286. </a-radio-group>
  287. </a-form-model-item>
  288. <div class="adver-position-radio">
  289. <div v-if="configForm.launchTimeInterval === 'a'" class="position-radio-change">
  290. <selectCheckAll
  291. style="width:100%"
  292. :scheduleTime.sync="configForm.scheduleTimeData"
  293. ref="selectCheck"
  294. />
  295. </div>
  296. </div>
  297. <a-form-model-item label="付费方式">
  298. <a-radio-group v-model="configForm.adPricing" button-style="solid">
  299. <a-radio-button value="PRICING_OCPM" :disabled="modalTitle === 'edit'">按展示付费(oCPM)</a-radio-button>
  300. </a-radio-group>
  301. </a-form-model-item>
  302. <a-form-model-item label="目标转化出价">
  303. <a-input-number class="common-input" v-model="configForm.adCpaBid" :min="0.1" :max="10000" :step="0.01"/> 元
  304. </a-form-model-item>
  305. </div>
  306. <div class="separate-module-con">
  307. <p class="rock-title">第三方检测链接</p>
  308. <a-form-model-item label="点击监测">
  309. <a-input class="common-input-long" placeholder="请输入链接地址" v-model="configForm.creativeActionTrackUrl" allow-clear/>
  310. </a-form-model-item>
  311. </div>
  312. <div class="separate-module-con">
  313. <p class="rock-title">创意信息</p>
  314. <a-form-model-item label="创意方式">
  315. <a-radio-group v-model="configForm.creativeMaterialMode" button-style="solid">
  316. <a-radio-button value="STATIC_ASSEMBLE" :disabled="modalTitle === 'edit'">程序化创意</a-radio-button>
  317. <a-radio-button value="NONE" :disabled="modalTitle === 'edit'">自定义创意</a-radio-button>
  318. </a-radio-group>
  319. </a-form-model-item>
  320. <a-form-model-item label="创意内容">
  321. <a-radio-group v-model="configForm.creativeImageMode" button-style="solid">
  322. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
  323. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
  324. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
  325. <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
  326. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
  327. </a-radio-group>
  328. </a-form-model-item>
  329. <a-form-model-item label="卡片主图">
  330. <a-upload
  331. name="avatar"
  332. list-type="picture-card"
  333. class="avatar-uploader"
  334. :show-upload-list="false"
  335. :before-upload="beforeUpload"
  336. @change="handleChange"
  337. >
  338. <div v-if="imageUrl" class="upload-img-class" @mouseover="handleChangeActive">
  339. <div class="img-flex-url">
  340. <img :src="imageUrl" alt="avatar"/>
  341. </div>
  342. <!-- TODO 划过图片显示覆盖层 -->
  343. <!-- <div v-if="isCoverImgDiv" class="cover-img-div" @mouseleave="handleRemoveActive">
  344. <a-icon class="delete-icon-class" type="delete" @click.stop="handleDeleteImg"/>
  345. </div> -->
  346. </div>
  347. <div v-if="!imageUrl && !isCoverImgDiv">
  348. <a-icon type="plus" style="margin-top: 10px;"/>
  349. <div class="ant-upload-text">Upload</div>
  350. </div>
  351. </a-upload>
  352. </a-form-model-item>
  353. <a-form-model-item label="卡片标题" prop="creativeProductDescription">
  354. <a-input class="common-input-long" placeholder="请输入卡片标题" v-model="configForm.creativeProductDescription" allow-clear/>
  355. </a-form-model-item>
  356. <a-form-model-item label="推广卖点">
  357. <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />推广卖点</a-button>
  358. </a-form-model-item>
  359. <div class="adver-position-radio">
  360. <a-form-model-item
  361. v-for="(item, index) in configForm.defaultFormList"
  362. :key="item.id"
  363. class="examin-form-model"
  364. :prop="'defaultFormList.' + index + '.value'"
  365. :rules="[
  366. {required: true, message: '请输入', trigger: 'blur'},
  367. {min: 1, max: 10, message: '长度位6-9字符', trigger: 'blur'}
  368. ]"
  369. >
  370. <a-input class="common-input-long" v-model="item.value" placeholder="请输入" allow-clear/>
  371. <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
  372. </a-form-model-item>
  373. </div>
  374. <a-form-model-item label="行动号召">
  375. <a-radio-group v-model="configForm.creativeEnablePersonalAction" button-style="solid">
  376. <a-radio-button :value="true">开启智能优选</a-radio-button>
  377. <a-radio-button :value="false">关闭智能优选</a-radio-button>
  378. </a-radio-group>
  379. </a-form-model-item>
  380. <div class="adver-position-radio">
  381. <a-form-model-item label="">
  382. <a-input class="common-input-long" placeholder="请输入" v-model="configForm.creativeCallToAction" allow-clear/>
  383. </a-form-model-item>
  384. </div>
  385. <a-form-model-item label="来源">
  386. <a-input class="common-input-long" placeholder="请输入来源" v-model="configForm.creativeSource" allow-clear/>
  387. </a-form-model-item>
  388. </div>
  389. <div class="separate-module-con">
  390. <p class="rock-title">创意分类</p>
  391. <a-form-model-item label="创意分类" prop="creativeThirdIndustryIds">
  392. <a-cascader
  393. v-model="configForm.creativeThirdIndustryIds"
  394. class="common-input-long"
  395. :options="createOptions"
  396. :fieldNames="fieldNames"
  397. placeholder="请选择创意分类"
  398. />
  399. </a-form-model-item>
  400. <a-form-model-item label="创意标签">
  401. <a-select
  402. v-model="configForm.creativeLabel"
  403. mode="tags"
  404. style="width: 320px"
  405. placeholder="按回车生成标签"
  406. dropdownClassName="display-none-selset"
  407. :token-separators="[',', ' ', ',']"
  408. @change="handleEnterChang"
  409. >
  410. </a-select>
  411. </a-form-model-item>
  412. <div class="adver-position-radio">
  413. <div class="creative-label-content">
  414. <p>已选:{{ creativeTag.length || 0 }}</p>
  415. <div class="label-content-select-tag">
  416. <a-tag
  417. v-for="item in creativeTag"
  418. :key="item"
  419. :closable="true"
  420. class="tag-select-class"
  421. @close="handleTagsClose(item)"
  422. >
  423. {{ item }}
  424. </a-tag>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. <div class="separate-module-con btn-Unique-con">
  430. <a-button class="sure-btn" type="primary" @click="handleRelaxSure">确定</a-button>
  431. <a-button class="cancel-btn" @click="handleRelaxCancel">取消</a-button>
  432. </div>
  433. </a-form-model>
  434. </div>
  435. </div>
  436. </template>
  437. <script>
  438. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  439. import SelectCheckAll from '../../BatchCreate/toutiaoTime';
  440. import moment from 'moment';
  441. import BMF from 'browser-md5-file';
  442. import {getAction, postAction, putAction} from '@/api/manage';
  443. import {mapGetters} from 'vuex';
  444. let COS = require('cos-js-sdk-v5');
  445. let cos = new COS({
  446. SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  447. SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
  448. });
  449. let str = '';
  450. for (let i = 0; i < 7 * 48; i++) {
  451. str += '0';
  452. }
  453. export default {
  454. name: 'configuration-modal',
  455. props: {
  456. visible: {
  457. type: Boolean,
  458. default: false
  459. }
  460. },
  461. components: {
  462. AcountSearch,
  463. SelectCheckAll
  464. },
  465. data() {
  466. return {
  467. detailData: {},
  468. modalTitle: '',
  469. toolConvertList: [],
  470. optimizationOption: [],
  471. md5Result: '',
  472. urlResult: '',
  473. createOptions: [],
  474. adNameTags: ['出价方式', '素材名称', '日期', 'dp链接标识', '创意方式'],
  475. fieldNames: {
  476. label: 'industryName',
  477. value: 'industryId',
  478. children: 'children'
  479. },
  480. fileList: [],
  481. isCoverImgDiv: false,
  482. imageUrl: '',
  483. creativeTag: [],
  484. radioStyle: {
  485. display: 'block',
  486. height: '30px',
  487. lineHeight: '30px',
  488. marginLeft: 0
  489. },
  490. labelCol: {span: 4},
  491. wrapperCol: {span: 14},
  492. rules: {
  493. campaignCnt: [
  494. {required: true, message: '请输入', trigger: 'blur'}
  495. ],
  496. campaignAdCnt: [
  497. {required: true, message: '请输入', trigger: 'blur'}
  498. ],
  499. dpLinkStartIndex: [
  500. {required: true, message: '请输入', trigger: 'blur'}
  501. ],
  502. dpLinkEndIndex: [
  503. {required: true, message: '请输入', trigger: 'blur'}
  504. ],
  505. accountBudget: [
  506. {required: true, message: '请输入', trigger: 'blur'}
  507. ],
  508. campaignName: [
  509. {required: true, message: '请输入广告组名称', trigger: 'blur'},
  510. {min: 1, max: 5, message: '长度位1-100字符', trigger: 'blur'}
  511. ],
  512. adName: [
  513. {required: true, message: '请输入广告计划名称'},
  514. {min: 1, max: 100, message: '长度位1-100字符'}
  515. ],
  516. creativeProductDescription: [
  517. {required: true, message: '请输入', trigger: 'blur'},
  518. {min: 1, max: 7, message: '长度位1-7字符', trigger: 'blur'}
  519. ],
  520. creativeThirdIndustryIds: [{required: true, message: '请选择', trigger: 'change'}]
  521. },
  522. configForm: {
  523. defaultFormList: [],
  524. productSellingPoints: [], // 商品买点
  525. adBudgetMode: 'BUDGET_MODE_DAY', // 预算类型
  526. adDownloadUrl: '', // 下载链接
  527. accountBudget: '', // 账户日预算
  528. accountId: undefined, // 账户
  529. dpLinkStartIndex: '',
  530. dpLinkEndIndex: '',
  531. accountBudgetMode: '1', // 预算方式
  532. campaignLandingType: 'APP', // 推广目标
  533. advertisingType: '1', // 广告类型
  534. campaignName: '', // 广告组名称
  535. adName: '', // 广告计划名称
  536. campaignCnt: 0, // 广告组计划数量
  537. campaignAdCnt: 0, // 广告计划数量
  538. launchTarget: 'OCPM', // 投放目标
  539. adDownloadType: 'DOWNLOAD_URL', // 下载方式
  540. adExternalUrl: '', // 落地页链接
  541. adOpenUrl: '', // 直达链接内容
  542. adPackage: '', // 应用包名
  543. adConvertType: '', // 转化跟踪方式
  544. adConvertId: '', // 优化目标 -- 走接口
  545. adverPosition: 'a', // 广告位置
  546. radioChangeValue: '', // 广告位置-按照场景指定位置
  547. checkboxChangeValue: [], // 广告位置-按照媒体指定位置
  548. adDistrict: 'NONE', // 定向-区域
  549. adGender: 'NONE', // 定向-性别
  550. adAge: 'NONE', // 定向-年龄
  551. adRetargetingTagsInclude: 'NONE', // 定向-自定义
  552. adSuperiorPopularityType: 'NONE', // 定向-媒体定向
  553. adPlatform: 'NONE', // 定向-平台
  554. adAc: 'NONE', // 定向-网络
  555. adHideIfExists: '0', // 定向-已安装用户
  556. adHideIfConverted: 'AD', // 定向-已转化用户
  557. adAutoExtendEnabled: '0', // 定向-智能播放
  558. adAndroidOsv: 'NONE', // 定向-安卓版本
  559. androidChangeValue: '', // 安卓版本-自定义
  560. adSmartBidType: 'SMART_BID_CUSTOM', // 投放场景
  561. adBudget: '', // 预算
  562. adScheduleType: 'SCHEDULE_FROM_NOW', // 投放时间
  563. launchDateRange: [], // 设置开始和结束时间
  564. launchTimeInterval: 'buxian', // 投放时段
  565. scheduleTimeData: str, // 指定时段选择
  566. adPricing: 'PRICING_OCPM', // 付费方式
  567. adCpaBid: '', // 目标转化出价
  568. creativeActionTrackUrl: '', // 监测地址
  569. creativeMaterialMode: 'STATIC_ASSEMBLE', // 创意方式
  570. creativeImageMode: 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL', // 创意内容
  571. creativeProductDescription: '', // 卡片标题
  572. creativeEnablePersonalAction: true, // 智能优选
  573. creativeSource: '', // 来源
  574. creativeThirdIndustryId: '', // 创意分类
  575. creativeThirdIndustryIds: [], // 创意分类
  576. adKeywords: [], // 创意标签
  577. creativeCallToAction: '', // 行动号召
  578. creativeLabel: undefined // 倡议标签
  579. }
  580. };
  581. },
  582. computed: {
  583. NewAountId() {
  584. return this.configForm.accountId;
  585. },
  586. NewAdPackage() {
  587. return this.configForm.adPackage;
  588. }
  589. },
  590. watch: {
  591. NewAdPackage(newVal, oldVal) {
  592. if (newVal && this.configForm.accountId) {
  593. this.handleGetOptimizationObjective();
  594. }
  595. },
  596. NewAountId(newVal, oldVal) {
  597. if (newVal && this.configForm.adPackage) {
  598. this.handleGetOptimizationObjective();
  599. }
  600. this.handleGetCreativeClassification();
  601. }
  602. },
  603. mounted() {
  604. const routeQuery = JSON.parse(localStorage.getItem('queryList'));
  605. if (routeQuery.accountModal === 'edit') {
  606. this.modalTitle = 'edit';
  607. this.handleGetDetailList();
  608. }
  609. else if (routeQuery.accountModal === 'add') {
  610. this.modalTitle = 'add';
  611. }
  612. },
  613. methods: {
  614. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  615. moment,
  616. handleConvertChange(e) {
  617. const convertTitle = this.optimizationOption.filter(item => item.convert_id === e);
  618. this.configForm.creativeActionTrackUrl = convertTitle[0].action_track_url;
  619. },
  620. handleGetDetailList() {
  621. const routeQuery = JSON.parse(localStorage.getItem('queryList'));
  622. getAction('http://192.168.1.43:8080/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/queryById', {id: routeQuery.id}).then(result => {
  623. if (result.code === 0) {
  624. const detailData = result.result;
  625. this.configForm.accountId = detailData.accountId || '';
  626. this.configForm.dpLinkStartIndex = detailData.dpLinkStartIndex || '';
  627. this.configForm.dpLinkEndIndex = detailData.dpLinkEndIndex || '';
  628. this.configForm.accountBudgetMode = detailData.accountBudgetMode || '';
  629. this.configForm.accountBudget = detailData.accountBudget || '';
  630. this.configForm.campaignLandingType = detailData.campaignLandingType || '';
  631. this.configForm.advertisingType = detailData.advertisingType || '1';
  632. this.configForm.campaignName = detailData.campaignName || '';
  633. this.configForm.adName = detailData.adName || '';
  634. this.configForm.campaignCnt = detailData.campaignCnt || '';
  635. this.configForm.campaignAdCnt = detailData.campaignAdCnt || '';
  636. this.configForm.launchTarget = detailData.launchTarget || 'OCPM';
  637. this.configForm.adDownloadType = detailData.adDownloadType || 'DOWNLOAD_URL';
  638. this.configForm.adExternalUrl = detailData.adExternalUrl || '';
  639. this.configForm.adOpenUrl = detailData.adOpenUrl || '';
  640. this.configForm.adDownloadUrl = detailData.adDownloadUrl || '';
  641. this.configForm.adPackage = detailData.adPackage || '';
  642. this.configForm.adConvertType = detailData.adConvertType || '';
  643. this.configForm.adConvertId = detailData.adConvertId || '';
  644. this.configForm.adDistrict = detailData.adDistrict || 'NONE';
  645. this.configForm.adGender = detailData.adGender || 'NONE';
  646. this.configForm.adAge = detailData.adAge || 'NONE';
  647. this.configForm.adRetargetingTagsInclude = detailData.adRetargetingTagsInclude;
  648. this.configForm.adSuperiorPopularityType = detailData.adSuperiorPopularityType;
  649. this.configForm.adPlatform = detailData.adPlatform;
  650. this.configForm.adAndroidOsv = detailData.adAndroidOsv;
  651. this.configForm.adAc = detailData.adAc;
  652. this.configForm.adHideIfExists = String(detailData.adHideIfExists);
  653. this.configForm.adHideIfConverted = detailData.adHideIfConverted;
  654. this.configForm.adAutoExtendEnabled = detailData.adAutoExtendEnabled;
  655. this.configForm.adSmartBidType = detailData.adSmartBidType;
  656. this.configForm.adBudgetMode = detailData.adBudgetMode;
  657. this.configForm.adBudget = detailData.adBudget;
  658. this.configForm.adScheduleType = detailData.adScheduleType;
  659. this.configForm.launchDateRange[0] = detailData.adStartTime;
  660. this.configForm.launchDateRange[1] = detailData.adEndTime;
  661. this.configForm.adPricing = detailData.adPricing;
  662. this.configForm.adCpaBid = detailData.adCpaBid;
  663. this.configForm.creativeActionTrackUrl = detailData.creativeActionTrackUrl;
  664. this.configForm.creativeMaterialMode = detailData.creativeMaterialMode;
  665. this.configForm.creativeImageMode = detailData.creativeImageMode;
  666. this.configForm.creativeProductDescription = detailData.creativeProductDescription;
  667. this.configForm.creativeEnablePersonalAction = detailData.creativeEnablePersonalAction;
  668. this.configForm.creativeCallToAction = detailData.creativeCallToAction;
  669. this.configForm.creativeSource = detailData.creativeSource;
  670. this.configForm.creativeThirdIndustryIds[0] = detailData.creativeThirdIndustryId.substr(0, 4);
  671. this.configForm.creativeThirdIndustryIds[1] = detailData.creativeThirdIndustryId.substr(0, 6);
  672. this.configForm.creativeThirdIndustryIds[2] = detailData.creativeThirdIndustryId;
  673. this.imageUrl = detailData.imageUrl;
  674. this.md5Result = detailData.creativeProductImageCode;
  675. if (detailData.productSellingPoints) {
  676. let productPointsList = [];
  677. const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
  678. detailData.productSellingPoints.forEach((item, index) => {
  679. productPointsList.push({
  680. id: randomNum + index,
  681. value: item
  682. });
  683. });
  684. this.configForm.defaultFormList = productPointsList;
  685. }
  686. if (detailData.adScheduleTime.indexOf(1) !== -1) {
  687. this.configForm.launchTimeInterval = 'a';
  688. this.configForm.scheduleTimeData = detailData.adScheduleTime;
  689. }
  690. else {
  691. this.configForm.launchTimeInterval = 'buxian';
  692. }
  693. if (detailData.creativeSceneInventory) {
  694. this.configForm.adverPosition = 'c';
  695. this.radioChangeValue = detailData.creativeSceneInventory;
  696. }
  697. else if (detailData.creativeInventoryType) {
  698. this.configForm.adverPosition = 'b';
  699. this.configForm.checkboxChangeValue = detailData.creativeInventoryType.split(',');
  700. }
  701. else {
  702. this.configForm.adverPosition = 'a';
  703. }
  704. if (detailData.adKeywords) {
  705. this.creativeTag = detailData.adKeywords;
  706. }
  707. const paramsData = {
  708. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  709. advertiserId: this.configForm.accountId,
  710. appType: 'APP_ANDROID',
  711. deliveryRange: 'DEFAULT',
  712. externalUrl: this.configForm.adExternalUrl,
  713. landingType: this.configForm.campaignLandingType,
  714. packageName: this.configForm.adPackage,
  715. promotionContent: this.configForm.adDownloadType
  716. };
  717. postAction('http://192.168.1.43:8080/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getToolConvert', paramsData).then(result => {
  718. if (result.code === 0) {
  719. const updateResult = result.result.filter(item => item.external_actions.length > 0);
  720. this.configForm.adConvertType = updateResult[0].convert_type;
  721. this.optimizationOption = updateResult[0].external_actions;
  722. }
  723. else {
  724. this.$message.error(result.message);
  725. }
  726. }).catch(error => {
  727. console.log(error, 'eeee');
  728. });
  729. }
  730. else {
  731. this.$message.error(result.message);
  732. }
  733. }).catch(error => {
  734. console.log(error, 'eeee');
  735. });
  736. },
  737. handleConvertTypeChange(e) {
  738. this.toolConvertList.forEach(item => {
  739. if (item.convert_type === e) {
  740. this.optimizationOption = item.external_actions;
  741. }
  742. });
  743. },
  744. // 优化目标数据获取
  745. handleGetOptimizationObjective() {
  746. const paramsData = {
  747. advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
  748. advertiserId: this.configForm.accountId,
  749. appType: 'APP_ANDROID',
  750. deliveryRange: 'DEFAULT',
  751. externalUrl: this.configForm.adExternalUrl,
  752. landingType: this.configForm.campaignLandingType,
  753. packageName: this.configForm.adPackage,
  754. promotionContent: this.configForm.adDownloadType
  755. };
  756. postAction('http://192.168.1.43:8080/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getToolConvert', paramsData).then(result => {
  757. if (result.code === 0) {
  758. this.toolConvertList = result.result;
  759. if (this.configForm.adConvertType) {
  760. this.handleConvertTypeChange(this.configForm.adConvertType);
  761. }
  762. }
  763. else {
  764. this.$message.error(result.message);
  765. }
  766. }).catch(error => {
  767. console.log(error, 'eeee');
  768. });
  769. },
  770. // 创意分类接口
  771. handleGetCreativeClassification() {
  772. const paramsData = {
  773. accountId: this.configForm.accountId
  774. };
  775. getAction('http://192.168.1.43:8080/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getIndustryList', paramsData).then(result => {
  776. if (result.code === 0) {
  777. this.createOptions = result.result;
  778. }
  779. else {
  780. this.$message.error(result.message);
  781. }
  782. }).catch(error => {
  783. console.log(error, 'eeee');
  784. });
  785. },
  786. handleAddList(data) {
  787. postAction('http://192.168.1.43:8080/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/addBytedanceStrategy', data).then(result => {
  788. if (result.code === 0) {
  789. console.log(result, 'result--result');
  790. this.$message.success('创建成功');
  791. this.$router.replace('/account-config/account-config');
  792. this.$bus.$emit('remove', '/account-config/components/configuration-modal');
  793. }
  794. else {
  795. this.$message.error(result.message);
  796. }
  797. }).catch(error => {
  798. console.log(error, 'eeee');
  799. });
  800. },
  801. handleGetChangeAll(item, field) {
  802. let node = document.getElementById(field);
  803. this.configForm.adName += '-{{' + item + '}}-';
  804. node.focus();
  805. node.blur();
  806. },
  807. handleLaunchData(date, dateString) {
  808. this.configForm.launchDateRange = dateString;
  809. },
  810. handleBudgetMode(e) {
  811. if (e === 'BUDGET_MODE_TOTAL') {
  812. this.configForm.adScheduleType = 'SCHEDULE_START_END';
  813. this.$message.warning('请设置投放时间');
  814. }
  815. },
  816. handleDelOrigin(list) {
  817. let formData = this.configForm.defaultFormList;
  818. this.configForm.defaultFormList = formData.filter(item => list.id !== item.id);
  819. },
  820. handleAddOrigin() {
  821. if (this.configForm.defaultFormList.length > 10) {
  822. this.$message.error('最多可以添加10个卖点');
  823. return;
  824. }
  825. const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
  826. this.$nextTick(() => {
  827. this.configForm.defaultFormList.push({
  828. id: randomNum,
  829. value: ''
  830. });
  831. });
  832. },
  833. handleDownloadLink(e) {
  834. this.configForm.adPlatform = e.target.value ? 'ANDROID' : 'NONE';
  835. },
  836. handleDeleteImg() {
  837. this.imageUrl = '';
  838. this.isCoverImgDiv = false;
  839. },
  840. handleChangeActive() {
  841. this.isCoverImgDiv = true;
  842. },
  843. handleRemoveActive() {
  844. this.isCoverImgDiv = false;
  845. },
  846. getBase64(img, callback) {
  847. const reader = new FileReader();
  848. reader.addEventListener('load', () => callback(reader.result));
  849. reader.readAsDataURL(img);
  850. },
  851. beforeUpload(info) {
  852. this.handleMd5(info);
  853. },
  854. handleChange(info) {
  855. this.getBase64(info.file.originFileObj, imageUrl => {
  856. this.imageUrl = imageUrl;
  857. });
  858. },
  859. cosUpload(file) {
  860. let that = this;
  861. let date = new Date();
  862. let y = date.getFullYear();
  863. let MM = date.getMonth() + 1;
  864. MM = MM < 10 ? '0' + MM : MM;
  865. let d = date.getDate();
  866. d = d < 10 ? '0' + d : d;
  867. let timeElse = new Date().getTime();
  868. let arr = file.name.split('.');
  869. let str = '';
  870. for (let i = 0; i < arr.length; i++) {
  871. if (i === arr.length - 1) {
  872. }
  873. else {
  874. if (i === arr.length - 2) {
  875. str += arr[i];
  876. }
  877. else {
  878. str += arr[i] + '.';
  879. }
  880. }
  881. }
  882. cos.putObject(
  883. {
  884. Bucket: 'media-1301855440',
  885. Region: 'ap-chongqing',
  886. // 存储桶所在地域,必须字段
  887. Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
  888. StorageClass: 'STANDARD',
  889. Body: file // 上传文件对象
  890. },
  891. function (err, data) {
  892. if (err) {
  893. that.$message.error('上传失败!!!' + err);
  894. return;
  895. }
  896. that.loadingElse = false;
  897. that.fileList.push({
  898. uid: file.name,
  899. name: file.name,
  900. status: 'done',
  901. url: '//' + data.Location
  902. });
  903. that.urlResult = '//' + data.Location;
  904. console.log(that.fileList, 'fileListfileList--fileList');
  905. }
  906. );
  907. },
  908. handleMd5(file) {
  909. let bmf = new BMF();
  910. let that = this;
  911. return new Promise(function (resolve, reject) {
  912. bmf.md5(file, (err, md5) => {
  913. that.md5Result = md5;
  914. getAction('/file/imageCheck', {code: md5}).then(result => {
  915. if (result.code === -206) {
  916. that.cosUpload(file);
  917. resolve();
  918. }
  919. else {
  920. that.urlResult = result.url;
  921. // reject();
  922. }
  923. }).catch(error => {
  924. console.log(error, 'eeee');
  925. reject();
  926. });
  927. });
  928. });
  929. },
  930. handleRelaxSure() {
  931. let paramsFormData = this.configForm;
  932. if (paramsFormData.adverPosition === 'a') {
  933. paramsFormData.creativeSmartInventory = 0;
  934. }
  935. else if (paramsFormData.adverPosition === 'b') {
  936. paramsFormData.creativeInventoryTypes = paramsFormData.checkboxChangeValue;
  937. }
  938. else if (paramsFormData.adverPosition === 'c') {
  939. paramsFormData.creativeSceneInventory = paramsFormData.radioChangeValue;
  940. }
  941. if (paramsFormData.launchTimeInterval === 'buxian') {
  942. paramsFormData.adScheduleTime = '';
  943. }
  944. else if (paramsFormData.launchTimeInterval === 'a') {
  945. paramsFormData.adScheduleTime = paramsFormData.scheduleTimeData;
  946. }
  947. if (paramsFormData.adScheduleType === 'SCHEDULE_START_END') {
  948. paramsFormData.adStartTime = paramsFormData.launchDateRange[0];
  949. paramsFormData.adEndTime = paramsFormData.launchDateRange[1];
  950. }
  951. else if (paramsFormData.adScheduleType === 'SCHEDULE_FROM_NOW') {
  952. paramsFormData.adStartTime = '';
  953. paramsFormData.adEndTime = '';
  954. }
  955. if (paramsFormData.launchTimeInterval === 'buxian') {
  956. paramsFormData.adScheduleTime = str;
  957. }
  958. else if (paramsFormData.launchTimeInterval === 'a') {
  959. paramsFormData.adScheduleTime = paramsFormData.scheduleTimeData;
  960. }
  961. paramsFormData.productSellingPoints = this.configForm.defaultFormList && this.configForm.defaultFormList.map(item => item.value);
  962. paramsFormData.creativeThirdIndustryId = paramsFormData.creativeThirdIndustryIds[2];
  963. paramsFormData.creativeProductImageCode = this.md5Result;
  964. paramsFormData.imageUrl = this.urlResult;
  965. paramsFormData.adKeywords = this.creativeTag;
  966. paramsFormData.userId = this.userInfo().id;
  967. this.$refs.ruleForm.validate(valid => {
  968. if (this.modalTitle === 'add') {
  969. this.handleAddList(paramsFormData);
  970. }
  971. else if (this.modalTitle === 'edit') {
  972. this.handleEditList(paramsFormData);
  973. }
  974. // if (valid) {
  975. // this.handleAddList(paramsFormData);
  976. // }
  977. // else {
  978. // console.log('error submit!!');
  979. // return false;
  980. // }
  981. });
  982. },
  983. handleEditList(data) {
  984. const queryData = data;
  985. const routeQuery = JSON.parse(localStorage.getItem('queryList'));
  986. queryData.id = routeQuery.id;
  987. putAction('http://192.168.1.43:8080/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/edit', queryData).then(result => {
  988. if (result.code === 0) {
  989. this.$message.success(result.message);
  990. this.$router.replace('/account-config/account-config');
  991. this.$bus.$emit('remove', '/account-config/components/configuration-modal');
  992. }
  993. else {
  994. this.$message.error(result.message);
  995. }
  996. }).catch(error => {
  997. console.log(error, 'eeee');
  998. });
  999. },
  1000. handleRelaxCancel() {
  1001. this.$emit('relaxCancel');
  1002. },
  1003. handleEnterChang(value) {
  1004. this.creativeTag.push(...value);
  1005. this.creativeTag = [...new Set(this.creativeTag)];
  1006. for (let i = 0; i < this.creativeTag.length; i++) {
  1007. if (this.creativeTag[i].length > 10) {
  1008. this.creativeTag.splice(i, 1);
  1009. this.$message.error('创意标签最多只能十个字符,超过的已清除');
  1010. }
  1011. }
  1012. this.configForm.creativeLabel = [];
  1013. if (this.creativeTag.length > 20) {
  1014. this.creativeTag.splice(0, 20);
  1015. this.$message.error('最多创建20个');
  1016. }
  1017. },
  1018. handleTagsClose(removedTag) {
  1019. const tags = this.creativeTag.filter(tag => tag !== removedTag);
  1020. this.creativeTag = tags;
  1021. }
  1022. }
  1023. };
  1024. </script>
  1025. <style lang="less">
  1026. @import "configuration-modal";
  1027. .display-none-selset {
  1028. display: none !important;
  1029. }
  1030. </style>