creatConfig.vue 170 KB

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