|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="input-item material-creat">
|
|
<div class="input-item material-creat">
|
|
- <a-form-item class="row-item">
|
|
|
|
- <a-radio-group v-model="materialType" @change="materialTypeChange" class="row-item">
|
|
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-model="materialType" @change="materialTypeChange" style="margin-bottom: 32px;">
|
|
<a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
<a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
<a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
|
|
<a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
|
|
</a-badge>
|
|
</a-badge>
|
|
@@ -36,6 +36,7 @@
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
|
|
<a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
|
|
<a-card title :ref="item">
|
|
<a-card title :ref="item">
|
|
|
|
+ {{item}}
|
|
<a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
|
|
<a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
|
|
<div style="clear:both"></div>
|
|
<div style="clear:both"></div>
|
|
<div class="dynamically_add_form_item">
|
|
<div class="dynamically_add_form_item">
|
|
@@ -56,7 +57,7 @@
|
|
<!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
|
|
<!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
|
|
:bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
|
|
:bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
|
|
:accessKeySecret="accessKeySecret"></upload-to-ali> -->
|
|
:accessKeySecret="accessKeySecret"></upload-to-ali> -->
|
|
- <uploadFile :value.sync="item.imageUrl" :fileCount="1" uploadType="image" :multiple="false" />
|
|
|
|
|
|
+ <a @click="getImageList(item)">选择图片</a>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
|
<a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
|
@@ -95,8 +96,53 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 创建大图横图创意 -->
|
|
<!-- 创建大图横图创意 -->
|
|
|
|
+
|
|
<a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
|
|
<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="handleOkShow" :width="1000">
|
|
<a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
|
|
<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">
|
|
<ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
|
|
<a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
|
|
<a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
|
|
@@ -106,9 +152,10 @@
|
|
您的浏览器不支持 video 标签。
|
|
您的浏览器不支持 video 标签。
|
|
</video> -->
|
|
</video> -->
|
|
<a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
|
|
<a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
|
|
- <img :src="item.coverUrl" alt="" style="width:100%;margin-bottom:10px">
|
|
|
|
|
|
+
|
|
|
|
+ <img :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
|
|
</a-checkbox>
|
|
</a-checkbox>
|
|
- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
|
|
|
|
|
|
+ <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
|
|
</li>
|
|
</li>
|
|
</a-checkbox-group>
|
|
</a-checkbox-group>
|
|
</ul>
|
|
</ul>
|
|
@@ -158,6 +205,7 @@
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
import AFormItem from 'ant-design-vue/es/form/FormItem'
|
|
import AFormItem from 'ant-design-vue/es/form/FormItem'
|
|
import $ from 'jquery'
|
|
import $ from 'jquery'
|
|
|
|
+ import qs from 'qs'
|
|
export default {
|
|
export default {
|
|
name: 'BaseForm',
|
|
name: 'BaseForm',
|
|
props: {
|
|
props: {
|
|
@@ -184,6 +232,7 @@
|
|
visibleVideo: false,
|
|
visibleVideo: false,
|
|
videoUrlShow: "",
|
|
videoUrlShow: "",
|
|
dataSource: [],
|
|
dataSource: [],
|
|
|
|
+ loadingVideoList: false,
|
|
time: [],
|
|
time: [],
|
|
checkVideo: [],
|
|
checkVideo: [],
|
|
labelCol: {
|
|
labelCol: {
|
|
@@ -262,6 +311,39 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
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') {
|
|
|
|
+ this.showVideoList('/bytedance/batch/getVideoList', params)
|
|
|
|
+ } else {
|
|
|
|
+ this.showVideoList('/bytedance/batch/getImageList', params)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getImageList(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')
|
|
|
|
+ }
|
|
|
|
+ this.showVideoList('/bytedance/batch/getImageList', params)
|
|
|
|
+ },
|
|
onChangeVideo() {
|
|
onChangeVideo() {
|
|
if (this.checkVideo.length > 1) {
|
|
if (this.checkVideo.length > 1) {
|
|
this.checkVideo.shift()
|
|
this.checkVideo.shift()
|
|
@@ -272,22 +354,54 @@
|
|
this.videoUrlShow = item.url
|
|
this.videoUrlShow = item.url
|
|
},
|
|
},
|
|
handleOkShow() {
|
|
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
|
|
|
|
+ }
|
|
},
|
|
},
|
|
getVideoList(item) {
|
|
getVideoList(item) {
|
|
this.checkVideo = []
|
|
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 ==
|
|
if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
|
|
'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
- console.log('video', item)
|
|
|
|
- this.nowItem = item
|
|
|
|
- this.visibleMatemal = true
|
|
|
|
|
|
+
|
|
|
|
+ this.showVideoList('/bytedance/batch/getVideoList', params)
|
|
} else {
|
|
} else {
|
|
- console.log('image', item)
|
|
|
|
- this.nowItem = item
|
|
|
|
- this.visibleMatemal = true
|
|
|
|
|
|
+ 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) {
|
|
judge(item) {
|
|
var re = /{(.*?)}/g
|
|
var re = /{(.*?)}/g
|
|
var array = []
|
|
var array = []
|
|
@@ -458,9 +572,11 @@
|
|
this.HorizontalLargeImageListSmall.push({
|
|
this.HorizontalLargeImageListSmall.push({
|
|
typeCode: type,
|
|
typeCode: type,
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
|
+ imageId: '',
|
|
text: '',
|
|
text: '',
|
|
textIds: [],
|
|
textIds: [],
|
|
vadioUrl: '',
|
|
vadioUrl: '',
|
|
|
|
+ videoId: '',
|
|
multiple: [],
|
|
multiple: [],
|
|
countTag: 0,
|
|
countTag: 0,
|
|
many: 3,
|
|
many: 3,
|
|
@@ -472,9 +588,11 @@
|
|
this.HorizontalLargeImageListBig.push({
|
|
this.HorizontalLargeImageListBig.push({
|
|
typeCode: type,
|
|
typeCode: type,
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
|
+ imageId: '',
|
|
text: '',
|
|
text: '',
|
|
textIds: [],
|
|
textIds: [],
|
|
vadioUrl: '',
|
|
vadioUrl: '',
|
|
|
|
+ videoId: '',
|
|
multiple: [],
|
|
multiple: [],
|
|
countTag: 0,
|
|
countTag: 0,
|
|
many: 3,
|
|
many: 3,
|
|
@@ -487,9 +605,11 @@
|
|
creativeType: this.creativeType,
|
|
creativeType: this.creativeType,
|
|
typeCode: type,
|
|
typeCode: type,
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
|
+ imageId: '',
|
|
text: '',
|
|
text: '',
|
|
textIds: [],
|
|
textIds: [],
|
|
vadioUrl: '',
|
|
vadioUrl: '',
|
|
|
|
+ videoId: '',
|
|
multiple: [],
|
|
multiple: [],
|
|
countTag: 0,
|
|
countTag: 0,
|
|
many: 3,
|
|
many: 3,
|
|
@@ -502,9 +622,11 @@
|
|
creativeType: this.creativeType,
|
|
creativeType: this.creativeType,
|
|
typeCode: type,
|
|
typeCode: type,
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
|
+ imageId: '',
|
|
text: '',
|
|
text: '',
|
|
textIds: [],
|
|
textIds: [],
|
|
vadioUrl: '',
|
|
vadioUrl: '',
|
|
|
|
+ videoId: '',
|
|
multiple: [],
|
|
multiple: [],
|
|
countTag: 0,
|
|
countTag: 0,
|
|
many: 3,
|
|
many: 3,
|
|
@@ -517,9 +639,11 @@
|
|
creativeType: this.creativeType,
|
|
creativeType: this.creativeType,
|
|
typeCode: type,
|
|
typeCode: type,
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
|
+ imageId: '',
|
|
text: '',
|
|
text: '',
|
|
textIds: [],
|
|
textIds: [],
|
|
vadioUrl: '',
|
|
vadioUrl: '',
|
|
|
|
+ videoId: '',
|
|
multiple: [],
|
|
multiple: [],
|
|
countTag: 0,
|
|
countTag: 0,
|
|
many: 3,
|
|
many: 3,
|
|
@@ -532,9 +656,11 @@
|
|
creativeType: this.creativeType,
|
|
creativeType: this.creativeType,
|
|
typeCode: type,
|
|
typeCode: type,
|
|
imageUrl: '',
|
|
imageUrl: '',
|
|
|
|
+ imageId: '',
|
|
text: '',
|
|
text: '',
|
|
textIds: [],
|
|
textIds: [],
|
|
vadioUrl: '',
|
|
vadioUrl: '',
|
|
|
|
+ videoId: '',
|
|
multiple: [],
|
|
multiple: [],
|
|
countTag: 0,
|
|
countTag: 0,
|
|
many: 3,
|
|
many: 3,
|
|
@@ -596,7 +722,26 @@
|
|
if (!n) {
|
|
if (!n) {
|
|
closeAllVideoFun()
|
|
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: {
|
|
computed: {
|
|
count: function () {
|
|
count: function () {
|
|
@@ -664,6 +809,10 @@
|
|
.ant-layout {
|
|
.ant-layout {
|
|
background: white;
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .ant-scroll-number {
|
|
|
|
+ z-index: 1000;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.dynamically_add_form_item {
|
|
.dynamically_add_form_item {
|