|
@@ -0,0 +1,222 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-modal
|
|
|
|
+ :title="title"
|
|
|
|
+ :width="800"
|
|
|
|
+ :visible="visible"
|
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
|
+ @ok="handleOk"
|
|
|
|
+ @cancel="handleCancel"
|
|
|
|
+ cancelText="关闭">
|
|
|
|
+
|
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
|
+ <a-form :form="form">
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
|
+ label="模板名称">
|
|
|
|
+ <a-input placeholder="请输入模板名称" v-model="name" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="广告位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-radio-group v-model="advertiseLocation">
|
|
|
|
+ <a-radio-button value="great">优选广告位</a-radio-button>
|
|
|
|
+ <a-radio-button value="media">按媒体指定位置</a-radio-button>
|
|
|
|
+ <a-radio-button value="sence">按场景指定位置</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item label="媒体指定" v-if="advertiseLocation=='media'" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-checkbox-group v-model="inventoryType">
|
|
|
|
+ <a-checkbox value="INVENTORY_FEED">今日头条</a-checkbox>
|
|
|
|
+ <a-checkbox value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
|
|
|
|
+ <a-checkbox value="INVENTORY_HOTSOON_FEED">火山小视频</a-checkbox>
|
|
|
|
+ <a-checkbox value="INVENTORY_AWEME_FEED">抖音</a-checkbox>
|
|
|
|
+ <a-checkbox value="INVENTORY_UNION_SLOT">穿山甲</a-checkbox>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item label="场景选择" v-if="advertiseLocation=='sence'" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-radio-group v-model="sceneInventory">
|
|
|
|
+ <a-radio-button value="VIDEO_SCENE">沉浸式竖版视频场景</a-radio-button>
|
|
|
|
+ <a-radio-button value="FEED_SCENE">信息流场景</a-radio-button>
|
|
|
|
+ <a-radio-button value="TAIL_SCENE">视频后贴和尾帧场景</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item label="广告评论" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-radio-group v-model="isCommentDisable ">
|
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
|
+ <a-radio-button value="1">开启</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="创意展现方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-radio-group v-model="creativeDisplayMode">
|
|
|
|
+ <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
|
|
|
|
+ <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item label="创意分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-cascader
|
|
|
|
+ :options="options"
|
|
|
|
+ width="200px"
|
|
|
|
+ v-model="adCategory"
|
|
|
|
+ placeholder="请选择分类"
|
|
|
|
+ />
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item label="创意标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-select mode="tags" style="width: 100%" :tokenSeparators="[' ']" v-model="adKeywords"></a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
|
+ label="视频详情页落地页">
|
|
|
|
+ <a-radio-group v-model="videoDetailPage">
|
|
|
|
+ <a-radio-button value="1">开启</a-radio-button>
|
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
|
+ label="优选广告位">
|
|
|
|
+ <a-radio-group v-model="smartInventory">
|
|
|
|
+ <a-radio-button value="1">启用</a-radio-button>
|
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
|
+ label="衍生计划">
|
|
|
|
+ <a-radio-group v-model="ysplanOpen">
|
|
|
|
+ <a-radio-button value="1">开启</a-radio-button>
|
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ </a-form>
|
|
|
|
+ </a-spin>
|
|
|
|
+ </a-modal>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {deleteAction, postAction, getAction} from '@/api/manage';
|
|
|
|
+ import pick from 'lodash.pick'
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ name: "BytedanceCreativeLaunchTemplateModal",
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ title:"操作",
|
|
|
|
+ visible: false,
|
|
|
|
+ model: {},
|
|
|
|
+ name:'',
|
|
|
|
+ isCommentDisable:'0',
|
|
|
|
+ creativeDisplayMode:'CREATIVE_DISPLAY_MODE_CTR',
|
|
|
|
+ adCategory: null,
|
|
|
|
+ adKeywords: [],
|
|
|
|
+ options:[],
|
|
|
|
+ ysplanOpen:'0',
|
|
|
|
+ videoDetailPage:'0',
|
|
|
|
+ smartInventory:'0',
|
|
|
|
+ labelCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 5 },
|
|
|
|
+ },
|
|
|
|
+ wrapperCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 16 },
|
|
|
|
+ },
|
|
|
|
+ advertiseLocation:'great',
|
|
|
|
+ inventoryType:[],
|
|
|
|
+ sceneInventory:'',
|
|
|
|
+ confirmLoading: false,
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ validatorRules:{
|
|
|
|
+ },
|
|
|
|
+ url: {
|
|
|
|
+ add: "/ctop/bytedanceCreativeLaunchTemplate/add",
|
|
|
|
+ edit: "/ctop/bytedanceCreativeLaunchTemplate/edit",
|
|
|
|
+ industryListUrl: '/template/bytedance/industry/list',
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created: function () {
|
|
|
|
+ let params = {}
|
|
|
|
+ getAction(this.url.industryListUrl, params).then(res => {
|
|
|
|
+ this.options = res
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ add () {
|
|
|
|
+ this.edit({
|
|
|
|
+
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ edit (record) {
|
|
|
|
+ this.form.resetFields();
|
|
|
|
+ this.model = Object.assign({}, record);
|
|
|
|
+ this.visible = true;
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.form.setFieldsValue(pick(this.model,'name','commentDisable','closeVideoDetail','creativeDisplayMode','smartInventory','sceneInventory','generateDerivedAd','inventoryType','thirdIndustryId'))
|
|
|
|
+ //时间格式化
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ close () {
|
|
|
|
+ this.$emit('close');
|
|
|
|
+ this.visible = false;
|
|
|
|
+ },
|
|
|
|
+ handleOk () {
|
|
|
|
+ const that = this;
|
|
|
|
+ // 触发表单验证
|
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ that.confirmLoading = true;
|
|
|
|
+ let param = {};
|
|
|
|
+ param.name = this.name;
|
|
|
|
+ param.advertiseLocation = this.advertiseLocation;
|
|
|
|
+ param.inventoryType = JSON.stringify(this.inventoryType);
|
|
|
|
+ param.sceneInventory = this.sceneInventory;
|
|
|
|
+ param.commentDisable = this.isCommentDisable;
|
|
|
|
+ param.creativeDisplayMode = this.creativeDisplayMode;
|
|
|
|
+ param.thirdIndustryId = JSON.stringify(this.adCategory);
|
|
|
|
+ param.adKeywords = JSON.stringify(this.adKeywords);
|
|
|
|
+ param.closeVideoDetail = this.videoDetailPage;
|
|
|
|
+ param.smartInventory = this.smartInventory;
|
|
|
|
+ param.generateDerivedAd = this.ysplanOpen;
|
|
|
|
+ console.log(param)
|
|
|
|
+ postAction(this.url.add,param).then((res)=>{
|
|
|
|
+ if(res.success){
|
|
|
|
+ that.$message.success(res.message);
|
|
|
|
+ that.$emit('ok');
|
|
|
|
+ }else{
|
|
|
|
+ that.$message.warning(res.message);
|
|
|
|
+ }
|
|
|
|
+ }).finally(() => {
|
|
|
|
+ that.confirmLoading = false;
|
|
|
|
+ that.close();
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleCancel () {
|
|
|
|
+ this.close()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+
|
|
|
|
+</style>
|