creativeCreate.vue 39 KB

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