|
@@ -382,8 +382,10 @@ li.chouzhen.first:before {
|
|
<template slot="content">
|
|
<template slot="content">
|
|
<img :src="showImgUrl(creativeInfo.overlayType[0])" alt="" style="width: 100%" />
|
|
<img :src="showImgUrl(creativeInfo.overlayType[0])" alt="" style="width: 100%" />
|
|
</template>
|
|
</template>
|
|
- {{ creativeInfo.overlayType[0] }}
|
|
|
|
|
|
+ <!-- {{ creativeInfo.overlayType[0] }} -->
|
|
|
|
+ 1张
|
|
</a-popover>
|
|
</a-popover>
|
|
|
|
+ <span v-else>无</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<!-- creativeInfo.overlayType -->
|
|
<!-- creativeInfo.overlayType -->
|
|
</a-col>
|
|
</a-col>
|
|
@@ -401,11 +403,95 @@ li.chouzhen.first:before {
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</a-card>
|
|
</a-card>
|
|
- <a-card class="search-box step-jump" style="min-height: 600px" title="创意素材">
|
|
|
|
|
|
+ <a-card class="search-box step-jump" title="创意素材">
|
|
<p>
|
|
<p>
|
|
- 已选素材:0/200
|
|
|
|
|
|
+ 已选素材:{{ videoMaterialShow ? materialCount : 0 }}/200
|
|
<a-button type="primary" @click="materialVisible = true" style="margin: 0 15px"> 选择素材 </a-button>
|
|
<a-button type="primary" @click="materialVisible = true" style="margin: 0 15px"> 选择素材 </a-button>
|
|
</p>
|
|
</p>
|
|
|
|
+ <div v-if="videoMaterialShow" style="width: 100%; height: 400px">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) in materialInfo.materialList"
|
|
|
|
+ :key="index"
|
|
|
|
+ style="
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 400px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ background: #f2f2f2;
|
|
|
|
+ padding: 30px;
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <template v-for="(items, indexMaterial) in item.photoArr">
|
|
|
|
+ <div
|
|
|
|
+ style="
|
|
|
|
+ width: 45%;
|
|
|
|
+ height: 250px;
|
|
|
|
+ display: flex;
|
|
|
|
+ background: white;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin: 20px;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ "
|
|
|
|
+ v-if="items.image.url"
|
|
|
|
+ >
|
|
|
|
+ <div style="width: 45%; height: 100%; text-align: center">
|
|
|
|
+ <img :src="items.image.url" style="width: auto; height: 100%" alt="" srcset="" />
|
|
|
|
+ </div>
|
|
|
|
+ <div style="width: 45%; height: 100%; text-align: center">
|
|
|
|
+ <img :src="items.image.url" style="width: auto; height: 100%" alt="" srcset="" />
|
|
|
|
+ </div>
|
|
|
|
+ <a-popconfirm
|
|
|
|
+ title="确定要删除这个素材吗?"
|
|
|
|
+ ok-text="确定"
|
|
|
|
+ cancel-text="取消"
|
|
|
|
+ @confirm="removeVideoMaterial(index, indexMaterial)"
|
|
|
|
+ @cancel="cancel"
|
|
|
|
+ >
|
|
|
|
+ <a-icon type="close-circle" style="cursor: pointer" />
|
|
|
|
+ </a-popconfirm>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- v-if="materialInfo.matchingMethod != 1 && videoMaterialShow" -->
|
|
|
|
+ <div style="margin-top: 20px">
|
|
|
|
+ <a-list bordered :data-source="descriptionList">
|
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item, index">
|
|
|
|
+ <p v-if="!item.edit" style="margin-bottom: 0; width: 100%">
|
|
|
|
+ {{ item.value }}
|
|
|
|
+ </p>
|
|
|
|
+ <p v-else style="margin-bottom: 0; width: 100%">
|
|
|
|
+ <a-input id="error" placeholder="请输入广告语" v-model="item.value" style="width: 50%" />
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ <div slot="actions">
|
|
|
|
+ <a @click="editDescription(item)">{{ item.edit ? '确定' : '编辑' }}</a>
|
|
|
|
+ <a-divider type="vertical" />
|
|
|
|
+ <a @click="removeDescription(index)">删除</a>
|
|
|
|
+ </div>
|
|
|
|
+ </a-list-item>
|
|
|
|
+ <div slot="header">
|
|
|
|
+ <a-button
|
|
|
|
+ type="primary"
|
|
|
|
+ style="margin-right: 20px"
|
|
|
|
+ @click="addDescription"
|
|
|
|
+ :disabled="
|
|
|
|
+ descriptionList.length >= (materialInfo.matchingMethod == 2
|
|
|
|
+ ? materialCount
|
|
|
|
+ : materialInfo.materialList.length)
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ 添加广告语
|
|
|
|
+ </a-button>
|
|
|
|
+ {{ descriptionList.length }}/{{
|
|
|
|
+ materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length
|
|
|
|
+ }}
|
|
|
|
+ <a style="margin-left: 20px" @click="descriptionList = []">清空 </a>
|
|
|
|
+ </div>
|
|
|
|
+ </a-list>
|
|
|
|
+ </div>
|
|
</a-card>
|
|
</a-card>
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 100px">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 100px">
|
|
<a-button type="primary"> 预览应用/链接 </a-button>
|
|
<a-button type="primary"> 预览应用/链接 </a-button>
|
|
@@ -1185,9 +1271,9 @@ li.chouzhen.first:before {
|
|
<!-- 定向预览结束 -->
|
|
<!-- 定向预览结束 -->
|
|
|
|
|
|
<!-- 创意素材选择 -->
|
|
<!-- 创意素材选择 -->
|
|
- <a-modal title="创意素材" v-model="materialVisible" :width="1000">
|
|
|
|
|
|
+ <a-modal title="创意素材" v-model="materialVisible" :width="1000" @ok="handleOkVideo" @cancel="cancelVideo">
|
|
<a-form-model
|
|
<a-form-model
|
|
- ref="ruleForm"
|
|
|
|
|
|
+ ref="materialForm"
|
|
:model="materialInfo"
|
|
:model="materialInfo"
|
|
v-bind="formItemLayout"
|
|
v-bind="formItemLayout"
|
|
:rules="materialRules"
|
|
:rules="materialRules"
|
|
@@ -1488,6 +1574,62 @@ li.chouzhen.first:before {
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</a-modal>
|
|
<!-- 选择素材相关结束 -->
|
|
<!-- 选择素材相关结束 -->
|
|
|
|
+
|
|
|
|
+ <!-- 推荐广告语开始 -->
|
|
|
|
+
|
|
|
|
+ <a-modal
|
|
|
|
+ title="推荐标题"
|
|
|
|
+ v-model="titleVisible"
|
|
|
|
+ :width="1000"
|
|
|
|
+ @ok="okTitle"
|
|
|
|
+ @cancel="
|
|
|
|
+ dataOne = []
|
|
|
|
+ value = ''
|
|
|
|
+ title = []
|
|
|
|
+ titleVisible = false
|
|
|
|
+ checkTitle = []
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <a-row :gutter="10">
|
|
|
|
+ <a-col :sm="10" style="margin-bottom: 20px; z-index: 10">
|
|
|
|
+ <a-card class="search-box" style="min-height: 500px">
|
|
|
|
+ <div style="margin-bottom: 30px">
|
|
|
|
+ <span style="display: inline-block; width: 80px">行业</span>
|
|
|
|
+ <a-cascader
|
|
|
|
+ style="margin-top: 1rem; width: 300px"
|
|
|
|
+ v-model="dataOne"
|
|
|
|
+ :options="options"
|
|
|
|
+ :showSearch="{ filter }"
|
|
|
|
+ expandTrigger="hover"
|
|
|
|
+ @change="onChangeTitle"
|
|
|
|
+ placeholder="请选择行业"
|
|
|
|
+ >
|
|
|
|
+ <a-icon type="smile" slot="suffixIcon" class="test" />
|
|
|
|
+ </a-cascader>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-bottom: 30px">
|
|
|
|
+ <span style="display: inline-block; width: 80px">关键词</span>
|
|
|
|
+ <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
|
|
|
|
+ </div>
|
|
|
|
+ <span style="display: inline-block; width: 80px; float: left"></span>
|
|
|
|
+ <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :sm="14" style="margin-bottom: 20px; z-index: 10">
|
|
|
|
+ <a-card class="search-box" style="over-flow: auto">
|
|
|
|
+ <a-checkbox-group v-model="checkTitle" style="width: 100%">
|
|
|
|
+ <a-list size="large" bordered :dataSource="title">
|
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item">
|
|
|
|
+ <a-checkbox :value="item"> {{ item }} </a-checkbox>
|
|
|
|
+ <!-- <a slot="actions" @click="okTitle(item)">选择</a> -->
|
|
|
|
+ </a-list-item>
|
|
|
|
+ </a-list>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-modal>
|
|
|
|
+ <!-- 推荐广告语结束 -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -1670,6 +1812,7 @@ export default {
|
|
|
|
|
|
//素材相关
|
|
//素材相关
|
|
materialVisible: false,
|
|
materialVisible: false,
|
|
|
|
+ videoMaterialShow: false,
|
|
materialInfo: {
|
|
materialInfo: {
|
|
isMakeCover: 2, //是否自动生成封面 1不开启,2开启
|
|
isMakeCover: 2, //是否自动生成封面 1不开启,2开启
|
|
coverNumber: 1, //设置封面数量
|
|
coverNumber: 1, //设置封面数量
|
|
@@ -1737,7 +1880,13 @@ export default {
|
|
},
|
|
},
|
|
],
|
|
],
|
|
//按创意和按创意组匹配
|
|
//按创意和按创意组匹配
|
|
- descriptionList: [],
|
|
|
|
|
|
+ descriptionList: [{ value: '测试广告语', edit: false }],
|
|
|
|
+ titleVisible: false,
|
|
|
|
+ options: [],
|
|
|
|
+ value: '',
|
|
|
|
+ dataOne: [],
|
|
|
|
+ title: [],
|
|
|
|
+ checkTitle: [],
|
|
//素材相关结束
|
|
//素材相关结束
|
|
|
|
|
|
//配置应用/链接
|
|
//配置应用/链接
|
|
@@ -1774,6 +1923,20 @@ export default {
|
|
createTiveTemplateId: null,
|
|
createTiveTemplateId: null,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ materialCount() {
|
|
|
|
+ var count = 0
|
|
|
|
+
|
|
|
|
+ for (let i = 0; i < this.materialInfo.materialList.length; i++) {
|
|
|
|
+ if (this.materialInfo.materialList.length > 0) {
|
|
|
|
+ for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
|
|
|
|
+ count++
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return count
|
|
|
|
+ },
|
|
|
|
+ },
|
|
watch: {
|
|
watch: {
|
|
accountId: function (n, o) {
|
|
accountId: function (n, o) {
|
|
if (n != '') {
|
|
if (n != '') {
|
|
@@ -1886,6 +2049,107 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ editDescription(item) {
|
|
|
|
+ console.log(item)
|
|
|
|
+ item.edit = !item.edit
|
|
|
|
+ },
|
|
|
|
+ removeDescription(index) {
|
|
|
|
+ this.descriptionList.splice(index, 1)
|
|
|
|
+ },
|
|
|
|
+ okTitle() {
|
|
|
|
+ console.log(this.checkTitle)
|
|
|
|
+ var count = this.materialInfo.matchingMethod == 2 ? this.materialCount : this.materialInfo.materialList.length
|
|
|
|
+ if (this.descriptionList.length + this.checkTitle.length > count) {
|
|
|
|
+ this.$message.error('选择广告语超过可选的上限,请去掉一部分后确定')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (this.checkTitle.length > 0) {
|
|
|
|
+ for (let i = 0; i < this.checkTitle.length; i++) {
|
|
|
|
+ this.descriptionList.push({ value: this.checkTitle[i], edit: false })
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('请选择广告语')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.titleVisible = false
|
|
|
|
+ this.dataOne = []
|
|
|
|
+ this.value = ''
|
|
|
|
+ this.title = []
|
|
|
|
+ this.checkTitle = []
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onChangeTitle(value, selectedOptions) {
|
|
|
|
+ this.dataOne = value
|
|
|
|
+ this.value = ''
|
|
|
|
+ this.title = []
|
|
|
|
+ },
|
|
|
|
+ searchQuery() {
|
|
|
|
+ this.getAction('/ctop/creativeTitle/titleSearch', {
|
|
|
|
+ firstCategory: this.dataOne[0],
|
|
|
|
+ secondCategory: this.dataOne[1],
|
|
|
|
+ keywords: this.value,
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.title = res.result ? res.result : []
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ addDescription() {
|
|
|
|
+ this.titleVisible = true
|
|
|
|
+ this.getHangye()
|
|
|
|
+ },
|
|
|
|
+ getHangye() {
|
|
|
|
+ this.getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.options = res.result.map((item) => {
|
|
|
|
+ return {
|
|
|
|
+ label: item.label,
|
|
|
|
+ value: item.value,
|
|
|
|
+ children:
|
|
|
|
+ item.children.length > 0
|
|
|
|
+ ? [
|
|
|
|
+ {
|
|
|
|
+ label: '不限',
|
|
|
|
+ value: 0,
|
|
|
|
+ },
|
|
|
|
+ ].concat(item.children)
|
|
|
|
+ : [
|
|
|
|
+ {
|
|
|
|
+ label: '不限',
|
|
|
|
+ value: 0,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.options = [
|
|
|
|
+ {
|
|
|
|
+ label: '不限',
|
|
|
|
+ value: 0,
|
|
|
|
+ },
|
|
|
|
+ ].concat(this.options)
|
|
|
|
+ if (this.dataOne.length > 0) {
|
|
|
|
+ return
|
|
|
|
+ } else {
|
|
|
|
+ this.dataOne = [0]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleOkVideo() {
|
|
|
|
+ this.$refs.materialForm.validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ console.log(this.materialInfo)
|
|
|
|
+ this.materialVisible = false
|
|
|
|
+ this.videoMaterialShow = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ cancelVideo() {},
|
|
|
|
+ removeVideoMaterial(index, indexMaterial) {
|
|
|
|
+ this.materialInfo.materialList[index].photoArr.splice(indexMaterial, 1)
|
|
|
|
+ },
|
|
|
|
+ cancel() {},
|
|
|
|
|
|
//选择素材相关
|
|
//选择素材相关
|
|
handleOkShow() {
|
|
handleOkShow() {
|
|
@@ -2203,6 +2467,9 @@ export default {
|
|
filterOption(input, option) {
|
|
filterOption(input, option) {
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
},
|
|
},
|
|
|
|
+ filter(inputValue, path) {
|
|
|
|
+ return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
|
|
|
+ },
|
|
checkAccountId() {
|
|
checkAccountId() {
|
|
if (this.accountId == '') {
|
|
if (this.accountId == '') {
|
|
this.$message.warning('请先选择广告投放账号')
|
|
this.$message.warning('请先选择广告投放账号')
|
|
@@ -2227,6 +2494,8 @@ export default {
|
|
stickerCheck(rule, value, callback) {
|
|
stickerCheck(rule, value, callback) {
|
|
if (this.creativeInfo.overlayType.length > 0 && value == '') {
|
|
if (this.creativeInfo.overlayType.length > 0 && value == '') {
|
|
callback('封面广告语标题必填')
|
|
callback('封面广告语标题必填')
|
|
|
|
+ } else if (value.length > 14) {
|
|
|
|
+ callback('封面广告语标题最多为14个字符')
|
|
}
|
|
}
|
|
callback()
|
|
callback()
|
|
},
|
|
},
|