Step3.vue 90 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573
  1. <style lang="scss">
  2. .display-none-selset {
  3. display: none !important;
  4. }
  5. .chouzhen span {
  6. display: inline-block;
  7. }
  8. .check-video .ant-tabs-nav-container {
  9. text-align: center;
  10. font-size: 20px;
  11. }
  12. .step3-image {
  13. span {
  14. padding: 0;
  15. }
  16. .ant-checkbox {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. z-index: 100;
  21. }
  22. }
  23. .step3-modal {
  24. .ant-checkbox {
  25. position: absolute;
  26. top: 0;
  27. right: 0;
  28. z-index: 100;
  29. }
  30. }
  31. .onlny-click-track {
  32. .ant-list-item-content {
  33. width: 60%;
  34. overflow: hidden;
  35. text-overflow: ellipsis;
  36. white-space: nowrap;
  37. }
  38. }
  39. .sticker-styles .ant-radio-wrapper {
  40. margin-right: 0;
  41. }
  42. </style>
  43. <style scoped lang="scss">
  44. .actor-photo-list {
  45. display: flex;
  46. padding-left: 0;
  47. li {
  48. width: 20%;
  49. margin: 10px;
  50. position: relative;
  51. height: 380px;
  52. border: 1px solid #f2f2f2;
  53. list-style: none;
  54. img,
  55. video {
  56. width: 100%;
  57. }
  58. }
  59. }
  60. .chouzhen {
  61. border-style: solid;
  62. border-width: 1px;
  63. border-color: #e4e4e4;
  64. width: calc(20% - 10px);
  65. padding: 10px;
  66. margin-right: 10px;
  67. margin-bottom: 10px;
  68. display: flex;
  69. align-items: center;
  70. background: #fff;
  71. position: relative;
  72. z-index: 99;
  73. float: left;
  74. }
  75. li.chouzhen.first:before {
  76. font-size: 12px;
  77. content: '首帧';
  78. position: absolute;
  79. top: 7px;
  80. left: 5px;
  81. width: 36px;
  82. height: 20px;
  83. color: rgb(255, 255, 255);
  84. line-height: 20px;
  85. text-align: center;
  86. background: rgba(0, 0, 0, 0.5);
  87. border-radius: 2px;
  88. z-index: 1000;
  89. }
  90. .actor-photo-list {
  91. display: flex;
  92. padding-left: 0;
  93. li {
  94. width: 25%;
  95. margin: 10px;
  96. position: relative;
  97. height: 250px;
  98. border: 1px solid #f2f2f2;
  99. list-style: none;
  100. img,
  101. video {
  102. width: 100%;
  103. margin-top: auto;
  104. margin-bottom: auto;
  105. top: 0;
  106. bottom: 0;
  107. position: absolute;
  108. max-height: 250px;
  109. }
  110. }
  111. }
  112. </style>
  113. <template>
  114. <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step3">
  115. <a-tabs style="width: 50%; margin: 0 auto" type="editable-card" hideAdd @edit="remove">
  116. <a-tab-pane
  117. v-for="(pane, bestIndex) in pans"
  118. :tab="pane.tab"
  119. :key="pane.key"
  120. v-model="pansKey"
  121. disabled
  122. :closable="pane.closable"
  123. class="shishishis"
  124. >
  125. <a-form @submit="handleSubmit" :form="form" style="margin-top: 20px" :hideRequiredMark="true">
  126. <a-form-item label="广告组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
  127. <a-input v-model="pane.tab" readOnly></a-input>
  128. </a-form-item>
  129. <!-- <a-form-item label="素材同步" :labelCol="labelCol" :wrapperCol="wrapperCol">
  130. </a-form-item> -->
  131. <a-form-item
  132. label="创意内容"
  133. :labelCol="labelCol"
  134. v-if="
  135. pane.sceneId.indexOf(5) >= 0 ||
  136. pane.sceneId.indexOf(1) >= 0 ||
  137. pane.sceneId.indexOf(7) >= 0 ||
  138. pane.sceneId.indexOf(6) >= 0
  139. "
  140. >
  141. <a-layout>
  142. <a-layout-content style="padding: 10px">
  143. <a-row>
  144. <a-col :span="24" v-for="(item, index) of pane.list" :key="index">
  145. <a-card title :ref="item">
  146. <a-icon
  147. type="close"
  148. style="float: right; cursor: pointer"
  149. @click="deleteCreative(bestIndex, index)"
  150. />
  151. <div style="clear: both"></div>
  152. <a-form-item label="素材类型">
  153. <a-radio-group
  154. buttonStyle="solid"
  155. v-model="item.creativeMaterialType"
  156. @change="changeType(item)"
  157. >
  158. <a-radio-button value="1">竖版视频</a-radio-button>
  159. <a-radio-button value="2">横版视频</a-radio-button>
  160. <!-- <a-radio-button value="4" v-if="JSON.parse(pane.sceneId).indexOf(7)>0">便利贴创意</a-radio-button> -->
  161. </a-radio-group>
  162. </a-form-item>
  163. <div class="dynamically_add_form_item">
  164. <a-form-item label="" v-if="getData('creativeMaterialType') != '4'">
  165. <a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
  166. <a @click="uploadVideo(index, bestIndex, item)" style="margin-left: 10px">上传视频</a>
  167. <br />
  168. <video
  169. :src="item.videoList.url"
  170. controls="controls"
  171. style="width: 25%"
  172. v-if="item.videoList"
  173. ></video>
  174. </a-form-item>
  175. <div class="downLoad" style="overflow: auto">
  176. <ul
  177. class="actor-photo-list step3-image"
  178. :style="{
  179. width: item.imageUrlList.length > 4 ? 25 * item.imageUrlList.length + '%' : '100%',
  180. }"
  181. v-if="item.imageUrlList.length > 0"
  182. >
  183. <a-checkbox-group
  184. v-model="item.checkArrImage"
  185. style="width: 100%; display: flex; padding-left: 0"
  186. @change="onChangeCheckImage"
  187. >
  188. <li v-for="(item, index) of item.imageUrlList" :key="index">
  189. <a-checkbox :value="item.code" style="height: 100%; width: 100%">
  190. <img class="video" :src="item.url" />
  191. </a-checkbox>
  192. </li>
  193. </a-checkbox-group>
  194. </ul>
  195. </div>
  196. <a-form-item label="">
  197. <a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
  198. <a @click="uploadImages(index, bestIndex, item)" style="margin-left: 10px">上传封面</a>
  199. <a @click="showImages(index, bestIndex)" v-if="item.chouzhenShow" style="margin-left: 10px"
  200. >推荐封面</a
  201. >
  202. <br />
  203. <span v-for="(item, deleteIndex) of item.imageList" style="position: relative">
  204. <img :src="item.url" style="width: 18%; margin: 1%" :key="item.url" />
  205. <a-icon
  206. type="close-circle"
  207. @click="deleteData(index, bestIndex, deleteIndex)"
  208. style="position: absolute; right: 0px"
  209. />
  210. </span>
  211. </a-form-item>
  212. <a-form-item label="" v-if="getData('creativeMaterialType') != '4' && stickerStyles.length > 0">
  213. <a @click="getCoverUrl(index, item, bestIndex)">封面贴纸</a>
  214. <br />
  215. <span style="position: relative; display: block; width: 25%" v-if="item.coverUrl">
  216. <img :src="showStickerStyles(item.coverUrl)" style="width: 100%" />
  217. <a-icon
  218. type="close-circle"
  219. @click="deleteCover(index, bestIndex)"
  220. style="position: absolute; right: -10px; top: -10px"
  221. />
  222. </span>
  223. </a-form-item>
  224. <a-form-item label="贴纸广告语" v-if="item.coverUrl">
  225. <a-textarea
  226. placeholder="请输入贴纸广告语"
  227. v-model.trim="item.coverSlogans"
  228. :autosize="{ minRows: 2, maxRows: 2 }"
  229. :max-length="14"
  230. ></a-textarea>
  231. <p
  232. style="
  233. font-size: 12px;
  234. color: #b6bbc7;
  235. letter-spacing: 0.3px;
  236. text-align: right;
  237. line-height: 20px;
  238. position: absolute;
  239. bottom: 0;
  240. right: 6px;
  241. width: 100%;
  242. margin-bottom: 0;
  243. "
  244. >
  245. {{ item.coverSlogans.length + '/14' }}
  246. </p>
  247. </a-form-item>
  248. <a-form-item label="广告语">
  249. <a @click="showTitle(index, bestIndex)">推荐广告语</a>
  250. <div
  251. class="step4-else"
  252. style="
  253. display: inline-block;
  254. position: relative;
  255. border-radius: 4px;
  256. border: 1px solid #d9d9d9;
  257. width: 100%;
  258. "
  259. >
  260. <a-textarea
  261. class="rending"
  262. placeholder="请输入广告语"
  263. v-model.trim="item.description"
  264. :autosize="{ minRows: 2, maxRows: 6 }"
  265. :max-length="30"
  266. ></a-textarea>
  267. <p
  268. style="
  269. font-size: 12px;
  270. color: #b6bbc7;
  271. letter-spacing: 0.3px;
  272. text-align: right;
  273. line-height: 20px;
  274. position: absolute;
  275. bottom: 0;
  276. right: 6px;
  277. width: 100%;
  278. margin-bottom: 0;
  279. "
  280. >
  281. {{ item.description.length + '/30' }}
  282. </p>
  283. </div>
  284. <!-- <a-textarea
  285. class="rending"
  286. placeholder="请输入广告语"
  287. v-model.trim="item.description"
  288. :autosize="{ minRows: 2, maxRows: 6 }"
  289. ></a-textarea>
  290. <span v-if="item.description.length > 30" style="color: red">广告语长度不能超过30个字符</span> -->
  291. <br />
  292. <a @click="cunTitle(index, bestIndex)">收藏</a>
  293. <a @click="showCunTitle(index, bestIndex)" style="margin-left: 10px">收藏列表</a>
  294. <br />
  295. <a-tag
  296. v-for="(itemTag, indexTag) of tags"
  297. :key="indexTag"
  298. @click="getChange(item, itemTag, index)"
  299. >{{ itemTag.name }}</a-tag
  300. >
  301. </a-form-item>
  302. <a-form-item label="创意标题">
  303. <a-input v-model="item.name"></a-input>
  304. </a-form-item>
  305. </div>
  306. </a-card>
  307. </a-col>
  308. </a-row>
  309. <div :style="{ marginBottom: '16px' }">
  310. <a-button @click="addCreative(bestIndex)" :disabled="contentAll >= 15 || listCheck">
  311. 添加创意</a-button
  312. >
  313. </div>
  314. </a-layout-content>
  315. </a-layout>
  316. </a-form-item>
  317. <a-form-item label="便利贴广告" :labelCol="labelCol" v-if="pane.sceneId.indexOf(3) >= 0">
  318. <a-layout>
  319. <a-layout-content style="padding: 10px">
  320. <a-row>
  321. <a-col :span="24" v-for="(item, index) of pane.postAdList" :key="index">
  322. <a-card title :ref="item">
  323. <a-icon
  324. type="close"
  325. style="float: right; cursor: pointer"
  326. @click="deleteCreative(bestIndex, index, 'postAdList')"
  327. />
  328. <div style="clear: both"></div>
  329. <div class="dynamically_add_form_item">
  330. <div class="downLoad" style="overflow: auto">
  331. <ul
  332. class="actor-photo-list step3-image"
  333. :style="{
  334. width: item.imageUrlList.length > 4 ? 25 * item.imageUrlList.length + '%' : '100%',
  335. }"
  336. v-if="item.imageUrlList.length > 0"
  337. >
  338. <a-checkbox-group
  339. v-model="item.checkArrImage"
  340. style="width: 100%; display: flex; padding-left: 0"
  341. @change="onChangeCheckImage"
  342. >
  343. <li v-for="(item, index) of item.imageUrlList" :key="index">
  344. <a-checkbox :value="item.code" style="height: 100%; width: 100%">
  345. <img class="video" :src="item.url" />
  346. </a-checkbox>
  347. </li>
  348. </a-checkbox-group>
  349. </ul>
  350. </div>
  351. <a-form-item label="">
  352. <a @click="getVideoList('image', index, item, bestIndex, 'postAdList')">选择封面</a>
  353. <a @click="uploadImages(index, bestIndex, item, 'postAdList')" style="margin-left: 10px"
  354. >上传封面</a
  355. >
  356. <a @click="showImages(index, bestIndex)" v-if="item.chouzhenShow" style="margin-left: 10px"
  357. >推荐封面</a
  358. >
  359. <br />
  360. <span v-for="(item, deleteIndex) of item.imageList" style="position: relative">
  361. <img :src="item.url" style="width: 18%; margin: 1%" :key="item.url" />
  362. <a-icon
  363. type="close-circle"
  364. @click="deleteData(index, bestIndex, deleteIndex, 'postAdList')"
  365. style="position: absolute; right: 0px"
  366. />
  367. </span>
  368. </a-form-item>
  369. <a-form-item label="广告语">
  370. <!-- <a @click="showTitle(index, bestIndex)">推荐广告语</a> -->
  371. <a-textarea
  372. class="rending"
  373. placeholder="请输入广告语"
  374. v-model.trim="item.description"
  375. :autosize="{ minRows: 2, maxRows: 6 }"
  376. ></a-textarea>
  377. <span v-if="item.description.length > 30" style="color: red">广告语长度不能超过30个字符</span>
  378. <br />
  379. <!-- <a @click="cunTitle(index, bestIndex)">收藏</a>
  380. <a @click="showCunTitle(index, bestIndex)" style="margin-left: 10px">收藏列表</a>
  381. <br />
  382. <a-tag
  383. v-for="(itemTag, indexTag) of tags"
  384. :key="indexTag"
  385. @click="getChange(item, itemTag, index)"
  386. >{{ itemTag.name }}</a-tag
  387. > -->
  388. </a-form-item>
  389. <a-form-item label="短广告语">
  390. <a-textarea
  391. class="rending"
  392. placeholder="请输入短广告语"
  393. v-model.trim="item.shortSlogan"
  394. :autosize="{ minRows: 2, maxRows: 6 }"
  395. :maxLength="8"
  396. ></a-textarea>
  397. <span v-if="item.shortSlogan.length > 8" style="color: red"
  398. >短广告语长度不能超过30个字符</span
  399. >
  400. </a-form-item>
  401. <a-form-item label="创意标题">
  402. <a-input v-model="item.name"></a-input>
  403. </a-form-item>
  404. </div>
  405. </a-card>
  406. </a-col>
  407. </a-row>
  408. <div :style="{ marginBottom: '16px' }">
  409. <a-button @click="addAdList(bestIndex)" :disabled="contentAll >= 15 || pane.postAdList.length >= 1">
  410. 添加便利贴</a-button
  411. >
  412. </div>
  413. </a-layout-content>
  414. </a-layout>
  415. </a-form-item>
  416. <a-form-item label="创意分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
  417. <a-cascader
  418. :options="createOptions"
  419. v-decorator="['creativeCategory']"
  420. :fieldNames="fieldNames"
  421. placeholder="请选择创意分类"
  422. />
  423. </a-form-item>
  424. <a-form-item label="创意标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
  425. <a-select
  426. mode="tags"
  427. style="width: 100%"
  428. placeholder="按回车生成标签"
  429. v-decorator="['creativeTag', { validator: creativeTagValid }]"
  430. dropdownClassName="display-none-selset"
  431. :token-separators="[',', ' ', ',']"
  432. >
  433. </a-select>
  434. <span v-if="getData('creativeTag') && getData('creativeTag').length > 10" style="color: red"
  435. >创意标签最多填写10个,请删减</span
  436. >
  437. <br />
  438. <a-popconfirm @confirm="getInfo(record)">
  439. <div slot="title">
  440. <div>
  441. 分类名称:
  442. <a-input placeholder="请输入" v-model="tagName" style="display: inline-block; width: 300px" />
  443. </div>
  444. </div>
  445. <!-- <a-button slot="okText" type="primary" :disabled="refuseReason == ''">确定</a-button> -->
  446. <!-- <a @click="setData(record)">复制</a> -->
  447. <a style="margin-right: 10px" :disabled="!getData('creativeTag')">收藏</a>
  448. <!-- @click="collection('creativeTag')" -->
  449. </a-popconfirm>
  450. <a @click="showCunTag('creativeTag')">收藏列表</a>
  451. </a-form-item>
  452. <!-- @change="createChange" -->
  453. <a-form-item label="行动号召" :labelCol="labelCol" :wrapperCol="wrapperCol">
  454. <a-select
  455. v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]"
  456. showSearch
  457. allowClear
  458. placeholder="选择行动号召按钮文案"
  459. optionFilterProp="children"
  460. :filterOption="filterOption"
  461. >
  462. <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.actionBarText">
  463. {{ appModel.actionBarText }}
  464. </a-select-option>
  465. </a-select>
  466. </a-form-item>
  467. <a-form-item label="下载详情" v-if="showSite" :labelCol="labelCol" :wrapperCol="wrapperCol">
  468. <a-select
  469. v-decorator="['siteId']"
  470. showSearch
  471. allowClear
  472. placeholder="选择应用下载详情页"
  473. optionFilterProp="children"
  474. :filterOption="filterOption"
  475. >
  476. <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
  477. {{ appModel.name }}
  478. </a-select-option>
  479. </a-select>
  480. </a-form-item>
  481. <a-form-item label="第三方点击监测链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
  482. <a-input
  483. v-if="pane.bid_type == 6"
  484. v-decorator="[
  485. 'clickTrackUrl',
  486. {
  487. rules: [{ message: '请输入第三方检测链接' }, { validator: handleConfirmValue }],
  488. },
  489. ]"
  490. placeholder="请输入第三方检测链接"
  491. >
  492. </a-input>
  493. <a-input
  494. v-else
  495. v-decorator="[
  496. 'clickTrackUrl',
  497. {
  498. rules: [{ message: '请输入第三方检测链接' }],
  499. },
  500. ]"
  501. placeholder="请输入第三方检测链接"
  502. >
  503. </a-input>
  504. <a
  505. v-if="getData('clickTrackUrl')"
  506. @click="
  507. clickTrackUrlShow = true
  508. clickTrackUrlShowType == '1'
  509. "
  510. style="margin-right: 10px"
  511. >收藏监测链接</a
  512. >
  513. <a
  514. @click="
  515. getClickTrackUrlList('1')
  516. clickTrackUrlShowType = '1'
  517. "
  518. >监测链接列表</a
  519. >
  520. </a-form-item>
  521. <a-form-item label="第三方ActionBar点击监控链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
  522. <a-input
  523. v-decorator="[
  524. 'actionbarClickUrl',
  525. {
  526. rules: [{ message: '请输入第三方点击监控链接' }],
  527. },
  528. ]"
  529. placeholder="请输入第三方点击监控链接"
  530. >
  531. </a-input>
  532. <span style="color: red; position: relative; top: -10px">仅加白使用</span>
  533. <br />
  534. <a
  535. v-if="getData('actionbarClickUrl')"
  536. @click="
  537. clickTrackUrlShow = true
  538. clickTrackUrlShowType = '2'
  539. "
  540. style="margin-right: 10px; position: relative; top: -20px"
  541. >收藏监测链接</a
  542. >
  543. <a
  544. @click="
  545. getClickTrackUrlList('2')
  546. clickTrackUrlShowType = '2'
  547. "
  548. style="margin-right: 10px; position: relative; top: -20px"
  549. >监测链接列表</a
  550. >
  551. </a-form-item>
  552. </a-form>
  553. </a-tab-pane>
  554. </a-tabs>
  555. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  556. <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
  557. </a-form-item>
  558. <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
  559. <a-modal :maskClosable="false" v-model="visible" :footer="null" :width="520">
  560. <div style="width: 100%; height: 329px; display: flex; flex-flow: column">
  561. <main
  562. class="container"
  563. style="width: 100%; text-align: center; margin: 66px auto 24px; font-size: 30px; font-weight: 100"
  564. >
  565. <h2 data-splitting class="headline headline--yell" style="color: red">起量</h2>
  566. </main>
  567. <div style="width: 100%; text-align: center; font-size: 24px; margin-bottom: 65px">
  568. <img src="@/assets/success.png" alt="" style="width: 24px; margin-right: 10px" />创建成功
  569. </div>
  570. <div style="width: 100%; margin-bottom: 43px; display: flex; justify-content: center">
  571. <a-button key="submit" type="primary" @click="handleOk" style="margin-right: 8px"> 返回列表 </a-button>
  572. <a-button key="back" @click="handleCancel">关闭</a-button>
  573. </div>
  574. </div>
  575. </a-modal>
  576. <a-modal
  577. :maskClosable="false"
  578. title="封面上传"
  579. @cancel="closeImage"
  580. @afterClose="closeImage"
  581. v-model="addImageVisible"
  582. >
  583. <template slot="footer">
  584. <a-button key="back" @click="closeImage">取消</a-button>
  585. <a-button key="submit" type="primary" @click="handleOkImage" :loading="loadingImage"> 确定 </a-button>
  586. </template>
  587. <a-form-item label="" class="add-image-material">
  588. <uploadFile
  589. v-if="addImageVisible"
  590. :value.sync="urlListImage.url"
  591. :checkFile="fileWater"
  592. @overUpload="overUploadImage"
  593. @removeUpload="deleteImage"
  594. :fileCount="15"
  595. uploadType="image"
  596. />
  597. <!--
  598. <upload-to-ali style="width:100%" v-model="urlListImage.url" :customDomain="customDomain" :multiple="true"
  599. preview :region="region" :bucket="bucket" :accept="acceptImage" :max="15" :size="2048"
  600. :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret" :before-upload="fileWater" :dir="dirImg"
  601. @delete='deleteImage' @loaded="overUploadImage"></upload-to-ali> -->
  602. <span
  603. v-if="material.filter((item) => item == false).length > 0 && urlListImage.url.length > 0"
  604. style="color: red"
  605. >上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index" v-show="!item"
  606. >第{{ index + 1 }}张</span
  607. >出错)</span
  608. >
  609. <span
  610. v-else-if="urlListImage.url.length > 0 && material.filter((item) => item == false).length == 0"
  611. style="color: green"
  612. >上传成功</span
  613. >
  614. </a-form-item>
  615. </a-modal>
  616. <a-modal
  617. :maskClosable="false"
  618. title="视频上传"
  619. @cancel="closeVideo"
  620. @afterClose="closeVideo"
  621. v-model="addVideoVisible"
  622. >
  623. <template slot="footer">
  624. <a-button key="back" @click="closeVideo">取消</a-button>
  625. <a-button key="submit" type="primary" @click="handleOkVideo" :loading="loadingVideo"> 确定 </a-button>
  626. </template>
  627. <a-form-item label="" class="add-image-material">
  628. <uploadFile
  629. v-if="addVideoVisible"
  630. :checkFile="file"
  631. :value.sync="urlList.url"
  632. @overUpload="overUpload"
  633. :fileCount="10"
  634. uploadType="video"
  635. :multiple="false"
  636. />
  637. <!-- <upload-to-ali v-model="urlList.url" :customDomain="customDomain" preview :region="region" :bucket="bucket"
  638. :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"
  639. :before-upload="file" :dir="dirVideo" @loaded="overUpload">
  640. </upload-to-ali> -->
  641. <span v-if="messageTip" style="color: red">{{ messageTip }}</span>
  642. </a-form-item>
  643. </a-modal>
  644. <a-modal :maskClosable="false" title="抽帧展示" v-model="chouzhen" :width="1000">
  645. <template slot="footer">
  646. <a-button key="back" @click="chouzhen = false">关闭</a-button>
  647. <a-button key="submit" type="primary" @click="handleOkChouzhen"> 确定 </a-button>
  648. </template>
  649. <a-button type="primary" @click="onCheckAllChange"> 全选 </a-button>
  650. <!-- </a-checkbox> -->
  651. <ul v-if="chouzhenList.length > 0" style="height: 600px; overflow: auto; padding-left: 0" class="step3-modal">
  652. <a-checkbox-group v-model="checkList" @change="onChange" style="width: 100%">
  653. <li
  654. v-for="(item, index) of chouzhenList"
  655. :key="index"
  656. class="chouzhen"
  657. style="height: 320px"
  658. :class="{ first: index == 0 }"
  659. >
  660. <a-checkbox
  661. :value="item.signature"
  662. style="position: absolute; z-index: 100; width: 100%; height: 100%; right: 0; top: 0; float: right"
  663. >
  664. <img :src="item.url" alt="" style="width: 100%" />
  665. </a-checkbox>
  666. <a
  667. style="position: absolute; bottom: 0; width: 100%; text-align: center; margin-left: -10px; z-index: 100"
  668. @click.stop="
  669. showImageStr = item.url
  670. showImageChouzhen = true
  671. "
  672. >查看封面</a
  673. >
  674. </li>
  675. </a-checkbox-group>
  676. </ul>
  677. </a-modal>
  678. <a-modal title="抽帧详情" v-model="showImageChouzhen" :width="400" :footer="null">
  679. <img :src="showImageStr" style="width: 100%" />
  680. </a-modal>
  681. <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
  682. <a-tabs type="card" @change="callback" v-model="active" class="check-video">
  683. <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
  684. <a-row :gutter="24">
  685. <a-col :span="12">
  686. <a-form-item label="日期选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
  687. <a-range-picker name="buildTime" v-model="time" />
  688. </a-form-item>
  689. </a-col>
  690. <!-- <a-col :span="12">
  691. <a-form-item label="筛选条件" :labelCol="labelCol" :wrapperCol="wrapperCol">
  692. <a-select v-model="orderBy" style="width: 100%">
  693. <a-select-option value="time"> 按时间排序 </a-select-option>
  694. <a-select-option value="cost"> 按消耗排序</a-select-option>
  695. </a-select>
  696. </a-form-item>
  697. </a-col> -->
  698. </a-row>
  699. <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0">
  700. <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width: 100%">
  701. <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
  702. <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
  703. 您的浏览器不支持 video 标签。
  704. </video> -->
  705. <a-checkbox :value="item" style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0">
  706. <img :src="item.coverUrl" alt="" style="width: 100%; margin-bottom: 30px" />
  707. <div style="width: 100%; text-align: center">
  708. {{ item.statDate ? '时间:' + item.statDate.split(' ')[0] : '消耗:' + item.charge }}
  709. </div>
  710. </a-checkbox>
  711. <a @click="matemalVideo(item, index)" style="position: absolute; z-index: 100; right: 56px; bottom: 5px"
  712. >查看视频</a
  713. >
  714. </li>
  715. </a-checkbox-group>
  716. </ul>
  717. <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
  718. <img
  719. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  720. alt=""
  721. v-if="!loadingVideoList"
  722. />
  723. <img v-else src="@/views/modules/material/loading.gif" />
  724. </div>
  725. </a-tab-pane>
  726. <a-button slot="tabBarExtraContent" type="primary" @click="tongbu()" :loading="tongbuLoading">
  727. 刷新素材</a-button
  728. >
  729. </a-tabs>
  730. <!-- <ul class="actor-photo-list">
  731. <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
  732. @change="onChangeCheck">
  733. <li v-for="(item, index) of dataSource" :key="index">
  734. <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
  735. </a-checkbox>
  736. </li>
  737. </a-checkbox-group>
  738. </ul> -->
  739. <div style="text-align: right">
  740. <a-pagination
  741. size="small"
  742. :showTotal="ipagination.showTotal"
  743. style="float: right"
  744. v-if="dataSource.length > 0"
  745. showQuickJumper
  746. :pageSize.sync="ipagination.pageSize"
  747. :total="ipagination.total"
  748. v-model="ipagination.current"
  749. @change="getDataSource"
  750. />
  751. </div>
  752. </a-modal>
  753. <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
  754. <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
  755. 您的浏览器不支持 video 标签。
  756. </video>
  757. </a-modal>
  758. <a-modal title="收藏标题" v-model="creativeTagVisible" :width="1000" @ok="okTag">
  759. <el-tree :data="optionsTag" show-checkbox node-key="id" :props="defaultProps" :check-strictly="true" ref="tree">
  760. </el-tree>
  761. </a-modal>
  762. <a-modal :maskClosable="false" title="选择素材" v-model="stickerVisible" @ok="handleOkCover" :width="1000">
  763. <a-radio-group v-model="stickerStylesValue" class="sticker-styles" v-if="stickerStyles.length > 0">
  764. <a-radio v-for="(item, index) in stickerStyles" :key="index" :value="item.overlay_type">
  765. <img :src="item.overlay_preview_url" alt="" style="width: 100px; margin: 10px; opacity: 0.5" />
  766. </a-radio>
  767. </a-radio-group>
  768. </a-modal>
  769. <a-modal title="推荐标题" v-model="titleVisible" :width="1000" :footer="null">
  770. <a-row :gutter="10">
  771. <a-col :sm="10" style="margin-bottom: 20px; z-index: 10">
  772. <a-card class="search-box" style="min-height: 500px">
  773. <div style="margin-bottom: 30px">
  774. <span style="display: inline-block; width: 80px">行业</span>
  775. <a-cascader
  776. style="margin-top: 1rem; width: 300px"
  777. v-model="dataOne"
  778. :options="options"
  779. :showSearch="{ filter }"
  780. expandTrigger="hover"
  781. @change="onChangeTitle"
  782. placeholder="请选择行业"
  783. >
  784. <a-icon type="smile" slot="suffixIcon" class="test" />
  785. </a-cascader>
  786. </div>
  787. <div style="margin-bottom: 30px">
  788. <span style="display: inline-block; width: 80px">关键词</span>
  789. <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
  790. </div>
  791. <span style="display: inline-block; width: 80px; float: left"></span>
  792. <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
  793. </a-card>
  794. </a-col>
  795. <a-col :sm="14" style="margin-bottom: 20px; z-index: 10">
  796. <a-card class="search-box" style="over-flow: auto">
  797. <a-list size="large" bordered :dataSource="title">
  798. <a-list-item slot="renderItem" slot-scope="item">
  799. <a slot="actions" @click="okTitle(item)">选择</a>
  800. {{ item }}
  801. </a-list-item>
  802. </a-list>
  803. </a-card>
  804. </a-col>
  805. </a-row>
  806. </a-modal>
  807. <a-modal title="收藏标题" v-model="cunTitleVisible" :width="1000" :footer="null">
  808. <a-row :gutter="10">
  809. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
  810. <a-card class="search-box" style="over-flow: auto">
  811. <a-list size="large" bordered :dataSource="cunTitleList">
  812. <a-list-item slot="renderItem" slot-scope="item">
  813. <div slot="actions">
  814. <a @click="okTitleCun(item)">选择</a>
  815. <a-divider type="vertical" />
  816. <a @click="removeTitleCun(item)">删除</a>
  817. </div>
  818. {{ item.title }}
  819. </a-list-item>
  820. </a-list>
  821. </a-card>
  822. </a-col>
  823. </a-row>
  824. </a-modal>
  825. <a-modal title="监测链接名称" v-model="clickTrackUrlShow">
  826. <template slot="footer">
  827. <a-button
  828. key="submit"
  829. :disabled="trackUrlName == '' && !showTrackUrlNameElse"
  830. type="primary"
  831. @click="clickTrackUrlOk"
  832. >
  833. 确定
  834. </a-button>
  835. </template>
  836. <a-input placeholder="请输入监测链接名称" v-model="trackUrlName" @blur="changeTrackUrlName" style="width: 100%" />
  837. <span style="color: red" v-if="!showTrackUrlNameElse">名称重复</span>
  838. </a-modal>
  839. <a-modal title="监测链接列表" v-model="clickTrackUrlList" :width="1000" :footer="null">
  840. <a-spin :spinning="spinning">
  841. <a-row :gutter="10" class="onlny-click-track">
  842. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
  843. <a-card class="search-box" style="over-flow: auto">
  844. <!-- <a-input v-model="trackName"></a-input> -->
  845. <a-input-search
  846. placeholder="请输入监测链接名称"
  847. enter-button="Search"
  848. size="large"
  849. @search="onSearch"
  850. style="width: 40%; margin-bottom: 20px"
  851. v-model="trackName"
  852. />
  853. <a-list size="large" bordered :dataSource="trackUrlList">
  854. <a-list-item slot="renderItem" slot-scope="item" :title="item.trackUrl" style="line-height: 50px">
  855. <div slot="actions">
  856. <a @click="okClickTrackUrl(item)">选择</a>
  857. <a-divider type="vertical" />
  858. <a @click="removeClickTrackUrl(item)">删除</a>
  859. </div>
  860. {{ item.trackName }}
  861. <a-input v-model="item.trackUrl" readOnly style="margin: 10px; width: 70%"></a-input>
  862. </a-list-item>
  863. </a-list>
  864. </a-card>
  865. </a-col>
  866. </a-row>
  867. </a-spin>
  868. </a-modal>
  869. </a-card>
  870. </template>
  871. <script>
  872. import { getAction, postAction, deleteAction } from '@/api/manage'
  873. import { mapGetters } from 'vuex'
  874. import UploadToAli from '@femessage/upload-to-ali'
  875. import moment from 'moment'
  876. import VuePreview from 'vue-preview'
  877. import jq from 'jquery'
  878. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  879. import checkMatemal from './stepModule/checkMatemal'
  880. import BMF from 'browser-md5-file'
  881. import uploadFile from '@/components/uploadFile.vue'
  882. let nowIndex = 0
  883. let bestIndex = 0
  884. let showRemove = false
  885. export default {
  886. name: 'BaseForm',
  887. components: {
  888. UploadToAli,
  889. VuePreview,
  890. checkMatemal,
  891. uploadFile,
  892. },
  893. data() {
  894. return {
  895. fieldNames: {
  896. label: 'category_name',
  897. value: 'category_id',
  898. children: 'child',
  899. },
  900. createOptions: [],
  901. stickerVisible: false,
  902. stickerStyles: [],
  903. stickerStylesValue: '',
  904. coverSlogansList: [{ coverSlogans: '' }],
  905. captionsList: [{ captions: '' }],
  906. sceneIdValue: '1',
  907. trackName: '',
  908. showImageChouzhen: false,
  909. showImageStr: null,
  910. tongbuLoading: false,
  911. showTrackUrlNameElse: true,
  912. clickTrackUrlShow: false,
  913. clickTrackUrlShowType: '1',
  914. clickTrackUrlList: false,
  915. spinning:false,
  916. trackUrlList: [],
  917. trackUrlName: '',
  918. showSite: true,
  919. titleVisible: false,
  920. cunTitleVisible: false,
  921. cunTitleList: [],
  922. options: [],
  923. data: [],
  924. value: '',
  925. dataOne: [],
  926. title: [],
  927. creativeTagVisible: false,
  928. tags: [],
  929. visibleMatemal: false,
  930. visibleVideo: false,
  931. videoUrlShow: '',
  932. time: [],
  933. orderBy: 'time',
  934. channelType: 0,
  935. checkVideo: [],
  936. dataSource: [],
  937. tab: [
  938. {
  939. value: 0,
  940. label: '内部',
  941. },
  942. {
  943. value: 1,
  944. label: '外部',
  945. },
  946. ],
  947. active: 0,
  948. ipagination: {
  949. current: 1,
  950. pageSize: 5,
  951. // pageSizeOptions: ['10', '20', '30'],
  952. showTotal: (total, range) => {
  953. return range[0] + '-' + range[1] + ' 共' + total + '条'
  954. },
  955. showQuickJumper: true,
  956. // showSizeChanger: true,
  957. total: 0,
  958. onChange: (current) => {
  959. // 切换分页时的回调,
  960. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  961. this.ipagination.current = current
  962. },
  963. },
  964. chouzhen: false,
  965. chouzhenList: [],
  966. checkList: [],
  967. indeterminate: true,
  968. checkAll: false,
  969. pans: [],
  970. pansKey: '',
  971. addImageVisible: false,
  972. addVideoVisible: false,
  973. loadingVideoList: false,
  974. loadingVideo: false,
  975. loadingImage: false,
  976. allForm: {
  977. videoList: '',
  978. imageList: [],
  979. fail: [],
  980. success: [],
  981. },
  982. form: this.$form.createForm(this),
  983. list: [],
  984. vertical: 'vertical',
  985. appList: [],
  986. siteList: [],
  987. labelCol: {
  988. lg: {
  989. span: 6,
  990. },
  991. sm: {
  992. span: 6,
  993. },
  994. xs: {
  995. span: 6,
  996. },
  997. md: {
  998. span: 6,
  999. },
  1000. },
  1001. wrapperCol: {
  1002. lg: {
  1003. span: 18,
  1004. },
  1005. sm: {
  1006. span: 18,
  1007. },
  1008. xs: {
  1009. span: 14,
  1010. },
  1011. md: {
  1012. span: 14,
  1013. },
  1014. },
  1015. visible: false,
  1016. loading: false,
  1017. imageUrlList: [],
  1018. checkAllImage: false,
  1019. checkArrImage: [],
  1020. content: 0,
  1021. urlListImage: {
  1022. url: [],
  1023. md5: [],
  1024. },
  1025. urlList: {
  1026. url: '',
  1027. md5: '',
  1028. photoId: '',
  1029. },
  1030. imageArrList: [],
  1031. material: [],
  1032. creativeCopywriter: '',
  1033. customDomain: '',
  1034. region: 'oss-cn-beijing',
  1035. bucket: 'ctop-media',
  1036. acceptVideo: 'video/mpeg,video/mp4',
  1037. acceptImage: 'image/jpeg,image/jpg',
  1038. accessKeyId: 'LTAIbNbqWzSOklQV',
  1039. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  1040. messageTip: null,
  1041. verticalPhoto: [],
  1042. horizontalPhoto: [],
  1043. creativeMaterialType: '1',
  1044. postAdTrue: false,
  1045. optionsTag: [],
  1046. defaultProps: {
  1047. children: 'children',
  1048. label: 'label',
  1049. id: 'id',
  1050. },
  1051. tagName: '',
  1052. optionsTag: [],
  1053. }
  1054. },
  1055. methods: {
  1056. getInfo(item) {
  1057. if (this.tagName == '') {
  1058. this.$message.error('请输入分类名称')
  1059. return
  1060. } else {
  1061. let params = {}
  1062. params.tagName = this.tagName
  1063. // params.campaignBudget = this.campaignBudget
  1064. params.tagArray = JSON.stringify(this.getData('creativeTag'))
  1065. params.userId = this.userInfo().id
  1066. params.accountId = localStorage.getItem('accountId')
  1067. postAction('/tag/kuaiShouCreativeTagCollection/add', params).then((res) => {
  1068. if (res.success) {
  1069. this.$message.success('添加成功')
  1070. this.tagName = ''
  1071. } else {
  1072. this.$message.error(res.message)
  1073. }
  1074. })
  1075. }
  1076. },
  1077. getCoverUrl(index, item, bestIndex) {
  1078. nowIndex = index
  1079. bestIndex = bestIndex
  1080. this.stickerVisible = true
  1081. },
  1082. changeType(item) {
  1083. this.$nextTick(() => {
  1084. if (item.creativeMaterialType == '1') {
  1085. item.name = '自定义创意_竖版视频_'
  1086. } else {
  1087. item.name = '自定义创意_横版视频_'
  1088. }
  1089. })
  1090. },
  1091. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  1092. onSearch(value) {
  1093. var params = {}
  1094. params.accountId = localStorage.getItem('accountId')
  1095. params.userId = this.userInfo().id
  1096. params.trackType = this.clickTrackUrlShowType
  1097. params.pageNo = 1
  1098. params.pageSize = 500
  1099. params.trackName = value
  1100. getAction('/kuaishou/kuaiShouTrackUrlCollection/list', params).then((res) => {
  1101. if (res.success) {
  1102. this.trackUrlList = res.result.records
  1103. } else {
  1104. this.$message.error(res.message)
  1105. }
  1106. })
  1107. },
  1108. changeTrackUrlName() {
  1109. var params = {}
  1110. params.accountId = localStorage.getItem('accountId')
  1111. params.userId = this.userInfo().id
  1112. params.trackName = this.trackUrlName
  1113. getAction('/kuaishou/kuaiShouTrackUrlCollection/checkTrackName', params).then((res) => {
  1114. this.showTrackUrlNameElse = res.result
  1115. })
  1116. },
  1117. clickTrackUrlOk() {
  1118. var params = {}
  1119. params.accountId = localStorage.getItem('accountId')
  1120. params.userId = this.userInfo().id
  1121. params.trackName = this.trackUrlName
  1122. params.trackType = this.clickTrackUrlShowType
  1123. params.trackUrl =
  1124. this.clickTrackUrlShowType == '1' ? this.getData('clickTrackUrl') : this.getData('actionbarClickUrl')
  1125. postAction('/kuaishou/kuaiShouTrackUrlCollection/add', params).then((res) => {
  1126. if (res.success) {
  1127. this.clickTrackUrlShow = false
  1128. this.trackUrlName = ''
  1129. this.$message.success('添加成功')
  1130. } else {
  1131. this.$message.error(res.message)
  1132. }
  1133. })
  1134. },
  1135. okClickTrackUrl(item) {
  1136. this.clickTrackUrlList = false
  1137. if (this.clickTrackUrlShowType == '1') {
  1138. this.form.setFieldsValue({
  1139. clickTrackUrl: item.trackUrl,
  1140. })
  1141. } else {
  1142. this.form.setFieldsValue({
  1143. actionbarClickUrl: item.trackUrl,
  1144. })
  1145. }
  1146. },
  1147. removeClickTrackUrl(item) {
  1148. deleteAction('/kuaishou/kuaiShouTrackUrlCollection/delete', {
  1149. id: item.id,
  1150. }).then((res) => {
  1151. if (res.success) {
  1152. this.getClickTrackUrlList(this.clickTrackUrlShowType)
  1153. }
  1154. })
  1155. },
  1156. getClickTrackUrlList(type) {
  1157. this.spinning = true
  1158. this.clickTrackUrlList = true
  1159. this.trackUrlList = []
  1160. var params = {}
  1161. params.accountId = localStorage.getItem('accountId')
  1162. params.trackType = type
  1163. params.userId = this.userInfo().id
  1164. params.pageNo = 1
  1165. params.pageSize = 500
  1166. getAction('/kuaishou/kuaiShouTrackUrlCollection/list', params).then((res) => {
  1167. if (res.success) {
  1168. this.spinning = false
  1169. this.trackUrlList = res.result.records
  1170. } else {
  1171. this.spinning = false
  1172. this.$message.error(res.message)
  1173. }
  1174. })
  1175. },
  1176. showTitle(index, bestIndex) {
  1177. nowIndex = index
  1178. bestIndex = bestIndex
  1179. this.titleVisible = true
  1180. this.getHangye()
  1181. },
  1182. okTitle(item) {
  1183. this.pans[bestIndex].list[nowIndex].description = item
  1184. this.titleVisible = false
  1185. this.dataOne = []
  1186. this.value = ''
  1187. this.title = []
  1188. },
  1189. cunTitle(nowIndex, lastIndex) {
  1190. if (this.pans[lastIndex].list[nowIndex].description == '') {
  1191. this.$message.error('请填写广告语后再进行收藏')
  1192. } else {
  1193. var params = {}
  1194. params.accountId = localStorage.getItem('accountId')
  1195. params.userId = this.userInfo().id
  1196. params.title = this.pans[lastIndex].list[nowIndex].description
  1197. postAction('/kuaishou/kuaiShouTitleCollection/add', params).then((res) => {
  1198. if (res.success) {
  1199. this.$message.success('收藏成功')
  1200. } else {
  1201. this.$message.error(res.message)
  1202. }
  1203. })
  1204. }
  1205. },
  1206. showCunTag(type) {
  1207. this.creativeTagVisible = true
  1208. var params = {}
  1209. params.accountId = localStorage.getItem('accountId')
  1210. params.userId = this.userInfo().id
  1211. params.pageSize = 1000
  1212. params.pageNo = 1
  1213. getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
  1214. if (res.success) {
  1215. console.log(res.result)
  1216. this.optionsTag = res.result.records.map((item) => {
  1217. return {
  1218. id: item.id,
  1219. label: item.tagName,
  1220. children: JSON.parse(item.tagArray).map((item) => {
  1221. return {
  1222. id: item,
  1223. label: item,
  1224. disabled: true,
  1225. }
  1226. }),
  1227. }
  1228. })
  1229. }
  1230. })
  1231. },
  1232. okTag() {
  1233. var data = this.$refs.tree.getCheckedKeys()
  1234. if (data.length > 1) {
  1235. this.$message.error('只能选择一个选项')
  1236. // this.$refs.tree.setCheckedKeys([]);
  1237. } else {
  1238. var params = {}
  1239. params.accountId = localStorage.getItem('accountId')
  1240. params.userId = this.userInfo().id
  1241. params.pageSize = 1000
  1242. params.pageNo = 1
  1243. params.id = data[0]
  1244. getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
  1245. if (res.success) {
  1246. console.log(res.result)
  1247. this.$nextTick(() => {
  1248. this.form.setFieldsValue({
  1249. creativeTag: JSON.parse(res.result.records[0].tagArray).map((item) => {
  1250. return item
  1251. }),
  1252. })
  1253. this.form.validateFields(['creativeTag'])
  1254. })
  1255. this.creativeTagVisible = false
  1256. } else {
  1257. this.$message.error('选择出错,请稍后选择或自行手填')
  1258. }
  1259. })
  1260. }
  1261. },
  1262. showCunTitle(index, bestIndex) {
  1263. nowIndex = index
  1264. bestIndex = bestIndex
  1265. this.cunTitleVisible = true
  1266. this.getCunTitle()
  1267. },
  1268. getCunTitle() {
  1269. var params = {}
  1270. params.accountId = localStorage.getItem('accountId')
  1271. params.userId = this.userInfo().id
  1272. params.pageNo = 1
  1273. params.pageSize = 500
  1274. getAction('/kuaishou/kuaiShouTitleCollection/list', params).then((res) => {
  1275. if (res.success) {
  1276. this.cunTitleList = res.result.records
  1277. }
  1278. })
  1279. },
  1280. removeTitleCun(item) {
  1281. deleteAction('/kuaishou/kuaiShouTitleCollection/delete', {
  1282. id: item.id,
  1283. }).then((res) => {
  1284. if (res.success) {
  1285. this.getCunTitle()
  1286. }
  1287. })
  1288. },
  1289. okTitleCun(item) {
  1290. this.pans[bestIndex].list[nowIndex].description = item.title
  1291. this.cunTitleVisible = false
  1292. this.cunTitleList = []
  1293. },
  1294. searchQuery() {
  1295. // /ctop/creativeTitle/titleSuggestion
  1296. getAction('/ctop/creativeTitle/titleSearch', {
  1297. firstCategory: this.dataOne[0],
  1298. secondCategory: this.dataOne[1],
  1299. keywords: this.value,
  1300. }).then((res) => {
  1301. console.log(res)
  1302. this.title = res.result ? res.result : []
  1303. })
  1304. // firstCategory,secondCategory,keywords
  1305. },
  1306. getHangye() {
  1307. getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
  1308. if (res.success) {
  1309. this.options = res.result.map((item) => {
  1310. return {
  1311. label: item.label,
  1312. value: item.value,
  1313. children:
  1314. item.children.length > 0
  1315. ? [
  1316. {
  1317. label: '不限',
  1318. value: 0,
  1319. },
  1320. ].concat(item.children)
  1321. : [
  1322. {
  1323. label: '不限',
  1324. value: 0,
  1325. },
  1326. ],
  1327. }
  1328. })
  1329. this.options = [
  1330. {
  1331. label: '不限',
  1332. value: 0,
  1333. },
  1334. ].concat(this.options)
  1335. if (this.dataOne.length > 0) {
  1336. return
  1337. } else {
  1338. this.dataOne = [0]
  1339. }
  1340. }
  1341. })
  1342. },
  1343. onChangeTitle(value, selectedOptions) {
  1344. this.dataOne = value
  1345. this.value = ''
  1346. this.title = []
  1347. },
  1348. filter(inputValue, path) {
  1349. return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  1350. },
  1351. handleSearch(value) {
  1352. if (this.dataOne.length > 0) {
  1353. const str = {
  1354. firstCategory: this.dataOne[0],
  1355. secondCategory: this.dataOne[1],
  1356. keyword: value,
  1357. }
  1358. getAction('/ctop/creativeTitle/titleSuggestion', str).then((d) => {
  1359. const result = d.result ? d.result : []
  1360. this.data = result.map((item) => {
  1361. return {
  1362. value: item,
  1363. text: item,
  1364. }
  1365. })
  1366. })
  1367. } else {
  1368. this.data = []
  1369. return
  1370. }
  1371. },
  1372. matemalVideo(item) {
  1373. this.visibleVideo = true
  1374. this.videoUrlShow = item.url
  1375. },
  1376. onChange(checkedList) {
  1377. this.indeterminate = !!checkedList.length && checkedList.length < this.chouzhenList.length
  1378. this.checkAll = checkedList.length === this.chouzhenList.length
  1379. },
  1380. onCheckAllChange(e) {
  1381. if (this.checkAll) {
  1382. this.checkList = []
  1383. } else {
  1384. this.checkList = this.chouzhenList.map((item) => {
  1385. return item.signature
  1386. })
  1387. }
  1388. this.checkAll = !this.checkAll
  1389. },
  1390. onCheckAllImageChange(index, item) {
  1391. if (this.pans[index].list[item.key].checkAllImage) {
  1392. this.pans[index].list[item.key].checkArrImage = []
  1393. } else {
  1394. this.pans[index].list[item.key].checkArrImage = this.pans[index].list[item.key].imageUrlList.map((item) => {
  1395. return item.code
  1396. })
  1397. }
  1398. this.pans[index].list[item.key].checkAllImage = !this.pans[index].list[item.key].checkAllImage
  1399. },
  1400. onChangeCheckImage(checkedList) {},
  1401. handleConfirmValue(rule, value, callback) {
  1402. if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
  1403. callback()
  1404. } else {
  1405. callback('链接不能为空且开头为http://或https://,并且长度小于10000')
  1406. }
  1407. },
  1408. creativeTagValid(rule, value, callback) {
  1409. if (value.length > 10) {
  1410. callback('创意标签最多填写10个,请删减')
  1411. } else {
  1412. callback()
  1413. }
  1414. },
  1415. showData(item, type) {
  1416. var index = this.pans.findIndex((item) => item.key === this.pansKey)
  1417. // this.pans[index].list[item.key].imageList = []
  1418. if (type == 'video') {
  1419. this.pans[index].list[item.key].videoList = item.video
  1420. getAction('/kuaishou/batch/getCreativeCopywriter', {
  1421. code: item.video.signature,
  1422. accountId: localStorage.getItem('accountId'),
  1423. }).then((res) => {
  1424. if (res.success) {
  1425. this.pans[index].list[item.key].description = res.result ? res.result.creativeCopywriter : ''
  1426. }
  1427. })
  1428. getAction('/ctop/MaterialImageInfo/list', {
  1429. videoId: item.video.signature,
  1430. status: 1,
  1431. }).then((res) => {
  1432. if (res.success) {
  1433. this.pans[index].list[item.key].imageUrlList = res.result
  1434. this.pans[index].list[item.key].checkArrImage = res.result.map((item) => {
  1435. return item.code
  1436. })
  1437. }
  1438. })
  1439. var params = {
  1440. videoSignature: item.video.signature,
  1441. pageSize: 20,
  1442. pageNo: 1,
  1443. }
  1444. getAction('/cutFrame/material/list', params).then((res) => {
  1445. if (res.success) {
  1446. if (res.result.records.length > 0) {
  1447. this.pans[index].list[item.key].chouzhenShow = true
  1448. } else {
  1449. this.pans[index].list[item.key].chouzhenShow = false
  1450. }
  1451. }
  1452. })
  1453. } else {
  1454. // this.pans[index].list[item.key].imageList.push(...item.image)
  1455. if (this.creativeMaterialType == '4') {
  1456. if (item.image.length + this.contentAll > 15) {
  1457. this.$message.error('当前选择封面' + item.image.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  1458. return
  1459. } else {
  1460. this.pans[index].postAdList[item.key].imageList.push(...item.image)
  1461. this.chouzhen = false
  1462. this.chouzhenList = []
  1463. this.checkList = []
  1464. this.checkAll = false
  1465. }
  1466. } else {
  1467. if (item.image.length + this.contentAll > 15) {
  1468. this.$message.error('当前选择封面' + item.image.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  1469. return
  1470. } else {
  1471. this.pans[index].list[item.key].imageList.push(...item.image)
  1472. this.chouzhen = false
  1473. this.chouzhenList = []
  1474. this.checkList = []
  1475. this.checkAll = false
  1476. }
  1477. }
  1478. }
  1479. },
  1480. getData(className) {
  1481. return this.form.getFieldValue(className)
  1482. },
  1483. onChangeVideo() {
  1484. if (this.checkVideo.length > 1) {
  1485. this.checkVideo.shift()
  1486. }
  1487. },
  1488. callback(key) {
  1489. this.channelType = key
  1490. this.checkVideo = []
  1491. this.ipagination.current = 1
  1492. this.time = []
  1493. // var params = {}
  1494. // params.channelType = key
  1495. // params.accountId = localStorage.getItem('accountId')
  1496. // params.materialType = this.getData('creativeMaterialType')
  1497. // params.pageSize = this.ipagination.pageSize
  1498. // params.pageNo = this.ipagination.current
  1499. // this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1500. },
  1501. getDataSource(page, pageSize) {
  1502. this.ipagination.current = page
  1503. var params = {}
  1504. params.accountId = localStorage.getItem('accountId')
  1505. params.materialType = this.creativeMaterialType
  1506. params.pageSize = this.ipagination.pageSize
  1507. params.pageNo = page
  1508. params.channelType = this.channelType
  1509. params.status = 0
  1510. params.orderBy = this.orderBy
  1511. if (this.time.length > 0) {
  1512. // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  1513. // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  1514. params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
  1515. params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
  1516. }
  1517. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1518. },
  1519. showVideoList(url, params) {
  1520. this.dataSource = []
  1521. this.loadingVideoList = true
  1522. getAction(url, params).then((res) => {
  1523. console.log(res)
  1524. if (res.success) {
  1525. this.dataSource = res.result.list
  1526. this.ipagination.total = res.result.total
  1527. this.loadingVideoList = false
  1528. } else {
  1529. this.loadingVideoList = false
  1530. }
  1531. })
  1532. },
  1533. getVideoList(type, index, item, bestIndex) {
  1534. if (type == 'video') {
  1535. nowIndex = index
  1536. bestIndex = bestIndex
  1537. this.orderBy = 'time'
  1538. this.visibleMatemal = true
  1539. this.checkVideo = []
  1540. this.active = 0
  1541. this.time = []
  1542. this.channelType = 0
  1543. this.creativeMaterialType = item.creativeMaterialType
  1544. // var params = {}
  1545. // params.accountId = localStorage.getItem('accountId')
  1546. // params.materialType = this.getData('creativeMaterialType')
  1547. // params.pageSize = this.ipagination.pageSize
  1548. // params.pageNo = this.ipagination.current
  1549. // params.params.channelType = 0 = 0
  1550. // this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1551. } else {
  1552. this.creativeMaterialType = item.creativeMaterialType
  1553. this.$refs.check.showCheck(
  1554. item.creativeMaterialType,
  1555. '/kuaishou/batch/getImageList',
  1556. item.imageList,
  1557. type,
  1558. index
  1559. )
  1560. }
  1561. },
  1562. remove(targetKey) {
  1563. let activeKey = this.pansKey
  1564. let lastIndex
  1565. this.pans.forEach((pane, i) => {
  1566. if (pane.key === targetKey) {
  1567. lastIndex = i - 1
  1568. }
  1569. })
  1570. const panes = this.pans.filter((pane) => pane.key !== targetKey)
  1571. if (panes.length && activeKey === targetKey) {
  1572. if (lastIndex >= 0) {
  1573. activeKey = panes[lastIndex].key
  1574. } else {
  1575. activeKey = panes[0].key
  1576. }
  1577. }
  1578. this.pans = panes
  1579. this.pansKey = activeKey
  1580. this.form.resetFields()
  1581. if (this.pans.length == 0) {
  1582. this.$bus.$emit('remove', '/account/stepForm')
  1583. } else {
  1584. this.addCreative(0)
  1585. getAction('/kuaishou/batch/checkCreativeCount', {
  1586. unitId: this.pansKey,
  1587. accountId: localStorage.getItem('accountId'),
  1588. }).then((res) => {
  1589. this.content = res.result
  1590. })
  1591. }
  1592. },
  1593. handleOk() {
  1594. this.remove(this.pansKey)
  1595. if (localStorage.getItem('originality')) {
  1596. this.$router.replace({
  1597. path: '/account/originality',
  1598. })
  1599. } else {
  1600. this.$router.replace({
  1601. path: '/account/accountIndex',
  1602. })
  1603. }
  1604. },
  1605. handleCancel(e) {
  1606. this.visible = false
  1607. this.remove(this.pansKey)
  1608. },
  1609. handleSubmit(e) {
  1610. e.preventDefault()
  1611. var index = this.pans.findIndex((item) => item.key === this.pansKey)
  1612. var data = this.pans[index].list.map((item) => {
  1613. return item.imageList.length + item.imageUrlList.length
  1614. })
  1615. if (this.contentAll > 15) {
  1616. this.$message.error('封面最多15张')
  1617. return
  1618. }
  1619. this.form.validateFields((err, values) => {
  1620. if (!err) {
  1621. this.loading = true
  1622. var dataJson = this.pans[index].list.map((item) => {
  1623. return {
  1624. creativeMaterialType: item.creativeMaterialType,
  1625. description: item.description,
  1626. imageArr: item.imageList.map((ele, index) => {
  1627. return {
  1628. signature: ele.signature,
  1629. name: item.name,
  1630. }
  1631. }),
  1632. imageArrTwo: item.checkArrImage.map((ele, index) => {
  1633. return {
  1634. signature: ele,
  1635. name: item.name,
  1636. }
  1637. }),
  1638. photoId: item.videoList.photoId,
  1639. name: item.name,
  1640. overlayType: item.coverUrl,
  1641. stickerTitle: item.coverSlogans,
  1642. }
  1643. })
  1644. var dataAd = this.pans[index].postAdList.map((item) => {
  1645. return {
  1646. creativeMaterialType: item.creativeMaterialType,
  1647. description: item.description,
  1648. shortSlogan: item.shortSlogan,
  1649. imageArr: item.imageList.map((ele, index) => {
  1650. return {
  1651. signature: ele.signature,
  1652. name: item.name,
  1653. }
  1654. }),
  1655. name: item.name,
  1656. }
  1657. })
  1658. var allJson = dataJson.map((item) => {
  1659. return {
  1660. description: item.description,
  1661. imageArr:
  1662. item.imageArr.concat(item.imageArrTwo).length > 0
  1663. ? item.imageArr.concat(item.imageArrTwo)
  1664. : [
  1665. {
  1666. name: item.name,
  1667. },
  1668. ],
  1669. photoId: item.photoId,
  1670. creativeMaterialType: item.creativeMaterialType,
  1671. overlayType: item.overlayType,
  1672. stickerTitle: item.stickerTitle,
  1673. }
  1674. })
  1675. var params = Object.assign({}, values)
  1676. // var params = {
  1677. params.dataJson = allJson.concat(dataAd)
  1678. // ...values,
  1679. params.creativeCategory = params.creativeCategory
  1680. ? params.creativeCategory[params.creativeCategory.length - 1]
  1681. : null
  1682. params.unitId = this.pansKey
  1683. params.accountId = localStorage.getItem('accountId')
  1684. params.content = this.content
  1685. // }
  1686. postAction('/kuaishou/batch/createCreative', params).then((res) => {
  1687. if (res.success) {
  1688. this.visible = true
  1689. this.loading = false
  1690. this.$nextTick(() => {
  1691. Splitting()
  1692. })
  1693. } else {
  1694. this.loading = false
  1695. this.$message.error(res.message)
  1696. }
  1697. })
  1698. }
  1699. })
  1700. },
  1701. nextStep() {
  1702. var that = this
  1703. setTimeout(function () {
  1704. that.$emit('nextStep')
  1705. }, 1500)
  1706. },
  1707. prevStep() {
  1708. this.$emit('prevStep')
  1709. },
  1710. addCreative(index) {
  1711. this.$nextTick(() => {
  1712. this.pans[index].list.push({
  1713. videoList: '',
  1714. imageList: [],
  1715. name: '自定义创意_竖版视频_',
  1716. description: '',
  1717. creativeMaterialType: '1',
  1718. actionBarText: '',
  1719. imageUrlList: [],
  1720. checkArrImage: [],
  1721. checkAllImage: false,
  1722. chouzhenShow: false,
  1723. coverUrl: '',
  1724. coverSlogans: '',
  1725. })
  1726. })
  1727. },
  1728. addAdList(index) {
  1729. this.$nextTick(() => {
  1730. this.pans[index].postAdList.push({
  1731. imageList: [],
  1732. shortSlogan: '',
  1733. name: '便利贴创意',
  1734. description: '',
  1735. creativeMaterialType: '4',
  1736. actionBarText: '',
  1737. imageUrlList: [],
  1738. checkArrImage: [],
  1739. checkAllImage: false,
  1740. chouzhenShow: false,
  1741. })
  1742. })
  1743. },
  1744. deleteCreative(bestIndex, index, type) {
  1745. if (type) {
  1746. this.pans[bestIndex].postAdList.splice(index, 1)
  1747. } else {
  1748. this.pans[bestIndex].list.splice(index, 1)
  1749. }
  1750. },
  1751. filterOption(input, option) {
  1752. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1753. },
  1754. uploadVideo(index, bestIndex, item) {
  1755. nowIndex = index
  1756. bestIndex = bestIndex
  1757. this.addVideoVisible = true
  1758. this.creativeMaterialType = item.creativeMaterialType
  1759. },
  1760. tongbu() {
  1761. this.tongbuLoading = true
  1762. getAction('/kuaishou/batch/syncVideo', {
  1763. accountId: localStorage.getItem('accountId'),
  1764. }).then((res) => {
  1765. if (res.success) {
  1766. this.$message.success(res.message)
  1767. this.tongbuLoading = false
  1768. var params = {}
  1769. params.accountId = localStorage.getItem('accountId')
  1770. params.materialType = this.creativeMaterialType
  1771. params.pageSize = this.ipagination.pageSize
  1772. params.pageNo = 1
  1773. params.status = 0
  1774. params.channelType = this.channelType
  1775. params.orderBy = this.orderBy
  1776. if (this.time.length > 0) {
  1777. // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  1778. // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  1779. params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
  1780. params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
  1781. }
  1782. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1783. } else {
  1784. this.$message.error(res.message)
  1785. this.tongbuLoading = false
  1786. }
  1787. })
  1788. },
  1789. handleOkChouzhen(e) {
  1790. var arr = []
  1791. for (let i = 0; i < this.chouzhenList.length; i++) {
  1792. for (let j = 0; j < this.checkList.length; j++) {
  1793. if (this.chouzhenList[i].signature == this.checkList[j]) {
  1794. arr.push(this.chouzhenList[i])
  1795. }
  1796. }
  1797. }
  1798. if (arr.length + this.contentAll > 15) {
  1799. this.$message.error('当前选择封面' + arr.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  1800. return
  1801. } else {
  1802. this.pans[bestIndex].list[nowIndex].imageList.push(...arr)
  1803. this.chouzhen = false
  1804. this.chouzhenList = []
  1805. this.checkList = []
  1806. this.checkAll = false
  1807. }
  1808. },
  1809. showImages(index, bestIndex) {
  1810. this.chouzhen = true
  1811. this.chouzhenList = []
  1812. nowIndex = index
  1813. bestIndex = bestIndex
  1814. var params = {
  1815. videoSignature: this.pans[bestIndex].list[index].videoList.signature,
  1816. pageSize: 20,
  1817. pageNo: 1,
  1818. }
  1819. getAction('/cutFrame/material/list', params).then((res) => {
  1820. if (res.success) {
  1821. this.chouzhenList.push(...res.result.records)
  1822. }
  1823. })
  1824. },
  1825. uploadImages(index, bestIndex, item, type) {
  1826. nowIndex = index
  1827. bestIndex = bestIndex
  1828. this.addImageVisible = true
  1829. this.loadingImage = false
  1830. this.creativeMaterialType = item.creativeMaterialType
  1831. if (type) {
  1832. this.postAdTrue = true
  1833. } else {
  1834. this.postAdTrue = false
  1835. }
  1836. },
  1837. closeImage() {
  1838. this.addImageVisible = false
  1839. this.urlListImage = {
  1840. url: [],
  1841. md5: [],
  1842. }
  1843. this.imageArrList = []
  1844. nowIndex = 0
  1845. bestIndex = 0
  1846. this.loadingImage = false
  1847. },
  1848. closeVideo() {
  1849. this.addVideoVisible = false
  1850. this.urlList = {
  1851. url: '',
  1852. md5: '',
  1853. photoId: '',
  1854. }
  1855. nowIndex = 0
  1856. bestIndex = 0
  1857. this.messageTip = null
  1858. },
  1859. handleOkImage(e) {
  1860. this.loadingImage = true
  1861. var params = {
  1862. accountId: localStorage.getItem('accountId'),
  1863. uploadImageArr: this.imageArrList,
  1864. creativeMaterialType: this.creativeMaterialType,
  1865. }
  1866. postAction('/kusiShouUpload/image', params).then((res) => {
  1867. if (res.success) {
  1868. if (!this.postAdTrue) {
  1869. if (res.result.length + this.contentAll > 15) {
  1870. this.$message.error('当前上传封面' + res.result.length + '张,最多可上传' + (15 - this.contentAll) + '张')
  1871. this.loadingImage = false
  1872. return
  1873. } else {
  1874. this.pans[bestIndex].list[nowIndex].imageList.push(...res.result)
  1875. this.closeImage()
  1876. this.loadingImage = false
  1877. }
  1878. } else {
  1879. if (res.result.length + this.contentAll > 15) {
  1880. this.$message.error('当前上传封面' + res.result.length + '张,最多可上传' + (15 - this.contentAll) + '张')
  1881. this.loadingImage = false
  1882. return
  1883. } else {
  1884. this.pans[bestIndex].postAdList[nowIndex].imageList.push(...res.result)
  1885. this.closeImage()
  1886. this.loadingImage = false
  1887. }
  1888. }
  1889. } else {
  1890. this.$message.error('封面上传失败')
  1891. this.loadingImage = false
  1892. }
  1893. })
  1894. },
  1895. deleteImage(url) {
  1896. var index = this.imageArrList.findIndex((v) => v.url === url)
  1897. this.imageArrList.splice(index, 1)
  1898. },
  1899. overUploadImage(urlAll) {
  1900. var that = this
  1901. that.material = []
  1902. that.imageArrList = []
  1903. var img
  1904. if (urlAll.length > 0) {
  1905. for (var i = 0; i < urlAll.length; i++) {
  1906. that.imageArrList.push({
  1907. signature: this.urlListImage.md5[i],
  1908. url: urlAll[i].url,
  1909. })
  1910. img = new Image()
  1911. img.src = urlAll[i].url
  1912. }
  1913. }
  1914. },
  1915. fileWater(file) {
  1916. var bmf = new BMF()
  1917. var that = this
  1918. // this.urlListImage = {
  1919. // url: [],
  1920. // md5: []
  1921. // }
  1922. return new Promise(function (resolve, reject) {
  1923. bmf.md5(file, (err, md5) => {
  1924. that.urlListImage.md5.push(md5)
  1925. resolve()
  1926. })
  1927. })
  1928. },
  1929. overUpload(urlAll) {
  1930. console.log(this.urlList)
  1931. },
  1932. file(file) {
  1933. var bmf = new BMF()
  1934. var that = this
  1935. return new Promise(function (resolve, reject) {
  1936. bmf.md5(file, (err, md5) => {
  1937. getAction('/kusiShouUpload/checkVideo', {
  1938. signature: md5,
  1939. accountId: localStorage.getItem('accountId'),
  1940. }).then((res) => {
  1941. if (res.code == 0) {
  1942. if (res.result.isExistence) {
  1943. showRemove = res.result.isExistence
  1944. that.urlList.md5 = res.result.signature
  1945. that.urlList.url = res.result.videoUrl
  1946. that.urlList.photoId = res.result.photoId
  1947. reject()
  1948. } else {
  1949. showRemove = res.result.isExistence
  1950. that.urlList.md5 = md5
  1951. resolve()
  1952. }
  1953. } else {
  1954. reject()
  1955. }
  1956. })
  1957. })
  1958. })
  1959. },
  1960. handleOkVideo(e) {
  1961. this.loadingVideo = true
  1962. if (showRemove) {
  1963. this.pans[bestIndex].list[nowIndex].videoList = {
  1964. photoId: this.urlList.photoId,
  1965. url: this.urlList.url,
  1966. }
  1967. this.loadingVideo = false
  1968. var params = {
  1969. videoSignature: this.urlList.md5,
  1970. pageSize: 20,
  1971. pageNo: 1,
  1972. }
  1973. getAction('/cutFrame/material/list', params).then((res) => {
  1974. if (res.success) {
  1975. if (res.result.records.length > 0) {
  1976. this.pans[bestIndex].list[nowIndex].chouzhenShow = true
  1977. } else {
  1978. this.pans[bestIndex].list[nowIndex].chouzhenShow = false
  1979. }
  1980. }
  1981. })
  1982. this.closeVideo()
  1983. } else {
  1984. var params = {
  1985. url: this.urlList.url,
  1986. type: this.creativeMaterialType,
  1987. signature: this.urlList.md5,
  1988. accountId: localStorage.getItem('accountId'),
  1989. }
  1990. postAction('/kusiShouUpload/video', params).then((res) => {
  1991. if (res.success) {
  1992. this.pans[bestIndex].list[nowIndex].videoList = {
  1993. photoId: res.result.photoId,
  1994. url: this.urlList.url,
  1995. }
  1996. this.loadingVideo = false
  1997. this.closeVideo()
  1998. } else {
  1999. this.messageTip = res.message
  2000. this.loadingVideo = false
  2001. this.urlList = {
  2002. url: '',
  2003. md5: '',
  2004. photoId: '',
  2005. }
  2006. nowIndex = 0
  2007. bestIndex = 0
  2008. }
  2009. })
  2010. }
  2011. },
  2012. deleteCover(index, bestIndex) {
  2013. this.pans[index].list[bestIndex].coverUrl = ''
  2014. },
  2015. deleteData(index, bestIndex, deleteIndex, type) {
  2016. if (type) {
  2017. this.pans[index].postAdList[bestIndex].imageList.splice(deleteIndex, 1)
  2018. } else {
  2019. this.pans[index].list[bestIndex].imageList.splice(deleteIndex, 1)
  2020. }
  2021. },
  2022. handleOkCover(e) {
  2023. this.pans[bestIndex].list[nowIndex].coverUrl = this.stickerStylesValue
  2024. this.stickerVisible = false
  2025. },
  2026. showStickerStyles(value) {
  2027. return this.stickerStyles.filter((item) => item.overlay_type == value)[0].overlay_preview_url
  2028. },
  2029. handleOkShow(e) {
  2030. //
  2031. this.pans[bestIndex].list[nowIndex].imageList = []
  2032. getAction('/kuaishou/batch/getCreativeCopywriter', {
  2033. code: this.checkVideo[0].signature,
  2034. accountId: localStorage.getItem('accountId'),
  2035. }).then((res) => {
  2036. if (res.success) {
  2037. this.pans[bestIndex].list[nowIndex].description = res.result
  2038. ? res.result.creativeCopywriter
  2039. ? res.result.creativeCopywriter
  2040. : ''
  2041. : ''
  2042. }
  2043. })
  2044. getAction('/ctop/MaterialImageInfo/list', {
  2045. videoId: this.checkVideo[0].signature,
  2046. status: 1,
  2047. }).then((res) => {
  2048. // console.log(res)
  2049. if (res.success) {
  2050. this.pans[bestIndex].list[nowIndex].imageUrlList = res.result
  2051. this.pans[bestIndex].list[nowIndex].checkArrImage = res.result.map((item) => {
  2052. return item.code
  2053. })
  2054. }
  2055. })
  2056. this.pans[bestIndex].list[nowIndex].videoList = this.checkVideo[0]
  2057. this.visibleMatemal = false
  2058. this.ipagination.current = 1
  2059. var params = {
  2060. videoSignature: this.checkVideo[0].signature,
  2061. pageSize: 20,
  2062. pageNo: 1,
  2063. }
  2064. getAction('/cutFrame/material/list', params).then((res) => {
  2065. if (res.success) {
  2066. if (res.result.records.length > 0) {
  2067. this.pans[bestIndex].list[nowIndex].chouzhenShow = true
  2068. } else {
  2069. this.pans[bestIndex].list[nowIndex].chouzhenShow = false
  2070. }
  2071. }
  2072. })
  2073. },
  2074. judge(item) {
  2075. var re = /[(.*?)]/g
  2076. var array = []
  2077. var temp
  2078. while ((temp = re.exec(item.text))) {
  2079. array.push(temp[1])
  2080. }
  2081. item.countTag = array.length
  2082. },
  2083. getChange(item, tag, index) {
  2084. this.judge(item)
  2085. var node = document.getElementsByClassName('rending')[index]
  2086. var v = '[' + tag.name + ']'
  2087. if (document.selection) {
  2088. //IE
  2089. node.focus()
  2090. var sel = document.selection.createRange()
  2091. sel.text = v
  2092. sel.select()
  2093. item.description = v
  2094. } else if (node.selectionStart || node.selectionStart == '0') {
  2095. //MOZILLA/GOOGLE
  2096. var startPos = node.selectionStart
  2097. var endPos = node.selectionEnd
  2098. var restoreTop = node.scrollTop
  2099. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  2100. if (restoreTop > 0) {
  2101. node.scrollTop = restoreTop
  2102. }
  2103. item.text = node.value
  2104. node.focus()
  2105. node.selectionStart = startPos + v.length
  2106. node.selectionEnd = startPos + v.length
  2107. item.description = node.value
  2108. } else {
  2109. //OTHER
  2110. node.value += v
  2111. item.text = node.value
  2112. node.focus()
  2113. item.description = node.value
  2114. }
  2115. },
  2116. getAppList(appId) {
  2117. getAction('/kuaishou/batch/getPageList', {
  2118. accountId: localStorage.getItem('accountId'),
  2119. appId: appId,
  2120. viewComp: 7,
  2121. }).then((res) => {
  2122. if (res.success) {
  2123. this.siteList = res.result
  2124. }
  2125. })
  2126. },
  2127. },
  2128. computed: {
  2129. dirImg() {
  2130. let date = new Date()
  2131. let y = date.getFullYear()
  2132. let MM = date.getMonth() + 1
  2133. MM = MM < 10 ? '0' + MM : MM
  2134. let d = date.getDate()
  2135. d = d < 10 ? '0' + d : d
  2136. return 'image/' + y + '-' + MM + '-' + d + '/'
  2137. },
  2138. dirVideo() {
  2139. let date = new Date()
  2140. let y = date.getFullYear()
  2141. let MM = date.getMonth() + 1
  2142. MM = MM < 10 ? '0' + MM : MM
  2143. let d = date.getDate()
  2144. d = d < 10 ? '0' + d : d
  2145. return 'video/' + y + '-' + MM + '-' + d + '/'
  2146. },
  2147. contentAll() {
  2148. var count,
  2149. arr = []
  2150. if (this.pans[0].list.length > 0) {
  2151. for (let i = 0; i < this.pans[0].list.length; i++) {
  2152. arr.push(...this.pans[0].list[i].checkArrImage, ...this.pans[0].list[i].imageList)
  2153. }
  2154. return arr.length + this.content + this.pans[0].postAdList.length
  2155. } else {
  2156. return 0
  2157. }
  2158. },
  2159. listCheck() {
  2160. if (this.pans[0].list.length > 0) {
  2161. if (
  2162. this.pans[0].list[this.pans[0].list.length - 1].imageUrlList.length == 0 &&
  2163. this.pans[0].list[this.pans[0].list.length - 1].imageList.length == 0
  2164. ) {
  2165. return true
  2166. } else {
  2167. return false
  2168. }
  2169. } else {
  2170. return false
  2171. }
  2172. },
  2173. },
  2174. watch: {
  2175. time(n, o) {
  2176. if (n.length > 0) {
  2177. var params = {}
  2178. params.accountId = localStorage.getItem('accountId')
  2179. params.materialType = this.creativeMaterialType
  2180. params.pageSize = this.ipagination.pageSize
  2181. params.pageNo = 1
  2182. params.status = 0
  2183. params.channelType = this.channelType
  2184. params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
  2185. params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
  2186. params.orderBy = this.orderBy
  2187. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  2188. } else {
  2189. var params = {}
  2190. params.accountId = localStorage.getItem('accountId')
  2191. params.materialType = this.creativeMaterialType
  2192. params.pageSize = this.ipagination.pageSize
  2193. params.pageNo = 1
  2194. params.status = 0
  2195. params.channelType = this.channelType
  2196. params.orderBy = this.orderBy
  2197. this.ipagination.current = 1
  2198. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  2199. }
  2200. },
  2201. orderBy(n, o) {
  2202. var params = {}
  2203. params.accountId = localStorage.getItem('accountId')
  2204. params.materialType = this.creativeMaterialType
  2205. params.pageSize = this.ipagination.pageSize
  2206. params.pageNo = 1
  2207. params.status = 0
  2208. params.channelType = this.channelType
  2209. if (this.time.length > 0) {
  2210. params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
  2211. params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
  2212. } else {
  2213. }
  2214. params.orderBy = n
  2215. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  2216. },
  2217. visibleVideo(n, o) {
  2218. if (!n) {
  2219. closeAllVideoFun()
  2220. }
  2221. },
  2222. clickTrackUrlList(n, o) {
  2223. if (!n) {
  2224. this.trackName = ''
  2225. }
  2226. },
  2227. },
  2228. mounted: function () {
  2229. this.$nextTick(() => {
  2230. Splitting()
  2231. if (localStorage.getItem('pans')) {
  2232. this.pans = JSON.parse(localStorage.getItem('pans')).map((item) => {
  2233. return {
  2234. ...item,
  2235. list: [],
  2236. postAdList: [],
  2237. sceneId: JSON.parse(item.sceneId).map((item) => {
  2238. return parseInt(item)
  2239. }),
  2240. }
  2241. })
  2242. this.pansKey = this.pans[0].key
  2243. // setTimeout(() => {
  2244. // if (
  2245. // this.pans.sceneId.indexOf(5) >= 0 ||
  2246. // this.pans.sceneId.indexOf(1) >= 0 ||
  2247. // this.pans.sceneId.indexOf(7) >= 0 ||
  2248. // this.pans.sceneId.indexOf(6) >= 0
  2249. // ) {
  2250. // this.addCreative(0)
  2251. // }
  2252. // }, 0)
  2253. getAction('/kuaishou/batch/checkCreativeCount', {
  2254. unitId: this.pansKey,
  2255. accountId: localStorage.getItem('accountId'),
  2256. }).then((res) => {
  2257. this.content = res.result
  2258. })
  2259. getAction('/kuaishou/batch/getActionBarText', {
  2260. campaignId: localStorage.getItem('campaignId')
  2261. ? localStorage.getItem('campaignId')
  2262. : localStorage.getItem('advertisingGroupKey'),
  2263. }).then((res) => {
  2264. if (res.success) {
  2265. this.appList = res.result
  2266. }
  2267. })
  2268. if (localStorage.getItem('appId')) {
  2269. this.showSite = true
  2270. this.getAppList(localStorage.getItem('appId'))
  2271. } else {
  2272. getAction('/kuaishou/batch/getAppId', {
  2273. accountId: localStorage.getItem('accountId'),
  2274. unitId: this.pansKey,
  2275. }).then((res) => {
  2276. if (res.success) {
  2277. if (res.result) {
  2278. this.showSite = true
  2279. this.getAppList(res.result)
  2280. } else {
  2281. this.showSite = false
  2282. }
  2283. }
  2284. })
  2285. }
  2286. }
  2287. getAction('/kuaishou/batch/getCreativeCategory', {
  2288. accountId: localStorage.getItem('accountId'),
  2289. }).then((res) => {
  2290. if (res.success) {
  2291. console.log(res)
  2292. this.createOptions = res.result
  2293. }
  2294. })
  2295. getAction('/kuaishou/batch/creativeWord', {
  2296. accountId: localStorage.getItem('accountId'),
  2297. }).then((res) => {
  2298. if (res.success) {
  2299. this.tags = res.result
  2300. }
  2301. })
  2302. getAction('/kuaishou/batch/getCreativeWordStyles', {
  2303. accountId: localStorage.getItem('accountId'),
  2304. }).then((res) => {
  2305. this.stickerStyles = []
  2306. if (res.success) {
  2307. if (res.result) {
  2308. var data = res.result.map((item) => {
  2309. return item.sticker_styles
  2310. })
  2311. data.map((item) => {
  2312. item.map((i) => {
  2313. this.stickerStyles.push(i)
  2314. })
  2315. })
  2316. }
  2317. // console.log(this.stickerStyles)
  2318. } else {
  2319. this.stickerStyles = []
  2320. }
  2321. })
  2322. })
  2323. },
  2324. }
  2325. </script>
  2326. <style lang="scss" scope>
  2327. $colors: #f9ca24, #3498db, #ff7979, #1abc9c, #e74c3c, #f8c291;
  2328. /* Recommended styles for Splitting */
  2329. .splitting .word,
  2330. .splitting .char {
  2331. display: inline-block;
  2332. }
  2333. /* Psuedo-element chars */
  2334. .splitting .char {
  2335. position: relative;
  2336. }
  2337. /**
  2338. * Populate the psuedo elements with the character to allow for expanded effects
  2339. * Set to `display: none` by default; just add `display: block` when you want
  2340. * to use the psuedo elements
  2341. */
  2342. .splitting .char::before,
  2343. .splitting .char::after {
  2344. content: attr(data-char);
  2345. position: absolute;
  2346. top: 0;
  2347. left: 0;
  2348. visibility: hidden;
  2349. transition: inherit;
  2350. user-select: none;
  2351. }
  2352. /* Expanded CSS Variables */
  2353. .splitting {
  2354. /* The center word index */
  2355. --word-center: calc((var(--word-total) - 1) / 2);
  2356. /* The center character index */
  2357. --char-center: calc((var(--char-total) - 1) / 2);
  2358. /* The center character index */
  2359. --line-center: calc((var(--line-total) - 1) / 2);
  2360. }
  2361. .splitting .word {
  2362. /* Pecent (0-1) of the word's position */
  2363. --word-percent: calc(var(--word-index) / var(--word-total));
  2364. /* Pecent (0-1) of the line's position */
  2365. --line-percent: calc(var(--line-index) / var(--line-total));
  2366. }
  2367. .splitting .char {
  2368. /* Percent (0-1) of the char's position */
  2369. --char-percent: calc(var(--char-index) / var(--char-total));
  2370. /* Offset from center, positive & negative */
  2371. --char-offset: calc(var(--char-index) - var(--char-center));
  2372. /* Absolute distance from center, only positive */
  2373. --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));
  2374. /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  2375. --distance-sine: calc(var(--char-offset) / var(--char-center));
  2376. /* Distance from center where 1 is far left/far right, 0 is center */
  2377. --distance-percent: calc((var(--distance) / var(--char-center)));
  2378. }
  2379. * {
  2380. box-sizing: border-box;
  2381. }
  2382. * {
  2383. margin: 0;
  2384. padding: 0;
  2385. }
  2386. // html, body {
  2387. // height: 100%;
  2388. // }
  2389. .headline {
  2390. align-items: center;
  2391. // background-color: var(--color);
  2392. display: flex;
  2393. font-family: 'Lexend Deca', sans-serif;
  2394. font-weight: 400;
  2395. // font-size: calc(1rem + 15vmin);
  2396. height: 72px;
  2397. justify-content: center;
  2398. // overflow: hidden;
  2399. perspective: 1000px;
  2400. scroll-snap-align: start;
  2401. width: 100%;
  2402. }
  2403. .word,
  2404. .char {
  2405. animation-delay: var(--del);
  2406. animation-direction: var(--dir, normal);
  2407. animation-duration: var(--dur);
  2408. animation-iteration-count: infinite;
  2409. animation-name: var(--name);
  2410. animation-timing-function: var(--tf);
  2411. display: inline-block;
  2412. position: relative;
  2413. transform-origin: 50% 100%;
  2414. z-index: 1;
  2415. }
  2416. // =========================
  2417. // Headline animations
  2418. // =========================
  2419. .headline--yell .char {
  2420. --name: yell;
  2421. --dur: 2s;
  2422. --tf: ease;
  2423. -webkit-transform-origin: 50% 100%;
  2424. transform-origin: 50% 100%;
  2425. }
  2426. @-webkit-keyframes yell {
  2427. 3% {
  2428. -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2429. translateY(-10%);
  2430. transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2431. translateY(-10%);
  2432. }
  2433. 6% {
  2434. -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
  2435. translateY(-10%);
  2436. transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
  2437. translateY(-10%);
  2438. }
  2439. 12% {
  2440. -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2441. translateY(-10%);
  2442. transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2443. translateY(-10%);
  2444. }
  2445. 18% {
  2446. -webkit-transform: scaleY(1) translateY(-2%);
  2447. transform: scaleY(1) translateY(-2%);
  2448. }
  2449. 25% {
  2450. -webkit-transform: scaleY(0.98);
  2451. transform: scaleY(0.98);
  2452. }
  2453. 50% {
  2454. -webkit-transform: scaleY(1);
  2455. transform: scaleY(1);
  2456. }
  2457. 75% {
  2458. -webkit-transform: scale(0.98);
  2459. transform: scale(0.98);
  2460. }
  2461. }
  2462. @keyframes yell {
  2463. 3% {
  2464. -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2465. translateY(-10%);
  2466. transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2467. translateY(-10%);
  2468. }
  2469. 6% {
  2470. -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
  2471. translateY(-10%);
  2472. transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
  2473. translateY(-10%);
  2474. }
  2475. 12% {
  2476. -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2477. translateY(-10%);
  2478. transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
  2479. translateY(-10%);
  2480. }
  2481. 18% {
  2482. -webkit-transform: scaleY(1) translateY(-2%);
  2483. transform: scaleY(1) translateY(-2%);
  2484. }
  2485. 25% {
  2486. -webkit-transform: scaleY(0.98);
  2487. transform: scaleY(0.98);
  2488. }
  2489. 50% {
  2490. -webkit-transform: scaleY(1);
  2491. transform: scaleY(1);
  2492. }
  2493. 75% {
  2494. -webkit-transform: scale(0.98);
  2495. transform: scale(0.98);
  2496. }
  2497. }
  2498. </style>