creativeCreate.vue 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340
  1. <template xmlns="http://www.w3.org/1999/html">
  2. <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
  3. <a-form @submit="handleSubmit" :form="form">
  4. <a-form-item label="选择快手账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
  5. <a-select
  6. v-model="accountId"
  7. @change="actionGroups"
  8. showSearch
  9. showArrow
  10. allowClear
  11. placeholder="选择需创建的快手账户"
  12. optionFilterProp="children"
  13. style="width: 650px"
  14. :filterOption="filterOption"
  15. >
  16. <a-select-option
  17. v-for="userAccount in accountList"
  18. :key="userAccount.accountId"
  19. :value="userAccount.accountId"
  20. >{{userAccount.authName}}</a-select-option>
  21. </a-select>
  22. </a-form-item>
  23. <a-form-item label="选择广告组" :labelCol="labelCol" :wrapperCol="wrapperCol">
  24. <a-cascader
  25. style="width: 650px"
  26. v-model="ids"
  27. :options="options"
  28. @change="onChangeActionBarText"
  29. :loadData="loadData"
  30. placeholder="Please select"
  31. changeOnSelect
  32. />
  33. </a-form-item>
  34. <a-form-item label="视频类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
  35. <a-radio-group v-model="creativeMaterialType" @change="changeVideoList">
  36. <a-radio-button value="1">竖版视频</a-radio-button>
  37. <a-radio-button value="2">横版视频</a-radio-button>
  38. <a-radio-button value="3" v-if="singlePicture">单张图片</a-radio-button>
  39. </a-radio-group>
  40. </a-form-item>
  41. <a-form-item
  42. label="贴片类型"
  43. v-if="showSinglePicTiepianType"
  44. :labelCol="labelCol"
  45. :wrapperCol="wrapperCol"
  46. >
  47. <a-radio-group v-model="singlePicTiepianType" @change="changeSinglePicTiepianTypeFun">
  48. <a-radio-button value="1">竖贴片</a-radio-button>
  49. <a-radio-button value="2">横贴片</a-radio-button>
  50. </a-radio-group>
  51. </a-form-item>
  52. <a-form-item
  53. label="视频上传方式"
  54. v-if="showUploadType"
  55. :labelCol="labelCol"
  56. :wrapperCol="wrapperCol"
  57. >
  58. <a-radio-group v-model="videoUploadType" @change="changeUploadVideo">
  59. <a-radio-button value="1">选择作品</a-radio-button>
  60. <a-radio-button value="2">本地上传</a-radio-button>
  61. </a-radio-group>
  62. </a-form-item>
  63. <!-- 有单张图,图片上传,图片上传方式 -->
  64. <a-form-item
  65. label="上传封面(贴片)"
  66. v-if="showUploadSinglePicType"
  67. :labelCol="labelCol"
  68. :wrapperCol="wrapperCol"
  69. >
  70. <a-radio-group v-model="changeSinglePicType" @change="changeSinglePicTypeFun">
  71. <a-radio-button value="1">选择封面</a-radio-button>
  72. <a-radio-button value="2">本地上传</a-radio-button>
  73. </a-radio-group>
  74. </a-form-item>
  75. <a-form-item
  76. label="选择本地视频文件进行上传"
  77. v-if="localUpload"
  78. :labelCol="labelCol"
  79. :wrapperCol="wrapperCol"
  80. >
  81. <upload-to-ali
  82. v-model="localUrl"
  83. :customDomain="customDomain"
  84. preview
  85. :region="region"
  86. :bucket="bucket"
  87. :accept="acceptVideo"
  88. :max="10"
  89. :size="1024000"
  90. :accessKeyId="accessKeyId"
  91. :accessKeySecret="accessKeySecret"
  92. ></upload-to-ali>
  93. </a-form-item>
  94. <a-form-item
  95. label="选择作品进行上传"
  96. v-if="selectVideoUpload"
  97. :labelCol="labelCol"
  98. :wrapperCol="wrapperCol"
  99. >
  100. <div>
  101. <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
  102. <a-modal
  103. class="ant_modal_body_container"
  104. title="选择作品"
  105. v-model="visibleVideo"
  106. @ok="handleOkVideo"
  107. :width="860"
  108. @cancel="handleCancelVideo"
  109. >
  110. <template>
  111. <a-radio-group
  112. @change="getDescription"
  113. v-model="videoUrl"
  114. class="image_item_container"
  115. >
  116. <div class="image_item" v-for="(video,index) of videoList" :key="index">
  117. <video class="video" :src="video.localUrl" controls="controls">您的浏览器不支持 video 标签。</video>
  118. <a-radio :style="radioStyle" :value="video.localUrl">
  119. <div class="item_text">{{video.videoName}}</div>
  120. </a-radio>
  121. </div>
  122. </a-radio-group>
  123. </template>
  124. </a-modal>
  125. <div class="checkbox_item_container checkbox_item_container_size" v-if="videoUrl">
  126. <div class="item_ul">
  127. <div class="item_li" style="width:130px;height:180px;">
  128. <a-col class="item">
  129. <a-icon
  130. type="close-circle"
  131. style="position:absolute;top:-5px;right:-5px;color:red"
  132. @click="deteleRadio"
  133. />
  134. <video
  135. class="video"
  136. :src="videoUrl"
  137. controls="controls"
  138. style="min-height:160px"
  139. >您的浏览器不支持 video 标签。
  140. </video>
  141. </a-col>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </a-form-item>
  147. <!-- 贴片,上传作品 -->
  148. <a-form-item
  149. label="选择作品进行上传(贴片)"
  150. v-if="hasSinglePicVideoUpload"
  151. :labelCol="labelCol"
  152. :wrapperCol="wrapperCol"
  153. >
  154. <div>
  155. <a type="primary" @click="showSinglePicModalVideo">点击选中已上传作品</a>
  156. <a-modal
  157. class="ant_modal_body_container"
  158. title="选择作品"
  159. v-model="visibleSinglePicVideo"
  160. @ok="handleOkSinglePicVideo"
  161. :width="860"
  162. @cancel="handleCancelSinglePicVideo"
  163. >
  164. <template>
  165. <div>
  166. <a-checkbox-group @change="VideoOnChange" class="checkbox_item_container">
  167. <div class="item_ul">
  168. <div class="item_li" v-for="(video,index) of videoList" :key="index">
  169. <a-col class="item">
  170. <video
  171. class="video"
  172. :src="video.localUrl"
  173. controls="controls"
  174. >您的浏览器不支持 video 标签。
  175. </video>
  176. <a-checkbox :value="video.localUrl" class="checkbox_item">
  177. <div class="item_txt">{{video.videoName}}</div>
  178. </a-checkbox>
  179. </a-col>
  180. </div>
  181. </div>
  182. </a-checkbox-group>
  183. </div>
  184. </template>
  185. </a-modal>
  186. <div class="checkbox_item_container checkbox_item_container_size">
  187. <div class="item_ul">
  188. <div
  189. class="item_li"
  190. v-for="(item,index) of haveSinglePicVideoUrl"
  191. :key="index"
  192. style="width:130px;height:180px;"
  193. >
  194. <a-col class="item">
  195. <a-icon
  196. type="close-circle"
  197. style="position:absolute;top:-5px;right:-5px;color:red"
  198. @click="detele(index)"
  199. />
  200. <video
  201. class="video"
  202. :src="item"
  203. controls="controls"
  204. style="min-height:160px"
  205. >您的浏览器不支持 video 标签。
  206. </video>
  207. </a-col>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </a-form-item>
  213. <!-- 贴片,本地上传视频,可上传多个视频 -->
  214. <a-form-item
  215. label="选择本地视频文件进行上传(贴片)"
  216. v-if="tiepianVideoLocalUpload"
  217. :labelCol="labelCol"
  218. :wrapperCol="wrapperCol"
  219. >
  220. <upload-to-ali
  221. v-model="tiepianVideoLocalUploadList"
  222. :customDomain="customDomain"
  223. preview
  224. multiple
  225. :region="region"
  226. :bucket="bucket"
  227. :accept="acceptVideo"
  228. :max="10"
  229. :size="1024000"
  230. :accessKeyId="accessKeyId"
  231. :accessKeySecret="accessKeySecret"
  232. ></upload-to-ali>
  233. </a-form-item>
  234. <!-- 贴片,上传封面图片 -->
  235. <a-form-item
  236. v-if="hasSinglePicCoverUpload"
  237. label="选择封面(贴片)"
  238. :labelCol="labelCol"
  239. :wrapperCol="wrapperCol"
  240. >
  241. <div>
  242. <a type="primary" @click="showSinglePicCoverModal">点击选中已上传封面</a>
  243. <a-modal
  244. class="ant_modal_body_container"
  245. title="选择封面"
  246. v-model="visibleSinglePicCover"
  247. @ok="handleOkSinglePicCover"
  248. @cancel="handleCancelSinglePicCover"
  249. :width="860"
  250. >
  251. <template>
  252. <div>
  253. <input
  254. v-model="isAllChecked"
  255. type="checkbox"
  256. @click="checkAll($event)"
  257. class="select_all"
  258. /> 全选
  259. <div class="image_item_container">
  260. <div v-for="(item ,index) in imageList" class="image_item" :key="index">
  261. <label :for="item.id" class="label_item">
  262. <img :src="item.src" alt class="item_img"/>
  263. <p class="item_text">{{item.name}}</p>
  264. <p class="item_checkbox">
  265. <input
  266. class="checkItem"
  267. type="checkbox"
  268. v-model="checkeds"
  269. :value="item.id"
  270. @onClick="checkeda(item.id)"
  271. @change="changChecked"
  272. :id="item.id"
  273. />
  274. </p>
  275. </label>
  276. </div>
  277. </div>
  278. </div>
  279. </template>
  280. </a-modal>
  281. <div class="checkbox_item_container checkbox_item_container_size">
  282. <div class="item_ul">
  283. <div
  284. class="item_li"
  285. v-for="(item,index) of imageList"
  286. :key="index"
  287. style="width:100px;height:150px;margin:15px 0;"
  288. v-if="checkeds.indexOf( item.id )!=-1"
  289. >
  290. <a-col class="item">
  291. <a-icon
  292. type="close-circle"
  293. style="position:absolute;top:-5px;right:-5px;color:red"
  294. @click="deteleImg(item.id)"
  295. />
  296. <img :src="item.src" alt style="width:100%"/>
  297. </a-col>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </a-form-item>
  303. <!-- 贴片,本地上传图片,可上传多个图片 -->
  304. <a-form-item
  305. label="选择本地图片进行上传(贴片)"
  306. v-if="tiepianImageLocalUpload"
  307. :labelCol="labelCol"
  308. :wrapperCol="wrapperCol"
  309. >
  310. <upload-to-ali
  311. v-model="tiepianImageLocalUploadList"
  312. :customDomain="customDomain"
  313. preview
  314. multiple
  315. :region="region"
  316. :bucket="bucket"
  317. :accept="acceptImage"
  318. :max="10"
  319. :size="1024000"
  320. :accessKeyId="accessKeyId"
  321. :accessKeySecret="accessKeySecret"
  322. ></upload-to-ali>
  323. </a-form-item>
  324. <a-form-item
  325. v-if="showImageUpload"
  326. label="图片上传"
  327. :labelCol="labelCol"
  328. :wrapperCol="wrapperCol"
  329. >
  330. <upload-to-ali
  331. v-model="localImageUrl"
  332. :customDomain="customDomain"
  333. multiple
  334. preview
  335. :region="region"
  336. :bucket="bucket"
  337. :accept="acceptImage"
  338. :max="10"
  339. :size="1024000"
  340. :accessKeyId="accessKeyId"
  341. :accessKeySecret="accessKeySecret"
  342. ></upload-to-ali>
  343. </a-form-item>
  344. <a-form-item
  345. label="上传封面"
  346. v-if="showUploadImageRadio"
  347. :labelCol="labelCol"
  348. :wrapperCol="wrapperCol"
  349. >
  350. <a-radio-group v-model="imageType" @change="changeImageType">
  351. <a-radio-button value="1">选择封面</a-radio-button>
  352. <a-radio-button value="2">本地上传</a-radio-button>
  353. </a-radio-group>
  354. </a-form-item>
  355. <a-form-item v-if="showCover" label="选择封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
  356. <div>
  357. <a type="primary" @click="showModal">点击选中已上传封面</a>
  358. <a-modal
  359. title="选择封面"
  360. v-model="visible"
  361. @ok="handleOk"
  362. :width="860"
  363. class="ant_modal_body_container"
  364. >
  365. <template>
  366. <input
  367. v-model="isAllChecked"
  368. type="checkbox"
  369. @click="checkAll($event)"
  370. class="select_all"
  371. /> 全选
  372. <br/>
  373. <br/>
  374. <div class="image_item_container">
  375. <div v-for="(item ,index) in imageList" class="image_item" :key="index">
  376. <label :for="item.id" class="label_item">
  377. <img :src="item.src" alt class="item_img"/>
  378. <p class="item_text">{{item.name}}</p>
  379. <p class="item_checkbox">
  380. <input
  381. class="checkItem"
  382. type="checkbox"
  383. v-model="checkeds"
  384. :value="item.id"
  385. @onClick="checkeda(item.id)"
  386. @change="changChecked"
  387. :id="item.id"
  388. />
  389. </p>
  390. </label>
  391. </div>
  392. </div>
  393. </template>
  394. </a-modal>
  395. <div class="checkbox_item_container checkbox_item_container_size">
  396. <div class="item_ul">
  397. <div
  398. class="item_li"
  399. v-for="(item,index) of imageList"
  400. :key="index"
  401. style="width:100px;height:150px;margin:15px 0;"
  402. v-if="checkeds.indexOf( item.id )!=-1"
  403. >
  404. <a-col class="item">
  405. <a-icon
  406. type="close-circle"
  407. style="position:absolute;top:-5px;right:-5px;color:red"
  408. @click="deteleImg(item.id)"
  409. />
  410. <img :src="item.src" alt style="width:100%"/>
  411. </a-col>
  412. </div>
  413. </div>
  414. </div>
  415. </div>
  416. </a-form-item>
  417. <a-form-item
  418. v-if="showLocalImageUpload"
  419. label="本地封面上传"
  420. :labelCol="labelCol"
  421. :wrapperCol="wrapperCol"
  422. >
  423. <upload-to-ali
  424. v-model="imageUrl"
  425. :customDomain="customDomain"
  426. multiple
  427. preview
  428. :region="region"
  429. :bucket="bucket"
  430. :accept="acceptImage"
  431. :max="10"
  432. :size="1024000"
  433. :accessKeyId="accessKeyId"
  434. :accessKeySecret="accessKeySecret"
  435. ></upload-to-ali>
  436. </a-form-item>
  437. <a-form-item label="行动号召按钮" :labelCol="labelCol" :wrapperCol="wrapperCol">
  438. <a-select
  439. v-model="actionBarTextDesc"
  440. showSearch
  441. allowClear
  442. placeholder="选择应用目标"
  443. optionFilterProp="children"
  444. style="width: 650px"
  445. @focus="handleFocus"
  446. @blur="handleBlur"
  447. :filterOption="filterOption"
  448. >
  449. <a-select-option
  450. v-for="actionBar in actionBarTextList"
  451. :key="actionBar.id"
  452. :value="actionBar.actionBarText"
  453. >{{actionBar.actionBarText}}
  454. </a-select-option>
  455. </a-select>
  456. </a-form-item>
  457. <a-form-item label="作品广告语" :labelCol="labelCol" :wrapperCol="wrapperCol">
  458. <a-textarea style="width: 650px" v-model="description" :rows="2"/>
  459. </a-form-item>
  460. <a-form-item label="创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
  461. <a-input v-model="creativeName" placeholder="请填写广告创意名称" style="width: 650px"></a-input>
  462. </a-form-item>
  463. <a-form-item
  464. v-if="showClickTrackUrl"
  465. label="第三方点击监测链接"
  466. :labelCol="labelCol"
  467. :wrapperCol="wrapperCol"
  468. >
  469. <a-input v-model="clickTrackUrl" placeholder="请填写第三方点击监测链接" style="width: 650px"></a-input>
  470. </a-form-item>
  471. <a-form-item
  472. v-if="showImpressionUrl"
  473. label="第三方开始播放监测链接"
  474. :labelCol="labelCol"
  475. :wrapperCol="wrapperCol"
  476. >
  477. <a-input v-model="impressionUrl" placeholder="请填写第三方开始播放监测链接" style="width: 650px"></a-input>
  478. </a-form-item>
  479. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  480. <a-button htmlType="submit" type="primary" :loading="loading">提交</a-button>
  481. <a-button style="margin-left: 8px">保存</a-button>
  482. </a-form-item>
  483. </a-form>
  484. </a-card>
  485. </template>
  486. <script>
  487. import {getAction, postAction} from '@/api/manage'
  488. import {mapGetters} from 'vuex'
  489. import UploadToAli from '@femessage/upload-to-ali'
  490. import moment from 'moment'
  491. import VuePreview from 'vue-preview'
  492. import jq from 'jquery'
  493. import {stopOtherVideo, closeAllVideoFun} from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  494. export default {
  495. name: 'BaseForm',
  496. components: {
  497. UploadToAli,
  498. VuePreview
  499. },
  500. data() {
  501. return {
  502. accountId: '', // 快手 accountId
  503. accountList: {},
  504. campaignId: '', //广告计划id
  505. targetPopulation: '',
  506. changeOnSelectValue: true,
  507. ids: [],
  508. showDeliveryType: false,
  509. deliveryType: '1',
  510. creativeMaterialType: '1',
  511. singlePicture: false, // 展示单张图片
  512. videoUploadType: '1',
  513. showSinglePicTiepianType: false, // 贴片类型
  514. showSinglePicType: false, //
  515. singlePicTiepianType: '1', // 贴片方式
  516. singlePicType: '1', //
  517. localUpload: false,
  518. localUrl: '', // 本地上传地址
  519. selectVideoUpload: true,
  520. hasSinglePicVideoUpload: false, // 有单张图片的作品上传
  521. hasSinglePicCoverUpload: false, // 有单张图片的封面上传
  522. videoUrl: '', // 视频id
  523. haveSinglePicVideoUrl: [], // 有单张图片的视频id集合
  524. haveSinglePicimagesList: [], // // 有单张图片的图片集合
  525. tiepianVideoLocalUpload: false, // 贴片视频本地上传
  526. tiepianVideoLocalUploadList: [], // 贴片视频本地上传id集合
  527. tiepianImageLocalUpload: false, // 贴片视频本地上传
  528. tiepianImageLocalUploadList: [], // 贴片视频本地上传id集合
  529. videoList: [],
  530. radioStyle: {
  531. // 视频单选样式
  532. display: 'block',
  533. height: '30px',
  534. lineHeight: '30px'
  535. },
  536. showUploadType: true,
  537. localImageUrl: [], //图片地址
  538. showImageUpload: false,
  539. imageList: [],
  540. imageUrl: [],
  541. sceneId: '', // 资源位置
  542. showCover: true,
  543. imageType: '1',
  544. actionBarTextList: [],
  545. actionBarTextDesc: '',
  546. description: '', // 作品广告语
  547. creativeName: '', //创意名称
  548. clickTrackUrl: '', // 第三方检测链接
  549. showLocalImageUpload: false,
  550. showUploadImageRadio: true,
  551. showUploadSinglePicType: false, // 单张图片上传类型
  552. changeSinglePicType: '1', // 单张图片上传方式
  553. visible: false,
  554. visibleVideo: false,
  555. visibleSinglePicVideo: false,
  556. visibleSinglePicCover: false,
  557. isAllChecked: false,
  558. showClickTrackUrl: true,
  559. showImpressionUrl: false,
  560. loading: false,
  561. impressionUrl: '',
  562. positionType: '',
  563. checkeds: [],
  564. customDomain: '',
  565. acceptVideo: 'video/mpeg,video/mp4',
  566. acceptImage: 'image/jpeg,image,jpg/png',
  567. accessKeyId: 'LTAIbNbqWzSOklQV',
  568. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  569. region: 'oss-cn-beijing',
  570. bucket: 'ctop-media',
  571. options: [],
  572. labelCol: {
  573. xs: {
  574. span: 7
  575. },
  576. sm: {
  577. span: 7
  578. }
  579. },
  580. wrapperCol: {
  581. xs: {
  582. span: 10
  583. },
  584. sm: {
  585. span: 17
  586. }
  587. },
  588. form: this.$form.createForm(this),
  589. url: {
  590. userAllocationList: '/ctop/userAllocation/list',
  591. getOptionsUrl: '/kuaishou/create/getOptions',
  592. getChildrenUrl: '/kuaishou/create/getChildren',
  593. videoListUrl: '/kuaishou/kuaiShouVideo/list',
  594. imageListUrl: '/kuaishou/kuaiShouImage/image/list',
  595. actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
  596. getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
  597. creativeUrl: '/kuaishou/create/createCreative',
  598. selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group'
  599. }
  600. }
  601. },
  602. methods: {
  603. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  604. handleOk(e) {
  605. console.log(e)
  606. this.visible = false
  607. this.imageUrl = []
  608. if (this.checkeds.length > 0) {
  609. for (let i = 0; i < this.checkeds.length; i++) {
  610. let imageId = this.checkeds[i]
  611. for (let j = 0; j < this.imageList.length; j++) {
  612. let imageVo = this.imageList[j]
  613. if (imageId == imageVo.id) {
  614. this.imageUrl.push(imageVo.src)
  615. }
  616. }
  617. }
  618. }
  619. },
  620. showModal() {
  621. this.visible = true
  622. },
  623. // 上传视频弹窗
  624. handleOkVideo(e) {
  625. this.visibleVideo = false
  626. closeAllVideoFun()
  627. },
  628. showModalVideo() {
  629. this.visibleVideo = true
  630. stopOtherVideo()
  631. },
  632. handleCancelVideo() {
  633. closeAllVideoFun()
  634. this.videoUrl = ''
  635. },
  636. // 有单张图片的上传视频弹窗,多选
  637. handleOkSinglePicVideo(e) {
  638. this.visibleSinglePicVideo = false
  639. closeAllVideoFun()
  640. },
  641. showSinglePicModalVideo() {
  642. this.visibleSinglePicVideo = true
  643. stopOtherVideo()
  644. },
  645. handleCancelSinglePicVideo() {
  646. closeAllVideoFun()
  647. this.videoUrl = ''
  648. },
  649. // 视频多选
  650. VideoOnChange(checkedValues) {
  651. this.haveSinglePicVideoUrl = checkedValues
  652. console.log(this.haveSinglePicVideoUrl)
  653. },
  654. changChecked() {
  655. if (this.imageList.length == this.checkeds.length) {
  656. this.isAllChecked = true
  657. } else {
  658. this.isAllChecked = false
  659. }
  660. },
  661. // 有单张图片的上传封面
  662. showSinglePicCoverModal() {
  663. this.visibleSinglePicCover = true
  664. },
  665. handleOkSinglePicCover() {
  666. this.haveSinglePicimagesList = []
  667. if (this.checkeds.length > 0) {
  668. for (let i = 0; i < this.checkeds.length; i++) {
  669. let imageId = this.checkeds[i]
  670. for (let j = 0; j < this.imageList.length; j++) {
  671. let imageVo = this.imageList[j]
  672. if (imageId == imageVo.id) {
  673. this.haveSinglePicimagesList.push(imageVo.src)
  674. }
  675. }
  676. }
  677. }
  678. this.visibleSinglePicCover = false
  679. },
  680. handleCancelSinglePicCover() {
  681. this.visibleSinglePicCover = false
  682. this.haveSinglePicimagesList = []
  683. },
  684. checkeda: function (id) {
  685. let indexOf = this.checkeds.indexOf(id)
  686. if (indexOf >= 0) {
  687. this.$delete(this.checkeds, id)
  688. } else {
  689. this.checkeds.push(id)
  690. }
  691. console.log(this.checkeds)
  692. },
  693. checkAll(e) {
  694. // 点击全选事件函数
  695. let checkObj = document.querySelectorAll('.checkItem') // 获取所有checkbox项
  696. if (e.target.checked) {
  697. // 判定全选checkbox的勾选状态
  698. for (let i = 0; i < this.imageList.length; i++) {
  699. if (!checkObj[i].checked) {
  700. // 将未勾选的checkbox选项push到绑定数组中
  701. this.checkeds.push(parseFloat(checkObj[i].value))
  702. console.log(this.checkeds)
  703. }
  704. }
  705. } else {
  706. // 如果是去掉全选则清空checkbox选项绑定数组
  707. this.checkeds = []
  708. }
  709. },
  710. changeImageType() {
  711. if (this.imageType == '2') {
  712. this.showLocalImageUpload = true
  713. this.showCover = false
  714. } else {
  715. this.showLocalImageUpload = false
  716. this.showCover = true
  717. }
  718. },
  719. handleChange(value) {
  720. console.log(`selected ${value}`)
  721. },
  722. handleBlur() {
  723. console.log('blur')
  724. },
  725. handleFocus() {
  726. console.log('focus')
  727. },
  728. filterOption(input, option) {
  729. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  730. },
  731. // 视频类型
  732. changeVideoList() {
  733. if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') {
  734. // 横版竖版并且无单张图片
  735. this.imageUrl = []
  736. this.showImageUpload = false
  737. this.showUploadType = true
  738. this.selectVideoUpload = true
  739. this.localUpload = false
  740. this.showUploadImageRadio = true
  741. this.showCover = true
  742. this.showLocalImageUpload = false
  743. this.videoUrl = ''
  744. this.hasSinglePicVideoUpload = false
  745. this.hasSinglePicCoverUpload = false
  746. this.showSinglePicType = false
  747. this.showSinglePicTiepianType = false
  748. if (this.videoUploadType == '1') {
  749. // 选择作品
  750. this.localUpload = false
  751. } else if (this.videoUploadType == '2') {
  752. // 本地上传
  753. this.localUpload = true
  754. }
  755. let params = {}
  756. params.pageSize = '1000'
  757. params.loginId = this.userInfo().id
  758. params.positionType = '1'
  759. params.accountId = this.accountId
  760. if (this.creativeMaterialType == '1') {
  761. // 竖版视频
  762. params.materialType = '1'
  763. }
  764. if (this.creativeMaterialType == '2') {
  765. params.materialType = '2'
  766. }
  767. getAction(this.url.videoListUrl, params).then(res => {
  768. if (res.success) {
  769. this.videoList = res.result.records
  770. // 设置默认选中的视频
  771. if (this.videoList.length > 0) {
  772. this.videoUrl = this.videoList[0].localUrl
  773. }
  774. }
  775. })
  776. getAction(this.url.imageListUrl, params).then(res => {
  777. this.imageList = res
  778. })
  779. } else if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2' || this.creativeMaterialType == '3') && this.sceneId == '3') {
  780. // 横版竖版有单张图片
  781. if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
  782. // 切换横版或竖版
  783. this.showUploadType = true
  784. this.localUpload = false
  785. this.selectVideoUpload = false
  786. this.showImageUpload = false
  787. this.showUploadImageRadio = false
  788. this.showUploadSinglePicType = false
  789. this.tiepianImageLocalUpload = false
  790. this.haveSinglePicimagesList = []
  791. this.haveSinglePicVideoUrl = []
  792. let params = {}
  793. params.accountId = this.accountId
  794. params.pageSize = '1000'
  795. params.loginId = this.userInfo().id
  796. params.positionType = '2'
  797. if (this.creativeMaterialType == '2') {
  798. params.materialType = '2'
  799. } else if (this.creativeMaterialType == '1') {
  800. params.materialType = '1'
  801. }
  802. if (this.videoUploadType == '1') {
  803. // 选择作品
  804. this.tiepianVideoLocalUpload = false
  805. this.hasSinglePicVideoUpload = true
  806. } else if (this.videoUploadType == '2') {
  807. // 本地上传
  808. this.tiepianVideoLocalUpload = true
  809. this.hasSinglePicVideoUpload = false
  810. this.tiepianImageLocalUpload = false
  811. }
  812. getAction(this.url.videoListUrl, params).then(res => {
  813. if (res.success) {
  814. this.videoList = res.result.records
  815. // 设置默认选中的视频
  816. if (this.videoList.length > 0) {
  817. this.videoUrl = this.videoList[0].localUrl
  818. }
  819. }
  820. })
  821. } else if (this.creativeMaterialType == '3') {
  822. // 切换单张图片
  823. this.positionType = '2'
  824. this.singlePicTiepianType = '1'
  825. this.showImageUpload = true
  826. this.showUploadType = false
  827. this.selectVideoUpload = false
  828. this.showSinglePicType = false
  829. this.showSinglePicTiepianType = false
  830. this.hasSinglePicVideoUpload = false
  831. this.tiepianVideoLocalUpload = false
  832. this.hasSinglePicCoverUpload = false
  833. if (this.changeSinglePicType == '1') {
  834. // 选择封面
  835. this.tiepianImageLocalUpload = false
  836. } else if (this.changeSinglePicType == '2') {
  837. // 本地上传
  838. this.tiepianImageLocalUpload = true
  839. this.hasSinglePicCoverUpload = false
  840. }
  841. }
  842. }
  843. if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
  844. this.hasSinglePicCoverUpload = false
  845. this.showSinglePicTiepianType = false
  846. }
  847. if (this.creativeMaterialType == '3') {
  848. // 单张图片时
  849. this.hasSinglePicVideoUpload = false
  850. this.showSinglePicType = true
  851. this.showUploadSinglePicType = true
  852. this.showImageUpload = false
  853. this.showSinglePicTiepianType = true
  854. if (this.changeSinglePicType == '1') {
  855. this.hasSinglePicCoverUpload = true
  856. } else if (this.changeSinglePicType == '2') {
  857. this.hasSinglePicCoverUpload = false
  858. }
  859. }
  860. },
  861. // 视频上传方式
  862. changeUploadVideo() {
  863. if (this.sceneId == '2') {
  864. // 无单张图片时
  865. this.hasSinglePicVideoUpload = false
  866. this.hasSinglePicCoverUpload = false
  867. this.tiepianVideoLocalUpload = false
  868. this.tiepianImageLocalUpload = false
  869. if (this.videoUploadType == '2') {
  870. this.localUpload = true
  871. this.selectVideoUpload = false
  872. } else {
  873. this.selectVideoUpload = true
  874. this.localUpload = false
  875. }
  876. } else if (this.sceneId == '3') {
  877. if (this.materialType == '3') {
  878. if (this.changeSinglePicType == '2') {
  879. this.hasSinglePicCoverUpload = false
  880. this.tiepianImageLocalUpload = true
  881. } else if (this.changeSinglePicType == '1') {
  882. this.hasSinglePicCoverUpload = true
  883. this.tiepianImageLocalUpload = false
  884. }
  885. } else {
  886. this.showUploadImageRadio = false
  887. this.tiepianVideoLocalUpload = false
  888. if (this.videoUploadType == '1') {
  889. this.hasSinglePicVideoUpload = true
  890. this.tiepianVideoLocalUpload = false
  891. } else if (this.videoUploadType == '2') {
  892. this.hasSinglePicVideoUpload = false
  893. this.tiepianVideoLocalUpload = true
  894. }
  895. }
  896. }
  897. },
  898. getDescription() {
  899. let params = {}
  900. params.localUrl = this.videoUrl
  901. params.loginId = this.userInfo().id
  902. postAction(this.url.getDescriptionUrl, params).then(res => {
  903. if (res.success) {
  904. this.description = res.result.videoDesc
  905. this.creativeName = res.result.videoName + '_' + moment().format('YYYY-MM-DD_HH:mm')
  906. }
  907. })
  908. this.imageUrl = []
  909. this.checkeds = []
  910. },
  911. // 有单张图片的贴片方式
  912. changeSinglePicTiepianTypeFun() {
  913. if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '1') {
  914. this.positionType = '1'
  915. } else if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '2') {
  916. this.positionType = '2'
  917. }
  918. let params = {}
  919. params.pageSize = '1000'
  920. params.accountId = this.accountId
  921. params.loginId = this.userInfo().id
  922. if (this.singlePicTiepianType == '1') {
  923. params.materialType = '2'
  924. params.positionType = '1'
  925. }
  926. if (this.singlePicTiepianType == '2') {
  927. params.materialType = '2'
  928. params.positionType = '2'
  929. }
  930. getAction(this.url.imageListUrl, params).then(res => {
  931. this.imageList = res
  932. console.log(res)
  933. })
  934. },
  935. // 有单张图片的图片上传方式
  936. changeSinglePicTypeFun() {
  937. if (this.changeSinglePicType == '1') {
  938. // 选择封面
  939. this.hasSinglePicCoverUpload = true
  940. this.tiepianImageLocalUpload = false
  941. }
  942. if (this.changeSinglePicType == '2') {
  943. // 本地上传
  944. this.hasSinglePicCoverUpload = false
  945. this.tiepianImageLocalUpload = true
  946. }
  947. },
  948. onChangeActionBarText() {
  949. this.creativeMaterialType = '1'
  950. if (this.ids.length == 2) {
  951. let id = this.ids[0]
  952. let params = {}
  953. params.campaignId = id
  954. getAction(this.url.actionBarTextListUrl, params).then(res => {
  955. if (res.success) {
  956. this.actionBarTextList = res.result.records
  957. }
  958. })
  959. let unitId = this.ids[1]
  960. let unitParams = {}
  961. unitParams.unitId = unitId
  962. getAction(this.url.selectGroupCreate, unitParams).then(res => {
  963. this.sceneId = res.sceneId
  964. if (res.sceneId == '2') {
  965. // 无单张图片的时候
  966. this.singlePicture = false
  967. this.showImageUpload = false
  968. this.showImpressionUrl = false
  969. this.showClickTrackUrl = true
  970. this.showUploadImageRadio = true
  971. this.showCover = true
  972. this.showLocalImageUpload = false
  973. this.selectVideoUpload = true
  974. this.hasSinglePicVideoUpload = false
  975. this.hasSinglePicCoverUpload = false
  976. this.showSinglePicTiepianType = false
  977. this.showUploadSinglePicType = false
  978. this.positionType = '1'
  979. this.tiepianVideoLocalUpload = false
  980. this.tiepianImageLocalUpload = false
  981. let params2 = {}
  982. params2.pageSize = '1000'
  983. params2.accountId = this.accountId
  984. params2.materialType = '1'
  985. params2.positionType = '1'
  986. params2.loginId = this.userInfo().id
  987. getAction(this.url.videoListUrl, params2).then(res => {
  988. if (res.success) {
  989. this.videoList = res.result.records
  990. // 设置默认选中的视频
  991. if (this.videoList.length > 0) {
  992. this.videoUrl = this.videoList[0].localUrl
  993. this.description = this.videoList[0].videoDesc
  994. }
  995. }
  996. })
  997. // 图片列表
  998. getAction(this.url.imageListUrl, params2).then(res => {
  999. this.imageList = res
  1000. console.log(res)
  1001. })
  1002. } else if (res.sceneId == '3') {
  1003. // 有单张图片的时候
  1004. this.singlePicture = true
  1005. this.showImpressionUrl = true
  1006. this.showClickTrackUrl = false
  1007. this.showUploadImageRadio = false
  1008. this.showCover = false
  1009. this.selectVideoUpload = false
  1010. this.showLocalImageUpload = false
  1011. this.positionType = '2'
  1012. // 如果有单张图片,上传作品方式为多选
  1013. this.hasSinglePicVideoUpload = true
  1014. let params2 = {}
  1015. params2.accountId = this.accountId
  1016. params2.pageSize = '1000'
  1017. params2.materialType = '1'
  1018. params2.positionType = '2'
  1019. params2.loginId = this.userInfo().id
  1020. getAction(this.url.videoListUrl, params2).then(res => {
  1021. if (res.success) {
  1022. this.videoList = res.result.records
  1023. // 设置默认选中的视频
  1024. if (this.videoList.length > 0) {
  1025. this.videoUrl = this.videoList[0].localUrl
  1026. this.description = this.videoList[0].videoDesc
  1027. }
  1028. }
  1029. })
  1030. // 图片列表
  1031. getAction(this.url.imageListUrl, params2).then(res => {
  1032. this.imageList = res
  1033. })
  1034. }
  1035. })
  1036. }
  1037. },
  1038. filterOption(input, option) {
  1039. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1040. },
  1041. loadData(selectedOptions) {
  1042. const targetOption = selectedOptions[selectedOptions.length - 1]
  1043. targetOption.loading = true
  1044. this.campaignId = `${targetOption.value}`
  1045. let params = {}
  1046. params.campaignId = this.campaignId
  1047. params.loginId = this.userInfo().id
  1048. params.accountId = this.accountId
  1049. postAction(this.url.getChildrenUrl, params).then(res => {
  1050. console.log(res, 10000000)
  1051. targetOption.children = res
  1052. this.options = [...this.options]
  1053. targetOption.loading = false
  1054. })
  1055. },
  1056. actionGroups() {
  1057. let params = {}
  1058. params.loginId = this.userInfo().id
  1059. params.accountId = this.accountId
  1060. postAction(this.url.getOptionsUrl, params).then(res => {
  1061. this.options = res
  1062. })
  1063. },
  1064. handleSubmit(e) {
  1065. e.preventDefault()
  1066. this.form.validateFields((err, values) => {
  1067. if (!err) {
  1068. this.loading = true
  1069. let params = {}
  1070. params.accountId = this.accountId
  1071. if (this.ids.length == 2) {
  1072. params.unitId = this.ids[1]
  1073. }
  1074. params.videoUploadType = this.videoUploadType
  1075. params.imageUrl = this.imageUrl
  1076. params.actionBarText = this.actionBarTextDesc
  1077. params.description = this.description
  1078. params.clickTrackUrl = this.clickTrackUrl
  1079. params.creativeName = this.creativeName
  1080. params.creativeMaterialType = this.creativeMaterialType
  1081. params.impressionUrl = this.impressionUrl
  1082. params.sceneId = this.sceneId
  1083. params.loginId = this.userInfo().id
  1084. params.positionType = this.positionType
  1085. if (this.sceneId == '2') {
  1086. params.imageType = this.imageType
  1087. params.localImageUrl = this.localImageUrl
  1088. if (this.videoUploadType == '1') {
  1089. params.videoUrl = this.videoUrl
  1090. } else if (this.videoUploadType == '2') {
  1091. params.videoUrl = this.localUrl
  1092. }
  1093. } else if (this.sceneId == '3') {
  1094. if (this.creativeMaterialType != '3') {
  1095. if (this.videoUploadType == '1') {
  1096. params.haveSinglePicVideoUrl = this.haveSinglePicVideoUrl
  1097. } else if (this.videoUploadType == '2') {
  1098. params.haveSinglePicVideoUrl = this.tiepianVideoLocalUploadList
  1099. }
  1100. } else if (this.creativeMaterialType == '3') {
  1101. params.singlePicTiepianType = this.singlePicTiepianType
  1102. if (this.changeSinglePicType == '1') {
  1103. params.haveSinglePicimagesList = this.haveSinglePicimagesList
  1104. } else if (this.changeSinglePicType == '2') {
  1105. params.haveSinglePicimagesList = this.tiepianImageLocalUploadList
  1106. }
  1107. }
  1108. }
  1109. postAction(this.url.creativeUrl, params).then(res => {
  1110. console.log(res)
  1111. if (res.success) {
  1112. this.loading = false
  1113. alert('广告创意创建成功')
  1114. } else {
  1115. this.loading = false
  1116. alert(res.message)
  1117. }
  1118. })
  1119. }
  1120. })
  1121. },
  1122. detele(index) {
  1123. this.haveSinglePicVideoUrl.splice(index, 1)
  1124. },
  1125. deteleRadio() {
  1126. this.videoUrl = null
  1127. },
  1128. deteleImg(item) {
  1129. var index = this.checkeds.findIndex(v => v === item)
  1130. this.checkeds.splice(index, 1)
  1131. this.imageUrl.splice(index, 1)
  1132. this.haveSinglePicimagesList.splice(index, 1)
  1133. }
  1134. },
  1135. created: function () {
  1136. let params = {}
  1137. params.pageSize = '1000'
  1138. params.mediaId = '2'
  1139. params.userId = this.userInfo().id
  1140. getAction(this.url.userAllocationList, params).then(res => {
  1141. if (res.success) {
  1142. this.accountList = res.result.records
  1143. }
  1144. })
  1145. }
  1146. }
  1147. </script>
  1148. <style lang="scss">
  1149. .select_all {
  1150. margin-bottom: 10px;
  1151. }
  1152. .ant_modal_body_container {
  1153. .ant-modal-body {
  1154. max-height: 650px;
  1155. overflow-y: scroll;
  1156. .image_item_container {
  1157. margin: 0 -10px;
  1158. width: 100%;
  1159. .image_item {
  1160. display: inline-block;
  1161. width: 20%;
  1162. padding: 0 10px;
  1163. box-sizing: border-box;
  1164. margin-bottom: 20px;
  1165. .label_item {
  1166. display: block;
  1167. cursor: pointer;
  1168. }
  1169. .item_img {
  1170. width: 100%;
  1171. margin-bottom: 10px;
  1172. }
  1173. .item_text {
  1174. height: 42px;
  1175. overflow: hidden;
  1176. margin-bottom: 0;
  1177. }
  1178. .item_checkbox {
  1179. margin-bottom: 0;
  1180. }
  1181. .video {
  1182. width: 100%;
  1183. }
  1184. }
  1185. }
  1186. }
  1187. .video_item_container {
  1188. .video {
  1189. width: 100%;
  1190. }
  1191. }
  1192. }
  1193. // 多选框
  1194. .checkbox_item_container {
  1195. .item_ul {
  1196. margin: 0 -10px;
  1197. .item_li {
  1198. width: 20%;
  1199. float: left;
  1200. padding: 0 10px;
  1201. box-sizing: border-box;
  1202. .item:hover i {
  1203. display: block;
  1204. cursor: pointer;
  1205. }
  1206. .item {
  1207. position: relative;
  1208. i {
  1209. display: none;
  1210. }
  1211. video {
  1212. width: 100%;
  1213. min-height: 255px;
  1214. }
  1215. .checkbox_item {
  1216. display: block;
  1217. .ant-checkbox {
  1218. display: inline-block;
  1219. }
  1220. span {
  1221. display: block;
  1222. padding: 0;
  1223. .item_txt {
  1224. text-align: left;
  1225. height: 42px;
  1226. overflow: hidden;
  1227. }
  1228. }
  1229. }
  1230. }
  1231. }
  1232. }
  1233. }
  1234. // @media (min-width: 1024px){
  1235. // .checkbox_item_container {
  1236. // width:70%
  1237. // }
  1238. // } /*>=1024的设备*/
  1239. // @media (min-width: 1100px) {
  1240. // .checkbox_item_container {
  1241. // width:70%
  1242. // }
  1243. // } /*>=1100的设备*/
  1244. @media (min-width: 1280px) {
  1245. .checkbox_item_container_size {
  1246. width: 70%
  1247. }
  1248. }
  1249. /*>=1280的设备*/
  1250. // @media (min-width: 1366px) {
  1251. // }
  1252. // @media (min-width: 1440px) {
  1253. // }
  1254. // @media (min-width: 1680px) {
  1255. // }
  1256. @media (min-width: 1920px) {
  1257. .checkbox_item_container_size {
  1258. width: 50%
  1259. }
  1260. }
  1261. </style>