Browse Source

账户配置页面 新增配置

jiayufei 4 năm trước cách đây
mục cha
commit
7ce0ee8fb9

+ 93 - 0
src/views/modules/account-config/account-config.less

@@ -30,4 +30,97 @@
         height: 600px !important;
         overflow-y: auto;
     }
+    .config-form-modal {
+        .avatar-uploader > .ant-upload {
+            width: 128px;
+            height: 128px;
+            position: relative;
+        }
+        .ant-upload-select-picture-card i {
+            font-size: 32px;
+            color: #999;
+        }
+        .ant-upload-select-picture-card .ant-upload-text {
+            margin-top: 8px;
+            color: #666;
+        }
+        .upload-img-class {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            .img-flex-url {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                img {
+                    max-width: 100%;
+                    max-height: 100%;
+                }
+            }
+        }
+        .cover-img-div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            line-height: 120px;;
+            background: rgba(10, 10, 10, 0.5);
+            z-index: 10000;
+            .delete-icon-class {
+                font-size: 20px;
+                color: #1890ff;
+            }
+        }
+        /deep/ .ant-form-item-control-wrapper {
+            width: 80%;
+        }
+        .common-input {
+            width: 150px;
+        }
+        .common-input-long {
+            width: 320px;
+        }
+        .acount-search-class {
+            width: 350px;
+        }
+        .form-line {
+            width: 100%;
+            height: 1px;
+            background: #eee;
+        }
+        .rock-title {
+            padding-left: 40px;
+            font-size: 18px;
+        }
+        .form-itrm-icon {
+            position: absolute;
+            top: 3px;
+            left: -95px;
+        }
+        .advers-title-class {
+            margin-left: 10px;
+            margin-right: 15px;
+        }
+        .adver-position-radio {
+            margin-left: 140px;
+            .creative-label-content {
+                width: 400px;
+                height: 200px;
+                padding: 10px;
+                border: 1px solid #eee;
+                .tag-select-class {
+                    margin-bottom: 15px;
+                }
+            }
+        }
+        .position-radio-change {
+            margin-bottom: 10px;
+            /deep/ .ant-checkbox-wrapper {
+                margin: 0 !important;
+            }
+        }
+    }
 }

+ 3 - 1
src/views/modules/account-config/account-config.vue

@@ -9,7 +9,8 @@
             >
                 <a-row class="grid-form-options">
                     <a-form-item
-                        class="grid-form-item" label="账户"
+                        class="grid-form-item"
+                        label="账户"
                         :colon="false"
                     >
                         <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
@@ -65,6 +66,7 @@
             />
         </div>
         <configuration-modal
+            v-if="relaxVisible"
             :title="accountModalTitle"
             :visible="relaxVisible"
             @relaxSure="handleRelaxSure"

+ 496 - 4
src/views/modules/account-config/components/configuration-modal.vue

@@ -1,18 +1,386 @@
 <template>
     <a-modal
-        :title="title === 'add' ? '新增配置' : '编辑配置'"
         v-if="visible"
+        :title="title === 'add' ? '新增配置' : '编辑配置'"
         :visible="visible"
         dialog-class="configuration-modal"
         @ok="handleRelaxSure"
         @cancel="handleRelaxCancel"
     >
         <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>
     </a-modal>
 </template>
 <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 {
     name: 'configuration-modal',
     props: {
@@ -25,19 +393,143 @@ export default {
             default: ''
         }
     },
+    components: {
+        AcountSearch,
+        SelectCheckAll
+    },
     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: {
+        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() {
+            console.log(this.configForm, 'configForm-configForm');
             const paramsData = {
                 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() {
             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>