|
@@ -2,8 +2,32 @@
|
|
|
.chouzhen span {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
+ .check-video .ant-tabs-nav-container{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
+ .actor-photo-list {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 0;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 20%;
|
|
|
+ margin: 10px;
|
|
|
+ position: relative;
|
|
|
+ height: 380px;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ list-style: none;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ img,
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.chouzhen {
|
|
|
border-style: solid;
|
|
|
border-width: 1px;
|
|
@@ -246,6 +270,42 @@
|
|
|
|
|
|
</a-modal>
|
|
|
|
|
|
+
|
|
|
+ <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000" >
|
|
|
+ <a-tabs type="card" @change="callback" v-model="active" class="check-video">
|
|
|
+ <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
|
|
|
+ <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
|
|
|
+ <a-checkbox-group v-model="checkVideo" @change="onChangeVideo">
|
|
|
+ <li v-for="(item,index) of dataSource" :key="index" class="chouzhen">
|
|
|
+
|
|
|
+ <video class="video" :src="item.url" controls="controls" style="width:100%">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <a-checkbox :value="item" style="position:absolute;z-index: 100;right:0;top:0;"></a-checkbox>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </ul>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+
|
|
|
+ <!-- <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-card>
|
|
|
</template>
|
|
|
|
|
@@ -281,6 +341,33 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ visibleMatemal: false,
|
|
|
+ checkVideo: [],
|
|
|
+ dataSource: [],
|
|
|
+ tab: [{
|
|
|
+ value: 0,
|
|
|
+ label: "内部"
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: "外部"
|
|
|
+ }],
|
|
|
+ active: 0,
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
chouzhen: false,
|
|
|
chouzhenList: [],
|
|
|
checkList: [],
|
|
@@ -373,13 +460,6 @@
|
|
|
})
|
|
|
}
|
|
|
this.checkAll = !this.checkAll
|
|
|
- // Object.assign(this, {
|
|
|
- // checkList: e.target.checked ? this.chouzhenList.map(item => {
|
|
|
- // return item.signature
|
|
|
- // }) : [],
|
|
|
- // indeterminate: false,
|
|
|
- // checkAll: e.target.checked,
|
|
|
- // });
|
|
|
},
|
|
|
onCheckAllImageChange(index, item) {
|
|
|
|
|
@@ -393,9 +473,7 @@
|
|
|
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) {
|
|
|
if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
|
|
@@ -451,15 +529,52 @@
|
|
|
getData(className) {
|
|
|
return this.form.getFieldValue(className)
|
|
|
},
|
|
|
+ onChangeVideo() {
|
|
|
+ if (this.checkVideo.length > 1) {
|
|
|
+ this.checkVideo.shift()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ callback(key) {
|
|
|
+ this.checkVideo = []
|
|
|
+ this.ipagination.current = 1
|
|
|
+ var params = {}
|
|
|
+ params.channelType = key
|
|
|
+ params.accountId = localStorage.getItem('accountId')
|
|
|
+ params.materialType = this.getData('creativeMaterialType')
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = this.ipagination.current
|
|
|
+ this.showVideoList('/kuaishou/batch/getVideoList', params)
|
|
|
+ },
|
|
|
+ getDataSource(page, pageSize) {
|
|
|
+ this.ipagination.current = page
|
|
|
+ var params = {}
|
|
|
+ params.accountId = localStorage.getItem('accountId')
|
|
|
+ params.materialType = this.getData('creativeMaterialType')
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = page
|
|
|
+ this.showVideoList('/kuaishou/batch/getVideoList', params)
|
|
|
+ },
|
|
|
+ showVideoList(url, params) {
|
|
|
+ getAction(url, params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.dataSource = res.result.records
|
|
|
+ this.ipagination.total = res.result.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
getVideoList(type, index, item, bestIndex) {
|
|
|
if (type == 'video') {
|
|
|
- this.$refs.check.showCheck(
|
|
|
- this.getData('creativeMaterialType'),
|
|
|
- '/kuaishou/batch/getVideoList',
|
|
|
- item.videoList,
|
|
|
- type,
|
|
|
- index
|
|
|
- )
|
|
|
+ nowIndex = index
|
|
|
+ bestIndex = bestIndex
|
|
|
+ this.visibleMatemal = true
|
|
|
+ this.checkVideo = []
|
|
|
+ var params = {}
|
|
|
+ params.accountId = localStorage.getItem('accountId')
|
|
|
+ params.materialType = this.getData('creativeMaterialType')
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = this.ipagination.current
|
|
|
+ params.channelType = 0
|
|
|
+ this.showVideoList('/kuaishou/batch/getVideoList', params)
|
|
|
} else {
|
|
|
this.$refs.check.showCheck(
|
|
|
this.getData('creativeMaterialType'),
|
|
@@ -507,8 +622,6 @@
|
|
|
this.visible = false
|
|
|
},
|
|
|
handleSubmit(e) {
|
|
|
- // e.preventDefault()
|
|
|
- // this.nextStep()
|
|
|
e.preventDefault()
|
|
|
var index = this.pans.findIndex(item => item.key === this.pansKey)
|
|
|
var data = this.pans[index].list.map(item => {
|
|
@@ -541,7 +654,6 @@
|
|
|
name: item.name
|
|
|
}
|
|
|
})
|
|
|
- console.log(dataJson)
|
|
|
var allJson = dataJson.map(item => {
|
|
|
return {
|
|
|
description: item.description,
|
|
@@ -558,9 +670,7 @@
|
|
|
unitId: this.pansKey,
|
|
|
accountId: localStorage.getItem('accountId')
|
|
|
}
|
|
|
- console.log(params)
|
|
|
postAction('/kuaishou/batch/createCreative', params).then(res => {
|
|
|
- console.log(res)
|
|
|
if (res.success) {
|
|
|
this.visible = true
|
|
|
this.allForm.fail = res.result.fail
|
|
@@ -701,9 +811,7 @@
|
|
|
console.log(index)
|
|
|
},
|
|
|
overUploadImage(urlAll) {
|
|
|
- // var index = this.urlList.url.findIndex(item => item === urlAll[0])
|
|
|
- // var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
|
|
|
- // this.imageArr.push(data)
|
|
|
+
|
|
|
var that = this
|
|
|
that.material = []
|
|
|
that.imageArrList = []
|
|
@@ -711,9 +819,7 @@
|
|
|
if (urlAll.length > 0) {
|
|
|
for (var i = 0; i < this.urlListImage.url.length; i++) {
|
|
|
that.imageArrList.push({
|
|
|
- // width: img.width,
|
|
|
- // height: img.height,
|
|
|
- // size: this.urlListImage.size[i],
|
|
|
+
|
|
|
signature: this.urlListImage.md5[i],
|
|
|
url: this.urlListImage.url[i],
|
|
|
})
|
|
@@ -783,9 +889,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
fileWater(file) {
|
|
@@ -902,6 +1006,52 @@
|
|
|
},
|
|
|
deleteData(index, bestIndex, deleteIndex) {
|
|
|
this.pans[index].list[bestIndex].imageList.splice(deleteIndex, 1)
|
|
|
+ },
|
|
|
+ handleOkShow(e) {
|
|
|
+ //
|
|
|
+
|
|
|
+ this.pans[bestIndex].list[nowIndex].imageList = []
|
|
|
+ getAction('/kuaishou/batch/getCreativeCopywriter', {
|
|
|
+ code: this.checkVideo[0].signature,
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.pans[bestIndex].list[nowIndex].description =
|
|
|
+ res.result ? res.result.creativeCopywriter : ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getAction('/ctop/MaterialImageInfo/list', {
|
|
|
+ videoId: this.checkVideo[0].signature
|
|
|
+ }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.pans[bestIndex].list[nowIndex].imageUrlList = res.result
|
|
|
+ this.pans[bestIndex].list[nowIndex].checkArrImage = res.result.map(item => {
|
|
|
+ return item.code
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.pans[bestIndex].list[nowIndex].videoList = this.checkVideo[0]
|
|
|
+ this.visibleMatemal = false
|
|
|
+ var params = {
|
|
|
+ videoSignature: this.checkVideo[0].signature,
|
|
|
+ pageSize: 20,
|
|
|
+ pageNo: 1
|
|
|
+ }
|
|
|
+ getAction('/cutFrame/material/list', params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ if (res.result.records.length > 0) {
|
|
|
+ this.pans[bestIndex].list[nowIndex].chouzhenShow = true
|
|
|
+ } else {
|
|
|
+ this.pans[bestIndex].list[nowIndex].chouzhenShow = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -964,8 +1114,6 @@
|
|
|
|
|
|
this.pansKey = this.pans[0].key
|
|
|
this.addCreative(0)
|
|
|
- // unitId: this.pansKey,
|
|
|
- // accountId: localStorage.getItem('accountId')
|
|
|
getAction('/kuaishou/batch/checkCreativeCount', {
|
|
|
unitId: this.pansKey,
|
|
|
accountId: localStorage.getItem('accountId')
|