浏览代码

账户配置 定向包 页面

jiayufei 4 年之前
父节点
当前提交
ce2cc3f28f
共有 1 个文件被更改,包括 160 次插入59 次删除
  1. 160 59
      src/views/modules/account-config/components/configuration-modal.vue

+ 160 - 59
src/views/modules/account-config/components/configuration-modal.vue

@@ -106,7 +106,7 @@
                     </div>
                 </a-form-model-item>
                 <a-form-model-item label="创建数量: 广告组数量" class="campaign-cnt-class" prop="campaignCnt">
-                    <a-input-number v-model="configForm.campaignCnt" :min="0" @change="handleCampaignCnt"/>
+                    <a-input-number v-model="configForm.campaignCnt" :min="1" @change="handleCampaignCnt"/>
                     <a-tooltip placement="top">
                         <template slot="title">
                             <span>输入的数量为每天所创建的广告组数量</span>
@@ -117,7 +117,7 @@
                     <div v-if="campaignStatus" style="width: 500px;color: #f00;">单账号每天创建计划上限500个</div>
                 </a-form-model-item>
                 <a-form-model-item label="广告计划数量" class="campaign-ad-class" prop="campaignAdCnt">
-                    <a-input-number v-model="configForm.campaignAdCnt" :min="0" @change="handleCampaignAdCnt"/>
+                    <a-input-number v-model="configForm.campaignAdCnt" :min="1" @change="handleCampaignAdCnt"/>
                 </a-form-model-item>
             </div>
             <div class="separate-module-con">
@@ -140,42 +140,46 @@
                         <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="落地页链接" prop="adExternalUrl">
-                    <a-input
-                        class="common-input-long"
-                        :disabled="modalTitle === 'edit'"
-                        v-model="configForm.adExternalUrl"
-                        placeholder="请输入落地页链接"
-                        allow-clear
-                    />
-                </a-form-model-item>
-                <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="直达链接内容">
-                    <a-input
-                        class="common-input-long"
-                        v-model="configForm.adOpenUrl"
-                        placeholder="请输入直达链接内容"
-                        allow-clear
-                    />
-                </a-form-model-item>
-                <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="下载链接" prop="adDownloadUrl">
-                    <a-input
-                        class="common-input-long"
-                        :disabled="modalTitle === 'edit'"
-                        v-model="configForm.adDownloadUrl"
-                        placeholder="请输入下载链接"
-                        allow-clear
-                        @change="handleDownloadLink"
-                    />
-                </a-form-model-item>
-                <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="应用包名" prop="adPackage">
-                    <a-input
-                        class="common-input-long"
-                        :disabled="modalTitle === 'edit'"
-                        v-model="configForm.adPackage"
-                        placeholder="请输入应用包名"
-                        allow-clear
-                    />
-                </a-form-model-item>
+                <div v-if="configForm.adDownloadType === 'EXTERNAL_URL'">
+                    <a-form-model-item label="落地页链接" prop="adExternalUrl">
+                        <a-input
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adExternalUrl"
+                            placeholder="请输入落地页链接"
+                            allow-clear
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="直达链接内容">
+                        <a-input
+                            class="common-input-long"
+                            v-model="configForm.adOpenUrl"
+                            placeholder="请输入直达链接内容"
+                            allow-clear
+                        />
+                    </a-form-model-item>
+                </div>
+                <div v-if="configForm.adDownloadType === 'DOWNLOAD_URL'">
+                    <a-form-model-item label="下载链接" prop="adDownloadUrl">
+                        <a-input
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adDownloadUrl"
+                            placeholder="请输入下载链接"
+                            allow-clear
+                            @change="handleDownloadLink"
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="应用包名" prop="adPackage">
+                        <a-input
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adPackage"
+                            placeholder="请输入应用包名"
+                            allow-clear
+                        />
+                    </a-form-model-item>
+                </div>
             </div>
             <div class="separate-module-con">
                 <p class="rock-title">优化目标</p>
@@ -250,7 +254,7 @@
                 </div>
             </div>
             <div class="separate-module-con">
