|
@@ -129,6 +129,25 @@
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</template>
|
|
</template>
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
+ <div class="checkbox_item_container" v-if="videoUrl">
|
|
|
|
+ <div class="item_ul">
|
|
|
|
+ <div class="item_li" style="width:130px;height:180px;">
|
|
|
|
+ <a-col class="item">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close-circle"
|
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red"
|
|
|
|
+ @click="deteleRadio"
|
|
|
|
+ />
|
|
|
|
+ <video
|
|
|
|
+ class="video"
|
|
|
|
+ :src="videoUrl"
|
|
|
|
+ controls="controls"
|
|
|
|
+ style="min-height:160px"
|
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
|
+ </a-col>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
@@ -170,6 +189,30 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
+ <div class="checkbox_item_container">
|
|
|
|
+ <div class="item_ul">
|
|
|
|
+ <div
|
|
|
|
+ class="item_li"
|
|
|
|
+ v-for="(item,index) of haveSinglePicVideoUrl"
|
|
|
|
+ :key="index"
|
|
|
|
+ style="width:130px;height:180px;"
|
|
|
|
+ >
|
|
|
|
+ <a-col class="item">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close-circle"
|
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red"
|
|
|
|
+ @click="detele(index)"
|
|
|
|
+ />
|
|
|
|
+ <video
|
|
|
|
+ class="video"
|
|
|
|
+ :src="item"
|
|
|
|
+ controls="controls"
|
|
|
|
+ style="min-height:160px"
|
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
|
+ </a-col>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
@@ -302,7 +345,13 @@
|
|
<a-form-item v-if="showCover" label="选择封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-form-item v-if="showCover" label="选择封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<div>
|
|
<div>
|
|
<a type="primary" @click="showModal">点击选中已上传封面</a>
|
|
<a type="primary" @click="showModal">点击选中已上传封面</a>
|
|
- <a-modal title="选择封面" v-model="visible" @ok="handleOk" :width="860" class="ant_modal_body_container">
|
|
|
|
|
|
+ <a-modal
|
|
|
|
+ title="选择封面"
|
|
|
|
+ v-model="visible"
|
|
|
|
+ @ok="handleOk"
|
|
|
|
+ :width="860"
|
|
|
|
+ class="ant_modal_body_container"
|
|
|
|
+ >
|
|
<template>
|
|
<template>
|
|
<input
|
|
<input
|
|
v-model="isAllChecked"
|
|
v-model="isAllChecked"
|
|
@@ -310,12 +359,12 @@
|
|
@click="checkAll($event)"
|
|
@click="checkAll($event)"
|
|
class="select_all"
|
|
class="select_all"
|
|
/> 全选
|
|
/> 全选
|
|
- <br/>
|
|
|
|
- <br/>
|
|
|
|
|
|
+ <br />
|
|
|
|
+ <br />
|
|
<div class="image_item_container">
|
|
<div class="image_item_container">
|
|
<div v-for="(item ,index) in imageList" class="image_item" :key="index">
|
|
<div v-for="(item ,index) in imageList" class="image_item" :key="index">
|
|
<label :for="item.id" class="label_item">
|
|
<label :for="item.id" class="label_item">
|
|
- <img :src="item.src" alt class="item_img"/>
|
|
|
|
|
|
+ <img :src="item.src" alt class="item_img" />
|
|
<p class="item_text">{{item.name}}</p>
|
|
<p class="item_text">{{item.name}}</p>
|
|
<p class="item_checkbox">
|
|
<p class="item_checkbox">
|
|
<input
|
|
<input
|
|
@@ -333,6 +382,26 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
+ <div class="checkbox_item_container">
|
|
|
|
+ <div class="item_ul">
|
|
|
|
+ <div
|
|
|
|
+ class="item_li"
|
|
|
|
+ v-for="(item,index) of imageList"
|
|
|
|
+ :key="index"
|
|
|
|
+ style="width:100px;height:150px;margin:15px 0;"
|
|
|
|
+ v-if="checkeds.indexOf( item.id )!=-1"
|
|
|
|
+ >
|
|
|
|
+ <a-col class="item">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close-circle"
|
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red"
|
|
|
|
+ @click="deteleImg(item.id)"
|
|
|
|
+ />
|
|
|
|
+ <img :src="item.src" alt style="width:100%" />
|
|
|
|
+ </a-col>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
@@ -373,13 +442,12 @@
|
|
v-for="actionBar in actionBarTextList"
|
|
v-for="actionBar in actionBarTextList"
|
|
:key="actionBar.id"
|
|
:key="actionBar.id"
|
|
:value="actionBar.actionBarText"
|
|
:value="actionBar.actionBarText"
|
|
- >{{actionBar.actionBarText}}
|
|
|
|
- </a-select-option>
|
|
|
|
|
|
+ >{{actionBar.actionBarText}}</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="作品广告语" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-form-item label="作品广告语" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
- <a-textarea style="width: 650px" v-model="description" :rows="2"/>
|
|
|
|
|
|
+ <a-textarea style="width: 650px" v-model="description" :rows="2" />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-form-item label="创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
@@ -413,8 +481,8 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import {getAction, postAction} from '@/api/manage'
|
|
|
|
- import {mapGetters} from 'vuex'
|
|
|
|
|
|
+ import { getAction, postAction } from '@/api/manage'
|
|
|
|
+ import { mapGetters } from 'vuex'
|
|
import UploadToAli from '@femessage/upload-to-ali'
|
|
import UploadToAli from '@femessage/upload-to-ali'
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
import VuePreview from 'vue-preview'
|
|
import VuePreview from 'vue-preview'
|
|
@@ -521,7 +589,7 @@
|
|
getOptionsUrl: '/kuaishou/create/getOptions',
|
|
getOptionsUrl: '/kuaishou/create/getOptions',
|
|
getChildrenUrl: '/kuaishou/create/getChildren',
|
|
getChildrenUrl: '/kuaishou/create/getChildren',
|
|
videoListUrl: '/kuaishou/kuaiShouVideo/list',
|
|
videoListUrl: '/kuaishou/kuaiShouVideo/list',
|
|
- imageListUrl: '/kuaishou/kuaiShouImage//image/list',
|
|
|
|
|
|
+ imageListUrl: '/kuaishou/kuaiShouImage/image/list',
|
|
actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
|
|
actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
|
|
getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
|
|
getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
|
|
|
|
|
|
@@ -618,7 +686,7 @@
|
|
this.haveSinglePicimagesList = []
|
|
this.haveSinglePicimagesList = []
|
|
},
|
|
},
|
|
|
|
|
|
- checkeda: function (id) {
|
|
|
|
|
|
+ checkeda: function(id) {
|
|
let indexOf = this.checkeds.indexOf(id)
|
|
let indexOf = this.checkeds.indexOf(id)
|
|
if (indexOf >= 0) {
|
|
if (indexOf >= 0) {
|
|
this.$delete(this.checkeds, id)
|
|
this.$delete(this.checkeds, id)
|
|
@@ -846,6 +914,8 @@
|
|
this.creativeName = res.result.videoName + '_' + moment().format('YYYY-MM-DD_HH:mm')
|
|
this.creativeName = res.result.videoName + '_' + moment().format('YYYY-MM-DD_HH:mm')
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ this.imageUrl = []
|
|
|
|
+ this.checkeds = []
|
|
},
|
|
},
|
|
|
|
|
|
// 有单张图片的贴片方式
|
|
// 有单张图片的贴片方式
|
|
@@ -1013,7 +1083,7 @@
|
|
e.preventDefault()
|
|
e.preventDefault()
|
|
this.form.validateFields((err, values) => {
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
if (!err) {
|
|
- this.loading = true;
|
|
|
|
|
|
+ this.loading = true
|
|
let params = {}
|
|
let params = {}
|
|
params.accountId = this.accountId
|
|
params.accountId = this.accountId
|
|
if (this.ids.length == 2) {
|
|
if (this.ids.length == 2) {
|
|
@@ -1046,7 +1116,7 @@
|
|
params.haveSinglePicVideoUrl = this.tiepianVideoLocalUploadList
|
|
params.haveSinglePicVideoUrl = this.tiepianVideoLocalUploadList
|
|
}
|
|
}
|
|
} else if (this.creativeMaterialType == '3') {
|
|
} else if (this.creativeMaterialType == '3') {
|
|
- params.singlePicTiepianType = this.singlePicTiepianType;
|
|
|
|
|
|
+ params.singlePicTiepianType = this.singlePicTiepianType
|
|
if (this.changeSinglePicType == '1') {
|
|
if (this.changeSinglePicType == '1') {
|
|
params.haveSinglePicimagesList = this.haveSinglePicimagesList
|
|
params.haveSinglePicimagesList = this.haveSinglePicimagesList
|
|
} else if (this.changeSinglePicType == '2') {
|
|
} else if (this.changeSinglePicType == '2') {
|
|
@@ -1057,19 +1127,30 @@
|
|
postAction(this.url.creativeUrl, params).then(res => {
|
|
postAction(this.url.creativeUrl, params).then(res => {
|
|
console.log(res)
|
|
console.log(res)
|
|
if (res.success) {
|
|
if (res.success) {
|
|
- this.loading = false;
|
|
|
|
|
|
+ this.loading = false
|
|
alert('广告创意创建成功')
|
|
alert('广告创意创建成功')
|
|
} else {
|
|
} else {
|
|
- this.loading = false;
|
|
|
|
- alert(res.message);
|
|
|
|
|
|
+ this.loading = false
|
|
|
|
+ alert(res.message)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ detele(index) {
|
|
|
|
+ this.haveSinglePicVideoUrl.splice(index, 1)
|
|
|
|
+ },
|
|
|
|
+ deteleRadio() {
|
|
|
|
+ this.videoUrl = null
|
|
|
|
+ },
|
|
|
|
+ deteleImg(item) {
|
|
|
|
+ var index = this.checkeds.findIndex(v => v === item)
|
|
|
|
+ this.checkeds.splice(index, 1)
|
|
|
|
+ this.imageUrl.splice(index, 1)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- created: function () {
|
|
|
|
|
|
+ created: function() {
|
|
let params = {}
|
|
let params = {}
|
|
params.pageSize = '1000'
|
|
params.pageSize = '1000'
|
|
params.mediaId = '2'
|
|
params.mediaId = '2'
|
|
@@ -1085,99 +1166,104 @@
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
-.select_all {
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
-}
|
|
|
|
|
|
+ .select_all {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
|
|
-.ant_modal_body_container {
|
|
|
|
- .ant-modal-body {
|
|
|
|
- max-height: 650px;
|
|
|
|
- overflow-y: scroll;
|
|
|
|
|
|
+ .ant_modal_body_container {
|
|
|
|
+ .ant-modal-body {
|
|
|
|
+ max-height: 650px;
|
|
|
|
+ overflow-y: scroll;
|
|
|
|
|
|
- .image_item_container {
|
|
|
|
- margin: 0 -10px;
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ .image_item_container {
|
|
|
|
+ margin: 0 -10px;
|
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .image_item {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 20%;
|
|
|
|
- padding: 0 10px;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
|
+ .image_item {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 20%;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- .label_item {
|
|
|
|
- display: block;
|
|
|
|
- cursor: pointer;
|
|
|
|
- }
|
|
|
|
|
|
+ .label_item {
|
|
|
|
+ display: block;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
|
|
- .item_img {
|
|
|
|
- width: 100%;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
- }
|
|
|
|
|
|
+ .item_img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
|
|
- .item_text {
|
|
|
|
- height: 42px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- margin-bottom: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ .item_text {
|
|
|
|
+ height: 42px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
|
|
- .item_checkbox {
|
|
|
|
- margin-bottom: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ .item_checkbox {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
|
|
- .video {
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ .video {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
|
|
- .video_item_container {
|
|
|
|
- .video {
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ .video_item_container {
|
|
|
|
+ .video {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
-
|
|
|
|
-// 多选框
|
|
|
|
-.checkbox_item_container {
|
|
|
|
- .item_ul {
|
|
|
|
- margin: 0 -10px;
|
|
|
|
|
|
|
|
- .item_li {
|
|
|
|
- width: 20%;
|
|
|
|
- float: left;
|
|
|
|
- padding: 0 10px;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
-
|
|
|
|
- .item {
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- video {
|
|
|
|
- width: 100%;
|
|
|
|
- min-height: 255px;
|
|
|
|
- }
|
|
|
|
|
|
+ // 多选框
|
|
|
|
+ .checkbox_item_container {
|
|
|
|
+ .item_ul {
|
|
|
|
+ margin: 0 -10px;
|
|
|
|
|
|
- .checkbox_item {
|
|
|
|
|
|
+ .item_li {
|
|
|
|
+ width: 20%;
|
|
|
|
+ float: left;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .item:hover i {
|
|
display: block;
|
|
display: block;
|
|
-
|
|
|
|
- .ant-checkbox {
|
|
|
|
- display: inline-block;
|
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ .item {
|
|
|
|
+ position: relative;
|
|
|
|
+ i {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ video {
|
|
|
|
+ width: 100%;
|
|
|
|
+ min-height: 255px;
|
|
}
|
|
}
|
|
|
|
|
|
- span {
|
|
|
|
|
|
+ .checkbox_item {
|
|
display: block;
|
|
display: block;
|
|
- padding: 0;
|
|
|
|
|
|
|
|
- .item_txt {
|
|
|
|
- text-align: left;
|
|
|
|
- height: 42px;
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
+ .ant-checkbox {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ display: block;
|
|
|
|
+ padding: 0;
|
|
|
|
+
|
|
|
|
+ .item_txt {
|
|
|
|
+ text-align: left;
|
|
|
|
+ height: 42px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
</style>
|
|
</style>
|