123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980 |
- <template>
- <div class="input-item material-creat">
- <a-form-item>
- <a-radio-group v-model="materialType" @change="materialTypeChange" style="margin-bottom: 32px;">
- <!-- <a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
- <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
- </a-badge> -->
- <a-badge :count="HorizontalLargeImageListShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
- <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
- </a-badge>
- <a-badge :count="HorizontalLargeImageListHeng.length" :numberStyle="{backgroundColor: '#52c41a'} ">
- <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
- </a-badge>
- <!-- <a-badge :count="HorizontalLargeImageListZu.length" :numberStyle="{backgroundColor: '#52c41a'} "
- v-if="creativeType=='customCreativity'">
- <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
- </a-badge> -->
- <!-- <a-badge :count="HorizontalLargeImageListSmall.length" :numberStyle="{backgroundColor: '#52c41a'} ">
- <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
- </a-badge> -->
- <!-- <a-badge :count="HorizontalLargeImageListBigShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
- <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
- </a-badge> -->
- </a-radio-group>
- <div class="bui-tabs-scroll">
- <a-layout
- :style="{ height: '600px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
- <a-layout-content style="padding:10px;">
- <div :style="{ marginBottom: '16px' }">
- <a-button @click="addCreative()" :disabled="count&&materialType!=undefined">添加创意</a-button>
- <span style="color:black;margin-left:10px"
- v-if="creativeType == 'customCreativity'">{{countMany}}/10</span>
- <span style="color:black;margin-left:10px" v-else>{{countMany}}/12</span>
- </div>
- <a-row>
- <a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
- <a-card title :ref="item">
- <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
- <div style="clear:both"></div>
- <div class="dynamically_add_form_item">
- <a-form-item class label="素材选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <!-- <upload-to-ali v-model="item.vadioUrl" :customDomain="customDomain" preview :region="region"
- :bucket="bucket"
- :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
- :size="102400" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"></upload-to-ali> -->
- <!-- <uploadFile :value.sync="item.vadioUrl" :fileCount="1"
- :uploadType="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'video':'image'" />
- -->
- <a
- @click="getVideoList(item)">{{materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'选择视频':'选择图片'}}</a>
- <div>
- <!-- {{materialType}} -->
- <video :src="item.videoUrl" style="width:300px"
- v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO'&&item.videoUrl"></video>
- <video :src="item.videoUrl" style="width:120px"
- v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'&&item.videoUrl"></video>
- </div>
- </a-form-item>
- <a-form-item label="封面上传" :labelCol="labelCol" :wrapperCol="wrapperCol"
- v-if="(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')">
- <!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
- :bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"></upload-to-ali> -->
- <a @click="getImageList(item)" v-if="item.imageUrl==''">选择图片</a>
- <img :src="item.imageUrl" alt="" v-else>
- </a-form-item>
- <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
- v-if="creativeType == 'customCreativity'">
- <a-input v-model="item.text" style="width:400px" class="rending" @change="judge(item)"></a-input>
- </a-form-item>
- <a-form-item label="动态词包" :labelCol="labelCol" :wrapperCol="wrapperCol"
- v-if="creativeType == 'customCreativity'">
- <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag" v-show="indexTag<item.many"
- @click="getChange(item,itemTag,index)">{{itemTag.name}}</a-tag>
- <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
- </a-form-item>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </a-layout-content>
- </a-layout>
- </div>
- </a-form-item>
- <div v-if="creativeType == 'proceduralCreativity'">
- <div style="display:block;font-size: 22px;margin-bottom: 20px;">程序化创意标题</div>
- <a-button @click="addTitle" class="row-item">添加创意标题</a-button>
- <br />
- <div v-for="(item,index) of titleData" :key="index">
- <a-input style="width:55%;margin-bottom:20px" v-model="item.text" class="rending-all" @change="judge(item)">
- </a-input>
- <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="titleData.length>1"
- @click="tetleDetele(index)" />
- <br />
- <a-tag style="margin-bottom:10px" v-for="(itemTag,indexTag) of tags" :key="indexTag"
- @click="getChangeAllTitle(item,itemTag,index)">
- {{itemTag.name}}</a-tag>
- </div>
- </div>
- <!-- 创建大图横图创意 -->
- <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
- <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
- <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
- <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
- <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
- <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
- 您的浏览器不支持 video 标签。
- </video> -->
- <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
- <video v-if="materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || materialType ==
- 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'" class="video" :src="item.videoUrl" controls="controls"
- style="width:100%;margin-left: -8px;">
- 您的浏览器不支持 video 标签。
- </video>
- <img v-else :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
- </a-checkbox>
- <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
- </li>
- </a-checkbox-group>
- </ul>
- <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
- <img
- 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"
- alt="" v-if="!loadingVideoList" />
- <img v-else src="@/views/modules/material/loading.gif" />
- </div>
- <!-- <ul class="actor-photo-list">
- <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
- @change="onChangeCheck">
- <li v-for="(item, index) of dataSource" :key="index">
- <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
- </a-checkbox>
- </li>
- </a-checkbox-group>
- </ul> -->
- <div style="text-align:right">
- <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
- showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
- @change="getDataSource" />
- </div>
- </a-modal>
- <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemalImage" @ok="handleOkShowImage" :width="1000">
- <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
- <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
- <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
- <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
- <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
- 您的浏览器不支持 video 标签。
- </video> -->
- <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
- <img :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
- </a-checkbox>
- <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
- </li>
- </a-checkbox-group>
- </ul>
- <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
- <img
- 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"
- alt="" v-if="!loadingVideoList" />
- <img v-else src="@/views/modules/material/loading.gif" />
- </div>
- <!-- <ul class="actor-photo-list">
- <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
- @change="onChangeCheck">
- <li v-for="(item, index) of dataSource" :key="index">
- <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
- </a-checkbox>
- </li>
- </a-checkbox-group>
- </ul> -->
- <div style="text-align:right">
- <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
- showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
- @change="getDataSource" />
- </div>
- </a-modal>
- <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
- <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
- 您的浏览器不支持 video 标签。
- </video>
- </a-modal>
- </div>
- </template>
- <script>
- import uploadFile from '@/components/uploadFile.vue'
- import {
- postAction,
- getAction,
- getPackage
- } from '@/api/manage'
- import {
- stopOtherVideo,
- closeAllVideoFun
- } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- import moment from 'moment'
- import AFormItem from 'ant-design-vue/es/form/FormItem'
- import $ from 'jquery'
- import qs from 'qs'
- export default {
- name: 'BaseForm',
- props: {
- accountId: {
- default () {
- return ''
- }
- },
- creativeType: {
- type: String,
- default () {
- return 'customCreativity'
- }
- }
- },
- components: {
- AFormItem,
- // UploadToAli,
- uploadFile
- },
- data() {
- return {
- visibleMatemal: false,
- visibleVideo: false,
- videoUrlShow: "",
- dataSource: [],
- loadingVideoList: false,
- time: [],
- checkVideo: [],
- labelCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 5
- }
- },
- wrapperCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 16
- }
- },
- visibleMatemalImage: false,
- accessKeyId: 'LTAIbNbqWzSOklQV',
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
- bucket: 'ctop-media',
- region: 'oss-cn-beijing',
- acceptImage: 'image/jpeg,image/png',
- acceptVideo: 'video/mpeg,video/mp4',
- customDomain: '',
- form: this.$form.createForm(this),
- url: {
- userAllocationList: '/template/allocation/list',
- insertUrl: '/template/creative/insert',
- industryListUrl: '/template/bytedance/industry/list',
- campaignListUrl: '/template/campaign/list',
- budgetTemplateListUrl: '/template/budget/list',
- deliverytargetTemplateListUrl: '/template/deliverytarget/list',
- userorentationTemplateListUrl: '/template/userorentation/list',
- deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
- convertList: 'template/convert/list'
- },
- materialType: 'CREATIVE_IMAGE_MODE_VIDEO',
- // 创建大图横图创意
- createLargeImageCreativeCon: true,
- HorizontalLargeImageList: [],
- HorizontalLargeImageListBig: [],
- HorizontalLargeImageListHeng: [],
- HorizontalLargeImageListShu: [],
- HorizontalLargeImageListZu: [],
- HorizontalLargeImageListSmall: [],
- HorizontalLargeImageListBigShu: [],
- horizonImageUrlColl: [], // 大图横图图片素材集合
- horizonImageCreativeTextColl: [], // 创意标题集合
- itemIndex: null,
- tags: [],
- range: null,
- countTag: 0,
- titleData: [{
- text: '',
- creativeWordIds: [],
- showElse: true,
- titleMany: 0
- }],
- nowItem: null,
- ipagination: {
- current: 1,
- pageSize: 5,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- total: 0,
- onChange: current => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- }
- },
- }
- },
- methods: {
- getDataSource(page, pageSize) {
- this.ipagination.current = page
- var params = {}
- params.accountId = "1649600126891015"
- params.pageSize = this.ipagination.pageSize
- params.pageNo = page
- if (this.time.length > 0) {
- params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
- params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
- }
- if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
- 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
- if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
- params.type = 2
- } else {
- params.type = 1
- }
- this.showVideoList('/bytedance/batch/getVideoList', params)
- } else {
- this.showVideoList('/bytedance/batch/getImageList', params)
- }
- },
- getImageList(item) {
- this.checkVideo = []
- this.nowItem = item
- this.visibleMatemalImage = true
- this.ipagination.current = 1
- var params = {}
- params.accountId = '1649600126891015'
- params.pageSize = this.ipagination.pageSize
- params.pageNo = this.ipagination.current
- if (this.time.length > 0) {
- params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
- params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
- }
- this.showVideoList('/bytedance/batch/getImageList', params)
- },
- onChangeVideo() {
- if (this.checkVideo.length > 1) {
- this.checkVideo.shift()
- }
- },
- matemalVideo(item, index) {
- this.visibleVideo = true
- this.videoUrlShow = item.url
- },
- handleOkShow() {
- this.visibleMatemal = false
- if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
- 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
- this.nowItem.videoId = this.checkVideo[0].id
- this.nowItem.videoUrl = this.checkVideo[0].videoUrl
- } else {
- this.nowItem.imageId = this.checkVideo[0].id
- this.nowItem.imageUrl = this.checkVideo[0].imageUrl
- }
- },
- handleOkShowImage() {
- this.visibleMatemalImage = false
- this.nowItem.imageId = this.checkVideo[0].id
- this.nowItem.imageUrl = this.checkVideo[0].imageUrl
- },
- getVideoList(item) {
- this.checkVideo = []
- this.nowItem = item
- this.visibleMatemal = true
- this.ipagination.current = 1
- var params = {}
- params.accountId = '1649600126891015'
- params.pageSize = this.ipagination.pageSize
- params.pageNo = this.ipagination.current
- if (this.time.length > 0) {
- params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
- params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
- }
- if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
- 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
- if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
- params.type = 2
- } else {
- params.type = 1
- }
- this.showVideoList('/bytedance/batch/getVideoList', params)
- } else {
- this.showVideoList('/bytedance/batch/getImageList', params)
- }
- },
- showVideoList(url, params) {
- this.dataSource = []
- this.loadingVideoList = true
- getAction(url, params).then(res => {
- if (res.success) {
- this.dataSource = res.result.records
- this.ipagination.total = res.result.total
- this.loadingVideoList = false
- } else {
- this.loadingVideoList = false
- }
- })
- },
- judge(item) {
- var re = /{(.*?)}/g
- var array = []
- var temp
- while ((temp = re.exec(item.text))) {
- array.push(temp[1])
- }
- console.log(array)
- item.countTag = array.length
- },
- getChange(item, tag, index) {
- this.judge(item)
- if (item.text == '') {
- item.countTag = 0
- }
- if (item.countTag >= 2) {
- this.$message.error('最多插入两条词包')
- // item.countTag = 2
- return
- }
- var node = document.getElementsByClassName('rending')[index]
- var v = '{' + tag.name + '}'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- item.creativeWordIds.push(tag.creative_word_id)
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- item.text = node.value
- item.creativeWordIds.push(tag.creative_word_id)
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- } else {
- //OTHER
- node.value += v
- item.creativeWordIds.push(tag.creative_word_id)
- item.text = node.value
- node.focus()
- }
- },
- getChangeAllTitle(item, tag, index) {
- this.judge(item)
- if (item.text == '') {
- item.countTag = 0
- }
- if (item.countTag >= 2) {
- this.$message.error('最多插入两条词包')
- // item.countTag = 2
- return
- }
- var node = document.getElementsByClassName('rending-all')[index]
- var v = '{' + tag.name + '}'
- item.creativeWordIds.push(tag.creative_word_id)
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- item.text = node.value
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- } else {
- //OTHER
- node.value += v
- item.text = node.value
- node.focus()
- }
- },
- showElseClick(item) {
- item.showElse = !item.showElse
- if (!item.showElse) {
- item.many = this.tags.length
- } else {
- item.many = 3
- }
- },
- materialTypeChange() {
- let type = this.materialType
- if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
- // this.createLargeImageCreativeCon = false
- this.showLargeImage = false
- this.showLargeVerticalImage = false
- this.showHorizonVideo = false
- this.showVerticalVideo = false
- this.showGroupImage = false
- this.showSmallImage = true
- this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
- }
- if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
- // this.createLargeImageCreativeCon = true
- this.showLargeImage = false
- this.showLargeVerticalImage = false
- this.showHorizonVideo = false
- this.showVerticalVideo = false
- this.showGroupImage = false
- this.showSmallImage = false
- this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
- }
- if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
- // this.createLargeImageCreativeCon = false
- this.showLargeImage = false
- this.showLargeVerticalImage = false
- this.showHorizonVideo = false
- this.showVerticalVideo = false
- this.showGroupImage = true
- this.showSmallImage = false
- this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
- }
- if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
- // this.createLargeImageCreativeCon = false
- this.showLargeImage = false
- this.showLargeVerticalImage = false
- this.showHorizonVideo = true
- this.showVerticalVideo = false
- this.showGroupImage = false
- this.showSmallImage = false
- this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
- }
- if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
- // this.createLargeImageCreativeCon = false
- this.showLargeImage = false
- this.showLargeVerticalImage = true
- this.showHorizonVideo = false
- this.showVerticalVideo = false
- this.showGroupImage = false
- this.showSmallImage = false
- this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
- }
- if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
- // this.createLargeImageCreativeCon = false
- this.showLargeImage = false
- this.showLargeVerticalImage = false
- this.showHorizonVideo = false
- this.showVerticalVideo = true
- this.showGroupImage = false
- this.showSmallImage = false
- this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
- }
- },
- // 创建大图横图创意
- addCreative() {
- let type = this.materialType
- this.getTags()
- if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
- this.HorizontalLargeImageListSmall.push({
- ImageMode: type,
- imageUrl: '',
- imageId: '',
- text: '',
- creativeWordIds: [],
- vadioUrl: '',
- videoId: '',
- multiple: [],
- countTag: 0,
- many: 3,
- showElse: true
- })
- this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
- }
- if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
- this.HorizontalLargeImageListBig.push({
- imageMode: type,
- imageUrl: '',
- imageId: '',
- text: '',
- creativeWordIds: [],
- vadioUrl: '',
- videoId: '',
- multiple: [],
- countTag: 0,
- many: 3,
- showElse: true
- })
- this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
- }
- if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
- this.HorizontalLargeImageListZu.push({
- creativeType: this.creativeType,
- imageMode: type,
- imageUrl: '',
- imageId: '',
- text: '',
- creativeWordIds: [],
- vadioUrl: '',
- videoId: '',
- multiple: [],
- countTag: 0,
- many: 3,
- showElse: true
- })
- this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
- }
- if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
- this.HorizontalLargeImageListShu.push({
- creativeType: this.creativeType,
- imageMode: type,
- imageUrl: '',
- imageId: '',
- text: '',
- creativeWordIds: [],
- vadioUrl: '',
- videoId: '',
- multiple: [],
- countTag: 0,
- many: 3,
- showElse: true
- })
- this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
- }
- if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
- this.HorizontalLargeImageListBigShu.push({
- creativeType: this.creativeType,
- imageMode: type,
- imageUrl: '',
- imageId: '',
- text: '',
- creativeWordIds: [],
- vadioUrl: '',
- videoId: '',
- multiple: [],
- countTag: 0,
- many: 3,
- showElse: true
- })
- this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
- }
- if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
- this.HorizontalLargeImageListHeng.push({
- creativeType: this.creativeType,
- imageMode: type,
- imageUrl: '',
- imageId: '',
- text: '',
- creativeWordIds: [],
- vadioUrl: '',
- videoId: '',
- multiple: [],
- countTag: 0,
- many: 3,
- showElse: true
- })
- this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
- }
- },
- deleteCreative(index) {
- console.log(index)
- console.log(this.HorizontalLargeImageList)
- this.HorizontalLargeImageList.splice(index, 1)
- },
- getTags() {
- // let accountInfo = localStorage.getItem('accountInfo')
- // console.log(groupInfo)
- getAction('/bytedance/batch/creative/words/get', {
- accountId: '1649600126891015'
- }).then(res => {
- if (res.code == '0') {
- this.tags = res.creative_word
- } else {
- this.tags = []
- }
- })
- },
- addTitle() {
- this.titleData.push({
- text: '',
- creativeWordIds: [],
- titleMany: 0,
- creativeWordIds: []
- })
- },
- tetleDetele(index) {
- this.titleData.splice(index, 1)
- }
- },
- created: function () {
- this.$nextTick(() => {
- this.getTags()
- })
- },
- watch: {
- creativeType: function (n, o) {
- console.log(n, o)
- this.HorizontalLargeImageListBig = []
- this.HorizontalLargeImageListHeng = []
- this.HorizontalLargeImageListShu = []
- this.HorizontalLargeImageListZu = []
- this.HorizontalLargeImageListSmall = []
- this.HorizontalLargeImageListBigShu = []
- this.HorizontalLargeImageList = []
- },
- materialType: function (n, o) {
- this.materialTypeChange()
- },
- visibleVideo(n, o) {
- if (!n) {
- closeAllVideoFun()
- }
- },
- time(n, o) {
- console.log(n)
- if (n.length > 0) {
- var params = {}
- params.accountId = "1649600126891015"
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.startDate = moment(n[0]).format('YYYY-MM-DD')
- params.endDate = moment(n[1]).format('YYYY-MM-DD')
- this.showVideoList('/bytedance/batch/getVideoList', params)
- } else {
- var params = {}
- params.accountId = "1649600126891015"
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- this.ipagination.current = 1
- this.showVideoList('/bytedance/batch/getVideoList', params)
- }
- },
- },
- computed: {
- count: function () {
- var bool
- if (this.creativeType == 'customCreativity') {
- bool =
- this.HorizontalLargeImageListBig.length +
- this.HorizontalLargeImageListHeng.length +
- this.HorizontalLargeImageListShu.length +
- this.HorizontalLargeImageListZu.length +
- this.HorizontalLargeImageListSmall.length +
- this.HorizontalLargeImageListBigShu.length >=
- 10 ?
- true :
- false
- } else {
- if (
- this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
- this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
- ) {
- bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true :
- false
- } else {
- bool =
- this.HorizontalLargeImageListBig.length +
- this.HorizontalLargeImageListZu.length +
- this.HorizontalLargeImageListSmall.length +
- this.HorizontalLargeImageListBigShu.length >=
- 10 ?
- true :
- false
- }
- }
- return bool
- },
- countMany: function () {
- var bool =
- this.HorizontalLargeImageListBig.length +
- this.HorizontalLargeImageListHeng.length +
- this.HorizontalLargeImageListShu.length +
- this.HorizontalLargeImageListZu.length +
- this.HorizontalLargeImageListSmall.length +
- this.HorizontalLargeImageListBigShu.length
- return bool
- },
- vadioMany: function () {
- var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
- return bool
- },
- imgMany: function () {
- var bool =
- this.HorizontalLargeImageListBig.length +
- this.HorizontalLargeImageListZu.length +
- this.HorizontalLargeImageListSmall.length +
- this.HorizontalLargeImageListBigShu.length
- return bool
- }
- }
- }
- </script>
- <style lang="scss">
- .material-creat {
- .ant-layout {
- background: white;
- }
- .ant-scroll-number {
- z-index: 1000;
- }
- }
- .dynamically_add_form_item {
- .ant-form-item-label {
- width: auto !important;
- }
- .ant-form-item-control-wrapper {
- width: auto !important;
- }
- }
- </style>
- <style lang="scss" scoped>
- ul,
- li {
- margin: 0;
- padding: 0;
- }
- .moduler {
- background: #fff;
- margin-bottom: 16px;
- position: relative;
- padding: 32px 24px 48px 32px;
- border-radius: 4px;
- box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
- .moduler-title {
- display: flex;
- align-items: center;
- font-size: 22px;
- margin-bottom: 20px;
- }
- .row-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-bottom: 32px;
- }
- .row-item:last-of-type {
- margin-bottom: 0;
- }
- .row-item .hint-item {
- width: 24px;
- min-width: 24px;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 5px;
- }
- .row-item .label-item {
- position: relative;
- align-items: flex-start;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 7px;
- width: 80px;
- min-width: 80px;
- .text-item {
- font-size: 14px;
- width: 60px;
- }
- }
- .row-item .required-item {
- width: 4px;
- height: 4px;
- border-radius: 2px;
- background: #f45858;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- }
- .row-item .input-item {
- min-width: 480px;
- position: relative;
- // height: 35px;
- .tip {
- font-size: 12px;
- color: tomato;
- }
- .inventory-tags-lists-header {
- background-color: #F8F9FA;
- border: 1px solid #E4E9ED;
- height: 36px;
- line-height: 33px;
- border-radius: 4px 4px 0 0;
- font-weight: bold;
- display: flex;
- }
- .inventory-tags-lists-container {
- border: 1px solid #E4E9ED;
- margin-top: -1px;
- height: 100%;
- padding: 4px 0px;
- border-radius: 0 0 4px 4px;
- }
- .inventory-tags-lists-item {
- width: 100%;
- height: 37px;
- line-height: 37px;
- padding-left: 12px;
- padding-right: 12px;
- display: flex;
- font-size: 14px;
- color: #333;
- }
- }
- }
- .opt {
- text-align: right;
- }
- .chouzhen {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(20% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- float: left
- }
- </style>
|