|
@@ -1,17 +1,99 @@
|
|
|
+<style scoped></style>
|
|
|
+
|
|
|
<template>
|
|
|
<a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
|
|
|
<a-tabs style="width:50%;margin:0 auto">
|
|
|
<a-tab-pane v-for="pane in pans" :tab="pane.tab" :key="pane.key">
|
|
|
- <a-form @submit="handleSubmit" :form="form">
|
|
|
-
|
|
|
-
|
|
|
+ <a-form @submit="handleSubmit" :form="form" style="margin-top:20px" :hideRequiredMark="true">
|
|
|
+ <a-form-item
|
|
|
+ label="素材类型"
|
|
|
+ :labelCol="{ lg: { span: 2 }, sm: { span: 4 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-radio-group buttonStyle="solid" v-decorator="['creative_material_type', { initialValue: '1' }]">
|
|
|
+ <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="创意内容">
|
|
|
+ <a-layout>
|
|
|
+ <a-layout-content style="padding:10px;">
|
|
|
+ <div :style="{ marginBottom: '16px' }">
|
|
|
+ <a-button @click="addCreative()">添加创意</a-button>
|
|
|
+ </div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24" v-for="(item, index) of list" :key="index">
|
|
|
+ <a-card title :ref="item">
|
|
|
+ <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
|
|
|
+ <div style="clear:both"></div>
|
|
|
+ <div class="dynamically_add_form_item">
|
|
|
+ <a-form-item label="">
|
|
|
+ <a @click="getVideoList('video', index, item)">选择视频</a>
|
|
|
+ <br />
|
|
|
+ <video
|
|
|
+ :src="item.videoList.url"
|
|
|
+ controls="controls"
|
|
|
+ style="width:25%"
|
|
|
+ v-if="item.videoList"
|
|
|
+ ></video>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="">
|
|
|
+ <a @click="getVideoList('image', index, item)">选择封面</a>
|
|
|
+ <br />
|
|
|
+ <img
|
|
|
+ :src="item.url"
|
|
|
+ style="width:18%;margin:1%;"
|
|
|
+ v-for="item of item.imageList"
|
|
|
+ :key="item.url"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="广告语">
|
|
|
+ <a-textarea
|
|
|
+ class="rending"
|
|
|
+ placeholder="请输入广告语"
|
|
|
+ v-model="item.description"
|
|
|
+ :autosize="{ minRows: 2, maxRows: 6 }"
|
|
|
+ ></a-textarea>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="创意标题">
|
|
|
+ <a-input class="rending" v-model="item.name"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="素材类型"
|
|
|
+ :labelCol="{ lg: { span: 2 }, sm: { span: 4 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <!-- <a-radio-group buttonStyle="solid" v-decorator="['action_bar_text', { initialValue: '1' }]">
|
|
|
+ <a-radio-button value="1">竖版视频</a-radio-button>
|
|
|
+ <a-radio-button value="2">横版视频</a-radio-button>
|
|
|
+ </a-radio-group> -->
|
|
|
+ <a-select
|
|
|
+ v-decorator="['action_bar_text', { rules: [{ required: true, message: '行动号召按钮文案' }] }]"
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
+ placeholder="选择行动号召按钮文案"
|
|
|
+ optionFilterProp="children"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.actionBarText">
|
|
|
+ {{ appModel.actionBarText }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
</a-form>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
<a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
|
|
|
- <a-button type="primary" :loading="loading" @click="handleSubmit">提交</a-button>
|
|
|
- <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
|
|
|
+ <a-button type="primary" @click="handleSubmit">提交</a-button>
|
|
|
</a-form-item>
|
|
|
+ <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
|
|
|
</a-card>
|
|
|
</template>
|
|
|
|
|
@@ -23,124 +105,75 @@ import moment from 'moment'
|
|
|
import VuePreview from 'vue-preview'
|
|
|
import jq from 'jquery'
|
|
|
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
-import { fileCheck, fileInsert } from '@/api/actor'
|
|
|
-import BMF from 'browser-md5-file'
|
|
|
+import checkMatemal from './stepModule/checkMatemal'
|
|
|
export default {
|
|
|
name: 'BaseForm',
|
|
|
components: {
|
|
|
UploadToAli,
|
|
|
- VuePreview
|
|
|
+ VuePreview,
|
|
|
+ checkMatemal
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
pans: [],
|
|
|
- allForm: { sceneId: '' },
|
|
|
+ allForm: { videoList: '', imageList: [] },
|
|
|
form: this.$form.createForm(this),
|
|
|
- accountId: '', // 快手 accountId
|
|
|
- accountList: {},
|
|
|
- campaignId: '', //广告计划id
|
|
|
- targetPopulation: '',
|
|
|
- changeOnSelectValue: true,
|
|
|
- ids: [],
|
|
|
- showDeliveryType: false,
|
|
|
- deliveryType: '1',
|
|
|
- creativeMaterialType: '1',
|
|
|
- singlePicture: false, // 展示单张图片
|
|
|
- videoUploadType: '1',
|
|
|
- showSinglePicTiepianType: false, // 贴片类型
|
|
|
- showSinglePicType: false, //
|
|
|
- singlePicTiepianType: '1', // 贴片方式
|
|
|
- singlePicType: '1', //
|
|
|
- localUpload: false,
|
|
|
- localUrl: '', // 本地上传地址
|
|
|
- selectVideoUpload: true,
|
|
|
- hasSinglePicVideoUpload: false, // 有单张图片的作品上传
|
|
|
- hasSinglePicCoverUpload: false, // 有单张图片的封面上传
|
|
|
- videoUrl: '', // 视频id
|
|
|
- haveSinglePicVideoUrl: [], // 有单张图片的视频id集合
|
|
|
- haveSinglePicimagesList: [], // // 有单张图片的图片集合
|
|
|
- tiepianVideoLocalUpload: false, // 贴片视频本地上传
|
|
|
- tiepianVideoLocalUploadList: [], // 贴片视频本地上传id集合
|
|
|
- tiepianImageLocalUpload: false, // 贴片视频本地上传
|
|
|
- tiepianImageLocalUploadList: [], // 贴片视频本地上传id集合
|
|
|
- videoList: [],
|
|
|
- radioStyle: {
|
|
|
- // 视频单选样式
|
|
|
- display: 'block',
|
|
|
- height: '30px',
|
|
|
- lineHeight: '30px'
|
|
|
- },
|
|
|
- showUploadType: true,
|
|
|
- localImageUrl: [], //图片地址
|
|
|
- showImageUpload: false,
|
|
|
- imageList: [],
|
|
|
- imageUrl: [],
|
|
|
- sceneId: '', // 资源位置
|
|
|
- showCover: true,
|
|
|
- imageType: '1',
|
|
|
- actionBarTextList: [],
|
|
|
- actionBarTextDesc: '',
|
|
|
- description: '', // 作品广告语
|
|
|
- creativeName: '', //创意名称
|
|
|
- clickTrackUrl: '', // 第三方检测链接
|
|
|
- showLocalImageUpload: false,
|
|
|
- showUploadImageRadio: true,
|
|
|
- showUploadSinglePicType: false, // 单张图片上传类型
|
|
|
- changeSinglePicType: '1', // 单张图片上传方式
|
|
|
- visible: false,
|
|
|
- visibleVideo: false,
|
|
|
- visibleSinglePicVideo: false,
|
|
|
- visibleSinglePicCover: false,
|
|
|
- isAllChecked: false,
|
|
|
- showClickTrackUrl: true,
|
|
|
- showImpressionUrl: false,
|
|
|
- loading: false,
|
|
|
- impressionUrl: '',
|
|
|
- positionType: '',
|
|
|
- checkeds: [],
|
|
|
- customDomain: '',
|
|
|
- acceptVideo: 'video/mpeg,video/mp4',
|
|
|
- acceptImage: 'image/jpeg,image,jpg/png',
|
|
|
- accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
- region: 'oss-cn-beijing',
|
|
|
- bucket: 'ctop-media',
|
|
|
- options: [],
|
|
|
- labelCol: {
|
|
|
- xs: {
|
|
|
- span: 7
|
|
|
- },
|
|
|
- sm: {
|
|
|
- span: 7
|
|
|
- }
|
|
|
- },
|
|
|
- wrapperCol: {
|
|
|
- xs: {
|
|
|
- span: 10
|
|
|
- },
|
|
|
- sm: {
|
|
|
- span: 17
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- url: {
|
|
|
- userAllocationList: '/ctop/userAllocation/list',
|
|
|
- getOptionsUrl: '/kuaishou/create/getOptions',
|
|
|
- getChildrenUrl: '/kuaishou/create/getChildren',
|
|
|
- videoListUrl: '/kuaishou/kuaiShouVideo/list',
|
|
|
- imageListUrl: '/kuaishou/kuaiShouImage/image/list',
|
|
|
- actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
|
|
|
- getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
|
|
|
-
|
|
|
- creativeUrl: '/kuaishou/create/createCreative',
|
|
|
- selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group'
|
|
|
- }
|
|
|
+ list: [],
|
|
|
+ vertical: 'vertical',
|
|
|
+ appList: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ showData(item, type) {
|
|
|
+ this.list[item.key].imageList = []
|
|
|
+ if (type == 'video') {
|
|
|
+ this.list[item.key].videoList = item.video
|
|
|
+ getAction('/kuaishou/batch/getCreativeCopywriter', { code: item.video.signature }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.list[item.key].description = res.result.creativeCopywriter
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.list[item.key].imageList.push(...item.image)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData(className) {
|
|
|
+ return this.form.getFieldValue(className)
|
|
|
+ },
|
|
|
+ getVideoList(type, index, item) {
|
|
|
+ if (type == 'video') {
|
|
|
+ this.$refs.check.showCheck(
|
|
|
+ this.getData('creative_material_type'),
|
|
|
+ '/kuaishou/batch/getVideoList',
|
|
|
+ item.videoList,
|
|
|
+ type,
|
|
|
+ index
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.$refs.check.showCheck(
|
|
|
+ this.getData('creative_material_type'),
|
|
|
+ '/kuaishou/batch/getImageList',
|
|
|
+ item.imageList,
|
|
|
+ type,
|
|
|
+ index
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
handleSubmit(e) {
|
|
|
// e.preventDefault()
|
|
|
- this.nextStep()
|
|
|
+ // this.nextStep()
|
|
|
+
|
|
|
+ var dataJson = this.list.map(item => {
|
|
|
+ return {
|
|
|
+ description: item.description,
|
|
|
+ imageList: item.imageList.map((ele, index) => {
|
|
|
+ return { image: ele.imageToken, name: index + 1 + '-' + item.name }
|
|
|
+ }),
|
|
|
+ videoList: item.videoList.photoId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(dataJson)
|
|
|
},
|
|
|
nextStep() {
|
|
|
var that = this
|
|
@@ -150,6 +183,15 @@ export default {
|
|
|
},
|
|
|
prevStep() {
|
|
|
this.$emit('prevStep')
|
|
|
+ },
|
|
|
+ addCreative() {
|
|
|
+ this.list.push({ videoList: '', imageList: [], name: '', description: '' })
|
|
|
+ },
|
|
|
+ deleteCreative(index) {
|
|
|
+ this.list.splice(index, 1)
|
|
|
+ },
|
|
|
+ filterOption(input, option) {
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -176,15 +218,9 @@ export default {
|
|
|
},
|
|
|
mounted: function() {
|
|
|
this.pans = JSON.parse(localStorage.getItem('pans'))
|
|
|
- var params = {}
|
|
|
- params.campaignId = localStorage.getItem('campaignId')
|
|
|
- params.accountId = localStorage.getItem('accountId')
|
|
|
- params.pageNo = 1
|
|
|
- params.pageSize = 10
|
|
|
- getAction('/kuaishou/batch/getUnitList', params).then(res => {
|
|
|
- console.log(res)
|
|
|
+ getAction('/kuaishou/batch/getActionBarText', { campaignId: localStorage.getItem('campaignId') }).then(res => {
|
|
|
if (res.success) {
|
|
|
- this.allForm.sceneId = JSON.parse(res.result.record[0].sceneId)[0]
|
|
|
+ this.appList = res.result
|
|
|
}
|
|
|
})
|
|
|
}
|