-                <a-tabs default-active-key="1">
+                <a-tabs v-model="selectPackageTabs">
                     <a-tab-pane key="1" tab="新建定向">
                         <p class="rock-title">用户定向</p>
                         <a-form-model-item label="地域">
@@ -335,10 +339,13 @@
                             <div v-if="configForm.adDownloadUrl && configForm.adAndroidVersion === 'a'" class="position-radio-change">
                                 <p>安卓版本</p>
                                 <a-radio-group v-model="configForm.androidChangeValue">
+                                    <a-radio :style="radioStyle" value="9.0">Andriod 9.0及以上</a-radio>
+                                    <a-radio :style="radioStyle" value="8.1">Andriod 8.1及以上</a-radio>
                                     <a-radio :style="radioStyle" value="8.0">Andriod 8.0及以上</a-radio>
                                     <a-radio :style="radioStyle" value="7.1">Andriod 7.1及以上</a-radio>
                                     <a-radio :style="radioStyle" value="7.0">Andriod 7.0及以上</a-radio>
                                     <a-radio :style="radioStyle" value="6.0">Andriod 6.0及以上</a-radio>
+                                    <a-radio :style="radioStyle" value="5.1">Andriod 5.1及以上</a-radio>
                                 </a-radio-group>
                             </div>
                         </div>
@@ -407,15 +414,35 @@
                             <div v-if="packageMessageDetail.length" class="orientation-content-substance">
                                 <div class="content-substance-singal">
                                     <span class="singal-spn">定向人群包:</span>
-                                    <!-- <span>{{ packageMessageDetail[0].description }}</span> -->
+                                    <span>{{ packageMessageDetail[0].description }}</span>
                                 </div>
                                 <div class="content-substance-singal">
                                     <span class="singal-spn">地域:</span>
-                                    <span>北京、和白、天津</span>
+                                    <span>{{ packageMessageDetail[0].replaceCitys }}</span>
+                                </div>
+                                <div class="content-substance-singal">
+                                    <span class="singal-spn">性别:</span>
+                                    <span>{{ packageMessageDetail[0].replaceSex }}</span>
+                                </div>
+                                <div class="content-substance-singal">
+                                    <span class="singal-spn">年龄:</span>
+                                    <span>{{ packageMessageDetail[0].replaceAge }}</span>
+                                </div>
+                                <div class="content-substance-singal">
+                                    <span class="singal-spn">平台:</span>
+                                    <span>{{ packageMessageDetail[0].replacePlate }}</span>
+                                </div>
+                                <div class="content-substance-singal">
+                                    <span class="singal-spn">平台:</span>
+                                    <span>广告计划</span>
+                                </div>
+                                <div class="content-substance-singal">
+                                    <span class="singal-spn">智能放量:</span>
+                                    <span>{{ packageMessageDetail[0].replaceEnabled }}</span>
                                 </div>
                             </div>
                             <div v-else class="orientation-content-msg">
-                                <div><a-icon type="container"/></div>
+                                <div class="icon"><a-icon type="container"/></div>
                                 <div>请在上方选择一个已有定向包</div>
                             </div>
                         </div>
@@ -459,7 +486,13 @@
                 </a-form-model-item>
                 <div class="adver-position-radio">
                     <div v-if="configForm.adScheduleType === 'SCHEDULE_START_END'" class="position-radio-change">
-                        <a-range-picker v-model="configForm.launchDateRange" format="YYYY-MM-DD" @change="handleLaunchData"/>
+                        <a-range-picker
+                            v-model="configForm.launchDateRange"
+                            :disabled-date="disabledDate"
+                            format="YYYY-MM-DD"
+                            @change="handleLaunchData"
+                            @calendarChange="handleCalendarChange"
+                        />
                     </div>
                 </div>
                 <a-form-model-item label="投放时段">
