|
|
@@ -1,4 +1,4 @@
|
|
|
-<style>
|
|
|
+<style lang="scss">
|
|
|
.chouzhen span {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
@@ -7,6 +7,28 @@
|
|
|
text-align: center;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
+
|
|
|
+ .step3-image {
|
|
|
+ span {
|
|
|
+ padding: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-checkbox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step3-modal {
|
|
|
+ .ant-checkbox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
.actor-photo-list {
|
|
|
@@ -20,7 +42,6 @@
|
|
|
height: 380px;
|
|
|
border: 1px solid #f2f2f2;
|
|
|
list-style: none;
|
|
|
- padding: 10px;
|
|
|
|
|
|
img,
|
|
|
video {
|
|
|
@@ -58,6 +79,7 @@
|
|
|
text-align: center;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 2px;
|
|
|
+ z-index: 1000;
|
|
|
}
|
|
|
|
|
|
.actor-photo-list {
|
|
|
@@ -119,14 +141,15 @@
|
|
|
v-if="item.videoList"></video>
|
|
|
</a-form-item>
|
|
|
<div class="downLoad" style="overflow:auto">
|
|
|
- <ul class="actor-photo-list"
|
|
|
+ <ul class="actor-photo-list step3-image"
|
|
|
: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" />
|
|
|
+ <a-checkbox :value="item.code" style="height:100%;width:100%">
|
|
|
+ <img class="video" :src="item.url" />
|
|
|
+ </a-checkbox>
|
|
|
</li>
|
|
|
</a-checkbox-group>
|
|
|
</ul>
|
|
|
@@ -281,13 +304,18 @@
|
|
|
全选
|
|
|
</a-button>
|
|
|
<!-- </a-checkbox> -->
|
|
|
- <ul v-if="chouzhenList.length>0" style="height:600px;overflow:auto;padding-left:0">
|
|
|
+ <ul v-if="chouzhenList.length>0" style="height:600px;overflow:auto;padding-left:0" class="step3-modal">
|
|
|
+
|
|
|
+ <a-checkbox-group v-model="checkList" @change="onChange" style="width:100%;">
|
|
|
+ <li v-for="(item,index) of chouzhenList" :key="index" class="chouzhen" style="height:355px"
|
|
|
+ :class="{'first':index == 0}">
|
|
|
+
|
|
|
|
|
|
- <a-checkbox-group v-model="checkList" @change="onChange">
|
|
|
- <li v-for="(item,index) of chouzhenList" :key="index" class="chouzhen" :class="{'first':index == 0}">
|
|
|
+ <a-checkbox :value="item.signature"
|
|
|
+ style="position:absolute;z-index: 100;width:100%;height:100%;right:0;top:0;float:right">
|
|
|
+ <img :src="item.url" alt="" style="width:100%">
|
|
|
|
|
|
- <img :src="item.url" alt="" style="width:100%">
|
|
|
- <a-checkbox :value="item.signature" style="position:absolute;z-index: 100;right:0;top:0;"></a-checkbox>
|
|
|
+ </a-checkbox>
|
|
|
|
|
|
</li>
|
|
|
</a-checkbox-group>
|
|
|
@@ -301,14 +329,17 @@
|
|
|
<a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
|
|
|
<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">
|
|
|
- <li v-for="(item,index) of dataSource" :key="index" class="chouzhen">
|
|
|
- <img :src="item.coverUrl" alt="" style="width:100%" @click="matemalVideo(item,index)">
|
|
|
+ <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="position:absolute;z-index: 100;right:0;top:0;"></a-checkbox>
|
|
|
-
|
|
|
+ <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">
|
|
|
+ </a-checkbox>
|
|
|
+ <a @click="matemalVideo(item,index)"
|
|
|
+ style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
|
|
|
</li>
|
|
|
</a-checkbox-group>
|
|
|
</ul>
|
|
|
@@ -800,6 +831,13 @@
|
|
|
this.$bus.$emit('remove', '/account/stepForm')
|
|
|
} else {
|
|
|
this.addCreative(0)
|
|
|
+ getAction('/kuaishou/batch/checkCreativeCount', {
|
|
|
+ unitId: this.pansKey,
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.content = res.result
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
handleOk() {
|
|
|
@@ -824,6 +862,7 @@
|
|
|
this.visible = false
|
|
|
this.remove(this.pansKey)
|
|
|
},
|
|
|
+
|
|
|
handleSubmit(e) {
|
|
|
e.preventDefault()
|
|
|
var index = this.pans.findIndex(item => item.key === this.pansKey)
|
|
|
@@ -872,7 +911,7 @@
|
|
|
...values,
|
|
|
unitId: this.pansKey,
|
|
|
accountId: localStorage.getItem('accountId'),
|
|
|
- content: this.content
|
|
|
+ content: this.content
|
|
|
}
|
|
|
postAction('/kuaishou/batch/createCreative', params).then(res => {
|
|
|
if (res.success) {
|
|
|
@@ -1403,204 +1442,69 @@
|
|
|
}
|
|
|
},
|
|
|
mounted: function () {
|
|
|
- if (localStorage.getItem('pans')) {
|
|
|
- this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- list: []
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- this.pansKey = this.pans[0].key
|
|
|
- this.$nextTick(() => {
|
|
|
- this.addCreative(0)
|
|
|
- })
|
|
|
- getAction('/kuaishou/batch/checkCreativeCount', {
|
|
|
- unitId: this.pansKey,
|
|
|
- accountId: localStorage.getItem('accountId')
|
|
|
- }).then(res => {
|
|
|
- console.log(res)
|
|
|
- this.content = res.result
|
|
|
- })
|
|
|
- getAction('/kuaishou/batch/getActionBarText', {
|
|
|
- campaignId: localStorage.getItem('campaignId') ? localStorage.getItem('campaignId') : localStorage
|
|
|
- .getItem('advertisingGroupKey')
|
|
|
- }).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.appList = res.result
|
|
|
- }
|
|
|
- })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (localStorage.getItem('pans')) {
|
|
|
+ this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
- if (localStorage.getItem('appId')) {
|
|
|
- this.showSite = true
|
|
|
- this.getAppList(localStorage.getItem('appId'))
|
|
|
- } else {
|
|
|
+ this.pansKey = this.pans[0].key
|
|
|
|
|
|
- getAction('/kuaishou/batch/getAppId', {
|
|
|
- accountId: localStorage.getItem('accountId'),
|
|
|
- unitId: this.pansKey
|
|
|
+ this.addCreative(0)
|
|
|
+ getAction('/kuaishou/batch/checkCreativeCount', {
|
|
|
+ unitId: this.pansKey,
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.content = res.result
|
|
|
+ })
|
|
|
+ getAction('/kuaishou/batch/getActionBarText', {
|
|
|
+ campaignId: localStorage.getItem('campaignId') ? localStorage.getItem('campaignId') : localStorage
|
|
|
+ .getItem('advertisingGroupKey')
|
|
|
}).then(res => {
|
|
|
if (res.success) {
|
|
|
- if (res.result) {
|
|
|
- this.showSite = true
|
|
|
- this.getAppList(res.result)
|
|
|
- } else {
|
|
|
- this.showSite = false
|
|
|
- }
|
|
|
-
|
|
|
+ this.appList = res.result
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- getAction('/kuaishou/batch/creativeWord', {
|
|
|
- accountId: localStorage.getItem('accountId')
|
|
|
- }).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.tags = res.result
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
- .select_all {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .ant_modal_body_container {
|
|
|
- .ant-modal-body {
|
|
|
- max-height: 650px;
|
|
|
- overflow-y: scroll;
|
|
|
|
|
|
- .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;
|
|
|
-
|
|
|
- .label_item {
|
|
|
- display: block;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .item_img {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .item_text {
|
|
|
- height: 42px;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+ if (localStorage.getItem('appId')) {
|
|
|
+ this.showSite = true
|
|
|
+ this.getAppList(localStorage.getItem('appId'))
|
|
|
+ } else {
|
|
|
|
|
|
- .item_checkbox {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+ getAction('/kuaishou/batch/getAppId', {
|
|
|
+ accountId: localStorage.getItem('accountId'),
|
|
|
+ unitId: this.pansKey
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ if (res.result) {
|
|
|
+ this.showSite = true
|
|
|
+ this.getAppList(res.result)
|
|
|
+ } else {
|
|
|
+ this.showSite = false
|
|
|
+ }
|
|
|
|
|
|
- .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:hover i {
|
|
|
- display: block;
|
|
|
- cursor: pointer;
|
|
|
}
|
|
|
-
|
|
|
- .item {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- i {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- min-height: 255px;
|
|
|
- }
|
|
|
-
|
|
|
- .checkbox_item {
|
|
|
- display: block;
|
|
|
-
|
|
|
- .ant-checkbox {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- padding: 0;
|
|
|
-
|
|
|
- .item_txt {
|
|
|
- text-align: left;
|
|
|
- height: 42px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
+ getAction('/kuaishou/batch/creativeWord', {
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.tags = res.result
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
- // @media (min-width: 1024px){
|
|
|
- // .checkbox_item_container {
|
|
|
- // width:70%
|
|
|
- // }
|
|
|
- // } /*>=1024的设备*/
|
|
|
-
|
|
|
- // @media (min-width: 1100px) {
|
|
|
- // .checkbox_item_container {
|
|
|
- // width:70%
|
|
|
- // }
|
|
|
- // } /*>=1100的设备*/
|
|
|
- @media (min-width: 1280px) {
|
|
|
- .checkbox_item_container_size {
|
|
|
- width: 70%;
|
|
|
}
|
|
|
}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
|
|
|
- /*>=1280的设备*/
|
|
|
-
|
|
|
- // @media (min-width: 1366px) {
|
|
|
- // }
|
|
|
-
|
|
|
- // @media (min-width: 1440px) {
|
|
|
- // }
|
|
|
-
|
|
|
- // @media (min-width: 1680px) {
|
|
|
-
|
|
|
- // }
|
|
|
- @media (min-width: 1920px) {
|
|
|
- .checkbox_item_container_size {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|