Browse Source

账户配置页面 新增配置

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

+ 80 - 60
src/views/modules/account-config/components/configuration-modal.vue

@@ -21,8 +21,8 @@
                 </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-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 ref="name" label="账户日预算" prop="name">
@@ -34,30 +34,31 @@
                             $refs.name.onFieldBlur();
                         }
                         "
-                    />
-                    元
+                        placeholder="请输入账户日预算"
+                    /> 
                 </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-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 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-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="广告组名称" prop="adverName">
-                    <a-input class="common-input" v-model="configForm.adverName"/>
+                    <a-input class="common-input" v-model="configForm.adverName" placeholder="请输入广告组名称"/>
                 </a-form-model-item>
                 <a-form-model-item label="广告计划名称">
-                    <a-input class="common-input" v-model="configForm.adverPlaneName"/>
+                    <a-input class="common-input" v-model="configForm.adverPlaneName" placeholder="请输入广告计划名称"/>
                 </a-form-model-item>
                 <a-form-model-item label="创建数量">
                     <span class="advers-title-class">广告组数量</span>
@@ -76,8 +77,9 @@
                 <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-button value="a">转量化</a-radio-button>
+                        <a-radio-button value="b">点击量</a-radio-button>
+                        <a-radio-button value="b">展示量</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
                 <a-form-model-item label="下载方式">
@@ -87,16 +89,16 @@
                     </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-input class="common-input-long" v-model="configForm.landLink" placeholder="请输入落地页链接"/>
                 </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-input class="common-input-long" v-model="configForm.accessLinkContent" placeholder="请输入直达链接内容"/>
                 </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-input class="common-input-long" v-model="configForm.downloadLink" placeholder="请输入下载链接"/>
                 </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-input class="common-input-long" v-model="configForm.applicationName" placeholder="请输入应用包名"/>
                 </a-form-model-item>
                 <p class="form-line"></p>
                 <p class="rock-title">优化目标</p>
@@ -116,9 +118,9 @@
                 <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-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>
                 <div class="adver-position-radio">
@@ -126,17 +128,19 @@
                     <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 :style="radioStyle" :value="1">沉浸式竖版视频场景</a-radio>
+                            <a-radio :style="radioStyle" :value="2">信息流场景</a-radio>
+                            <a-radio :style="radioStyle" :value="3">视频后贴和尾帧场景</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 :style="radioStyle" :value="1">今日头条</a-checkbox>
+                            <a-checkbox :style="radioStyle" :value="2">西瓜视频</a-checkbox>
+                            <a-checkbox :style="radioStyle" :value="3">抖音火山版</a-checkbox>
+                            <a-checkbox :style="radioStyle" :value="4">抖音短视频</a-checkbox>
+                            <a-checkbox :style="radioStyle" :value="5">穿山甲</a-checkbox>
                         </a-checkbox-group>
                     </div>
                 </div>
@@ -188,12 +192,29 @@
                 </a-form-model-item>
                 <a-form-model-item label="平台">
                     <a-radio-group v-model="configForm.platDirect" button-style="solid">
+                        <a-radio-button value="buxian" :disabled="configForm.downloadLink">不限</a-radio-button>
+                        <a-radio-button value="a" :disabled="configForm.downloadLink">IOS</a-radio-button>
+                        <a-radio-button value="b" :disabled="!configForm.downloadLink">Andriod</a-radio-button>
+                        <a-radio-button value="c" :disabled="configForm.downloadLink">PC</a-radio-button>
+                    </a-radio-group>
+                </a-form-model-item>
+                <a-form-model-item v-if="configForm.downloadLink" label="安卓版本">
+                    <a-radio-group v-model="configForm.androidDirect" 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-button value="a">自定义</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
+                <div class="adver-position-radio">
+                    <div v-if="configForm.androidDirect === 'a'" 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.networkDirect" button-style="solid">
                         <a-radio-button value="buxian">不限</a-radio-button>
@@ -210,23 +231,6 @@
                         <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>
@@ -359,7 +363,17 @@
                     </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-input class="common-input-long" v-model="configForm.creativeLabel" @keyup.enter="handleEnterChang" placeholder="按回车生成标签"/> -->
+                    <a-select
+                        v-model="configForm.creativeLabel"
+                        mode="tags"
+                        style="width: 100%"
+                        placeholder="按回车生成标签"
+                        dropdownClassName="display-none-selset"
+                        :token-separators="[',', ' ', ',']"
+                        @change="handleEnterChang"
+                    >
+                    </a-select>
                 </a-form-model-item>
                 <div class="adver-position-radio">
                     <div class="creative-label-content">
@@ -467,7 +481,7 @@ export default {
                 intelligentOptimization: 'a', // 智能优选
                 cardSource: '', // 来源
                 creativeClassification: '', // 创意分类
-                creativeLabel: '' // 倡议标签
+                creativeLabel: undefined // 倡议标签
             }
         };
     },
@@ -512,24 +526,30 @@ export default {
         handleRelaxCancel() {
             this.$emit('relaxCancel');
         },
-        handleEnterChang() {
-            const defaultCreativeLabel = this.configForm.creativeLabel;
-            if (defaultCreativeLabel && defaultCreativeLabel.length > 10) {
-                this.$message.error('创意标签最多只能十个字符,请重新填写');
-                return;
+        handleEnterChang(value) {
+            this.creativeTag.push(...value);
+            this.creativeTag = [...new Set(this.creativeTag)]
+            for (let i = 0; i < this.creativeTag.length; i++) {
+                if (this.creativeTag[i].length > 10) {
+                    this.creativeTag.splice(i, 1)
+                    this.$message.error('创意标签最多只能十个字符,超过的已清除')
+                }
             }
-            this.creativeTag.push(this.configForm.creativeLabel);
-            this.configForm.creativeLabel = '';
-            let defaultList = this.creativeTag;
-            if (defaultList.length > 20) {
-                this.creativeTag = defaultList.splice(0, 20);
+            this.configForm.creativeLabel = [];
+            if (this.creativeTag.length > 20) {
+                this.creativeTag.splice(0, 20);
                 this.$message.error('最多创建20个');
             }
         },
         handleTagsClose(removedTag) {
-            const tags = this.creativeInfo.creativeTag.filter(tag => tag !== removedTag);
-            this.creativeInfo.creativeTag = tags;
+            const tags = this.creativeTag.filter(tag => tag !== removedTag);
+            this.creativeTag = tags;
         },
     }
 };
-</script>
+</script>
+<style>
+.display-none-selset {
+  display: none !important;
+}
+</style>