|
@@ -1,18 +1,386 @@
|
|
<template>
|
|
<template>
|
|
<a-modal
|
|
<a-modal
|
|
- :title="title === 'add' ? '新增配置' : '编辑配置'"
|
|
|
|
v-if="visible"
|
|
v-if="visible"
|
|
|
|
+ :title="title === 'add' ? '新增配置' : '编辑配置'"
|
|
:visible="visible"
|
|
:visible="visible"
|
|
dialog-class="configuration-modal"
|
|
dialog-class="configuration-modal"
|
|
@ok="handleRelaxSure"
|
|
@ok="handleRelaxSure"
|
|
@cancel="handleRelaxCancel"
|
|
@cancel="handleRelaxCancel"
|
|
>
|
|
>
|
|
<div>
|
|
<div>
|
|
- 这个是账户配置弹窗
|
|
|
|
|
|
+ <a-form-model
|
|
|
|
+ ref="ruleForm"
|
|
|
|
+ class="config-form-modal"
|
|
|
|
+ :model="configForm"
|
|
|
|
+ :rules="rules"
|
|
|
|
+ :label-col="labelCol"
|
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
|
+ >
|
|
|
|
+ <a-form-model-item label="广告账户">
|
|
|
|
+ <acount-search class="acount-search-class" :appId.sync="configForm.acountId" :multiple="false"></acount-search>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="预算方式">
|
|
|
|
+ <a-radio-group default-value="a" v-model="configForm.budget" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">Hangzhou</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">Shanghai</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item ref="name" label="账户日预算" prop="name">
|
|
|
|
+ <a-input
|
|
|
|
+ class="common-input"
|
|
|
|
+ v-model="configForm.name"
|
|
|
|
+ @blur="
|
|
|
|
+ () => {
|
|
|
|
+ $refs.name.onFieldBlur();
|
|
|
|
+ }
|
|
|
|
+ "
|
|
|
|
+ />
|
|
|
|
+ 元
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">广告组信息</p>
|
|
|
|
+ <a-form-model-item label="推广目标">
|
|
|
|
+ <a-radio-group default-value="a" v-model="configForm.target" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">Hangzhou</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">Shanghai</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="广告类型">
|
|
|
|
+ <a-radio-group default-value="a" v-model="configForm.adverType" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">Hangzhou</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">Shanghai</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">基础信息</p>
|
|
|
|
+ <a-form-model-item label="广告组名称" prop="adverName">
|
|
|
|
+ <a-input class="common-input" v-model="configForm.adverName"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="广告计划名称">
|
|
|
|
+ <a-input class="common-input" v-model="configForm.adverPlaneName"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="创建数量">
|
|
|
|
+ <span class="advers-title-class">广告组数量</span>
|
|
|
|
+ <a-input-number v-model="configForm.adversNum" :min="1" :max="10"/>
|
|
|
|
+ <span class="advers-title-class">广告计划数量</span>
|
|
|
|
+ <a-input-number v-model="configForm.adversPlanNum" :min="1" :max="10"/>
|
|
|
|
+ <a-tooltip placement="top">
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <span>输入的数量为每天所创建的广告组数量</span>
|
|
|
|
+ <span>以及每个广告组创建的广告计划数量</span>
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon class="form-itrm-icon" type="smile-o"/>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">投放内容</p>
|
|
|
|
+ <a-form-model-item label="投放目标">
|
|
|
|
+ <a-radio-group default-value="a" v-model="configForm.launchTarget" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">Hangzhou</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">Shanghai</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="下载方式">
|
|
|
|
+ <a-radio-group default-value="a" v-model="configForm.downloadMethod" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">下载链接</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">落地页</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item v-if="configForm.downloadMethod === 'b'" label="落地页链接">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.landLink"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item v-if="configForm.downloadMethod === 'b'" label="直达链接内容">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.accessLinkContent"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item v-if="configForm.downloadMethod === 'a'" label="下载链接">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.downloadLink"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item v-if="configForm.downloadMethod === 'a'" label="应用包名">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.applicationName"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">优化目标</p>
|
|
|
|
+ <a-form-model-item label="转化跟踪方式">
|
|
|
|
+ <a-select class="common-input-long" v-model="configForm.trackMode" placeholder="请选择">
|
|
|
|
+ <a-select-option value="shanghai">Zone one</a-select-option>
|
|
|
|
+ <a-select-option value="beijing">Zone two</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="优化目标">
|
|
|
|
+ <a-select class="common-input-long" v-model="configForm.optimObj" placeholder="请选择">
|
|
|
|
+ <a-select-option value="shanghai">Zone one</a-select-option>
|
|
|
|
+ <a-select-option value="beijing">Zone two</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">设置投放位置</p>
|
|
|
|
+ <a-form-model-item label="广告位置">
|
|
|
|
+ <a-radio-group default-value="a" v-model="configForm.adverPosition" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">Hangzhou</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">Shanghai</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">Shanghai</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <div class="adver-position-radio">
|
|
|
|
+ <p v-if="configForm.adverPosition === 'a'">系统将根据您设置的定向,选择预估效果最好的广告位进行投放,并触达尽可能多的目标用户</p>
|
|
|
|
+ <div v-if="configForm.adverPosition === 'c'" class="position-radio-change">
|
|
|
|
+ <p>位置选择</p>
|
|
|
|
+ <a-radio-group v-model="configForm.radioChangeValue">
|
|
|
|
+ <a-radio :style="radioStyle" :value="1">Option A</a-radio>
|
|
|
|
+ <a-radio :style="radioStyle" :value="2">Option B</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="configForm.adverPosition === 'b'" class="position-radio-change">
|
|
|
|
+ <p>位置选择</p>
|
|
|
|
+ <a-checkbox-group v-model="configForm.checkboxChangeValue">
|
|
|
|
+ <a-checkbox :style="radioStyle" :value="1">Option A</a-checkbox>
|
|
|
|
+ <a-checkbox :style="radioStyle" :value="2">Option B</a-checkbox>
|
|
|
|
+ <a-checkbox :style="radioStyle" :value="3">Option C</a-checkbox>
|
|
|
|
+ <a-checkbox :style="radioStyle" :value="4">Option D</a-checkbox>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-form-model-item label="搜索快投">
|
|
|
|
+ <a-radio-group v-model="configForm.searchQuick" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">不启用</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">启用</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">用户定向--新建定向</p>
|
|
|
|
+ <a-form-model-item label="地域">
|
|
|
|
+ <a-radio-group v-model="configForm.areaDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">按省市</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">按区县</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">按商圈</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="性别">
|
|
|
|
+ <a-radio-group v-model="configForm.genderDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">男</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">女</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="年龄">
|
|
|
|
+ <a-radio-group v-model="configForm.ageDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">18-23</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">24-30</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">31-40</a-radio-button>
|
|
|
|
+ <a-radio-button value="d">41-49</a-radio-button>
|
|
|
|
+ <a-radio-button value="e">50+</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="自定义人群">
|
|
|
|
+ <a-radio-group v-model="configForm.customDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">自定义人群</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="媒体定向">
|
|
|
|
+ <a-radio-group v-model="configForm.mediaDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a" disabled>游戏优质媒体</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">自定义</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="平台">
|
|
|
|
+ <a-radio-group v-model="configForm.platDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">IOS</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">Andriod</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">PC</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="网络">
|
|
|
|
+ <a-radio-group v-model="configForm.networkDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">Wi-Fi</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">2G</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">3G</a-radio-button>
|
|
|
|
+ <a-radio-button value="d">4G</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="已安装用户">
|
|
|
|
+ <a-radio-group v-model="configForm.installUserDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">过滤</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">定向</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="安卓版本">
|
|
|
|
+ <a-radio-group v-model="configForm.androidDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">自定义</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <div class="adver-position-radio">
|
|
|
|
+ <div v-if="configForm.androidDirect === 'b'" class="position-radio-change">
|
|
|
|
+ <p>安卓版本</p>
|
|
|
|
+ <a-radio-group v-model="configForm.androidChangeValue">
|
|
|
|
+ <a-radio :style="radioStyle" :value="1">Andriod 8.0以上</a-radio>
|
|
|
|
+ <a-radio :style="radioStyle" :value="2">Andriod 7.1以上</a-radio>
|
|
|
|
+ <a-radio :style="radioStyle" :value="3">Andriod 7.0以上</a-radio>
|
|
|
|
+ <a-radio :style="radioStyle" :value="4">Andriod 6.0以上</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-form-model-item label="过滤已转化用户">
|
|
|
|
+ <a-radio-group v-model="configForm.conversionUserDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">广告计划</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">广告组</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">广告账户</a-radio-button>
|
|
|
|
+ <a-radio-button value="d">公司账户</a-radio-button>
|
|
|
|
+ <a-radio-button value="e">APP</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="智能播放">
|
|
|
|
+ <a-radio-group v-model="configForm.intelligenceDirect" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">不开启</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">开启</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">预算与出价</p>
|
|
|
|
+ <a-form-model-item label="投放场景">
|
|
|
|
+ <a-radio-group v-model="configForm.launchScenarios" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">常规投放</a-radio-button>
|
|
|
|
+ <a-radio-button value="b" disabled>放量投放</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="预算">
|
|
|
|
+ <a-input-group compact>
|
|
|
|
+ <a-select default-value="Zhejiang">
|
|
|
|
+ <a-select-option value="Zhejiang">Zhejiang</a-select-option>
|
|
|
|
+ <a-select-option value="Jiangsu">Jiangsu</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ <a-input style="width: 50%" v-model="configForm.budgetNum"/>
|
|
|
|
+ </a-input-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="投放时间">
|
|
|
|
+ <a-radio-group v-model="configForm.launchTime" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">从今天起长期投放</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">设置开始和结束日期</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <div class="adver-position-radio">
|
|
|
|
+ <div v-if="configForm.launchTime === 'b'" class="position-radio-change">
|
|
|
|
+ <a-range-picker v-model="configForm.launchDateRange"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-form-model-item label="投放时段">
|
|
|
|
+ <a-radio-group v-model="configForm.launchTimeInterval" button-style="solid">
|
|
|
|
+ <a-radio-button value="buxian">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="a">指定时间段</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <div class="adver-position-radio">
|
|
|
|
+ <div v-if="configForm.launchTimeInterval === 'a'" class="position-radio-change">
|
|
|
|
+ <selectCheckAll
|
|
|
|
+ style="width:100%"
|
|
|
|
+ :scheduleTime.sync="configForm.scheduleTimeData"
|
|
|
|
+ ref="selectCheck"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-form-model-item label="付费方式">
|
|
|
|
+ <a-radio-group v-model="configForm.payMethod" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">按展示付费(oCPM)</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="目标转化出价">
|
|
|
|
+ <a-input class="common-input" v-model="configForm.conversionBid"/> 元
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">第三方检测链接</p>
|
|
|
|
+ <a-form-model-item label="点击监测">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.monitoringAddress"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">创意信息</p>
|
|
|
|
+ <a-form-model-item label="创意方式">
|
|
|
|
+ <a-radio-group v-model="configForm.creativeWay" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">程序化创意</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">自定义创意</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="创意内容">
|
|
|
|
+ <a-radio-group v-model="configForm.creativeContent" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">竖版视频</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">横版视频</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">大图横图</a-radio-button>
|
|
|
|
+ <a-radio-button value="d">小图</a-radio-button>
|
|
|
|
+ <a-radio-button value="e">大图竖图</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="卡片主图">
|
|
|
|
+ <a-upload
|
|
|
|
+ name="avatar"
|
|
|
|
+ list-type="picture-card"
|
|
|
|
+ class="avatar-uploader"
|
|
|
|
+ :show-upload-list="false"
|
|
|
|
+ @change="handleChange"
|
|
|
|
+ >
|
|
|
|
+ <div v-if="imageUrl" class="upload-img-class" @mouseover="handleChangeActive">
|
|
|
|
+ <div class="img-flex-url">
|
|
|
|
+ <img :src="imageUrl" alt="avatar"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="imageUrl && isCoverImgDiv" class="cover-img-div" @mouseleave="handleRemoveActive">
|
|
|
|
+ <a-icon class="delete-icon-class" type="delete" @click.stop="handleDeleteImg"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="!imageUrl && !isCoverImgDiv">
|
|
|
|
+ <a-icon type="plus"/>
|
|
|
|
+ <div class="ant-upload-text">Upload</div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-upload>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="卡片标题">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.cardTitle"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="行动号召">
|
|
|
|
+ <a-radio-group v-model="configForm.intelligentOptimization" button-style="solid">
|
|
|
|
+ <a-radio-button value="a">开启智能优选</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">关闭智能优选</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="来源">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.cardSource"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <p class="form-line"></p>
|
|
|
|
+ <p class="rock-title">创意分类</p>
|
|
|
|
+ <a-form-model-item label="创意分类">
|
|
|
|
+ <a-select class="common-input-long" v-model="configForm.creativeClassification" placeholder="请选择">
|
|
|
|
+ <a-select-option value="shanghai">Zone one</a-select-option>
|
|
|
|
+ <a-select-option value="beijing">Zone two</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="创意标签">
|
|
|
|
+ <a-input class="common-input-long" v-model="configForm.creativeLabel" @keyup.enter="handleEnterChang" placeholder="按回车生成标签"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <div class="adver-position-radio">
|
|
|
|
+ <div class="creative-label-content">
|
|
|
|
+ <p>已选</p>
|
|
|
|
+ <div class="label-content-select-tag">
|
|
|
|
+ <a-tag v-for="(item, index) in creativeTag" :key="index" :closable="true" class="tag-select-class" @close="handleTagsClose(item)">{{ item }}</a-tag>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-model>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</a-modal>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
|
|
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
|
|
|
|
+import SelectCheckAll from '../../BatchCreate/toutiaoTime';
|
|
|
|
+
|
|
|
|
+let str = '';
|
|
|
|
+for (let i = 0; i < 7*48; i++) {
|
|
|
|
+ str += '0';
|
|
|
|
+}
|
|
export default {
|
|
export default {
|
|
name: 'configuration-modal',
|
|
name: 'configuration-modal',
|
|
props: {
|
|
props: {
|
|
@@ -25,19 +393,143 @@ export default {
|
|
default: ''
|
|
default: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ components: {
|
|
|
|
+ AcountSearch,
|
|
|
|
+ SelectCheckAll
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
- return {};
|
|
|
|
|
|
+ return {
|
|
|
|
+ isCoverImgDiv: false,
|
|
|
|
+ imageUrl: '',
|
|
|
|
+ creativeTag: ['123', 'qaz', '3dcfvgfv', 'Mmm'],
|
|
|
|
+ radioStyle: {
|
|
|
|
+ display: 'block',
|
|
|
|
+ height: '30px',
|
|
|
|
+ lineHeight: '30px',
|
|
|
|
+ },
|
|
|
|
+ labelCol: {span: 4},
|
|
|
|
+ wrapperCol: {span: 14},
|
|
|
|
+ rules: {
|
|
|
|
+ name: [
|
|
|
|
+ { required: true, message: 'Please input Activity name', trigger: 'blur' },
|
|
|
|
+ { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ adverName: [
|
|
|
|
+ { required: true, message: 'Please input Activity name', trigger: 'blur' },
|
|
|
|
+ { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ configForm: {
|
|
|
|
+ name: '', // 账户日预算
|
|
|
|
+ acountId: '', // 账户
|
|
|
|
+ budget: 'a', // 预算方式
|
|
|
|
+ target: 'a', // 推广目标
|
|
|
|
+ adverType: 'a', // 广告类型
|
|
|
|
+ adverName: '', // 广告组名称
|
|
|
|
+ adverPlaneName: '', // 广告计划名称
|
|
|
|
+ adversNum: 0, // 广告组计划数量
|
|
|
|
+ adversPlanNum: 0, // 广告计划数量
|
|
|
|
+ launchTarget: 'a', // 投放目标
|
|
|
|
+ downloadMethod: 'a', // 下载方式
|
|
|
|
+ landLink: '', // 落地页链接
|
|
|
|
+ accessLinkContent: '', // 直达链接内容
|
|
|
|
+ applicationName: '', // 应用包名
|
|
|
|
+ trackMode: '', // 转化跟踪方式
|
|
|
|
+ optimObj: '', // 优化目标
|
|
|
|
+ adverPosition: 'a', // 广告位置
|
|
|
|
+ searchQuick: '', // 搜索快投
|
|
|
|
+ radioChangeValue: '', // 广告位置-按照场景指定位置
|
|
|
|
+ checkboxChangeValue: [], // 广告位置-按照媒体指定位置
|
|
|
|
+ areaDirect: 'buxian', // 定向-区域
|
|
|
|
+ genderDirect: 'buxian', // 定向-性别
|
|
|
|
+ ageDirect: 'buxian', // 定向-年龄
|
|
|
|
+ customDirect: 'buxian', // 定向-自定义
|
|
|
|
+ mediaDirect: 'buxian', // 定向-媒体定向
|
|
|
|
+ platDirect: 'buxian', // 定向-平台
|
|
|
|
+ networkDirect: 'buxian', // 定向-网络
|
|
|
|
+ installUserDirect: 'buxian', // 定向-已安装用户
|
|
|
|
+ conversionUserDirect: 'buxian', // 定向-已转化用户
|
|
|
|
+ intelligenceDirect: 'a', // 定向-智能播放
|
|
|
|
+ androidDirect: 'buxian', // 定向-安卓版本
|
|
|
|
+ androidChangeValue: '', // 安卓版本-自定义
|
|
|
|
+ launchScenarios: 'a', // 投放场景
|
|
|
|
+ budgetNum: '', // 预算
|
|
|
|
+ launchTime: 'a', // 投放时间
|
|
|
|
+ launchDateRange: '', // 设置开始和结束时间
|
|
|
|
+ launchTimeInterval: 'buxian', // 投放时段
|
|
|
|
+ scheduleTimeData: str, // 指定时段选择
|
|
|
|
+ payMethod: 'a', // 付费方式
|
|
|
|
+ conversionBid: '', // 目标转化出价
|
|
|
|
+ monitoringAddress: '', // 监测地址
|
|
|
|
+ creativeWay: 'a', // 创意方式
|
|
|
|
+ creativeContent: 'a', // 创意内容
|
|
|
|
+ cardTitle: '', // 卡片标题
|
|
|
|
+ intelligentOptimization: 'a', // 智能优选
|
|
|
|
+ cardSource: '', // 来源
|
|
|
|
+ creativeClassification: '', // 创意分类
|
|
|
|
+ creativeLabel: '' // 倡议标签
|
|
|
|
+ }
|
|
|
|
+ };
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ handleDeleteImg() {
|
|
|
|
+ this.imageUrl = '';
|
|
|
|
+ this.isCoverImgDiv = false;
|
|
|
|
+ },
|
|
|
|
+ handleChangeActive() {
|
|
|
|
+ this.isCoverImgDiv = true;
|
|
|
|
+ },
|
|
|
|
+ handleRemoveActive() {
|
|
|
|
+ this.isCoverImgDiv = false;
|
|
|
|
+ },
|
|
|
|
+ getBase64(img, callback) {
|
|
|
|
+ const reader = new FileReader();
|
|
|
|
+ reader.addEventListener('load', () => callback(reader.result));
|
|
|
|
+ reader.readAsDataURL(img);
|
|
|
|
+ },
|
|
|
|
+ handleChange(info) {
|
|
|
|
+ console.log(info, 'info--info');
|
|
|
|
+ this.getBase64(info.file.originFileObj, imageUrl => {
|
|
|
|
+ this.imageUrl = imageUrl;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
handleRelaxSure() {
|
|
handleRelaxSure() {
|
|
|
|
+ console.log(this.configForm, 'configForm-configForm');
|
|
const paramsData = {
|
|
const paramsData = {
|
|
name: '123'
|
|
name: '123'
|
|
};
|
|
};
|
|
- this.$emit('relaxSure', paramsData);
|
|
|
|
|
|
+ // this.$refs.ruleForm.validate(valid => {
|
|
|
|
+ // if (valid) {
|
|
|
|
+ // alert('submit!');
|
|
|
|
+ // }
|
|
|
|
+ // else {
|
|
|
|
+ // console.log('error submit!!');
|
|
|
|
+ // return false;
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // this.$emit('relaxSure', paramsData);
|
|
},
|
|
},
|
|
handleRelaxCancel() {
|
|
handleRelaxCancel() {
|
|
this.$emit('relaxCancel');
|
|
this.$emit('relaxCancel');
|
|
},
|
|
},
|
|
|
|
+ handleEnterChang() {
|
|
|
|
+ const defaultCreativeLabel = this.configForm.creativeLabel;
|
|
|
|
+ if (defaultCreativeLabel && defaultCreativeLabel.length > 10) {
|
|
|
|
+ this.$message.error('创意标签最多只能十个字符,请重新填写');
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.creativeTag.push(this.configForm.creativeLabel);
|
|
|
|
+ this.configForm.creativeLabel = '';
|
|
|
|
+ let defaultList = this.creativeTag;
|
|
|
|
+ if (defaultList.length > 20) {
|
|
|
|
+ this.creativeTag = defaultList.splice(0, 20);
|
|
|
|
+ this.$message.error('最多创建20个');
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleTagsClose(removedTag) {
|
|
|
|
+ const tags = this.creativeInfo.creativeTag.filter(tag => tag !== removedTag);
|
|
|
|
+ this.creativeInfo.creativeTag = tags;
|
|
|
|
+ },
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|