material.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980
  1. <template>
  2. <div class="input-item material-creat">
  3. <a-form-item>
  4. <a-radio-group v-model="materialType" @change="materialTypeChange" style="margin-bottom: 32px;">
  5. <!-- <a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
  6. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
  7. </a-badge> -->
  8. <a-badge :count="HorizontalLargeImageListShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
  9. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
  10. </a-badge>
  11. <a-badge :count="HorizontalLargeImageListHeng.length" :numberStyle="{backgroundColor: '#52c41a'} ">
  12. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
  13. </a-badge>
  14. <!-- <a-badge :count="HorizontalLargeImageListZu.length" :numberStyle="{backgroundColor: '#52c41a'} "
  15. v-if="creativeType=='customCreativity'">
  16. <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
  17. </a-badge> -->
  18. <!-- <a-badge :count="HorizontalLargeImageListSmall.length" :numberStyle="{backgroundColor: '#52c41a'} ">
  19. <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
  20. </a-badge> -->
  21. <!-- <a-badge :count="HorizontalLargeImageListBigShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
  22. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
  23. </a-badge> -->
  24. </a-radio-group>
  25. <div class="bui-tabs-scroll">
  26. <a-layout
  27. :style="{ height: '600px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
  28. <a-layout-content style="padding:10px;">
  29. <div :style="{ marginBottom: '16px' }">
  30. <a-button @click="addCreative()" :disabled="count&&materialType!=undefined">添加创意</a-button>
  31. <span style="color:black;margin-left:10px"
  32. v-if="creativeType == 'customCreativity'">{{countMany}}/10</span>
  33. <span style="color:black;margin-left:10px" v-else>{{countMany}}/12</span>
  34. </div>
  35. <a-row>
  36. <a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
  37. <a-card title :ref="item">
  38. <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
  39. <div style="clear:both"></div>
  40. <div class="dynamically_add_form_item">
  41. <a-form-item class label="素材选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
  42. <!-- <upload-to-ali v-model="item.vadioUrl" :customDomain="customDomain" preview :region="region"
  43. :bucket="bucket"
  44. :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
  45. :size="102400" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"></upload-to-ali> -->
  46. <!-- <uploadFile :value.sync="item.vadioUrl" :fileCount="1"
  47. :uploadType="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'video':'image'" />
  48. -->
  49. <a
  50. @click="getVideoList(item)">{{materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'选择视频':'选择图片'}}</a>
  51. <div>
  52. <!-- {{materialType}} -->
  53. <video :src="item.videoUrl" style="width:300px"
  54. v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO'&&item.videoUrl"></video>
  55. <video :src="item.videoUrl" style="width:120px"
  56. v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'&&item.videoUrl"></video>
  57. </div>
  58. </a-form-item>
  59. <a-form-item label="封面上传" :labelCol="labelCol" :wrapperCol="wrapperCol"
  60. v-if="(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')">
  61. <!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
  62. :bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
  63. :accessKeySecret="accessKeySecret"></upload-to-ali> -->
  64. <a @click="getImageList(item)" v-if="item.imageUrl==''">选择图片</a>
  65. <img :src="item.imageUrl" alt="" v-else>
  66. </a-form-item>
  67. <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
  68. v-if="creativeType == 'customCreativity'">
  69. <a-input v-model="item.text" style="width:400px" class="rending" @change="judge(item)"></a-input>
  70. </a-form-item>
  71. <a-form-item label="动态词包" :labelCol="labelCol" :wrapperCol="wrapperCol"
  72. v-if="creativeType == 'customCreativity'">
  73. <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag" v-show="indexTag<item.many"
  74. @click="getChange(item,itemTag,index)">{{itemTag.name}}</a-tag>
  75. <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
  76. </a-form-item>
  77. </div>
  78. </a-card>
  79. </a-col>
  80. </a-row>
  81. </a-layout-content>
  82. </a-layout>
  83. </div>
  84. </a-form-item>
  85. <div v-if="creativeType == 'proceduralCreativity'">
  86. <div style="display:block;font-size: 22px;margin-bottom: 20px;">程序化创意标题</div>
  87. <a-button @click="addTitle" class="row-item">添加创意标题</a-button>
  88. <br />
  89. <div v-for="(item,index) of titleData" :key="index">
  90. <a-input style="width:55%;margin-bottom:20px" v-model="item.text" class="rending-all" @change="judge(item)">
  91. </a-input>
  92. <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="titleData.length>1"
  93. @click="tetleDetele(index)" />
  94. <br />
  95. <a-tag style="margin-bottom:10px" v-for="(itemTag,indexTag) of tags" :key="indexTag"
  96. @click="getChangeAllTitle(item,itemTag,index)">
  97. {{itemTag.name}}</a-tag>
  98. </div>
  99. </div>
  100. <!-- 创建大图横图创意 -->
  101. <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
  102. <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
  103. <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
  104. <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
  105. <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
  106. <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
  107. 您的浏览器不支持 video 标签。
  108. </video> -->
  109. <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
  110. <video v-if="materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || materialType ==
  111. 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'" class="video" :src="item.videoUrl" controls="controls"
  112. style="width:100%;margin-left: -8px;">
  113. 您的浏览器不支持 video 标签。
  114. </video>
  115. <img v-else :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
  116. </a-checkbox>
  117. <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
  118. </li>
  119. </a-checkbox-group>
  120. </ul>
  121. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  122. <img
  123. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  124. alt="" v-if="!loadingVideoList" />
  125. <img v-else src="@/views/modules/material/loading.gif" />
  126. </div>
  127. <!-- <ul class="actor-photo-list">
  128. <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
  129. @change="onChangeCheck">
  130. <li v-for="(item, index) of dataSource" :key="index">
  131. <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
  132. </a-checkbox>
  133. </li>
  134. </a-checkbox-group>
  135. </ul> -->
  136. <div style="text-align:right">
  137. <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
  138. showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
  139. @change="getDataSource" />
  140. </div>
  141. </a-modal>
  142. <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemalImage" @ok="handleOkShowImage" :width="1000">
  143. <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
  144. <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
  145. <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
  146. <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
  147. <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
  148. 您的浏览器不支持 video 标签。
  149. </video> -->
  150. <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
  151. <img :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
  152. </a-checkbox>
  153. <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
  154. </li>
  155. </a-checkbox-group>
  156. </ul>
  157. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  158. <img
  159. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  160. alt="" v-if="!loadingVideoList" />
  161. <img v-else src="@/views/modules/material/loading.gif" />
  162. </div>
  163. <!-- <ul class="actor-photo-list">
  164. <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
  165. @change="onChangeCheck">
  166. <li v-for="(item, index) of dataSource" :key="index">
  167. <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
  168. </a-checkbox>
  169. </li>
  170. </a-checkbox-group>
  171. </ul> -->
  172. <div style="text-align:right">
  173. <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
  174. showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
  175. @change="getDataSource" />
  176. </div>
  177. </a-modal>
  178. <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
  179. <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
  180. 您的浏览器不支持 video 标签。
  181. </video>
  182. </a-modal>
  183. </div>
  184. </template>
  185. <script>
  186. import uploadFile from '@/components/uploadFile.vue'
  187. import {
  188. postAction,
  189. getAction,
  190. getPackage
  191. } from '@/api/manage'
  192. import {
  193. stopOtherVideo,
  194. closeAllVideoFun
  195. } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  196. import moment from 'moment'
  197. import AFormItem from 'ant-design-vue/es/form/FormItem'
  198. import $ from 'jquery'
  199. import qs from 'qs'
  200. export default {
  201. name: 'BaseForm',
  202. props: {
  203. accountId: {
  204. default () {
  205. return ''
  206. }
  207. },
  208. creativeType: {
  209. type: String,
  210. default () {
  211. return 'customCreativity'
  212. }
  213. }
  214. },
  215. components: {
  216. AFormItem,
  217. // UploadToAli,
  218. uploadFile
  219. },
  220. data() {
  221. return {
  222. visibleMatemal: false,
  223. visibleVideo: false,
  224. videoUrlShow: "",
  225. dataSource: [],
  226. loadingVideoList: false,
  227. time: [],
  228. checkVideo: [],
  229. labelCol: {
  230. xs: {
  231. span: 24
  232. },
  233. sm: {
  234. span: 5
  235. }
  236. },
  237. wrapperCol: {
  238. xs: {
  239. span: 24
  240. },
  241. sm: {
  242. span: 16
  243. }
  244. },
  245. visibleMatemalImage: false,
  246. accessKeyId: 'LTAIbNbqWzSOklQV',
  247. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  248. bucket: 'ctop-media',
  249. region: 'oss-cn-beijing',
  250. acceptImage: 'image/jpeg,image/png',
  251. acceptVideo: 'video/mpeg,video/mp4',
  252. customDomain: '',
  253. form: this.$form.createForm(this),
  254. url: {
  255. userAllocationList: '/template/allocation/list',
  256. insertUrl: '/template/creative/insert',
  257. industryListUrl: '/template/bytedance/industry/list',
  258. campaignListUrl: '/template/campaign/list',
  259. budgetTemplateListUrl: '/template/budget/list',
  260. deliverytargetTemplateListUrl: '/template/deliverytarget/list',
  261. userorentationTemplateListUrl: '/template/userorentation/list',
  262. deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
  263. convertList: 'template/convert/list'
  264. },
  265. materialType: 'CREATIVE_IMAGE_MODE_VIDEO',
  266. // 创建大图横图创意
  267. createLargeImageCreativeCon: true,
  268. HorizontalLargeImageList: [],
  269. HorizontalLargeImageListBig: [],
  270. HorizontalLargeImageListHeng: [],
  271. HorizontalLargeImageListShu: [],
  272. HorizontalLargeImageListZu: [],
  273. HorizontalLargeImageListSmall: [],
  274. HorizontalLargeImageListBigShu: [],
  275. horizonImageUrlColl: [], // 大图横图图片素材集合
  276. horizonImageCreativeTextColl: [], // 创意标题集合
  277. itemIndex: null,
  278. tags: [],
  279. range: null,
  280. countTag: 0,
  281. titleData: [{
  282. text: '',
  283. creativeWordIds: [],
  284. showElse: true,
  285. titleMany: 0
  286. }],
  287. nowItem: null,
  288. ipagination: {
  289. current: 1,
  290. pageSize: 5,
  291. // pageSizeOptions: ['10', '20', '30'],
  292. showTotal: (total, range) => {
  293. return range[0] + '-' + range[1] + ' 共' + total + '条'
  294. },
  295. showQuickJumper: true,
  296. // showSizeChanger: true,
  297. total: 0,
  298. onChange: current => {
  299. // 切换分页时的回调,
  300. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  301. this.ipagination.current = current
  302. }
  303. },
  304. }
  305. },
  306. methods: {
  307. getDataSource(page, pageSize) {
  308. this.ipagination.current = page
  309. var params = {}
  310. params.accountId = "1649600126891015"
  311. params.pageSize = this.ipagination.pageSize
  312. params.pageNo = page
  313. if (this.time.length > 0) {
  314. params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  315. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  316. }
  317. if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
  318. 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  319. if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
  320. params.type = 2
  321. } else {
  322. params.type = 1
  323. }
  324. this.showVideoList('/bytedance/batch/getVideoList', params)
  325. } else {
  326. this.showVideoList('/bytedance/batch/getImageList', params)
  327. }
  328. },
  329. getImageList(item) {
  330. this.checkVideo = []
  331. this.nowItem = item
  332. this.visibleMatemalImage = true
  333. this.ipagination.current = 1
  334. var params = {}
  335. params.accountId = '1649600126891015'
  336. params.pageSize = this.ipagination.pageSize
  337. params.pageNo = this.ipagination.current
  338. if (this.time.length > 0) {
  339. params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  340. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  341. }
  342. this.showVideoList('/bytedance/batch/getImageList', params)
  343. },
  344. onChangeVideo() {
  345. if (this.checkVideo.length > 1) {
  346. this.checkVideo.shift()
  347. }
  348. },
  349. matemalVideo(item, index) {
  350. this.visibleVideo = true
  351. this.videoUrlShow = item.url
  352. },
  353. handleOkShow() {
  354. this.visibleMatemal = false
  355. if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
  356. 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  357. this.nowItem.videoId = this.checkVideo[0].id
  358. this.nowItem.videoUrl = this.checkVideo[0].videoUrl
  359. } else {
  360. this.nowItem.imageId = this.checkVideo[0].id
  361. this.nowItem.imageUrl = this.checkVideo[0].imageUrl
  362. }
  363. },
  364. handleOkShowImage() {
  365. this.visibleMatemalImage = false
  366. this.nowItem.imageId = this.checkVideo[0].id
  367. this.nowItem.imageUrl = this.checkVideo[0].imageUrl
  368. },
  369. getVideoList(item) {
  370. this.checkVideo = []
  371. this.nowItem = item
  372. this.visibleMatemal = true
  373. this.ipagination.current = 1
  374. var params = {}
  375. params.accountId = '1649600126891015'
  376. params.pageSize = this.ipagination.pageSize
  377. params.pageNo = this.ipagination.current
  378. if (this.time.length > 0) {
  379. params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  380. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  381. }
  382. if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
  383. 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  384. if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
  385. params.type = 2
  386. } else {
  387. params.type = 1
  388. }
  389. this.showVideoList('/bytedance/batch/getVideoList', params)
  390. } else {
  391. this.showVideoList('/bytedance/batch/getImageList', params)
  392. }
  393. },
  394. showVideoList(url, params) {
  395. this.dataSource = []
  396. this.loadingVideoList = true
  397. getAction(url, params).then(res => {
  398. if (res.success) {
  399. this.dataSource = res.result.records
  400. this.ipagination.total = res.result.total
  401. this.loadingVideoList = false
  402. } else {
  403. this.loadingVideoList = false
  404. }
  405. })
  406. },
  407. judge(item) {
  408. var re = /{(.*?)}/g
  409. var array = []
  410. var temp
  411. while ((temp = re.exec(item.text))) {
  412. array.push(temp[1])
  413. }
  414. console.log(array)
  415. item.countTag = array.length
  416. },
  417. getChange(item, tag, index) {
  418. this.judge(item)
  419. if (item.text == '') {
  420. item.countTag = 0
  421. }
  422. if (item.countTag >= 2) {
  423. this.$message.error('最多插入两条词包')
  424. // item.countTag = 2
  425. return
  426. }
  427. var node = document.getElementsByClassName('rending')[index]
  428. var v = '{' + tag.name + '}'
  429. if (document.selection) {
  430. //IE
  431. node.focus()
  432. var sel = document.selection.createRange()
  433. sel.text = v
  434. sel.select()
  435. item.creativeWordIds.push(tag.creative_word_id)
  436. } else if (node.selectionStart || node.selectionStart == '0') {
  437. //MOZILLA/GOOGLE
  438. var startPos = node.selectionStart
  439. var endPos = node.selectionEnd
  440. var restoreTop = node.scrollTop
  441. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  442. if (restoreTop > 0) {
  443. node.scrollTop = restoreTop
  444. }
  445. item.text = node.value
  446. item.creativeWordIds.push(tag.creative_word_id)
  447. node.focus()
  448. node.selectionStart = startPos + v.length
  449. node.selectionEnd = startPos + v.length
  450. } else {
  451. //OTHER
  452. node.value += v
  453. item.creativeWordIds.push(tag.creative_word_id)
  454. item.text = node.value
  455. node.focus()
  456. }
  457. },
  458. getChangeAllTitle(item, tag, index) {
  459. this.judge(item)
  460. if (item.text == '') {
  461. item.countTag = 0
  462. }
  463. if (item.countTag >= 2) {
  464. this.$message.error('最多插入两条词包')
  465. // item.countTag = 2
  466. return
  467. }
  468. var node = document.getElementsByClassName('rending-all')[index]
  469. var v = '{' + tag.name + '}'
  470. item.creativeWordIds.push(tag.creative_word_id)
  471. if (document.selection) {
  472. //IE
  473. node.focus()
  474. var sel = document.selection.createRange()
  475. sel.text = v
  476. sel.select()
  477. } else if (node.selectionStart || node.selectionStart == '0') {
  478. //MOZILLA/GOOGLE
  479. var startPos = node.selectionStart
  480. var endPos = node.selectionEnd
  481. var restoreTop = node.scrollTop
  482. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  483. if (restoreTop > 0) {
  484. node.scrollTop = restoreTop
  485. }
  486. item.text = node.value
  487. node.focus()
  488. node.selectionStart = startPos + v.length
  489. node.selectionEnd = startPos + v.length
  490. } else {
  491. //OTHER
  492. node.value += v
  493. item.text = node.value
  494. node.focus()
  495. }
  496. },
  497. showElseClick(item) {
  498. item.showElse = !item.showElse
  499. if (!item.showElse) {
  500. item.many = this.tags.length
  501. } else {
  502. item.many = 3
  503. }
  504. },
  505. materialTypeChange() {
  506. let type = this.materialType
  507. if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
  508. // this.createLargeImageCreativeCon = false
  509. this.showLargeImage = false
  510. this.showLargeVerticalImage = false
  511. this.showHorizonVideo = false
  512. this.showVerticalVideo = false
  513. this.showGroupImage = false
  514. this.showSmallImage = true
  515. this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
  516. }
  517. if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
  518. // this.createLargeImageCreativeCon = true
  519. this.showLargeImage = false
  520. this.showLargeVerticalImage = false
  521. this.showHorizonVideo = false
  522. this.showVerticalVideo = false
  523. this.showGroupImage = false
  524. this.showSmallImage = false
  525. this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
  526. }
  527. if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
  528. // this.createLargeImageCreativeCon = false
  529. this.showLargeImage = false
  530. this.showLargeVerticalImage = false
  531. this.showHorizonVideo = false
  532. this.showVerticalVideo = false
  533. this.showGroupImage = true
  534. this.showSmallImage = false
  535. this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
  536. }
  537. if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
  538. // this.createLargeImageCreativeCon = false
  539. this.showLargeImage = false
  540. this.showLargeVerticalImage = false
  541. this.showHorizonVideo = true
  542. this.showVerticalVideo = false
  543. this.showGroupImage = false
  544. this.showSmallImage = false
  545. this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
  546. }
  547. if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
  548. // this.createLargeImageCreativeCon = false
  549. this.showLargeImage = false
  550. this.showLargeVerticalImage = true
  551. this.showHorizonVideo = false
  552. this.showVerticalVideo = false
  553. this.showGroupImage = false
  554. this.showSmallImage = false
  555. this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
  556. }
  557. if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  558. // this.createLargeImageCreativeCon = false
  559. this.showLargeImage = false
  560. this.showLargeVerticalImage = false
  561. this.showHorizonVideo = false
  562. this.showVerticalVideo = true
  563. this.showGroupImage = false
  564. this.showSmallImage = false
  565. this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
  566. }
  567. },
  568. // 创建大图横图创意
  569. addCreative() {
  570. let type = this.materialType
  571. this.getTags()
  572. if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
  573. this.HorizontalLargeImageListSmall.push({
  574. ImageMode: type,
  575. imageUrl: '',
  576. imageId: '',
  577. text: '',
  578. creativeWordIds: [],
  579. vadioUrl: '',
  580. videoId: '',
  581. multiple: [],
  582. countTag: 0,
  583. many: 3,
  584. showElse: true
  585. })
  586. this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
  587. }
  588. if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
  589. this.HorizontalLargeImageListBig.push({
  590. imageMode: type,
  591. imageUrl: '',
  592. imageId: '',
  593. text: '',
  594. creativeWordIds: [],
  595. vadioUrl: '',
  596. videoId: '',
  597. multiple: [],
  598. countTag: 0,
  599. many: 3,
  600. showElse: true
  601. })
  602. this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
  603. }
  604. if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
  605. this.HorizontalLargeImageListZu.push({
  606. creativeType: this.creativeType,
  607. imageMode: type,
  608. imageUrl: '',
  609. imageId: '',
  610. text: '',
  611. creativeWordIds: [],
  612. vadioUrl: '',
  613. videoId: '',
  614. multiple: [],
  615. countTag: 0,
  616. many: 3,
  617. showElse: true
  618. })
  619. this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
  620. }
  621. if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
  622. this.HorizontalLargeImageListShu.push({
  623. creativeType: this.creativeType,
  624. imageMode: type,
  625. imageUrl: '',
  626. imageId: '',
  627. text: '',
  628. creativeWordIds: [],
  629. vadioUrl: '',
  630. videoId: '',
  631. multiple: [],
  632. countTag: 0,
  633. many: 3,
  634. showElse: true
  635. })
  636. this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
  637. }
  638. if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
  639. this.HorizontalLargeImageListBigShu.push({
  640. creativeType: this.creativeType,
  641. imageMode: type,
  642. imageUrl: '',
  643. imageId: '',
  644. text: '',
  645. creativeWordIds: [],
  646. vadioUrl: '',
  647. videoId: '',
  648. multiple: [],
  649. countTag: 0,
  650. many: 3,
  651. showElse: true
  652. })
  653. this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
  654. }
  655. if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  656. this.HorizontalLargeImageListHeng.push({
  657. creativeType: this.creativeType,
  658. imageMode: type,
  659. imageUrl: '',
  660. imageId: '',
  661. text: '',
  662. creativeWordIds: [],
  663. vadioUrl: '',
  664. videoId: '',
  665. multiple: [],
  666. countTag: 0,
  667. many: 3,
  668. showElse: true
  669. })
  670. this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
  671. }
  672. },
  673. deleteCreative(index) {
  674. console.log(index)
  675. console.log(this.HorizontalLargeImageList)
  676. this.HorizontalLargeImageList.splice(index, 1)
  677. },
  678. getTags() {
  679. // let accountInfo = localStorage.getItem('accountInfo')
  680. // console.log(groupInfo)
  681. getAction('/bytedance/batch/creative/words/get', {
  682. accountId: '1649600126891015'
  683. }).then(res => {
  684. if (res.code == '0') {
  685. this.tags = res.creative_word
  686. } else {
  687. this.tags = []
  688. }
  689. })
  690. },
  691. addTitle() {
  692. this.titleData.push({
  693. text: '',
  694. creativeWordIds: [],
  695. titleMany: 0,
  696. creativeWordIds: []
  697. })
  698. },
  699. tetleDetele(index) {
  700. this.titleData.splice(index, 1)
  701. }
  702. },
  703. created: function () {
  704. this.$nextTick(() => {
  705. this.getTags()
  706. })
  707. },
  708. watch: {
  709. creativeType: function (n, o) {
  710. console.log(n, o)
  711. this.HorizontalLargeImageListBig = []
  712. this.HorizontalLargeImageListHeng = []
  713. this.HorizontalLargeImageListShu = []
  714. this.HorizontalLargeImageListZu = []
  715. this.HorizontalLargeImageListSmall = []
  716. this.HorizontalLargeImageListBigShu = []
  717. this.HorizontalLargeImageList = []
  718. },
  719. materialType: function (n, o) {
  720. this.materialTypeChange()
  721. },
  722. visibleVideo(n, o) {
  723. if (!n) {
  724. closeAllVideoFun()
  725. }
  726. },
  727. time(n, o) {
  728. console.log(n)
  729. if (n.length > 0) {
  730. var params = {}
  731. params.accountId = "1649600126891015"
  732. params.pageSize = this.ipagination.pageSize
  733. params.pageNo = 1
  734. params.startDate = moment(n[0]).format('YYYY-MM-DD')
  735. params.endDate = moment(n[1]).format('YYYY-MM-DD')
  736. this.showVideoList('/bytedance/batch/getVideoList', params)
  737. } else {
  738. var params = {}
  739. params.accountId = "1649600126891015"
  740. params.pageSize = this.ipagination.pageSize
  741. params.pageNo = 1
  742. this.ipagination.current = 1
  743. this.showVideoList('/bytedance/batch/getVideoList', params)
  744. }
  745. },
  746. },
  747. computed: {
  748. count: function () {
  749. var bool
  750. if (this.creativeType == 'customCreativity') {
  751. bool =
  752. this.HorizontalLargeImageListBig.length +
  753. this.HorizontalLargeImageListHeng.length +
  754. this.HorizontalLargeImageListShu.length +
  755. this.HorizontalLargeImageListZu.length +
  756. this.HorizontalLargeImageListSmall.length +
  757. this.HorizontalLargeImageListBigShu.length >=
  758. 10 ?
  759. true :
  760. false
  761. } else {
  762. if (
  763. this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
  764. this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
  765. ) {
  766. bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true :
  767. false
  768. } else {
  769. bool =
  770. this.HorizontalLargeImageListBig.length +
  771. this.HorizontalLargeImageListZu.length +
  772. this.HorizontalLargeImageListSmall.length +
  773. this.HorizontalLargeImageListBigShu.length >=
  774. 10 ?
  775. true :
  776. false
  777. }
  778. }
  779. return bool
  780. },
  781. countMany: function () {
  782. var bool =
  783. this.HorizontalLargeImageListBig.length +
  784. this.HorizontalLargeImageListHeng.length +
  785. this.HorizontalLargeImageListShu.length +
  786. this.HorizontalLargeImageListZu.length +
  787. this.HorizontalLargeImageListSmall.length +
  788. this.HorizontalLargeImageListBigShu.length
  789. return bool
  790. },
  791. vadioMany: function () {
  792. var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
  793. return bool
  794. },
  795. imgMany: function () {
  796. var bool =
  797. this.HorizontalLargeImageListBig.length +
  798. this.HorizontalLargeImageListZu.length +
  799. this.HorizontalLargeImageListSmall.length +
  800. this.HorizontalLargeImageListBigShu.length
  801. return bool
  802. }
  803. }
  804. }
  805. </script>
  806. <style lang="scss">
  807. .material-creat {
  808. .ant-layout {
  809. background: white;
  810. }
  811. .ant-scroll-number {
  812. z-index: 1000;
  813. }
  814. }
  815. .dynamically_add_form_item {
  816. .ant-form-item-label {
  817. width: auto !important;
  818. }
  819. .ant-form-item-control-wrapper {
  820. width: auto !important;
  821. }
  822. }
  823. </style>
  824. <style lang="scss" scoped>
  825. ul,
  826. li {
  827. margin: 0;
  828. padding: 0;
  829. }
  830. .moduler {
  831. background: #fff;
  832. margin-bottom: 16px;
  833. position: relative;
  834. padding: 32px 24px 48px 32px;
  835. border-radius: 4px;
  836. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  837. .moduler-title {
  838. display: flex;
  839. align-items: center;
  840. font-size: 22px;
  841. margin-bottom: 20px;
  842. }
  843. .row-item {
  844. display: flex;
  845. justify-content: flex-start;
  846. align-items: center;
  847. margin-bottom: 32px;
  848. }
  849. .row-item:last-of-type {
  850. margin-bottom: 0;
  851. }
  852. .row-item .hint-item {
  853. width: 24px;
  854. min-width: 24px;
  855. align-self: flex-start;
  856. line-height: 20px;
  857. height: 20px;
  858. margin-top: 5px;
  859. }
  860. .row-item .label-item {
  861. position: relative;
  862. align-items: flex-start;
  863. align-self: flex-start;
  864. line-height: 20px;
  865. height: 20px;
  866. margin-top: 7px;
  867. width: 80px;
  868. min-width: 80px;
  869. .text-item {
  870. font-size: 14px;
  871. width: 60px;
  872. }
  873. }
  874. .row-item .required-item {
  875. width: 4px;
  876. height: 4px;
  877. border-radius: 2px;
  878. background: #f45858;
  879. position: absolute;
  880. right: 10px;
  881. top: 50%;
  882. transform: translateY(-50%);
  883. }
  884. .row-item .input-item {
  885. min-width: 480px;
  886. position: relative;
  887. // height: 35px;
  888. .tip {
  889. font-size: 12px;
  890. color: tomato;
  891. }
  892. .inventory-tags-lists-header {
  893. background-color: #F8F9FA;
  894. border: 1px solid #E4E9ED;
  895. height: 36px;
  896. line-height: 33px;
  897. border-radius: 4px 4px 0 0;
  898. font-weight: bold;
  899. display: flex;
  900. }
  901. .inventory-tags-lists-container {
  902. border: 1px solid #E4E9ED;
  903. margin-top: -1px;
  904. height: 100%;
  905. padding: 4px 0px;
  906. border-radius: 0 0 4px 4px;
  907. }
  908. .inventory-tags-lists-item {
  909. width: 100%;
  910. height: 37px;
  911. line-height: 37px;
  912. padding-left: 12px;
  913. padding-right: 12px;
  914. display: flex;
  915. font-size: 14px;
  916. color: #333;
  917. }
  918. }
  919. }
  920. .opt {
  921. text-align: right;
  922. }
  923. .chouzhen {
  924. border-style: solid;
  925. border-width: 1px;
  926. border-color: #e4e4e4;
  927. width: calc(20% - 10px);
  928. padding: 10px;
  929. margin-right: 10px;
  930. margin-bottom: 10px;
  931. display: flex;
  932. align-items: center;
  933. background: #fff;
  934. position: relative;
  935. z-index: 99;
  936. float: left
  937. }
  938. </style>