|
@@ -0,0 +1,801 @@
|
|
|
+<style scoped lang="scss">
|
|
|
+img {
|
|
|
+ height: 32px !important;
|
|
|
+}
|
|
|
+.logo {
|
|
|
+ padding-left: 24px;
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #CED2D9;
|
|
|
+ // line-height: 22px;
|
|
|
+ margin-left: 20px;
|
|
|
+ padding-left: 21px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .name::before {
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 18px;
|
|
|
+ background: rgba(255, 255, 255, 0.31);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -9px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.chartBox {
|
|
|
+ margin-top: 80px;
|
|
|
+ .chartBody {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.new-batch .ant-card-head-title {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.create-info .ant-form-item {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+@media screen and (max-width: 1200px) {
|
|
|
+ // 这里写对应要修改的样式如:
|
|
|
+ .new-batch .el-step__title {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div ref="questionnaireBox" class="new-batch">
|
|
|
+ <a-layout-header
|
|
|
+ class="ant-header-fixedHeader ant-header-side-opened"
|
|
|
+ :style="{ padding: '0' }"
|
|
|
+ style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
|
|
|
+ >
|
|
|
+ <div :class="['top-nav-header-index', theme]">
|
|
|
+ <div class="header-index-wide">
|
|
|
+ <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="~@/assets/logoNew1.png" alt="logo" />
|
|
|
+ <span class="name">有腾投放管家</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-layout-header>
|
|
|
+ <div class="chartBox" style="padding: 0 20px">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
|
|
|
+ <a-card class="search-box" style="height: 90vh">
|
|
|
+ <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
|
|
|
+ <el-step v-for="(item, index) in stepsArr" :key="index" :title="item.title" @click.native="jump(index)">
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
|
|
|
+ <a-form :form="form" @submit="handleSubmit" layout="horizontal" v-bind="formItemLayout">
|
|
|
+ <a-card class="search-box step-jump" title="创建规则">
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="选择广告账户">
|
|
|
+ <Treeselect :appId.sync="accountId" :multiple="false" request="2,4" ref="treeSelect" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="营销目标">
|
|
|
+ <a-radio-group
|
|
|
+ @change="typeChange"
|
|
|
+ v-decorator="[
|
|
|
+ 'campaignType',
|
|
|
+ { rules: [{ required: true, message: 'error:' }], initialValue: '2' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="2">提升应用安装</a-radio-button>
|
|
|
+ <a-radio-button value="3" disabled>获取电商下单</a-radio-button>
|
|
|
+ <a-radio-button value="4" disabled>推广品牌活动</a-radio-button>
|
|
|
+ <a-radio-button value="5">收集销售线索</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="推广平台">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['systemType', { rules: [{ required: true, message: '' }], initialValue: 'iOS' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="iOS">iOS</a-radio-button>
|
|
|
+ <a-radio-button value="Android">Android</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="是否新建计划">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['newClick', { rules: [{ required: true, message: '' }], initialValue: '1' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="1">是</a-radio-button>
|
|
|
+ <a-radio-button value="2">否</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row v-if="!getData('newClick', 'form') || getData('newClick', 'form') == '1'">
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="规则配置">
|
|
|
+ <a-button type="primary" @click="ruleConfigVisible = true"> 规则配置 </a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row v-else-if="getData('newClick', 'form') == '2'">
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="选择广告计划" selfUpdate>
|
|
|
+ <a-input id="error" placeholder="unavailable choice" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ <a-card class="search-box step-jump create-info">
|
|
|
+ <div slot="title">
|
|
|
+ 广告组基本信息 <a-button type="primary" style="float: right" @click="showDrawer"> 编辑 </a-button>
|
|
|
+ </div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="投放范围"> <!-- {{}} -->默认 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
|
|
|
+ <a-form-item label="计费方式"> <!--按展示付费(oCPM)-->无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="单日预算"> <!-- {{}} -->无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
|
|
|
+ <a-form-item label="转化目标出价"> 无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="投放时段"> <!-- {{}} -->无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
|
|
|
+ <a-form-item label="场景广告位"> 无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="排期"> <!-- {{}} -->无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
|
|
|
+ <a-form-item label="深度转化目标"> 无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="14" :md="24">
|
|
|
+ <a-form-item label="优化目标"> <!-- {{}} -->无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
|
|
|
+ <a-form-item label="深度转化目标出价"> 无 </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ <a-card class="search-box step-jump" style="min-height: 600px" title="定向包"> </a-card>
|
|
|
+ <a-card class="search-box step-jump" style="min-height: 600px" title="创意基本信息"> </a-card>
|
|
|
+ <a-card class="search-box step-jump" style="min-height: 600px" title="创意素材"> </a-card>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-bottom: 100px">
|
|
|
+ <a-button type="primary"> 预览应用/链接 </a-button>
|
|
|
+ <div>
|
|
|
+ <a-button type="primary" style="margin-right: 15px"> 预览广告组 </a-button>
|
|
|
+ <a-button> 清空配置 </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <!-- 规则配置 -->
|
|
|
+ <a-modal
|
|
|
+ title="规则配置"
|
|
|
+ v-model="ruleConfigVisible"
|
|
|
+ :width="1000"
|
|
|
+ @ok="ruleConfigFormOk"
|
|
|
+ @cancel="ruleConfigFormCancel"
|
|
|
+ >
|
|
|
+ <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="广告分组规则">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['groupRule', { rules: [{ required: true, message: '' }], initialValue: '1' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="1">按定向包分组</a-radio-button>
|
|
|
+ <a-radio-button value="2">按创意分组</a-radio-button>
|
|
|
+ <a-radio-button value="3" disabled>按落地页分组</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="广告计划单日预算">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['budgetType', { rules: [{ required: true, message: '' }], initialValue: '1' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="1">不限</a-radio-button>
|
|
|
+ <a-radio-button value="2">统一预算</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16" v-if="getData('budgetType', 'ruleConfigForm') == '2'">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="" v-bind="tailFormItemLayout" selfUpdate>
|
|
|
+ <a-input-number
|
|
|
+ v-decorator="[
|
|
|
+ 'dayBudget',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="不小于500, 不超过100000000,仅支持输入自然数"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="计划默认状态">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['campaignStatus', { rules: [{ required: true, message: '' }], initialValue: '0' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="1">开启</a-radio-button>
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16" v-if="!getData('status', 'ruleConfigForm') || getData('status', 'ruleConfigForm') == '2'">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="是否定时开始计划">
|
|
|
+ <a-radio-group v-decorator="['isTime', { rules: [{ required: true, message: '' }], initialValue: '2' }]">
|
|
|
+ <a-radio-button value="1">是</a-radio-button>
|
|
|
+ <a-radio-button value="2">否</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" :pull="6" v-if="getData('isTime', 'ruleConfigForm') == '1'">
|
|
|
+ <a-form-item label="选择时间">
|
|
|
+ <a-date-picker
|
|
|
+ v-decorator="['timeStart', { rules: [{ required: true, message: '' }] }]"
|
|
|
+ show-time
|
|
|
+ placeholder="选择开启时间"
|
|
|
+ @change="onChange"
|
|
|
+ @ok="onOk"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="广告组默认状态">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['unitStatus', { rules: [{ required: true, message: '' }], initialValue: '1' }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="1">开启</a-radio-button>
|
|
|
+ <a-radio-button value="2">关闭</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="广告计划名称">
|
|
|
+ <a-input
|
|
|
+ id="campaignName"
|
|
|
+ v-decorator="[
|
|
|
+ 'campaignName',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '广告计划名称必填' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="" v-bind="tailFormItemLayout">
|
|
|
+ <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'ruleConfigForm', 'campaignName')"
|
|
|
+ >+应用名称</a-tag
|
|
|
+ >
|
|
|
+ <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'ruleConfigForm', 'campaignName')">+定向包</a-tag>
|
|
|
+ <a-tag color="#2db7f5" @click="getChangeAll('日期', 'ruleConfigForm', 'campaignName')">+日期</a-tag>
|
|
|
+ <a-tag color="#2db7f5" @click="getChangeAll('渠道号(应用标记)', 'ruleConfigForm', 'campaignName')"
|
|
|
+ >+渠道号(应用标记)</a-tag
|
|
|
+ >
|
|
|
+ <a-tag color="#2db7f5" @click="getChangeAll('标号', 'ruleConfigForm', 'campaignName')">+标号</a-tag>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-item label="" v-bind="tailFormItemLayout">
|
|
|
+ <!-- <a-checkbox v-decorator="['keep']"> 存为预设 </a-checkbox> -->
|
|
|
+ <a-checkbox-group v-decorator="['keep']">
|
|
|
+ <a-checkbox value="1"> 存为预设 </a-checkbox>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ <!-- 规则配置结束 -->
|
|
|
+
|
|
|
+ <!-- 广告组基本信息预设 -->
|
|
|
+ <a-drawer
|
|
|
+ title="广告组基本信息"
|
|
|
+ :width="720"
|
|
|
+ :visible="visible"
|
|
|
+ :body-style="{ paddingBottom: '80px' }"
|
|
|
+ @close="onClose"
|
|
|
+ >
|
|
|
+ <a-form :form="formUnit" layout="vertical" hide-required-mark>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="Name">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'name',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'Please enter user name' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ placeholder="Please enter user name"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="Url">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'url',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'please enter url' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ style="width: 100%"
|
|
|
+ addon-before="http://"
|
|
|
+ addon-after=".com"
|
|
|
+ placeholder="please enter url"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="Owner">
|
|
|
+ <a-select
|
|
|
+ v-decorator="[
|
|
|
+ 'owner',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'Please select an owner' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ placeholder="Please a-s an owner"
|
|
|
+ >
|
|
|
+ <a-select-option value="xiao"> Xiaoxiao Fu </a-select-option>
|
|
|
+ <a-select-option value="mao"> Maomao Zhou </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="Type">
|
|
|
+ <a-select
|
|
|
+ v-decorator="[
|
|
|
+ 'type',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'Please choose the type' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ placeholder="Please choose the type"
|
|
|
+ >
|
|
|
+ <a-select-option value="private"> Private </a-select-option>
|
|
|
+ <a-select-option value="public"> Public </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="Approver">
|
|
|
+ <a-select
|
|
|
+ v-decorator="[
|
|
|
+ 'approver',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'Please choose the approver' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ placeholder="Please choose the approver"
|
|
|
+ >
|
|
|
+ <a-select-option value="jack"> Jack Ma </a-select-option>
|
|
|
+ <a-select-option value="tom"> Tom Liu </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="DateTime">
|
|
|
+ <a-date-picker
|
|
|
+ v-decorator="[
|
|
|
+ 'dateTime',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'Please choose the dateTime' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ style="width: 100%"
|
|
|
+ :get-popup-container="(trigger) => trigger.parentNode"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="Description">
|
|
|
+ <a-textarea
|
|
|
+ v-decorator="[
|
|
|
+ 'description',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: 'Please enter url description' }],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="please enter url description"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ width: '100%',
|
|
|
+ borderTop: '1px solid #e9e9e9',
|
|
|
+ padding: '10px 16px',
|
|
|
+ background: '#fff',
|
|
|
+ textAlign: 'right',
|
|
|
+ zIndex: 1,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-button :style="{ marginRight: '8px' }" @click="onClose"> Cancel </a-button>
|
|
|
+ <a-button type="primary" @click="onClose"> Submit </a-button>
|
|
|
+ </div>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import UserMenu from '../tools/UserMenu'
|
|
|
+// import SMenu from '../menu/'
|
|
|
+import Logo from '@/components/tools/Logo.vue'
|
|
|
+
|
|
|
+import { mixin } from '@/utils/mixin.js'
|
|
|
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
|
|
|
+export default {
|
|
|
+ name: 'GlobalHeader',
|
|
|
+ components: {
|
|
|
+ // UserMenu,
|
|
|
+ // SMenu,
|
|
|
+ Logo,
|
|
|
+ Treeselect,
|
|
|
+ },
|
|
|
+ mixins: [mixin],
|
|
|
+ props: {
|
|
|
+ mode: {
|
|
|
+ type: String,
|
|
|
+ // sidemenu, topmenu
|
|
|
+ default: 'sidemenu',
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: 'dark',
|
|
|
+ },
|
|
|
+ collapsed: {
|
|
|
+ type: Boolean,
|
|
|
+ required: false,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ device: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: 'desktop',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ accountId: '',
|
|
|
+ ruleConfigVisible: false, //规则配置的模态框
|
|
|
+ ruleConfigForm: this.$form.createForm(this),
|
|
|
+ visible: false, //广告组信息配置右侧抽屉
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ formUnit: this.$form.createForm(this),
|
|
|
+ headerBarFixed: false,
|
|
|
+ //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
|
|
+ topMenuStyle: {
|
|
|
+ headerIndexLeft: {},
|
|
|
+ topNavHeader: {},
|
|
|
+ headerIndexRight: {},
|
|
|
+ topSmenuStyle: {},
|
|
|
+ },
|
|
|
+ activeStep: 0,
|
|
|
+ stepsArr: [
|
|
|
+ { title: '创建规则' },
|
|
|
+ { title: '广告组基本信息' },
|
|
|
+ { title: '定向包' },
|
|
|
+ { title: '创意基本信息' },
|
|
|
+ { title: '创意素材' },
|
|
|
+ // { title: '转化跟踪' },
|
|
|
+ // { title: '预览提交' },
|
|
|
+ ],
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 5 },
|
|
|
+ wrapperCol: { span: 19 },
|
|
|
+ },
|
|
|
+ tailFormItemLayout: {
|
|
|
+ wrapperCol: {
|
|
|
+ sm: {
|
|
|
+ span: 16,
|
|
|
+ offset: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
|
|
+ mounted() {
|
|
|
+ console.log(this.$route.query)
|
|
|
+ if (this.$route.query.accountId) {
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ this.$nextTick(function () {
|
|
|
+ // this.accountId = 23212
|
|
|
+ window.addEventListener('scroll', this.onScroll)
|
|
|
+ const that = this
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ window.screenWidth = document.body.clientWidth
|
|
|
+ that.screenWidth = window.screenWidth
|
|
|
+ })()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //rules
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
+ if (value == '' || value < 500 || value >= 100000000) {
|
|
|
+ callback('不小于500, 不超过100000000,仅支持输入自然数')
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSubmit(e) {},
|
|
|
+
|
|
|
+ typeChange() {},
|
|
|
+ onChange(link) {
|
|
|
+ console.log('Anchor:OnChange', link)
|
|
|
+ },
|
|
|
+
|
|
|
+ showDrawer() {
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ onClose() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ onChange(value, dateString) {
|
|
|
+ console.log('Selected Time: ', value)
|
|
|
+ console.log('Formatted Selected Time: ', dateString)
|
|
|
+ },
|
|
|
+ onOk(value) {
|
|
|
+ console.log('onOk: ', value)
|
|
|
+ },
|
|
|
+ ruleConfigFormOk() {},
|
|
|
+ ruleConfigFormCancel() {
|
|
|
+ this.ruleConfigVisible = false
|
|
|
+ this.ruleConfigForm.resetFields()
|
|
|
+ },
|
|
|
+ getChangeAll(type, form, field) {
|
|
|
+ var node = document.getElementById(field)
|
|
|
+
|
|
|
+ console.log(node)
|
|
|
+ var v = '{{' + type + '}}-'
|
|
|
+ if (document.selection) {
|
|
|
+ //IE
|
|
|
+ node.focus()
|
|
|
+ var sel = document.selection.createRange()
|
|
|
+ sel.text = v
|
|
|
+ sel.select()
|
|
|
+ if (field == 'campaignName') {
|
|
|
+ this[form].setFieldsValue({ campaignName: sel.text })
|
|
|
+ }
|
|
|
+ } else if (node.selectionStart || node.selectionStart == '0') {
|
|
|
+ //MOZILLA/GOOGLE
|
|
|
+ var startPos = node.selectionStart
|
|
|
+ var endPos = node.selectionEnd
|
|
|
+ var restoreTop = node.scrollTop
|
|
|
+ node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
|
|
|
+ if (restoreTop > 0) {
|
|
|
+ node.scrollTop = restoreTop
|
|
|
+ }
|
|
|
+ if (field == 'campaignName') {
|
|
|
+ this[form].setFieldsValue({ campaignName: node.value })
|
|
|
+ }
|
|
|
+ node.focus()
|
|
|
+ node.selectionStart = startPos + v.length
|
|
|
+ node.selectionEnd = startPos + v.length
|
|
|
+ // this.campaignName = node.value
|
|
|
+ } else {
|
|
|
+ //OTHER
|
|
|
+ node.value += v
|
|
|
+ console.log(node.value)
|
|
|
+ if (field == 'campaignName') {
|
|
|
+ this[form].setFieldsValue({ campaignName: node.value })
|
|
|
+ }
|
|
|
+ node.focus()
|
|
|
+ // this.campaignName = node.value
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onScroll() {
|
|
|
+ // var box = document.getElementById('box')
|
|
|
+ // var t = document.documentElement.scrollTop || document.body.scrollTop
|
|
|
+ // box.style.top = t + 'px'
|
|
|
+
|
|
|
+ var jump = document.querySelectorAll('.step-jump')
|
|
|
+ var distance =
|
|
|
+ document.documentElement.scrollTop + 200 || window.pageYOffset + 200 || document.body.scrollTop + 200
|
|
|
+ console.log(distance)
|
|
|
+ jump.forEach((item, index) => {
|
|
|
+ if (distance >= item.offsetTop) {
|
|
|
+ this.activeStep = index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 锚点点击
|
|
|
+ jump(index) {
|
|
|
+ console.log(index)
|
|
|
+ this.activeStep = index
|
|
|
+ // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
|
|
|
+ // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
|
|
|
+ let jump = document.querySelectorAll('.step-jump')
|
|
|
+ // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
|
|
|
+ let total = jump[index].offsetTop
|
|
|
+ console.log(total)
|
|
|
+ // scrollTop滚动条距离页面的距离
|
|
|
+ let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
|
|
|
+ // console.log(distance)
|
|
|
+ // 平滑滚动,时长500ms,每10ms一跳,共50跳
|
|
|
+ let step = total / 50
|
|
|
+ if (total > distance) {
|
|
|
+ smoothDown()
|
|
|
+ } else {
|
|
|
+ let newTotal = distance - total
|
|
|
+ step = newTotal / 50
|
|
|
+ smoothUp()
|
|
|
+ }
|
|
|
+ function smoothDown() {
|
|
|
+ if (distance < total) {
|
|
|
+ distance += step
|
|
|
+ document.body.scrollTop = distance
|
|
|
+ document.documentElement.scrollTop = distance
|
|
|
+ window.pageYOffset = distance
|
|
|
+ setTimeout(smoothDown, 5)
|
|
|
+ } else {
|
|
|
+ document.body.scrollTop = total
|
|
|
+ document.documentElement.scrollTop = total
|
|
|
+ window.pageYOffset = total
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function smoothUp() {
|
|
|
+ if (distance > total) {
|
|
|
+ distance -= step
|
|
|
+ document.body.scrollTop = distance
|
|
|
+ document.documentElement.scrollTop = distance
|
|
|
+ window.pageYOffset = distance
|
|
|
+ setTimeout(smoothUp, 10)
|
|
|
+ } else {
|
|
|
+ document.body.scrollTop = total
|
|
|
+ document.documentElement.scrollTop = total
|
|
|
+ window.pageYOffset = total
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getData(className, formName) {
|
|
|
+ return this[formName].getFieldValue(className)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
|
|
+
|
|
|
+$height: 59px;
|
|
|
+.layout .header .user-wrapper .action .anticon,
|
|
|
+.layout .top-nav-header-index .user-wrapper .action .anticon {
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.layout .header .user-wrapper .action .anticon,
|
|
|
+.layout .top-nav-header-index .user-wrapper .action .anticon {
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.layout {
|
|
|
+ .top-nav-header-index {
|
|
|
+ .header-index-wide {
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .ant-menu.ant-menu-horizontal {
|
|
|
+ height: $height;
|
|
|
+ line-height: $height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .trigger {
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 17px;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ z-index: 2;
|
|
|
+ color: #999;
|
|
|
+ height: $height;
|
|
|
+ background-color: #1890ff;
|
|
|
+ transition: background 300ms;
|
|
|
+
|
|
|
+ /* dark 样式 */
|
|
|
+ &.dark {
|
|
|
+ color: #000000;
|
|
|
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header,
|
|
|
+ .top-nav-header-index {
|
|
|
+ &.dark .trigger:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ant-layout-header {
|
|
|
+ height: $height;
|
|
|
+ line-height: $height;
|
|
|
+}
|
|
|
+
|
|
|
+/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
|
|
+</style>
|