|
@@ -34,35 +34,11 @@
|
|
|
placeholder="Please select" :changeOnSelect="changeOnSelectValue"/>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
- <a-form-item
|
|
|
- label="广告投放位置"
|
|
|
- :labelCol="labelCol"
|
|
|
- :wrapperCol="wrapperCol">
|
|
|
- <a-radio-group v-model="placementPosition" @change="changePlacementPosition">
|
|
|
- <a-radio-button value='1'>优选广告位</a-radio-button>
|
|
|
- <a-radio-button value='2'>按场景选择广告位</a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
-
|
|
|
- <a-form-item
|
|
|
- label="位置类型"
|
|
|
- v-if="showDeliveryType"
|
|
|
- :labelCol="labelCol"
|
|
|
- :wrapperCol="wrapperCol">
|
|
|
- <a-radio-group v-model="deliveryType" @change="showSinglePicture">
|
|
|
- <a-radio-button value='1'>信息流广告</a-radio-button>
|
|
|
- <a-radio-button value='2'>视频后贴片广告</a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
<a-form-item
|
|
|
-
|
|
|
label="视频类型"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-radio-group v-model="videoType" @change="changeVideoList">
|
|
|
+ <a-radio-group v-model="creativeMaterialType" @change="changeVideoList">
|
|
|
<a-radio-button value='1'>竖版视频</a-radio-button>
|
|
|
<a-radio-button value='2'>横版视频</a-radio-button>
|
|
|
<a-radio-button value='3' v-if="singlePicture">单张图片</a-radio-button>
|
|
@@ -82,7 +58,7 @@
|
|
|
|
|
|
|
|
|
<a-form-item
|
|
|
- label="选择本地文件进行上传"
|
|
|
+ label="选择本地视频文件进行上传"
|
|
|
v-if="localUpload"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
@@ -103,21 +79,6 @@
|
|
|
v-if="selectVideoUpload"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <!-- <a-select
|
|
|
- v-model="videoUrl"
|
|
|
- @change="getDescription"
|
|
|
- showSearch
|
|
|
- allowClear
|
|
|
- optionFilterProp="children"
|
|
|
- style="width: 650px"
|
|
|
- @focus="handleFocus"
|
|
|
- @blur="handleBlur"
|
|
|
- :filterOption="filterOption">
|
|
|
- <a-select-option v-for="video in videoList" :key="video.localUrl" :value="video.localUrl">
|
|
|
- {{video.videoName}}
|
|
|
- </a-select-option>
|
|
|
- </a-select> -->
|
|
|
-
|
|
|
<!-- 修改为弹窗形式 -->
|
|
|
<div>
|
|
|
<a type="primary" @click="showModalVideo">点击选中已上传作品</a>
|
|
@@ -129,15 +90,15 @@
|
|
|
@cancel="handleCancelVideo"
|
|
|
>
|
|
|
<template>
|
|
|
- <a-radio-group @change="onChange" v-model="videoUrl" class="image_item_container">
|
|
|
- <div class="image_item" v-for="(video,index) of videoList" :key="index">
|
|
|
- <video class="video" :src="video.localUrl" controls="controls" id="video">
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
- <div class="item_text">{{video.videoName}}</div>
|
|
|
- <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
|
|
|
- </div>
|
|
|
- </a-radio-group>
|
|
|
+ <a-radio-group @change="getDescription" v-model="videoUrl" class="image_item_container">
|
|
|
+ <div class="image_item" v-for="(video,index) of videoList" :key="index">
|
|
|
+ <video class="video" :src="video.localUrl" controls="controls" id="video">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <div class="item_text">{{video.videoName}}</div>
|
|
|
+ <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
|
|
|
+ </div>
|
|
|
+ </a-radio-group>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</div>
|
|
@@ -194,33 +155,23 @@
|
|
|
<br/>
|
|
|
<br/>
|
|
|
<div class="image_item_container">
|
|
|
- <div v-for="(item ,index) in imageList" class="image_item" :key="index">
|
|
|
- <label :for="item.id" class="label_item">
|
|
|
+ <div v-for="(item ,index) in imageList" class="image_item" :key="index">
|
|
|
+ <label :for="item.id" class="label_item">
|
|
|
<img :src="item.src" alt="" class="item_img">
|
|
|
<p class="item_text">{{item.name}}</p>
|
|
|
<p class="item_checkbox">
|
|
|
- <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
|
|
|
- @onClick="checkeda(item.id)"
|
|
|
- @change="changChecked" :id="item.id">
|
|
|
+ <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
|
|
|
+ @onClick="checkeda(item.id)"
|
|
|
+ @change="changChecked" :id="item.id">
|
|
|
</p>
|
|
|
- </label>
|
|
|
+ </label>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</a-form-item>
|
|
|
- <!-- <ul>
|
|
|
- <li v-for="(item ,index) in items" @click="checkeda(index)">
|
|
|
- <a href="javascript:">
|
|
|
- <img :src="item.img" alt="">
|
|
|
- </a>
|
|
|
- <p>{{item.title}}</p>
|
|
|
- <input type="checkbox" v-model="checkeds" :value="index">
|
|
|
- </li>
|
|
|
- </ul>-->
|
|
|
-
|
|
|
|
|
|
<a-form-item
|
|
|
v-if="showLocalImageUpload"
|
|
@@ -280,10 +231,19 @@
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
+ v-if="showClickTrackUrl"
|
|
|
label="第三方点击监测链接"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-input v-model="clickTrackUrl" placeholder="请第三方点击监测链接" style="width: 650px"></a-input>
|
|
|
+ <a-input v-model="clickTrackUrl" placeholder="请填写第三方点击监测链接" style="width: 650px"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ v-if="showImpressionUrl"
|
|
|
+ label="第三方开始播放监测链接"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-model="impressionUrl" placeholder="请填写第三方开始播放监测链接" style="width: 650px"></a-input>
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
@@ -321,11 +281,10 @@
|
|
|
targetPopulation: '',
|
|
|
changeOnSelectValue: true,
|
|
|
ids: [],
|
|
|
- placementPosition: '1',// 广告投放位置
|
|
|
showDeliveryType: false,
|
|
|
deliveryType: '1',
|
|
|
- videoType: '1',
|
|
|
- singlePicture: true,// 展示单张图片
|
|
|
+ creativeMaterialType: '1',
|
|
|
+ singlePicture: false,// 展示单张图片
|
|
|
videoUploadType: '1',
|
|
|
localUpload: false,
|
|
|
localUrl: '', // 本地上传地址
|
|
@@ -333,15 +292,16 @@
|
|
|
videoUrl: '',// 视频id
|
|
|
videoList: [],
|
|
|
radioStyle: { // 视频单选样式
|
|
|
- display: 'block',
|
|
|
- height: '30px',
|
|
|
- lineHeight: '30px',
|
|
|
+ display: 'block',
|
|
|
+ height: '30px',
|
|
|
+ lineHeight: '30px',
|
|
|
},
|
|
|
showUploadType: true,
|
|
|
- localImageUrl: '',//图片地址
|
|
|
+ localImageUrl: [],//图片地址
|
|
|
showImageUpload: false,
|
|
|
imageList: [],
|
|
|
imageUrl: [],
|
|
|
+ sceneId: '',// 资源位置
|
|
|
showCover: true,
|
|
|
imageType: '1',
|
|
|
actionBarTextList: [],
|
|
@@ -354,6 +314,9 @@
|
|
|
visible: false,
|
|
|
visibleVideo: false,
|
|
|
isAllChecked: false,
|
|
|
+ showClickTrackUrl: true,
|
|
|
+ showImpressionUrl: false,
|
|
|
+ impressionUrl: '',
|
|
|
checkeds: [],
|
|
|
customDomain: '',
|
|
|
acceptVideo: 'video/mpeg,video/mp4',
|
|
@@ -398,6 +361,7 @@
|
|
|
getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
|
|
|
|
|
|
creativeUrl: '/kuaishou/create/createCreative',
|
|
|
+ selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group',
|
|
|
|
|
|
}
|
|
|
}
|
|
@@ -423,7 +387,7 @@
|
|
|
}
|
|
|
},
|
|
|
showModal() {
|
|
|
- this.visible = true;
|
|
|
+ this.visible = true;
|
|
|
},
|
|
|
|
|
|
// 上传视频弹窗
|
|
@@ -431,44 +395,41 @@
|
|
|
console.log(e);
|
|
|
console.log(this.videoUrl);
|
|
|
this.visibleVideo = false;
|
|
|
-
|
|
|
+
|
|
|
this.closeAllVideoFun();
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
showModalVideo() {
|
|
|
this.visibleVideo = true;
|
|
|
-
|
|
|
- // 设置默认选中的视频
|
|
|
- this.videoUrl = this.videoList[0].localUrl;
|
|
|
-
|
|
|
jq(document).ready(function () {
|
|
|
- // 播放当前视频停止其他视频
|
|
|
- let videos = jq("video");
|
|
|
- function pauseAll() {
|
|
|
- let self = this;
|
|
|
- [].forEach.call(videos, (i)=> {
|
|
|
- // 将 videos 中其他的 video 全部暂停
|
|
|
- i !== self && i.pause();
|
|
|
- });
|
|
|
- };
|
|
|
- // 给play事件绑定暂停函数
|
|
|
- [].forEach.call(videos, (i)=> {
|
|
|
- i.addEventListener("play", pauseAll.bind(i));
|
|
|
+ // 播放当前视频停止其他视频
|
|
|
+ let videos = jq("video");
|
|
|
+
|
|
|
+ function pauseAll() {
|
|
|
+ let self = this;
|
|
|
+ [].forEach.call(videos, (i) => {
|
|
|
+ // 将 videos 中其他的 video 全部暂停
|
|
|
+ i !== self && i.pause();
|
|
|
});
|
|
|
+ };
|
|
|
+ // 给play事件绑定暂停函数
|
|
|
+ [].forEach.call(videos, (i) => {
|
|
|
+ i.addEventListener("play", pauseAll.bind(i));
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
- handleCancelVideo(){
|
|
|
- this.closeAllVideoFun();
|
|
|
- this.videoUrl = "";
|
|
|
+ handleCancelVideo() {
|
|
|
+ this.closeAllVideoFun();
|
|
|
+ this.videoUrl = "";
|
|
|
},
|
|
|
|
|
|
// 停止播放所有视频
|
|
|
- closeAllVideoFun(){
|
|
|
- let videos = jq("video");
|
|
|
- let videosArr = Array.prototype.slice.call(videos);
|
|
|
- videosArr.forEach((x)=>{
|
|
|
- x.pause();
|
|
|
- });
|
|
|
+ closeAllVideoFun() {
|
|
|
+ let videos = jq("video");
|
|
|
+ let videosArr = Array.prototype.slice.call(videos);
|
|
|
+ videosArr.forEach((x) => {
|
|
|
+ x.pause();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
changChecked() {
|
|
@@ -534,11 +495,11 @@
|
|
|
if (this.videoUploadType == 2) {
|
|
|
this.localUpload = true;
|
|
|
this.selectVideoUpload = false;
|
|
|
- this.showImageUpload = false;
|
|
|
+
|
|
|
} else {
|
|
|
this.localUpload = false;
|
|
|
this.selectVideoUpload = true;
|
|
|
- this.showImageUpload = false;
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
getDescription() {
|
|
@@ -555,93 +516,78 @@
|
|
|
},
|
|
|
|
|
|
changeVideoList() {
|
|
|
- if (this.videoType == '2' || this.videoType == '1') {
|
|
|
+ if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') {
|
|
|
this.showImageUpload = false;
|
|
|
this.showUploadType = true;
|
|
|
this.selectVideoUpload = true;
|
|
|
this.localUpload = false;
|
|
|
- this.showCover = false;
|
|
|
- this.showLocalImageUpload = false;
|
|
|
- this.videoUrl = '';
|
|
|
- this.showLocalImageUpload = false;
|
|
|
this.showUploadImageRadio = true;
|
|
|
this.showCover = true;
|
|
|
+ this.showLocalImageUpload = false;
|
|
|
+ this.videoUrl = '';
|
|
|
let params = {};
|
|
|
params.pageSize = '1000';
|
|
|
params.loginId = this.userInfo().id;
|
|
|
- if (this.videoType == '2') {
|
|
|
+ if (this.creativeMaterialType == '2') {
|
|
|
params.materialType = '2';
|
|
|
}
|
|
|
- if (this.videoType == '1') {
|
|
|
+ if (this.creativeMaterialType == '1') {
|
|
|
params.materialType = '1';
|
|
|
}
|
|
|
getAction(this.url.videoListUrl, params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.videoList = res.result.records
|
|
|
+ // 设置默认选中的视频
|
|
|
+ if (this.videoList.length > 0) {
|
|
|
+ this.videoUrl = this.videoList[0].localUrl;
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
getAction(this.url.imageListUrl, params).then((res) => {
|
|
|
-
|
|
|
this.imageList = res
|
|
|
-
|
|
|
});
|
|
|
- } else {
|
|
|
- this.showImageUpload = true;
|
|
|
- this.showUploadType = false;
|
|
|
- this.selectVideoUpload = false;
|
|
|
- this.localUpload = false;
|
|
|
- this.showCover = false;
|
|
|
- this.showUploadImageRadio = false;
|
|
|
- this.showLocalImageUpload = false;
|
|
|
- this.showCover = false;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- changePlacementPosition() {
|
|
|
- this.singlePicture = false;
|
|
|
- if (this.placementPosition == '1') {
|
|
|
- this.showDeliveryType = false;
|
|
|
- this.singlePicture = true;
|
|
|
- } else if (this.placementPosition == '2' && this.deliveryType == '1') {
|
|
|
- this.showDeliveryType = true;
|
|
|
- this.singlePicture = false;
|
|
|
- } else if (this.placementPosition == '2' && this.deliveryType == '2') {
|
|
|
- this.showDeliveryType = false;
|
|
|
- this.singlePicture = true;
|
|
|
- }
|
|
|
+ } else if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2' || this.creativeMaterialType == '3') && this.sceneId == '3') {
|
|
|
+ if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
|
|
|
+ this.showUploadType = true;
|
|
|
+ this.localUpload = false;
|
|
|
+ this.selectVideoUpload = true;
|
|
|
+ this.showImageUpload = false;
|
|
|
+ let params = {};
|
|
|
+ params.pageSize = '1000';
|
|
|
+ params.loginId = this.userInfo().id;
|
|
|
+ if (this.creativeMaterialType == '2') {
|
|
|
+ params.materialType = '2';
|
|
|
+ }
|
|
|
+ if (this.creativeMaterialType == '1') {
|
|
|
+ params.materialType = '1';
|
|
|
+ }
|
|
|
+ getAction(this.url.videoListUrl, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.videoList = res.result.records
|
|
|
+ // 设置默认选中的视频
|
|
|
+ if (this.videoList.length > 0) {
|
|
|
+ this.videoUrl = this.videoList[0].localUrl;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.creativeMaterialType == '3') {
|
|
|
|
|
|
|
|
|
- },
|
|
|
- showSinglePicture() {
|
|
|
- this.singlePicture = false
|
|
|
|
|
|
- if (this.deliveryType == '2') {
|
|
|
- this.singlePicture = true;
|
|
|
- this.showImageUpload = false;
|
|
|
- this.selectVideoUpload = false;
|
|
|
- this.localUpload = false;
|
|
|
- } else {
|
|
|
- this.singlePicture = false;
|
|
|
- this.showImageUpload = false;
|
|
|
- this.selectVideoUpload = true;
|
|
|
- this.localUpload = true;
|
|
|
+ this.showImageUpload = true;
|
|
|
+ this.showUploadType = false;
|
|
|
+ this.localUpload = false;
|
|
|
+ this.selectVideoUpload = false;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
|
|
|
|
|
|
handleSubmit(e) {
|
|
|
- console.log(this.imageIds);
|
|
|
console.log(this.imageUrl)
|
|
|
-
|
|
|
e.preventDefault()
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
|
- console.log(this.imageIds);
|
|
|
- console.log('Received values of form: ', values);
|
|
|
- console.log('快手账号: ', this.accountId);
|
|
|
- console.log(' ---: ', this.ids);
|
|
|
let params = {};
|
|
|
params.accountId = this.accountId;
|
|
|
if (this.ids.length == 2) {
|
|
@@ -653,8 +599,6 @@
|
|
|
} else if (this.videoUploadType == '2') {
|
|
|
params.videoUrl = this.localUrl;
|
|
|
}
|
|
|
- console.log("-----------------------");
|
|
|
-
|
|
|
console.log(params.videoUrl);
|
|
|
params.imageUrl = this.imageUrl;
|
|
|
console.log(this.imageUrl)
|
|
@@ -663,7 +607,9 @@
|
|
|
params.clickTrackUrl = this.clickTrackUrl;
|
|
|
params.creativeName = this.creativeName;
|
|
|
params.imageType = this.imageType;
|
|
|
- params.videoType = this.videoType;
|
|
|
+ params.creativeMaterialType = this.creativeMaterialType;
|
|
|
+ params.localImageUrl = this.localImageUrl;
|
|
|
+ params.impressionUrl = this.impressionUrl;
|
|
|
params.loginId = this.userInfo().id;
|
|
|
postAction(this.url.creativeUrl, params).then((res) => {
|
|
|
console.log(res)
|
|
@@ -689,6 +635,31 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ let unitId = this.ids[1];
|
|
|
+ let unitParams = {};
|
|
|
+ unitParams.unitId = unitId;
|
|
|
+ getAction(this.url.selectGroupCreate, unitParams).then((res) => {
|
|
|
+ this.sceneId = res.sceneId
|
|
|
+ if (res.sceneId == '2') {
|
|
|
+ this.singlePicture = false;
|
|
|
+ this.showImageUpload = false;
|
|
|
+ this.showImpressionUrl = false;
|
|
|
+ this.showClickTrackUrl = true;
|
|
|
+ this.showUploadImageRadio = true;
|
|
|
+ this.showCover = true;
|
|
|
+ this.showLocalImageUpload = false;
|
|
|
+
|
|
|
+ } else if (res.sceneId == '3') {
|
|
|
+ this.singlePicture = true;
|
|
|
+ this.showImpressionUrl = true;
|
|
|
+ this.showClickTrackUrl = false;
|
|
|
+ this.showUploadImageRadio = false;
|
|
|
+ this.showCover = false;
|
|
|
+ this.showLocalImageUpload = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
}
|
|
|
|
|
|
},
|
|
@@ -744,6 +715,11 @@
|
|
|
getAction(this.url.videoListUrl, params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.videoList = res.result.records
|
|
|
+ // 设置默认选中的视频
|
|
|
+ if (this.videoList.length > 0) {
|
|
|
+ this.videoUrl = this.videoList[0].localUrl;
|
|
|
+ }
|
|
|
+
|
|
|
console.log("......")
|
|
|
console.log(this.videoList)
|
|
|
}
|
|
@@ -765,33 +741,50 @@
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.ant-modal-body {
|
|
|
+ .ant-modal-body {
|
|
|
height: 650px;
|
|
|
overflow-y: scroll;
|
|
|
- .image_item_container{
|
|
|
- margin: 0 -10px;
|
|
|
- .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;}
|
|
|
- .item_checkbox{margin-bottom: 0;}
|
|
|
- .video{width:100%;}
|
|
|
+
|
|
|
+ .image_item_container {
|
|
|
+ margin: 0 -10px;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_checkbox {
|
|
|
+ margin-bottom: 0;
|
|
|
}
|
|
|
+
|
|
|
+ .video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .video_item_container{
|
|
|
- .video{width: 100%;}
|
|
|
+
|
|
|
+ .video_item_container {
|
|
|
+ .video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
</style>
|