|
@@ -1,28 +1,20 @@
|
|
-<style scoped></style>
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
|
|
|
+</style>
|
|
<template>
|
|
<template>
|
|
- <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
|
|
|
|
|
|
+ <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step3">
|
|
<a-tabs style="width:50%;margin:0 auto" type="editable-card" hideAdd @edit="remove">
|
|
<a-tabs style="width:50%;margin:0 auto" type="editable-card" hideAdd @edit="remove">
|
|
- <a-tab-pane
|
|
|
|
- v-for="(pane, bestIndex) in pans"
|
|
|
|
- :tab="pane.tab"
|
|
|
|
- :key="pane.key"
|
|
|
|
- v-model="pansKey"
|
|
|
|
- disabled
|
|
|
|
- :closable="pane.closable"
|
|
|
|
- >
|
|
|
|
|
|
+ <a-tab-pane v-for="(pane, bestIndex) in pans" :tab="pane.tab" :key="pane.key" v-model="pansKey" disabled
|
|
|
|
+ :closable="pane.closable">
|
|
<a-form @submit="handleSubmit" :form="form" style="margin-top:20px" :hideRequiredMark="true">
|
|
<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-form-item label="素材类型" :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol">
|
|
<a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]">
|
|
<a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]">
|
|
<a-radio-button value="1">竖版视频</a-radio-button>
|
|
<a-radio-button value="1">竖版视频</a-radio-button>
|
|
<a-radio-button value="2">横版视频</a-radio-button>
|
|
<a-radio-button value="2">横版视频</a-radio-button>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item label="创意内容">
|
|
|
|
|
|
+ <a-form-item label="创意内容" :labelCol="labelCol">
|
|
<a-layout>
|
|
<a-layout>
|
|
<a-layout-content style="padding:10px;">
|
|
<a-layout-content style="padding:10px;">
|
|
<div :style="{ marginBottom: '16px' }">
|
|
<div :style="{ marginBottom: '16px' }">
|
|
@@ -31,40 +23,25 @@
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="24" v-for="(item, index) of pane.list" :key="index">
|
|
<a-col :span="24" v-for="(item, index) of pane.list" :key="index">
|
|
<a-card title :ref="item">
|
|
<a-card title :ref="item">
|
|
- <a-icon
|
|
|
|
- type="close"
|
|
|
|
- style="float:right;cursor: pointer;"
|
|
|
|
- @click="deleteCreative(bestIndex, index)"
|
|
|
|
- />
|
|
|
|
|
|
+ <a-icon type="close" style="float:right;cursor: pointer;"
|
|
|
|
+ @click="deleteCreative(bestIndex, index)" />
|
|
<div style="clear:both"></div>
|
|
<div style="clear:both"></div>
|
|
<div class="dynamically_add_form_item">
|
|
<div class="dynamically_add_form_item">
|
|
<a-form-item label="">
|
|
<a-form-item label="">
|
|
<a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
|
|
<a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
|
|
<br />
|
|
<br />
|
|
- <video
|
|
|
|
- :src="item.videoList.url"
|
|
|
|
- controls="controls"
|
|
|
|
- style="width:25%"
|
|
|
|
- v-if="item.videoList"
|
|
|
|
- ></video>
|
|
|
|
|
|
+ <video :src="item.videoList.url" controls="controls" style="width:25%"
|
|
|
|
+ v-if="item.videoList"></video>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="">
|
|
<a-form-item label="">
|
|
<a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
|
|
<a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
|
|
<br />
|
|
<br />
|
|
- <img
|
|
|
|
- :src="item.url"
|
|
|
|
- style="width:18%;margin:1%;"
|
|
|
|
- v-for="item of item.imageList"
|
|
|
|
- :key="item.url"
|
|
|
|
- />
|
|
|
|
|
|
+ <img :src="item.url" style="width:18%;margin:1%;" v-for="item of item.imageList"
|
|
|
|
+ :key="item.url" />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="广告语">
|
|
<a-form-item label="广告语">
|
|
- <a-textarea
|
|
|
|
- class="rending"
|
|
|
|
- placeholder="请输入广告语"
|
|
|
|
- v-model="item.description"
|
|
|
|
- :autosize="{ minRows: 2, maxRows: 6 }"
|
|
|
|
- ></a-textarea>
|
|
|
|
|
|
+ <a-textarea class="rending" placeholder="请输入广告语" v-model="item.description"
|
|
|
|
+ :autosize="{ minRows: 2, maxRows: 6 }"></a-textarea>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="创意标题">
|
|
<a-form-item label="创意标题">
|
|
<a-input class="rending" v-model="item.name"></a-input>
|
|
<a-input class="rending" v-model="item.name"></a-input>
|
|
@@ -76,35 +53,20 @@
|
|
</a-layout-content>
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</a-layout>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item
|
|
|
|
- label="行动号召"
|
|
|
|
- :labelCol="{ lg: { span: 2 }, sm: { span: 4 } }"
|
|
|
|
- :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
|
|
|
|
- >
|
|
|
|
|
|
+ <a-form-item label="行动号召" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<!-- <a-radio-group buttonStyle="solid" v-decorator="['action_bar_text', { initialValue: '1' }]">
|
|
<!-- <a-radio-group buttonStyle="solid" v-decorator="['action_bar_text', { initialValue: '1' }]">
|
|
<a-radio-button value="1">竖版视频</a-radio-button>
|
|
<a-radio-button value="1">竖版视频</a-radio-button>
|
|
<a-radio-button value="2">横版视频</a-radio-button>
|
|
<a-radio-button value="2">横版视频</a-radio-button>
|
|
</a-radio-group> -->
|
|
</a-radio-group> -->
|
|
- <a-select
|
|
|
|
- v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]"
|
|
|
|
- showSearch
|
|
|
|
- allowClear
|
|
|
|
- placeholder="选择行动号召按钮文案"
|
|
|
|
- optionFilterProp="children"
|
|
|
|
- :filterOption="filterOption"
|
|
|
|
- >
|
|
|
|
|
|
+ <a-select v-decorator="['actionBarText', { 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">
|
|
<a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.actionBarText">
|
|
{{ appModel.actionBarText }}
|
|
{{ appModel.actionBarText }}
|
|
</a-select-option>x
|
|
</a-select-option>x
|
|
</a-select>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item
|
|
|
|
- label="监测链接"
|
|
|
|
- :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
|
|
|
|
- :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
|
|
|
|
- >
|
|
|
|
- <a-input
|
|
|
|
- v-decorator="[
|
|
|
|
|
|
+ <a-form-item label="监测链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-input v-decorator="[
|
|
'clickTrackUrl',
|
|
'clickTrackUrl',
|
|
{
|
|
{
|
|
rules: [
|
|
rules: [
|
|
@@ -112,9 +74,7 @@
|
|
{ validator: handleConfirmValue }
|
|
{ validator: handleConfirmValue }
|
|
]
|
|
]
|
|
}
|
|
}
|
|
- ]"
|
|
|
|
- placeholder="请输入第三方检测链接"
|
|
|
|
- >
|
|
|
|
|
|
+ ]" placeholder="请输入第三方检测链接">
|
|
</a-input>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-form>
|
|
@@ -136,8 +96,7 @@
|
|
创建失败:{{ allForm.fail.length }}条
|
|
创建失败:{{ allForm.fail.length }}条
|
|
<div style="margin-top:20px">
|
|
<div style="margin-top:20px">
|
|
<p v-for="(item, index) of allForm.fail" :key="index">
|
|
<p v-for="(item, index) of allForm.fail" :key="index">
|
|
- <span>名称:{{ item.creativeName }}</span
|
|
|
|
- ><br />
|
|
|
|
|
|
+ <span>名称:{{ item.creativeName }}</span><br />
|
|
<span>错误信息:{{ item.failMessage }}</span>
|
|
<span>错误信息:{{ item.failMessage }}</span>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@@ -153,368 +112,419 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { getAction, postAction } from '@/api/manage'
|
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
|
-import UploadToAli from '@femessage/upload-to-ali'
|
|
|
|
-import moment from 'moment'
|
|
|
|
-import VuePreview from 'vue-preview'
|
|
|
|
-import jq from 'jquery'
|
|
|
|
-import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
|
-import checkMatemal from './stepModule/checkMatemal'
|
|
|
|
-export default {
|
|
|
|
- name: 'BaseForm',
|
|
|
|
- components: {
|
|
|
|
- UploadToAli,
|
|
|
|
- VuePreview,
|
|
|
|
- checkMatemal
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- pans: [],
|
|
|
|
- pansKey: '',
|
|
|
|
- allForm: { videoList: '', imageList: [], fail: [], success: [] },
|
|
|
|
- form: this.$form.createForm(this),
|
|
|
|
- list: [],
|
|
|
|
- vertical: 'vertical',
|
|
|
|
- appList: [],
|
|
|
|
- visible: false,
|
|
|
|
- loading: false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- handleConfirmValue(rule, value, callback) {
|
|
|
|
- if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
|
|
|
|
- callback()
|
|
|
|
- } else {
|
|
|
|
- callback('链接不能为空且开头为http://或https://,并且长度小于10000')
|
|
|
|
- }
|
|
|
|
|
|
+ import {
|
|
|
|
+ getAction,
|
|
|
|
+ postAction
|
|
|
|
+ } from '@/api/manage'
|
|
|
|
+ import {
|
|
|
|
+ mapGetters
|
|
|
|
+ } from 'vuex'
|
|
|
|
+ import UploadToAli from '@femessage/upload-to-ali'
|
|
|
|
+ import moment from 'moment'
|
|
|
|
+ import VuePreview from 'vue-preview'
|
|
|
|
+ import jq from 'jquery'
|
|
|
|
+ import {
|
|
|
|
+ stopOtherVideo,
|
|
|
|
+ closeAllVideoFun
|
|
|
|
+ } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
|
+ import checkMatemal from './stepModule/checkMatemal'
|
|
|
|
+ export default {
|
|
|
|
+ name: 'BaseForm',
|
|
|
|
+ components: {
|
|
|
|
+ UploadToAli,
|
|
|
|
+ VuePreview,
|
|
|
|
+ checkMatemal
|
|
},
|
|
},
|
|
- showData(item, type) {
|
|
|
|
- var index = this.pans.findIndex(item => item.key === this.pansKey)
|
|
|
|
- this.pans[index].list[item.key].imageList = []
|
|
|
|
- if (type == 'video') {
|
|
|
|
- this.pans[index].list[item.key].videoList = item.video
|
|
|
|
- getAction('/kuaishou/batch/getCreativeCopywriter', { code: item.video.signature }).then(res => {
|
|
|
|
- console.log(res)
|
|
|
|
- if (res.success) {
|
|
|
|
- this.pans[index].list[item.key].description = res.result.creativeCopywriter
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ pans: [],
|
|
|
|
+ pansKey: '',
|
|
|
|
+ allForm: {
|
|
|
|
+ videoList: '',
|
|
|
|
+ imageList: [],
|
|
|
|
+ fail: [],
|
|
|
|
+ success: []
|
|
|
|
+ },
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ list: [],
|
|
|
|
+ vertical: 'vertical',
|
|
|
|
+ appList: [],
|
|
|
|
+ labelCol: {
|
|
|
|
+ lg: {
|
|
|
|
+ span: 4
|
|
|
|
+ },
|
|
|
|
+ sm: {
|
|
|
|
+ span: 6
|
|
|
|
+ },
|
|
|
|
+ xs: {
|
|
|
|
+ span: 4
|
|
|
|
+ },
|
|
|
|
+ md: {
|
|
|
|
+ span: 4
|
|
}
|
|
}
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- this.pans[index].list[item.key].imageList.push(...item.image)
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- getData(className) {
|
|
|
|
- return this.form.getFieldValue(className)
|
|
|
|
- },
|
|
|
|
- getVideoList(type, index, item, bestIndex) {
|
|
|
|
- if (type == 'video') {
|
|
|
|
- this.$refs.check.showCheck(
|
|
|
|
- this.getData('creativeMaterialType'),
|
|
|
|
- '/kuaishou/batch/getVideoList',
|
|
|
|
- item.videoList,
|
|
|
|
- type,
|
|
|
|
- index
|
|
|
|
- )
|
|
|
|
- } else {
|
|
|
|
- this.$refs.check.showCheck(
|
|
|
|
- this.getData('creativeMaterialType'),
|
|
|
|
- '/kuaishou/batch/getImageList',
|
|
|
|
- item.imageList,
|
|
|
|
- type,
|
|
|
|
- index
|
|
|
|
- )
|
|
|
|
|
|
+ },
|
|
|
|
+ wrapperCol: {
|
|
|
|
+ lg: {
|
|
|
|
+ span: 18
|
|
|
|
+ },
|
|
|
|
+ sm: {
|
|
|
|
+ span: 18
|
|
|
|
+ },
|
|
|
|
+ xs: {
|
|
|
|
+ span: 14
|
|
|
|
+ },
|
|
|
|
+ md: {
|
|
|
|
+ span: 14
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ visible: false,
|
|
|
|
+ loading: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- remove(targetKey) {
|
|
|
|
- let activeKey = this.pansKey
|
|
|
|
- let lastIndex
|
|
|
|
- this.pans.forEach((pane, i) => {
|
|
|
|
- if (pane.key === targetKey) {
|
|
|
|
- lastIndex = i - 1
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- const panes = this.pans.filter(pane => pane.key !== targetKey)
|
|
|
|
- if (panes.length && activeKey === targetKey) {
|
|
|
|
- if (lastIndex >= 0) {
|
|
|
|
- activeKey = panes[lastIndex].key
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
|
+ if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
|
|
|
|
+ callback()
|
|
} else {
|
|
} else {
|
|
- activeKey = panes[0].key
|
|
|
|
|
|
+ callback('链接不能为空且开头为http://或https://,并且长度小于10000')
|
|
}
|
|
}
|
|
- }
|
|
|
|
- this.pans = panes
|
|
|
|
- this.pansKey = activeKey
|
|
|
|
- this.form.resetFields()
|
|
|
|
- if (this.pans.length == 0) {
|
|
|
|
- this.$bus.$emit('remove', '/account/stepForm')
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- handleOk() {
|
|
|
|
- if (this.allForm.fail.length == 0) {
|
|
|
|
- this.remove(this.pansKey)
|
|
|
|
- this.visible = false
|
|
|
|
- } else {
|
|
|
|
- this.visible = false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- handleCancel(e) {
|
|
|
|
- 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 => {
|
|
|
|
- return item.imageList.length
|
|
|
|
- })
|
|
|
|
- console.log(eval(data.join('+')), data)
|
|
|
|
- if (eval(data.join('+')) > 15) {
|
|
|
|
- this.$message.error('封面最多15张')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
|
- if (!err) {
|
|
|
|
- this.loading = true
|
|
|
|
- var dataJson = this.pans[index].list.map(item => {
|
|
|
|
- return {
|
|
|
|
- description: item.description,
|
|
|
|
- imageTokens: item.imageList.map((ele, index) => {
|
|
|
|
- return { image: ele.imageToken, name: index + 1 + '-' + item.name }
|
|
|
|
- }),
|
|
|
|
- photoId: item.videoList.photoId
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- var params = { dataJson, ...values, unitId: this.pansKey, accountId: localStorage.getItem('accountId') }
|
|
|
|
- console.log(params)
|
|
|
|
- postAction('/kuaishou/batch/createCreative', params).then(res => {
|
|
|
|
|
|
+ },
|
|
|
|
+ showData(item, type) {
|
|
|
|
+ var index = this.pans.findIndex(item => item.key === this.pansKey)
|
|
|
|
+ this.pans[index].list[item.key].imageList = []
|
|
|
|
+ if (type == 'video') {
|
|
|
|
+ this.pans[index].list[item.key].videoList = item.video
|
|
|
|
+ getAction('/kuaishou/batch/getCreativeCopywriter', {
|
|
|
|
+ code: item.video.signature
|
|
|
|
+ }).then(res => {
|
|
console.log(res)
|
|
console.log(res)
|
|
if (res.success) {
|
|
if (res.success) {
|
|
- this.visible = true
|
|
|
|
- this.allForm.fail = res.result.fail
|
|
|
|
- this.allForm.success = res.result.success
|
|
|
|
- this.loading = false
|
|
|
|
- } else {
|
|
|
|
- this.loading = false
|
|
|
|
|
|
+ this.pans[index].list[item.key].description = res.result.creativeCopywriter
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ } else {
|
|
|
|
+ this.pans[index].list[item.key].imageList.push(...item.image)
|
|
}
|
|
}
|
|
- })
|
|
|
|
- },
|
|
|
|
- nextStep() {
|
|
|
|
- var that = this
|
|
|
|
- setTimeout(function() {
|
|
|
|
- that.$emit('nextStep')
|
|
|
|
- }, 1500)
|
|
|
|
- },
|
|
|
|
- prevStep() {
|
|
|
|
- this.$emit('prevStep')
|
|
|
|
- },
|
|
|
|
- addCreative(index) {
|
|
|
|
- this.pans[index].list.push({
|
|
|
|
- videoList: '',
|
|
|
|
- imageList: [],
|
|
|
|
- name:
|
|
|
|
- this.getData('creativeMaterialType') == '1'
|
|
|
|
- ? '自定义创意_竖版视频_' +
|
|
|
|
- Math.random()
|
|
|
|
- .toString(36)
|
|
|
|
- .substr(2, 4)
|
|
|
|
- : '自定义创意_横版视频_' +
|
|
|
|
- Math.random()
|
|
|
|
- .toString(36)
|
|
|
|
- .substr(2, 4),
|
|
|
|
- description: '',
|
|
|
|
- creativeMaterialType: '1',
|
|
|
|
- actionBarText: ''
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- deleteCreative(bestIndex, index) {
|
|
|
|
- this.pans[bestIndex].list.splice(index, 1)
|
|
|
|
|
|
+ },
|
|
|
|
+ getData(className) {
|
|
|
|
+ return this.form.getFieldValue(className)
|
|
|
|
+ },
|
|
|
|
+ getVideoList(type, index, item, bestIndex) {
|
|
|
|
+ if (type == 'video') {
|
|
|
|
+ this.$refs.check.showCheck(
|
|
|
|
+ this.getData('creativeMaterialType'),
|
|
|
|
+ '/kuaishou/batch/getVideoList',
|
|
|
|
+ item.videoList,
|
|
|
|
+ type,
|
|
|
|
+ index
|
|
|
|
+ )
|
|
|
|
+ } else {
|
|
|
|
+ this.$refs.check.showCheck(
|
|
|
|
+ this.getData('creativeMaterialType'),
|
|
|
|
+ '/kuaishou/batch/getImageList',
|
|
|
|
+ item.imageList,
|
|
|
|
+ type,
|
|
|
|
+ index
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ remove(targetKey) {
|
|
|
|
+ let activeKey = this.pansKey
|
|
|
|
+ let lastIndex
|
|
|
|
+ this.pans.forEach((pane, i) => {
|
|
|
|
+ if (pane.key === targetKey) {
|
|
|
|
+ lastIndex = i - 1
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ const panes = this.pans.filter(pane => pane.key !== targetKey)
|
|
|
|
+ if (panes.length && activeKey === targetKey) {
|
|
|
|
+ if (lastIndex >= 0) {
|
|
|
|
+ activeKey = panes[lastIndex].key
|
|
|
|
+ } else {
|
|
|
|
+ activeKey = panes[0].key
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.pans = panes
|
|
|
|
+ this.pansKey = activeKey
|
|
|
|
+ this.form.resetFields()
|
|
|
|
+ if (this.pans.length == 0) {
|
|
|
|
+ this.$bus.$emit('remove', '/account/stepForm')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleOk() {
|
|
|
|
+ if (this.allForm.fail.length == 0) {
|
|
|
|
+ this.remove(this.pansKey)
|
|
|
|
+ this.visible = false
|
|
|
|
+ } else {
|
|
|
|
+ this.visible = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleCancel(e) {
|
|
|
|
+ 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 => {
|
|
|
|
+ return item.imageList.length
|
|
|
|
+ })
|
|
|
|
+ console.log(eval(data.join('+')), data)
|
|
|
|
+ if (eval(data.join('+')) > 15) {
|
|
|
|
+ this.$message.error('封面最多15张')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ this.loading = true
|
|
|
|
+ var dataJson = this.pans[index].list.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ description: item.description,
|
|
|
|
+ imageTokens: item.imageList.map((ele, index) => {
|
|
|
|
+ return {
|
|
|
|
+ image: ele.imageToken,
|
|
|
|
+ name: index + 1 + '-' + item.name
|
|
|
|
+ }
|
|
|
|
+ }),
|
|
|
|
+ photoId: item.videoList.photoId
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ var params = {
|
|
|
|
+ dataJson,
|
|
|
|
+ ...values,
|
|
|
|
+ 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
|
|
|
|
+ this.allForm.success = res.result.success
|
|
|
|
+ this.loading = false
|
|
|
|
+ } else {
|
|
|
|
+ this.loading = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ nextStep() {
|
|
|
|
+ var that = this
|
|
|
|
+ setTimeout(function () {
|
|
|
|
+ that.$emit('nextStep')
|
|
|
|
+ }, 1500)
|
|
|
|
+ },
|
|
|
|
+ prevStep() {
|
|
|
|
+ this.$emit('prevStep')
|
|
|
|
+ },
|
|
|
|
+ addCreative(index) {
|
|
|
|
+ this.pans[index].list.push({
|
|
|
|
+ videoList: '',
|
|
|
|
+ imageList: [],
|
|
|
|
+ name: this.getData('creativeMaterialType') == '1' ?
|
|
|
|
+ '自定义创意_竖版视频_' +
|
|
|
|
+ Math.random()
|
|
|
|
+ .toString(36)
|
|
|
|
+ .substr(2, 4) : '自定义创意_横版视频_' +
|
|
|
|
+ Math.random()
|
|
|
|
+ .toString(36)
|
|
|
|
+ .substr(2, 4),
|
|
|
|
+ description: '',
|
|
|
|
+ creativeMaterialType: '1',
|
|
|
|
+ actionBarText: ''
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ deleteCreative(bestIndex, index) {
|
|
|
|
+ this.pans[bestIndex].list.splice(index, 1)
|
|
|
|
+ },
|
|
|
|
+ filterOption(input, option) {
|
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- filterOption(input, option) {
|
|
|
|
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- dirImg() {
|
|
|
|
- let date = new Date()
|
|
|
|
- let y = date.getFullYear()
|
|
|
|
- let MM = date.getMonth() + 1
|
|
|
|
- MM = MM < 10 ? '0' + MM : MM
|
|
|
|
- let d = date.getDate()
|
|
|
|
- d = d < 10 ? '0' + d : d
|
|
|
|
|
|
+ computed: {
|
|
|
|
+ dirImg() {
|
|
|
|
+ let date = new Date()
|
|
|
|
+ let y = date.getFullYear()
|
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
|
+ let d = date.getDate()
|
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
|
|
|
- return 'image/' + y + '-' + MM + '-' + d + '/'
|
|
|
|
- },
|
|
|
|
- dirVideo() {
|
|
|
|
- let date = new Date()
|
|
|
|
- let y = date.getFullYear()
|
|
|
|
- let MM = date.getMonth() + 1
|
|
|
|
- MM = MM < 10 ? '0' + MM : MM
|
|
|
|
- let d = date.getDate()
|
|
|
|
- d = d < 10 ? '0' + d : d
|
|
|
|
|
|
+ return 'image/' + y + '-' + MM + '-' + d + '/'
|
|
|
|
+ },
|
|
|
|
+ dirVideo() {
|
|
|
|
+ let date = new Date()
|
|
|
|
+ let y = date.getFullYear()
|
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
|
+ let d = date.getDate()
|
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
|
|
|
- return 'video/' + y + '-' + MM + '-' + d + '/'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {},
|
|
|
|
- mounted: function() {
|
|
|
|
- if (localStorage.getItem('pans')) {
|
|
|
|
- this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
|
|
|
|
- return {
|
|
|
|
- ...item,
|
|
|
|
- list: []
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- console.log(this.pans)
|
|
|
|
- this.pansKey = this.pans[0].key
|
|
|
|
- getAction('/kuaishou/batch/getActionBarText', { campaignId: localStorage.getItem('campaignId') }).then(res => {
|
|
|
|
- if (res.success) {
|
|
|
|
- this.appList = res.result
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ return 'video/' + y + '-' + MM + '-' + d + '/'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {},
|
|
|
|
+ mounted: function () {
|
|
|
|
+ if (localStorage.getItem('pans')) {
|
|
|
|
+ this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ list: []
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ console.log(this.pans)
|
|
|
|
+ this.pansKey = this.pans[0].key
|
|
|
|
+ getAction('/kuaishou/batch/getActionBarText', {
|
|
|
|
+ campaignId: localStorage.getItem('campaignId')
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.appList = res.result
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
</script>
|
|
</script>
|
|
<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:hover i {
|
|
|
|
- display: block;
|
|
|
|
- cursor: pointer;
|
|
|
|
- }
|
|
|
|
|
|
+ // 多选框
|
|
|
|
+ .checkbox_item_container {
|
|
|
|
+ .item_ul {
|
|
|
|
+ margin: 0 -10px;
|
|
|
|
|
|
- .item {
|
|
|
|
- position: relative;
|
|
|
|
|
|
+ .item_li {
|
|
|
|
+ width: 20%;
|
|
|
|
+ float: left;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- i {
|
|
|
|
- display: none;
|
|
|
|
|
|
+ .item:hover i {
|
|
|
|
+ display: block;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
- video {
|
|
|
|
- width: 100%;
|
|
|
|
- min-height: 255px;
|
|
|
|
- }
|
|
|
|
|
|
+ .item {
|
|
|
|
+ position: relative;
|
|
|
|
|
|
- .checkbox_item {
|
|
|
|
- display: block;
|
|
|
|
|
|
+ i {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
|
|
- .ant-checkbox {
|
|
|
|
- display: inline-block;
|
|
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
|
|
-// @media (min-width: 1024px){
|
|
|
|
-// .checkbox_item_container {
|
|
|
|
-// width:70%
|
|
|
|
-// }
|
|
|
|
-// } /*>=1024的设备*/
|
|
|
|
|
|
+ // @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%;
|
|
|
|
|
|
+ // @media (min-width: 1100px) {
|
|
|
|
+ // .checkbox_item_container {
|
|
|
|
+ // width:70%
|
|
|
|
+ // }
|
|
|
|
+ // } /*>=1100的设备*/
|
|
|
|
+ @media (min-width: 1280px) {
|
|
|
|
+ .checkbox_item_container_size {
|
|
|
|
+ width: 70%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
|
|
-/*>=1280的设备*/
|
|
|
|
|
|
+ /*>=1280的设备*/
|
|
|
|
|
|
-// @media (min-width: 1366px) {
|
|
|
|
-// }
|
|
|
|
|
|
+ // @media (min-width: 1366px) {
|
|
|
|
+ // }
|
|
|
|
|
|
-// @media (min-width: 1440px) {
|
|
|
|
-// }
|
|
|
|
|
|
+ // @media (min-width: 1440px) {
|
|
|
|
+ // }
|
|
|
|
|
|
-// @media (min-width: 1680px) {
|
|
|
|
|
|
+ // @media (min-width: 1680px) {
|
|
|
|
|
|
-// }
|
|
|
|
-@media (min-width: 1920px) {
|
|
|
|
- .checkbox_item_container_size {
|
|
|
|
- width: 50%;
|
|
|
|
|
|
+ // }
|
|
|
|
+ @media (min-width: 1920px) {
|
|
|
|
+ .checkbox_item_container_size {
|
|
|
|
+ width: 50%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+</style>
|