|
@@ -1,5 +1,28 @@
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
+ .actor-photo-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ padding-left: 0;
|
|
|
|
|
|
|
|
+ li {
|
|
|
|
+ width: 25%;
|
|
|
|
+ margin: 10px;
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 250px;
|
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
|
+ list-style: none;
|
|
|
|
+
|
|
|
|
+ img,
|
|
|
|
+ video {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-top: auto;
|
|
|
|
+ margin-bottom: auto;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ position: absolute;
|
|
|
|
+ max-height: 250px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|
|
<template>
|
|
<template>
|
|
<a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step3">
|
|
<a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step3">
|
|
@@ -7,8 +30,7 @@
|
|
<a-tab-pane v-for="(pane, bestIndex) in pans" :tab="pane.tab" :key="pane.key" v-model="pansKey" disabled
|
|
<a-tab-pane v-for="(pane, bestIndex) in pans" :tab="pane.tab" :key="pane.key" v-model="pansKey" disabled
|
|
:closable="pane.closable">
|
|
:closable="pane.closable">
|
|
<a-form @submit="handleSubmit" :form="form" style="margin-top:20px" :hideRequiredMark="true">
|
|
<a-form @submit="handleSubmit" :form="form" style="margin-top:20px" :hideRequiredMark="true">
|
|
- <a-form-item label="素材类型" :labelCol="labelCol"
|
|
|
|
- :wrapperCol="wrapperCol">
|
|
|
|
|
|
+ <a-form-item label="素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]">
|
|
<a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]">
|
|
<a-radio-button value="1">竖版视频</a-radio-button>
|
|
<a-radio-button value="1">竖版视频</a-radio-button>
|
|
<a-radio-button value="2">横版视频</a-radio-button>
|
|
<a-radio-button value="2">横版视频</a-radio-button>
|
|
@@ -33,6 +55,22 @@
|
|
<video :src="item.videoList.url" controls="controls" style="width:25%"
|
|
<video :src="item.videoList.url" controls="controls" style="width:25%"
|
|
v-if="item.videoList"></video>
|
|
v-if="item.videoList"></video>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
+ <div class="downLoad" style="overflow:auto">
|
|
|
|
+ <a-button @click="onCheckAllImageChange(index,item)" v-if="item.imageUrlList.length > 0">{{
|
|
|
|
+ item.checkAllImage ? '取消 ( ' + item.checkArrImage.length + ' )' : '全选'
|
|
|
|
+ }}</a-button>
|
|
|
|
+ <ul class="actor-photo-list"
|
|
|
|
+ :style="{ width: item.imageUrlList.length>4?25 * item.imageUrlList.length + '%':'100%' }"
|
|
|
|
+ v-if="item.imageUrlList.length > 0">
|
|
|
|
+ <a-checkbox-group v-model="item.checkArrImage"
|
|
|
|
+ style="width:100%; display: flex;padding-left: 0;" @change="onChangeCheckImage">
|
|
|
|
+ <li v-for="(item, index) of item.imageUrlList" :key="index">
|
|
|
|
+ <a-checkbox :value="item.code" style="position:absolute;z-index: 100"></a-checkbox><img
|
|
|
|
+ class="video" :src="item.url" />
|
|
|
|
+ </li>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
<a-form-item label="">
|
|
<a-form-item label="">
|
|
<a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
|
|
<a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
|
|
<br />
|
|
<br />
|
|
@@ -143,7 +181,8 @@
|
|
videoList: '',
|
|
videoList: '',
|
|
imageList: [],
|
|
imageList: [],
|
|
fail: [],
|
|
fail: [],
|
|
- success: []
|
|
|
|
|
|
+ success: [],
|
|
|
|
+
|
|
},
|
|
},
|
|
form: this.$form.createForm(this),
|
|
form: this.$form.createForm(this),
|
|
list: [],
|
|
list: [],
|
|
@@ -178,10 +217,29 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
visible: false,
|
|
visible: false,
|
|
- loading: false
|
|
|
|
|
|
+ loading: false,
|
|
|
|
+ imageUrlList: [],
|
|
|
|
+ checkAllImage: false,
|
|
|
|
+ checkArrImage: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ onCheckAllImageChange(index, item) {
|
|
|
|
+
|
|
|
|
+ if (this.pans[index].list[item.key].checkAllImage) {
|
|
|
|
+ this.pans[index].list[item.key].checkArrImage = []
|
|
|
|
+ } else {
|
|
|
|
+ this.pans[index].list[item.key].checkArrImage = this.pans[index].list[item.key].imageUrlList.map(item => {
|
|
|
|
+ return item.code
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ this.pans[index].list[item.key].checkAllImage = !this.pans[index].list[item.key].checkAllImage
|
|
|
|
+ },
|
|
|
|
+ onChangeCheckImage(checkedList) {
|
|
|
|
+ // if (checkedList.length == 0) {
|
|
|
|
+ // this.checkAllImage = false
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
handleConfirmValue(rule, value, callback) {
|
|
handleConfirmValue(rule, value, callback) {
|
|
if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
|
|
if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
|
|
callback()
|
|
callback()
|
|
@@ -195,13 +253,22 @@
|
|
if (type == 'video') {
|
|
if (type == 'video') {
|
|
this.pans[index].list[item.key].videoList = item.video
|
|
this.pans[index].list[item.key].videoList = item.video
|
|
getAction('/kuaishou/batch/getCreativeCopywriter', {
|
|
getAction('/kuaishou/batch/getCreativeCopywriter', {
|
|
- code: item.video.signature
|
|
|
|
|
|
+ code: item.video.signature,
|
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
}).then(res => {
|
|
}).then(res => {
|
|
console.log(res)
|
|
console.log(res)
|
|
if (res.success) {
|
|
if (res.success) {
|
|
this.pans[index].list[item.key].description = res.result.creativeCopywriter
|
|
this.pans[index].list[item.key].description = res.result.creativeCopywriter
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ getAction('/ctop/MaterialImageInfo/list', {
|
|
|
|
+ videoId: item.video.signature
|
|
|
|
+ }).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.pans[index].list[item.key].imageUrlList = res.result
|
|
|
|
+ }
|
|
|
|
+ })
|
|
} else {
|
|
} else {
|
|
this.pans[index].list[item.key].imageList.push(...item.image)
|
|
this.pans[index].list[item.key].imageList.push(...item.image)
|
|
}
|
|
}
|
|
@@ -268,30 +335,45 @@
|
|
e.preventDefault()
|
|
e.preventDefault()
|
|
var index = this.pans.findIndex(item => item.key === this.pansKey)
|
|
var index = this.pans.findIndex(item => item.key === this.pansKey)
|
|
var data = this.pans[index].list.map(item => {
|
|
var data = this.pans[index].list.map(item => {
|
|
- return item.imageList.length
|
|
|
|
|
|
+ return item.imageList.length + item.imageUrlList.length
|
|
})
|
|
})
|
|
- console.log(eval(data.join('+')), data)
|
|
|
|
if (eval(data.join('+')) > 15) {
|
|
if (eval(data.join('+')) > 15) {
|
|
this.$message.error('封面最多15张')
|
|
this.$message.error('封面最多15张')
|
|
return
|
|
return
|
|
}
|
|
}
|
|
|
|
+ console.log(this.pans[index].list)
|
|
|
|
+
|
|
this.form.validateFields((err, values) => {
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
if (!err) {
|
|
this.loading = true
|
|
this.loading = true
|
|
var dataJson = this.pans[index].list.map(item => {
|
|
var dataJson = this.pans[index].list.map(item => {
|
|
return {
|
|
return {
|
|
description: item.description,
|
|
description: item.description,
|
|
- imageTokens: item.imageList.map((ele, index) => {
|
|
|
|
|
|
+ imageArr: item.imageList.map((ele, index) => {
|
|
return {
|
|
return {
|
|
- image: ele.imageToken,
|
|
|
|
|
|
+ signature: ele.signature,
|
|
name: index + 1 + '-' + item.name
|
|
name: index + 1 + '-' + item.name
|
|
}
|
|
}
|
|
}),
|
|
}),
|
|
|
|
+ imageArrTwo: item.checkArrImage.map((ele, index) => {
|
|
|
|
+ return {
|
|
|
|
+ signature: ele,
|
|
|
|
+ name: (item.imageList.length + index + 1) + '-' + item.name
|
|
|
|
+ }
|
|
|
|
+ }),
|
|
photoId: item.videoList.photoId
|
|
photoId: item.videoList.photoId
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ console.log(dataJson)
|
|
|
|
+ var allJson = dataJson.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ description: item.description,
|
|
|
|
+ imageArr: item.imageArr.concat(item.imageArrTwo),
|
|
|
|
+ photoId: item.photoId
|
|
|
|
+ }
|
|
|
|
+ })
|
|
var params = {
|
|
var params = {
|
|
- dataJson,
|
|
|
|
|
|
+ dataJson: allJson,
|
|
...values,
|
|
...values,
|
|
unitId: this.pansKey,
|
|
unitId: this.pansKey,
|
|
accountId: localStorage.getItem('accountId')
|
|
accountId: localStorage.getItem('accountId')
|
|
@@ -334,7 +416,10 @@
|
|
.substr(2, 4),
|
|
.substr(2, 4),
|
|
description: '',
|
|
description: '',
|
|
creativeMaterialType: '1',
|
|
creativeMaterialType: '1',
|
|
- actionBarText: ''
|
|
|
|
|
|
+ actionBarText: '',
|
|
|
|
+ imageUrlList: [],
|
|
|
|
+ checkArrImage: [],
|
|
|
|
+ checkAllImage: false
|
|
})
|
|
})
|
|
},
|
|
},
|
|
deleteCreative(bestIndex, index) {
|
|
deleteCreative(bestIndex, index) {
|