|
@@ -1,15 +1,718 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
-chuangyi
|
|
|
|
|
|
+ <div class="newCreate">
|
|
|
|
+ <a-form :form="form">
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <div class="moduler-title">计划名称</div>
|
|
|
|
+ <div>
|
|
|
|
+ 广告计划名称:oCPM_07_31_11:02(1673699774773292)
|
|
|
|
+ <!-- <strong>{{groupInfo.campaignName||groupInfo.name}}</strong> -->
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 设置投放位置 -->
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <div class="moduler-title">设置投放位置</div>
|
|
|
|
+ <div class="ad-range">
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">广告位置</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['adposition', { initialValue:'smartInventory' }]" @change="adPositionChange">
|
|
|
|
+ <a-radio-button value="smartInventory">优选广告位</a-radio-button>
|
|
|
|
+ <a-radio-button value="inventoryType">按媒体指定位置</a-radio-button>
|
|
|
|
+ <a-radio-button value="sceneInventory">按场景指定位置</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <div style="width: 400px; margin-top: 24px;" v-if="getFormData('adposition')=='inventoryType'">
|
|
|
|
+ <div class="inventory-tags-lists-header">
|
|
|
|
+ <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"></a-checkbox>
|
|
|
|
+ <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="inventory-tags-lists-container">
|
|
|
|
+ <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="width: 400px; margin-top: 24px;" v-show="getFormData('adposition')=='sceneInventory'">
|
|
|
|
+ <div class="inventory-tags-lists-header">
|
|
|
|
+ <div class="inventory-tags-lists-name" style="padding-left:15px"><strong>位置选择</strong></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="inventory-tags-lists-container">
|
|
|
|
+ <a-radio-group v-decorator="['sceneInventory', { initialValue:'VIDEO_SCENE' }]" >
|
|
|
|
+ <a-radio :style="radioStyle" value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio>
|
|
|
|
+ <a-radio :style="radioStyle" value="FEED_SCENE">信息流场景广告位</a-radio>
|
|
|
|
+ <a-radio :style="radioStyle" value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 制作创意 -->
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <div class="moduler-title">制作创意</div>
|
|
|
|
+ <div class="ad-range">
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">创意方式</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['creativeWay', { initialValue:'customCreativity' }]">
|
|
|
|
+ <a-radio-button value="proceduralCreativity">程序化创意</a-radio-button>
|
|
|
|
+ <a-radio-button value="customCreativity">自定义创意</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item" v-if="getFormData('creativeWay')=='proceduralCreativity'">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">素材添加方式</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['creativeWay', { initialValue:'DEFAULT' }]">
|
|
|
|
+ <a-radio-button value="proceduralCreativity">自定义上传</a-radio-button>
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">暂未开启该功能</template>
|
|
|
|
+ <a-radio-button value="customCreativity" :disabled="true">选择程序化创意包</a-radio-button>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">创意内容</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <p v-if="getFormData('creativeWay')=='customCreativity'">创意个数: <strong>{{}}/10</strong></p>
|
|
|
|
+ <p v-else>
|
|
|
|
+ <span>图片创意个数: <strong>{{}}/10</strong></span>
|
|
|
|
+ <span>视频创意个数: <strong>{{}}/6</strong></span>
|
|
|
|
+ </p>
|
|
|
|
+ <div class="bui-tabs-scroll">
|
|
|
|
+ <a-tabs
|
|
|
|
+
|
|
|
|
+ :style="{ height: '500px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}"
|
|
|
|
+
|
|
|
|
+ >
|
|
|
|
+ <a-tab-pane v-for="i in 10" :key="i" :tab="`Tab-${i}`">
|
|
|
|
+ <a-button type='primary' @click="addCreate">
|
|
|
|
+ <a-icon type="plus" />添加创意
|
|
|
|
+ </a-button>
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ </a-tabs>
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">品牌主页</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]">
|
|
|
|
+ <a-radio-button value="DEFAULT">不开启</a-radio-button>
|
|
|
|
+ <a-radio-button value="UNION">开启抖音主页</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div> -->
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">应用下载详情页</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input v-decorator="['webUrl', {rules:validationRules.url}]" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">行动号召</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-select default-value="a1" style="width: 480px" >
|
|
|
|
+ <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
|
+ {{ (i + 9).toString(36) + i }}
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">应用名</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input placeholder="请输入2-10个字的应用名," :maxLength='10' v-decorator="['appName']" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">副标题</div>
|
|
|
|
+ <!-- <div class="required-item"></div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input placeholder="请输入2-12个字的副标题," :maxLength='12' v-decorator="['advancedCreativeTitle']" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">广告评论</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['isCommentDisable', { initialValue:0 }]">
|
|
|
|
+ <a-radio-button :value="0">关闭</a-radio-button>
|
|
|
|
+ <a-radio-button :value="1">开启</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">创意展示</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['creativeDisplayMode', { initialValue:'CREATIVE_DISPLAY_MODE_CTR' }]">
|
|
|
|
+ <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>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 创意分类 -->
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <div class="moduler-title">创意分类</div>
|
|
|
|
+ <div class="ad-range">
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">创意分类</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-cascader
|
|
|
|
+ :options="createOptions"
|
|
|
|
+ v-model="createType"
|
|
|
|
+ placeholder="请选择创意分类"
|
|
|
|
+ />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">创意标签</div>
|
|
|
|
+ <div class="required-item"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]">
|
|
|
|
+ <a-radio-button value="DEFAULT">程序化创意</a-radio-button>
|
|
|
|
+ <a-radio-button value="UNION">自定义创意</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 监测链接 -->
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <div class="moduler-title">监测链接</div>
|
|
|
|
+ <div class="ad-range">
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">展示</div>
|
|
|
|
+ <!-- <div class="required-item"></div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input v-decorator="['trackUrl', {rules:validationRules.url}]" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">点击</div>
|
|
|
|
+ <!-- <div class="required-item"></div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input v-decorator="['actionTrackUrl', {rules:validationRules.url}]" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">视频播放</div>
|
|
|
|
+ <!-- <div class="required-item"></div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input v-decorator="['videoPlayTrackUrl', {rules:validationRules.url}]" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">视频播完</div>
|
|
|
|
+ <!-- <div class="required-item"></div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input v-decorator="['videoPlayDoneTrackUrl', {rules:validationRules.url}]" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row-item">
|
|
|
|
+ <div class="hint-item"></div>
|
|
|
|
+ <div class="label-item">
|
|
|
|
+ <div class="text-item">视频有效播放</div>
|
|
|
|
+ <!-- <div class="required-item"></div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-item">
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-input v-decorator="['videoPlayEffectiveTrackUrl', {rules:validationRules.url}]" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <!-- <div class="moduler-title"></div> -->
|
|
|
|
+ <div>
|
|
|
|
+ 当前账户:
|
|
|
|
+ <strong>{{accountInfo.title}}</strong>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 操作 -->
|
|
|
|
+ <div class="moduler">
|
|
|
|
+ <!-- <div class="moduler-title">计划名称</div> -->
|
|
|
|
+ <div class="opt">
|
|
|
|
+ <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
|
|
|
|
+ <a-button type="primary" style="margin-right:15px" @click="goSave">保存并关闭</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-form>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
|
+import qs from 'qs'
|
|
|
|
+const plainOptions = [
|
|
|
|
+ {
|
|
|
|
+ value:'INVENTORY_FEED',
|
|
|
|
+ label:'今日头条'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'INVENTORY_VIDEO_FEED',
|
|
|
|
+ label:'西瓜视频'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'INVENTORY_AWEME_FEED',
|
|
|
|
+ label:'抖音'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'INVENTORY_HOTSOON_FEED',
|
|
|
|
+ label:'抖音火山版'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'INVENTORY_UNION_SLOT',
|
|
|
|
+ label:'穿山甲'
|
|
|
|
+ },
|
|
|
|
+];
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
-
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ planInfo:{},
|
|
|
|
+ groupInfo:{},
|
|
|
|
+ accountInfo:{},
|
|
|
|
+ radioStyle: {
|
|
|
|
+ display: 'block',
|
|
|
|
+ height: '30px',
|
|
|
|
+ lineHeight: '30px',
|
|
|
|
+ padding:'0 15px'
|
|
|
|
+ },
|
|
|
|
+ checkedList: [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: false,
|
|
|
|
+ plainOptions,
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ positionvalue:undefined,
|
|
|
|
+ validationRules: {
|
|
|
|
+ url: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: '下载链接必须填写',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ validator: this.validateURL,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ createType:undefined,//创意分类的页面
|
|
|
|
+ createOptions:[],//创意分类的数组
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onChange(checkedList) {
|
|
|
|
+ this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
|
|
|
|
+ this.checkAll = checkedList.length === plainOptions.length;
|
|
|
|
+ },
|
|
|
|
+ onCheckAllChange(e) {
|
|
|
|
+ let valueOption=[];
|
|
|
|
+ this.plainOptions.forEach((item)=>{
|
|
|
|
+ valueOption.push(item.value)
|
|
|
|
+ })
|
|
|
|
+ Object.assign(this, {
|
|
|
|
+ checkedList: e.target.checked ? valueOption : [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: e.target.checked,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // tab切换
|
|
|
|
+ tabcallback(){
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 添加创意
|
|
|
|
+ addCreate(){
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // //获取表单的某一个属性值
|
|
|
|
+ getFormData(className) {
|
|
|
|
+ return this.form.getFieldValue(className)
|
|
|
|
+ },
|
|
|
|
+ // 广告位置选择改变
|
|
|
|
+ adPositionChange(val){
|
|
|
|
+ console.log(val)
|
|
|
|
+ if(val.target.value=='smartInventory'){
|
|
|
|
+ this.form.setFieldsValue({
|
|
|
|
+ smartInventory:1,
|
|
|
|
+ inventoryType:[],
|
|
|
|
+ sceneInventory:''
|
|
|
|
+ })
|
|
|
|
+ }else if(val.target.value=='inventoryType'){
|
|
|
|
+ this.form.setFieldsValue({
|
|
|
|
+ smartInventory:0,
|
|
|
|
+ inventoryType:this.checkedList,
|
|
|
|
+ sceneInventory:''
|
|
|
|
+ })
|
|
|
|
+ }else if(val.target.value=='sceneInventory'){
|
|
|
|
+ this.form.setFieldsValue({
|
|
|
|
+ smartInventory:0,
|
|
|
|
+ inventoryType:[],
|
|
|
|
+ })
|
|
|
|
+ console.log(this.getFormData('sceneInventory'))
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 注册表单的字段
|
|
|
|
+ initFormValue(){
|
|
|
|
+ this.form.getFieldDecorator('inventoryType')
|
|
|
|
+ this.form.getFieldDecorator('smartInventory')
|
|
|
|
+ // this.form.getFieldDecorator('sceneInventory')
|
|
|
|
+ },
|
|
|
|
+ // 验证网址
|
|
|
|
+ IsURL(res) {
|
|
|
|
+ // var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
|
|
|
|
+ var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
|
|
|
|
+ var re = new RegExp(strRegex)
|
|
|
|
+ // console.log(re.test(res))
|
|
|
|
+ if (re.test(res)) {
|
|
|
|
+ return true
|
|
|
|
+ } else {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ validateURL(rule, value, callback) {
|
|
|
|
+ // console.log(rule, value, callback);
|
|
|
|
+
|
|
|
|
+ if (this.IsURL(value)) {
|
|
|
|
+ callback()
|
|
|
|
+ } else if (value && !this.IsURL(value)) {
|
|
|
|
+ callback('链接地址无法访问,请正确输入')
|
|
|
|
+ } else {
|
|
|
|
+ // callback('下载链接必须填写')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ goBack(){
|
|
|
|
+ this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
|
|
|
|
+ this.$bus.$emit('remove', '/modules/BatchCreate/newCreate')
|
|
|
|
+ },
|
|
|
|
+ goSave(){
|
|
|
|
+ this.$nextTick(()=>{
|
|
|
|
+
|
|
|
|
+ if (this.validatorName()) {
|
|
|
|
+ this.form.validateFieldsAndScroll((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ console.log('Received values of form: ', values)
|
|
|
|
+ console.log(this.names)
|
|
|
|
+ values.accountId = this.groupInfo.accountId
|
|
|
|
+ values.campaignId = this.groupInfo.id;
|
|
|
|
+
|
|
|
|
+ // postAction('/ctop/byteDanceAdvertisePlan/add', {
|
|
|
|
+ // names: this.names,
|
|
|
|
+ // landingType: this.groupInfo.landingType,
|
|
|
|
+ // ...values,
|
|
|
|
+ // ...this.directPackageValue
|
|
|
|
+ // }).then((res) => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ // if (res.success) {
|
|
|
|
+ // if(res.code==0){
|
|
|
|
+ // this.$message.success('广告计划创建成功,2s后将跳转到新建计划页面')
|
|
|
|
+ // let planInfo=JSON.stringify({...values,...this.directPackageValue,names:this.names,landingType: this.groupInfo.landingType,})
|
|
|
|
+ // localStorage.setItem('planInfo',planInfo) ;
|
|
|
|
+ // setTimeout(()=>{
|
|
|
|
+ // this.$router.replace(`/modules/BatchCreate/newIdea`)
|
|
|
|
+ // },2000)
|
|
|
|
+ // }else{
|
|
|
|
+ // this.$message.error(res.message)
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // } else {
|
|
|
|
+ // this.$message.error('网络开小差了,等会再试试')
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ }else{
|
|
|
|
+ console.log(err)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.initFormValue();
|
|
|
|
+ this.$bus.$emit('remove', '/modules/BatchCreate/newPlan')
|
|
|
|
+ let planInfo = localStorage.getItem('planInfo')
|
|
|
|
+ // console.log(planInfo)
|
|
|
|
+ if (planInfo) {
|
|
|
|
+ this.planInfo = JSON.parse(planInfo)
|
|
|
|
+ }
|
|
|
|
+ console.log(this.planInfo)
|
|
|
|
+ let groupInfo = localStorage.getItem('groupInfo')
|
|
|
|
+ // console.log(groupInfo)
|
|
|
|
+ if (groupInfo) {
|
|
|
|
+ this.groupInfo = JSON.parse(groupInfo)
|
|
|
|
+ }
|
|
|
|
+ let accountInfo = localStorage.getItem('accountInfo')
|
|
|
|
+ // console.log(groupInfo)
|
|
|
|
+ if (accountInfo) {
|
|
|
|
+ this.accountInfo = JSON.parse(accountInfo)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ getAction('/bytedance/batch/action/text',{
|
|
|
|
+ accountId:this.planInfo.accountId,
|
|
|
|
+ landType:this.planInfo.landingType
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
+<style lang="scss" >
|
|
|
|
+.ant-tooltip-inner,
|
|
|
|
+.ant-tooltip,
|
|
|
|
+.ant-tooltip-arrow::before {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ color: #333;
|
|
|
|
+}
|
|
|
|
+.ant-tooltip-inner {
|
|
|
|
+ span {
|
|
|
|
+ display: block;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.ant-tooltip {
|
|
|
|
+ max-width: 450px;
|
|
|
|
+}
|
|
|
|
+.newCreate {
|
|
|
|
+ .ant-radio-button-wrapper {
|
|
|
|
+ min-width: 80px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .ant-form-item {
|
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-variant: tabular-nums;
|
|
|
|
+ line-height: 1.5;
|
|
|
|
+ list-style: none;
|
|
|
|
+ -webkit-font-feature-settings: 'tnum';
|
|
|
|
+ font-feature-settings: 'tnum';
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ }
|
|
|
|
+ .directedBody {
|
|
|
|
+ .ant-form-item {
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .ant-checkbox-wrapper,.ant-checkbox-group-item{
|
|
|
|
+ display: block;
|
|
|
|
+ padding: 5px 15px;
|
|
|
|
+ }
|
|
|
|
+ .ant-checkbox-wrapper:first-child{
|
|
|
|
+ padding: 0 15px 5px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-
|
|
|
|
|
|
+.newCreate {
|
|
|
|
+ font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
|
|
|
|
+ color: #333;
|
|
|
|
+ ul,
|
|
|
|
+ li {
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+ .moduler {
|
|
|
|
+ background: #fff;
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 32px 24px 48px 32px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
|
|
|
|
+ .moduler-title {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+ .row-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-bottom: 32px;
|
|
|
|
+ }
|
|
|
|
+ .row-item:last-of-type {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+ .row-item .hint-item {
|
|
|
|
+ width: 24px;
|
|
|
|
+ min-width: 24px;
|
|
|
|
+ align-self: flex-start;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ }
|
|
|
|
+ .row-item .label-item {
|
|
|
|
+ position: relative;
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+ align-self: flex-start;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ margin-top: 7px;
|
|
|
|
+ width: 80px;
|
|
|
|
+ min-width: 80px;
|
|
|
|
+ .text-item {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ width: 60px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .row-item .required-item {
|
|
|
|
+ width: 4px;
|
|
|
|
+ height: 4px;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ background: #f45858;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 10px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ }
|
|
|
|
+ .row-item .input-item {
|
|
|
|
+ min-width: 480px;
|
|
|
|
+ position: relative;
|
|
|
|
+ // height: 35px;
|
|
|
|
+ .tip {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: tomato;
|
|
|
|
+ }
|
|
|
|
+ .inventory-tags-lists-header {
|
|
|
|
+ background-color: #F8F9FA;
|
|
|
|
+ border: 1px solid #E4E9ED;
|
|
|
|
+ height: 36px;
|
|
|
|
+ line-height: 33px;
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+ .inventory-tags-lists-container {
|
|
|
|
+ border: 1px solid #E4E9ED;
|
|
|
|
+ margin-top: -1px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ padding: 4px 0px;
|
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
|
+ }
|
|
|
|
+ .inventory-tags-lists-item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 37px;
|
|
|
|
+ line-height: 37px;
|
|
|
|
+ padding-left: 12px;
|
|
|
|
+ padding-right: 12px;
|
|
|
|
+ display: flex;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #333;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .opt {
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|