@@ -795,6 +828,8 @@ export default {
             }
         };
         return {
+            selectPackageTabs: '1',
+            choiceDate: '',
             adHideIfConvertedDataOption: [ // 过滤已转化用户option
                 {
                     id: 'NO_EXCLUDE',
@@ -980,7 +1015,7 @@ export default {
                 campaignCnt: 0, // 广告组计划数量
                 campaignAdCnt: 0, // 广告计划数量
                 launchTarget: 'OCPM', // 投放目标
-                adDownloadType: 'DOWNLOAD_URL', // 下载方式
+                adDownloadType: 'EXTERNAL_URL', // 下载方式
                 adExternalUrl: '', // 落地页链接
                 adOpenUrl: '', // 直达链接内容
                 adPackage: '', // 应用包名
@@ -1089,9 +1124,17 @@ export default {
                 };
                 this.handleGetOptimizationObjective(paramsData);
             }
-            this.handleGetCreativeClassification();
-            this.handleGetAdvertiserStrategy();
-            this.handleGetAdAudiencePackage();
+            if (newVal) {
+                this.handleGetCreativeClassification();
+                this.handleGetAdvertiserStrategy();
+                this.handleGetAdAudiencePackage();
+            }
+            else {
+                this.createOptions = [];
+                this.creativeOptions = [];
+                this.selectiveList = [];
+                this.optimizationOption = [];
+            }
         }
     },
     mounted() {
@@ -1107,6 +1150,11 @@ export default {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         moment,
+        disabledDate(current) {
+            if (this.choiceDate) {
+                return current && current < this.choiceDate;
+            }
+        },
         handleGetAdAudiencePackage() {
             const params = {
                 accountId: this.configForm.accountId
@@ -1114,8 +1162,7 @@ export default {
             getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', params)
                 .then(result => {
                     if (result.code === 0) {
-                        console.log(result, 'result---0000----0000');
-                        this.selectiveList = result.result;
+                        this.selectiveList = result.result || [];
                     }
                     else {
                         this.$message.error(result.message);
@@ -1126,16 +1173,29 @@ export default {
                 });
         },
         handleSelectiveOrientation(e) {
-            console.log(e, '----选择定向包');
+            const ageUpdateList = [];
             const defaultData = this.selectiveList.filter(item => item.audience_package_id === e);
+            defaultData.forEach(item => {
+                item.replaceSex = item.audience.gender === 'NONE' ? '不限' : item.audience.gender === 'GENDER_FEMALE' ? '女' : '男';
+                item.replaceEnabled = item.audience.auto_extend_enabled === 1 ? '开启' : '不开启';
+                item.replacePlate = item.audience.platform.join(',');
+                item.replaceCitys = item.audience.cityNames.join(',');
+                this.ageArr.forEach(val => {
+                    if (item.audience.age.includes(val.value)) {
+                        ageUpdateList.push(val.label);
+                    }
+                });
+                item.replaceAge = ageUpdateList.join(',');
+            });
             this.packageMessageDetail = defaultData;
-            console.log(this.packageMessageDetail, 'this.packageMessageDetail');
         },
         handleBiddingMethod(e) {
             this.configForm.adCpaBid = 0;
             this.configForm.adMinBid = '';
             this.configForm.adMaxBid = '';
             this.configForm.adStepBid = 0;
+            this.$refs['ruleForm'].clearValidate(['adMinBid']);
+            this.$refs['ruleForm'].clearValidate(['adMaxBid']);
         },
         handleAdCpaBidBlur(e) {
             const defaultValue = e.target.value;
@@ -1197,9 +1257,10 @@ export default {
         },
         handleAdBudgetBlur(e) {
             const adBudgetInput = e.target.value;
+            this.configForm.adBudget = Number(Number(adBudgetInput).toFixed(2));
             if (this.configForm.adCpaBid > adBudgetInput) {
                 this.isAdCpaBidBlur = true;
-                this.adCpaBidBlurTxt = '出价不能大于预算'; 
+                this.adCpaBidBlurTxt = '出价不能大于预算';
             }
             else {
                 this.isAdCpaBidBlur = false;
@@ -1289,14 +1350,17 @@ export default {
         handleAdDownLoadType(e) {
             this.optimizationOption = [];
             if (e.target.value === 'DOWNLOAD_URL') {
-                this.configForm.adExternalUrl = '';
-                this.configForm.adOpenUrl = '';
-                this.configForm.adConvertId = '';
+                this.configForm.adExternalUrl = undefined;
+                this.configForm.adOpenUrl = undefined;
+                this.configForm.adConvertId = undefined;
+                this.$refs['ruleForm'].clearValidate(['adExternalUrl']);
             }
             else if (e.target.value === 'EXTERNAL_URL') {
-                this.configForm.adDownloadUrl = '';
-                this.configForm.adPackage = '';
-                this.configForm.adConvertId = '';
+                this.configForm.adDownloadUrl = undefined;
+                this.configForm.adPackage = undefined;
+                this.configForm.adConvertId = undefined;
+                this.$refs['ruleForm'].clearValidate(['adDownloadUrl']);
+                this.$refs['ruleForm'].clearValidate(['adPackage']);
             }
         },
         handleCampaignCnt(e) {
@@ -1328,6 +1392,26 @@ export default {
                     if (result.code === 0) {
                         const detailData = result.result;
                         this.configForm.accountId = detailData.accountId;
+                        if (detailData.adAudiencePackageId) {
+                            this.selectPackageTabs = '2';
+                            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', {accountId: detailData.accountId})
+                                .then(result => {
+                                    if (result.code === 0) {
+                                        this.selectiveList = result.result || [];
+                                        this.configForm.adAudiencePackageId = Number(detailData.adAudiencePackageId);
+                                        this.handleSelectiveOrientation(Number(detailData.adAudiencePackageId));
+                                    }
+                                    else {
+                                        this.$message.error(result.message);
+                                    }
+                                })
+                                .catch(error => {
+                                    console.log(error, 'eeee');
+                                });
+                        }
+                        else {
+                            this.selectPackageTabs = '1';
+                        }
                         this.configForm.dpLinkStartIndex = detailData.dpLinkStartIndex;
                         this.configForm.dpLinkEndIndex = detailData.dpLinkEndIndex;
                         this.configForm.accountBudgetMode = detailData.accountBudgetMode;
@@ -1545,12 +1629,25 @@ export default {
             node.blur();
         },
         handleLaunchData(date, dateString) {
+            console.log(dateString, 'dateString--dateString');
             this.configForm.launchDateRange = dateString;
         },
+        handleCalendarChange([startTime]) {
+            console.log(moment(startTime).format('YYYY-MM-DD'), '----startTime---');
+            this.choiceDate = startTime;
+        },
         handleBudgetMode(e) {
             if (e === 'BUDGET_MODE_TOTAL') {
                 this.configForm.adScheduleType = 'SCHEDULE_START_END';
                 this.adBudgetNum = this.configForm.launchTarget === 'OCPM' ? 300 : 0;
+                if (Number(this.configForm.adCpaBid) > Number(this.configForm.adBudget)) {
+                    this.isAdCpaBidBlur = true;
+                    this.adCpaBidBlurTxt = '出价不能大于预算';
+                }
+                else {
+                    this.isAdCpaBidBlur = false;
+                    this.adCpaBidBlurTxt = '';
+                }
                 this.$message.warning('请设置投放时间');
             }
             else if (e === 'BUDGET_MODE_DAY') {
@@ -1562,7 +1659,7 @@ export default {
             this.configForm.defaultFormList = formData.filter(item => list.id !== item.id);
         },
         handleAddOrigin() {
-            if (this.configForm.defaultFormList.length > 10) {
+            if (this.configForm.defaultFormList.length >= 10) {
                 this.$message.error('最多可以添加10个卖点');
                 return;
             }
@@ -1705,6 +1802,10 @@ export default {
                     return;
                 }
             }
+            if (this.configForm.adScheduleType === 'SCHEDULE_START_END' && !this.configForm.launchDateRange.length) {
+                this.$message.error('请选择投放时间');
+                return;
+            }
             if (!this.urlResult) {
                 this.$message.error('请上传图片');
                 return;