creativeCreate.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  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
  5. label="选择快手账户"
  6. :labelCol="labelCol"
  7. :wrapperCol="wrapperCol">
  8. <a-select
  9. v-model="accountId"
  10. @change="actionGroups"
  11. showSearch
  12. showArrow
  13. allowClear
  14. placeholder="选择需创建的快手账户"
  15. optionFilterProp="children"
  16. style="width: 650px"
  17. :filterOption="filterOption"
  18. >
  19. <a-select-option v-for="userAccount in accountList" :key="userAccount.accountId"
  20. :value="userAccount.accountId">{{userAccount.authName}}
  21. </a-select-option>
  22. </a-select>
  23. </a-form-item>
  24. <a-form-item
  25. label="选择广告组"
  26. :labelCol="labelCol"
  27. :wrapperCol="wrapperCol">
  28. <a-cascader style="width: 650px" v-model="ids" :options="options" @change="onChangeActionBarText"
  29. :loadData="loadData"
  30. placeholder="Please select" :changeOnSelect="changeOnSelectValue"/>
  31. </a-form-item>
  32. <a-form-item
  33. label="广告投放位置"
  34. :labelCol="labelCol"
  35. :wrapperCol="wrapperCol">
  36. <a-radio-group v-model="placementPosition" @change="changePlacementPosition">
  37. <a-radio-button value='1'>优选广告位</a-radio-button>
  38. <a-radio-button value='2'>按场景选择广告位</a-radio-button>
  39. </a-radio-group>
  40. </a-form-item>
  41. <a-form-item
  42. label="位置类型"
  43. v-if="showDeliveryType"
  44. :labelCol="labelCol"
  45. :wrapperCol="wrapperCol">
  46. <a-radio-group v-model="deliveryType" @change="showSinglePicture">
  47. <a-radio-button value='1'>信息流广告</a-radio-button>
  48. <a-radio-button value='2'>视频后贴片广告</a-radio-button>
  49. </a-radio-group>
  50. </a-form-item>
  51. <a-form-item
  52. label="视频类型"
  53. :labelCol="labelCol"
  54. :wrapperCol="wrapperCol">
  55. <a-radio-group v-model="videoType" @change="changeVideoList">
  56. <a-radio-button value='1'>竖版视频</a-radio-button>
  57. <a-radio-button value='2'>横版视频</a-radio-button>
  58. <a-radio-button value='3' v-if="singlePicture">单张图片</a-radio-button>
  59. </a-radio-group>
  60. </a-form-item>
  61. <a-form-item
  62. label="视频上传方式"
  63. v-if="showUploadType"
  64. :labelCol="labelCol"
  65. :wrapperCol="wrapperCol">
  66. <a-radio-group v-model="videoUploadType" @change="changeUploadVideo">
  67. <a-radio-button value='1'>选择作品</a-radio-button>
  68. <a-radio-button value='2'>本地上传</a-radio-button>
  69. </a-radio-group>
  70. </a-form-item>
  71. <a-form-item
  72. label="选择本地文件进行上传"
  73. v-if="localUpload"
  74. :labelCol="labelCol"
  75. :wrapperCol="wrapperCol">
  76. <upload-to-ali v-model="localUrl"
  77. :customDomain="customDomain"
  78. preview
  79. :region="region"
  80. :bucket="bucket"
  81. :accept="acceptVideo"
  82. :max="10"
  83. :size="1024000"
  84. :accessKeyId="accessKeyId"
  85. :accessKeySecret="accessKeySecret"></upload-to-ali>
  86. </a-form-item>
  87. <a-form-item
  88. label="选择作品进行上传"
  89. v-if="selectVideoUpload"
  90. :labelCol="labelCol"
  91. :wrapperCol="wrapperCol">
  92. <!-- <a-select
  93. v-model="videoUrl"
  94. @change="getDescription"
  95. showSearch
  96. allowClear
  97. optionFilterProp="children"
  98. style="width: 650px"
  99. @focus="handleFocus"
  100. @blur="handleBlur"
  101. :filterOption="filterOption">
  102. <a-select-option v-for="video in videoList" :key="video.localUrl" :value="video.localUrl">
  103. {{video.videoName}}
  104. </a-select-option>
  105. </a-select> -->
  106. <!-- 修改为弹窗形式 -->
  107. <div>
  108. <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
  109. <a-modal
  110. title="选择作品"
  111. v-model="visibleVideo"
  112. @ok="handleOkVideo"
  113. :width="860"
  114. @cancel="handleCancelVideo"
  115. >
  116. <template>
  117. <a-radio-group @change="getDescription" v-model="videoUrl" class="image_item_container">
  118. <div class="image_item" v-for="(video,index) of videoList" :key="index">
  119. <video class="video" :src="video.localUrl" controls="controls" id="video">
  120. 您的浏览器不支持 video 标签。
  121. </video>
  122. <div class="item_text">{{video.videoName}}</div>
  123. <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
  124. </div>
  125. </a-radio-group>
  126. </template>
  127. </a-modal>
  128. </div>
  129. </a-form-item>
  130. <a-form-item
  131. v-if="showImageUpload"
  132. label="图片上传"
  133. :labelCol="labelCol"
  134. :wrapperCol="wrapperCol">
  135. <upload-to-ali v-model="localImageUrl"
  136. :customDomain="customDomain"
  137. multiple
  138. preview
  139. :region="region"
  140. :bucket="bucket"
  141. :accept="acceptImage"
  142. :max="10"
  143. :size="1024000"
  144. :accessKeyId="accessKeyId"
  145. :accessKeySecret="accessKeySecret"></upload-to-ali>
  146. </a-form-item>
  147. <a-form-item
  148. label="上传封面"
  149. v-if="showUploadImageRadio"
  150. :labelCol="labelCol"
  151. :wrapperCol="wrapperCol">
  152. <a-radio-group v-model="imageType" @change="changeImageType">
  153. <a-radio-button value='1'>选择封面</a-radio-button>
  154. <a-radio-button value='2'>本地上传</a-radio-button>
  155. </a-radio-group>
  156. </a-form-item>
  157. <a-form-item
  158. v-if="showCover"
  159. label="选择封面"
  160. :labelCol="labelCol"
  161. :wrapperCol="wrapperCol">
  162. <div>
  163. <a type="primary" @click="showModal">点击选中已上传封面</a>
  164. <a-modal
  165. title="选择封面"
  166. v-model="visible"
  167. @ok="handleOk"
  168. :width="860"
  169. >
  170. <template>
  171. <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
  172. <br/>
  173. <br/>
  174. <div class="image_item_container">
  175. <div v-for="(item ,index) in imageList" class="image_item" :key="index">
  176. <label :for="item.id" class="label_item">
  177. <img :src="item.src" alt="" class="item_img">
  178. <p class="item_text">{{item.name}}</p>
  179. <p class="item_checkbox">
  180. <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
  181. @onClick="checkeda(item.id)"
  182. @change="changChecked" :id="item.id">
  183. </p>
  184. </label>
  185. </div>
  186. </div>
  187. </template>
  188. </a-modal>
  189. </div>
  190. </a-form-item>
  191. <!-- <ul>
  192. <li v-for="(item ,index) in items" @click="checkeda(index)">
  193. <a href="javascript:">
  194. <img :src="item.img" alt="">
  195. </a>
  196. <p>{{item.title}}</p>
  197. <input type="checkbox" v-model="checkeds" :value="index">
  198. </li>
  199. </ul>-->
  200. <a-form-item
  201. v-if="showLocalImageUpload"
  202. label="本地封面上传"
  203. :labelCol="labelCol"
  204. :wrapperCol="wrapperCol">
  205. <upload-to-ali v-model="imageUrl"
  206. :customDomain="customDomain"
  207. multiple
  208. preview
  209. :region="region"
  210. :bucket="bucket"
  211. :accept="acceptImage"
  212. :max="10"
  213. :size="1024000"
  214. :accessKeyId="accessKeyId"
  215. :accessKeySecret="accessKeySecret"></upload-to-ali>
  216. </a-form-item>
  217. <a-form-item
  218. label="行动号召按钮"
  219. :labelCol="labelCol"
  220. :wrapperCol="wrapperCol">
  221. <a-select
  222. v-model="actionBarTextDesc"
  223. showSearch
  224. allowClear
  225. placeholder="选择应用目标"
  226. optionFilterProp="children"
  227. style="width: 650px"
  228. @focus="handleFocus"
  229. @blur="handleBlur"
  230. :filterOption="filterOption">
  231. <a-select-option v-for="actionBar in actionBarTextList" :key="actionBar.id" :value="actionBar.actionBarText">
  232. {{actionBar.actionBarText}}
  233. </a-select-option>
  234. </a-select>
  235. </a-form-item>
  236. <a-form-item
  237. label="作品广告语"
  238. :labelCol="labelCol"
  239. :wrapperCol="wrapperCol">
  240. <a-textarea
  241. style="width: 650px"
  242. v-model="description" :rows="2"/>
  243. </a-form-item>
  244. <a-form-item
  245. label="创意名称"
  246. :labelCol="labelCol"
  247. :wrapperCol="wrapperCol">
  248. <a-input v-model="creativeName" placeholder="请填写广告创意名称" style="width: 650px"></a-input>
  249. </a-form-item>
  250. <a-form-item
  251. label="第三方点击监测链接"
  252. :labelCol="labelCol"
  253. :wrapperCol="wrapperCol">
  254. <a-input v-model="clickTrackUrl" placeholder="请第三方点击监测链接" style="width: 650px"></a-input>
  255. </a-form-item>
  256. <a-form-item
  257. :wrapperCol="{ span: 24 }"
  258. style="text-align: center">
  259. <a-button htmlType="submit" type="primary">提交</a-button>
  260. <a-button style="margin-left: 8px">保存</a-button>
  261. </a-form-item>
  262. </a-form>
  263. </a-card>
  264. </template>
  265. <script>
  266. import {getAction, postAction} from '@/api/manage'
  267. import {mapGetters} from 'vuex'
  268. import UploadToAli from '@femessage/upload-to-ali'
  269. import moment from "moment"
  270. import VuePreview from 'vue-preview'
  271. import jq from 'jquery'
  272. export default {
  273. name: 'BaseForm',
  274. components: {
  275. UploadToAli,
  276. VuePreview
  277. },
  278. data() {
  279. return {
  280. accountId: '',// 快手 accountId
  281. accountList: {},
  282. campaignId: '', //广告计划id
  283. targetPopulation: '',
  284. changeOnSelectValue: true,
  285. ids: [],
  286. placementPosition: '1',// 广告投放位置
  287. showDeliveryType: false,
  288. deliveryType: '1',
  289. videoType: '1',
  290. singlePicture: true,// 展示单张图片
  291. videoUploadType: '1',
  292. localUpload: false,
  293. localUrl: '', // 本地上传地址
  294. selectVideoUpload: true,
  295. videoUrl: '',// 视频id
  296. videoList: [],
  297. radioStyle: { // 视频单选样式
  298. display: 'block',
  299. height: '30px',
  300. lineHeight: '30px',
  301. },
  302. showUploadType: true,
  303. localImageUrl: '',//图片地址
  304. showImageUpload: false,
  305. imageList: [],
  306. imageUrl: [],
  307. showCover: true,
  308. imageType: '1',
  309. actionBarTextList: [],
  310. actionBarTextDesc: '',
  311. description: '',// 作品广告语
  312. creativeName: '',//创意名称
  313. clickTrackUrl: '',// 第三方检测链接
  314. showLocalImageUpload: false,
  315. showUploadImageRadio: true,
  316. visible: false,
  317. visibleVideo: false,
  318. isAllChecked: false,
  319. checkeds: [],
  320. customDomain: '',
  321. acceptVideo: 'video/mpeg,video/mp4',
  322. acceptImage: 'image/jpeg,image,jpg/png',
  323. accessKeyId: 'LTAIbNbqWzSOklQV',
  324. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  325. region: 'oss-cn-beijing',
  326. bucket: 'ctop-media',
  327. options: [],
  328. labelCol: {
  329. xs: {
  330. span: 7
  331. }
  332. ,
  333. sm: {
  334. span: 7
  335. }
  336. ,
  337. }
  338. ,
  339. wrapperCol: {
  340. xs: {
  341. span: 10
  342. }
  343. ,
  344. sm: {
  345. span: 17
  346. }
  347. ,
  348. }
  349. ,
  350. form: this.$form.createForm(this),
  351. url:
  352. {
  353. userAllocationList: '/ctop/userAllocation/list',
  354. getOptionsUrl: '/kuaishou/create/getOptions',
  355. getChildrenUrl: '/kuaishou/create/getChildren',
  356. videoListUrl: '/kuaishou/kuaiShouVideo/list',
  357. imageListUrl: '/kuaishou/kuaiShouImage//image/list',
  358. actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
  359. getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
  360. creativeUrl: '/kuaishou/create/createCreative',
  361. }
  362. }
  363. },
  364. methods: {
  365. ...mapGetters(["nickname", "avatar", "userInfo"]),
  366. handleOk(e) {
  367. console.log(e);
  368. this.visible = false;
  369. this.imageUrl = [];
  370. if (this.checkeds.length > 0) {
  371. for (let i = 0; i < this.checkeds.length; i++) {
  372. let imageId = this.checkeds[i];
  373. for (let j = 0; j < this.imageList.length; j++) {
  374. let imageVo = this.imageList[j];
  375. if (imageId == imageVo.id) {
  376. this.imageUrl.push(imageVo.src)
  377. console.log(this.imageUrl);
  378. }
  379. }
  380. }
  381. }
  382. },
  383. showModal() {
  384. this.visible = true;
  385. },
  386. // 上传视频弹窗
  387. handleOkVideo(e) {
  388. console.log(e);
  389. console.log(this.videoUrl);
  390. this.visibleVideo = false;
  391. this.closeAllVideoFun();
  392. },
  393. showModalVideo() {
  394. this.visibleVideo = true;
  395. // 设置默认选中的视频
  396. jq(document).ready(function () {
  397. // 播放当前视频停止其他视频
  398. let videos = jq("video");
  399. function pauseAll() {
  400. let self = this;
  401. [].forEach.call(videos, (i) => {
  402. // 将 videos 中其他的 video 全部暂停
  403. i !== self && i.pause();
  404. });
  405. };
  406. // 给play事件绑定暂停函数
  407. [].forEach.call(videos, (i) => {
  408. i.addEventListener("play", pauseAll.bind(i));
  409. });
  410. });
  411. },
  412. handleCancelVideo() {
  413. this.closeAllVideoFun();
  414. this.videoUrl = "";
  415. },
  416. // 停止播放所有视频
  417. closeAllVideoFun() {
  418. let videos = jq("video");
  419. let videosArr = Array.prototype.slice.call(videos);
  420. videosArr.forEach((x) => {
  421. x.pause();
  422. });
  423. },
  424. changChecked() {
  425. if (this.imageList.length == this.checkeds.length) {
  426. this.isAllChecked = true;
  427. } else {
  428. this.isAllChecked = false;
  429. }
  430. },
  431. checkeda: function (id) {
  432. let indexOf = this.checkeds.indexOf(id)
  433. if (indexOf >= 0) {
  434. this.$delete(this.checkeds, id);
  435. } else {
  436. this.checkeds.push(id)
  437. }
  438. console.log(this.checkeds)
  439. },
  440. checkAll(e) { // 点击全选事件函数
  441. let checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
  442. if (e.target.checked) { // 判定全选checkbox的勾选状态
  443. for (let i = 0; i < this.imageList.length; i++) {
  444. if (!checkObj[i].checked) { // 将未勾选的checkbox选项push到绑定数组中
  445. this.checkeds.push(checkObj[i].value);
  446. console.log(this.checkeds)
  447. }
  448. }
  449. } else { // 如果是去掉全选则清空checkbox选项绑定数组
  450. this.checkeds = [];
  451. }
  452. },
  453. changeImageType() {
  454. if (this.imageType == '2') {
  455. this.showLocalImageUpload = true;
  456. this.showCover = false;
  457. } else {
  458. this.showLocalImageUpload = false;
  459. this.showCover = true;
  460. }
  461. },
  462. handleChange(value) {
  463. console.log(`selected ${value}`);
  464. },
  465. handleBlur() {
  466. console.log('blur');
  467. },
  468. handleFocus() {
  469. console.log('focus');
  470. },
  471. filterOption(input, option) {
  472. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  473. },
  474. changeUploadVideo() {
  475. if (this.videoUploadType == 2) {
  476. this.localUpload = true;
  477. this.selectVideoUpload = false;
  478. this.showImageUpload = false;
  479. } else {
  480. this.localUpload = false;
  481. this.selectVideoUpload = true;
  482. this.showImageUpload = false;
  483. }
  484. },
  485. getDescription() {
  486. let params = {};
  487. params.localUrl = this.videoUrl;
  488. params.loginId = this.userInfo().id;
  489. postAction(this.url.getDescriptionUrl, params).then((res) => {
  490. console.log(res)
  491. if (res.success) {
  492. this.description = res.result.videoDesc;
  493. this.creativeName = res.result.videoName + "_" + moment().format('YYYY-MM-DD_HH:mm');
  494. }
  495. });
  496. },
  497. changeVideoList() {
  498. if (this.videoType == '2' || this.videoType == '1') {
  499. this.showImageUpload = false;
  500. this.showUploadType = true;
  501. this.selectVideoUpload = true;
  502. this.localUpload = false;
  503. this.showCover = false;
  504. this.showLocalImageUpload = false;
  505. this.videoUrl = '';
  506. this.showLocalImageUpload = false;
  507. this.showUploadImageRadio = true;
  508. this.showCover = true;
  509. let params = {};
  510. params.pageSize = '1000';
  511. params.loginId = this.userInfo().id;
  512. if (this.videoType == '2') {
  513. params.materialType = '2';
  514. }
  515. if (this.videoType == '1') {
  516. params.materialType = '1';
  517. }
  518. getAction(this.url.videoListUrl, params).then((res) => {
  519. if (res.success) {
  520. this.videoList = res.result.records
  521. if (this.videoList.length > 0) {
  522. this.videoUrl = this.videoList[0].localUrl;
  523. }
  524. }
  525. });
  526. getAction(this.url.imageListUrl, params).then((res) => {
  527. this.imageList = res
  528. });
  529. } else {
  530. this.showImageUpload = true;
  531. this.showUploadType = false;
  532. this.selectVideoUpload = false;
  533. this.localUpload = false;
  534. this.showCover = false;
  535. this.showUploadImageRadio = false;
  536. this.showLocalImageUpload = false;
  537. this.showCover = false;
  538. }
  539. },
  540. changePlacementPosition() {
  541. this.singlePicture = false;
  542. if (this.placementPosition == '1') {
  543. this.showDeliveryType = false;
  544. this.singlePicture = true;
  545. } else if (this.placementPosition == '2' && this.deliveryType == '1') {
  546. this.showDeliveryType = true;
  547. this.singlePicture = false;
  548. } else if (this.placementPosition == '2' && this.deliveryType == '2') {
  549. this.showDeliveryType = false;
  550. this.singlePicture = true;
  551. }
  552. },
  553. showSinglePicture() {
  554. this.singlePicture = false
  555. if (this.deliveryType == '2') {
  556. this.singlePicture = true;
  557. this.showImageUpload = false;
  558. this.selectVideoUpload = false;
  559. this.localUpload = false;
  560. } else {
  561. this.singlePicture = false;
  562. this.showImageUpload = false;
  563. this.selectVideoUpload = true;
  564. this.localUpload = true;
  565. }
  566. },
  567. handleSubmit(e) {
  568. console.log(this.imageIds);
  569. console.log(this.imageUrl)
  570. e.preventDefault()
  571. this.form.validateFields((err, values) => {
  572. if (!err) {
  573. console.log(this.imageIds);
  574. console.log('Received values of form: ', values);
  575. console.log('快手账号: ', this.accountId);
  576. console.log(' ---: ', this.ids);
  577. let params = {};
  578. params.accountId = this.accountId;
  579. if (this.ids.length == 2) {
  580. params.unitId = this.ids[1];
  581. }
  582. params.videoUploadType = this.videoUploadType;
  583. if (this.videoUploadType == '1') {
  584. params.videoUrl = this.videoUrl;
  585. } else if (this.videoUploadType == '2') {
  586. params.videoUrl = this.localUrl;
  587. }
  588. console.log("-----------------------");
  589. console.log(params.videoUrl);
  590. params.imageUrl = this.imageUrl;
  591. console.log(this.imageUrl)
  592. params.actionBarText = this.actionBarTextDesc;
  593. params.description = this.description;
  594. params.clickTrackUrl = this.clickTrackUrl;
  595. params.creativeName = this.creativeName;
  596. params.imageType = this.imageType;
  597. params.videoType = this.videoType;
  598. params.loginId = this.userInfo().id;
  599. postAction(this.url.creativeUrl, params).then((res) => {
  600. console.log(res)
  601. if (res.success) {
  602. alert("广告创意创建成功");
  603. }
  604. });
  605. }
  606. })
  607. },
  608. onChange(value) {
  609. console.log(value);
  610. },
  611. onChangeActionBarText() {
  612. if (this.ids.length == 2) {
  613. let id = this.ids[0];
  614. let params = {};
  615. params.campaignId = id;
  616. getAction(this.url.actionBarTextListUrl, params).then((res) => {
  617. if (res.success) {
  618. this.actionBarTextList = res.result.records
  619. }
  620. });
  621. }
  622. },
  623. filterOption(input, option) {
  624. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  625. },
  626. loadData(selectedOptions) {
  627. const targetOption = selectedOptions[selectedOptions.length - 1];
  628. targetOption.loading = true;
  629. targetOption.loading = false;
  630. this.campaignId = `${targetOption.value}`;
  631. let params = {};
  632. params.campaignId = this.campaignId;
  633. params.loginId = this.userInfo().id;
  634. params.accountId = this.accountId;
  635. postAction(this.url.getChildrenUrl, params).then((res) => {
  636. targetOption.children = res
  637. });
  638. this.options = [...this.options]
  639. },
  640. actionGroups() {
  641. let params = {};
  642. params.loginId = this.userInfo().id;
  643. params.accountId = this.accountId;
  644. postAction(this.url.getOptionsUrl, params).then((res) => {
  645. this.options = res
  646. console.log(res)
  647. });
  648. },
  649. },
  650. created: function () {
  651. let params = {};
  652. params.pageSize = '1000';
  653. params.mediaId = '2';
  654. params.userId = this.userInfo().id;
  655. getAction(this.url.userAllocationList, params).then((res) => {
  656. if (res.success) {
  657. this.accountList = res.result.records
  658. }
  659. });
  660. // 页面初始化 查询竖版视频
  661. params = {};
  662. params.pageSize = '1000';
  663. params.materialType = '1';
  664. params.loginId = this.userInfo().id;
  665. getAction(this.url.videoListUrl, params).then((res) => {
  666. if (res.success) {
  667. this.videoList = res.result.records
  668. if (this.videoList.length > 0) {
  669. this.videoUrl = this.videoList[0].localUrl;
  670. }
  671. }
  672. });
  673. // 图片列表
  674. getAction(this.url.imageListUrl, params).then((res) => {
  675. this.imageList = res
  676. console.log(res)
  677. });
  678. }
  679. }
  680. </script>
  681. <style lang="scss">
  682. .ant-modal-body {
  683. height: 650px;
  684. overflow-y: scroll;
  685. .image_item_container {
  686. margin: 0 -10px;
  687. .image_item {
  688. display: inline-block;
  689. width: 20%;
  690. padding: 0 10px;
  691. box-sizing: border-box;
  692. margin-bottom: 20px;
  693. .label_item {
  694. display: block;
  695. cursor: pointer;
  696. }
  697. .item_img {
  698. width: 100%;
  699. margin-bottom: 10px;
  700. }
  701. .item_text {
  702. height: 42px;
  703. overflow: hidden;
  704. margin-bottom: 0;
  705. }
  706. .item_checkbox {
  707. margin-bottom: 0;
  708. }
  709. .video {
  710. width: 100%;
  711. }
  712. }
  713. }
  714. .video_item_container {
  715. .video {
  716. width: 100%;
  717. }
  718. }
  719. }
  720. </style>