Browse Source

账户配置 校验 添加

jiayufei 4 years ago
parent
commit
4040bad864
1 changed files with 170 additions and 37 deletions
  1. 170 37
      src/views/modules/account-config/components/configuration-modal.vue

+ 170 - 37
src/views/modules/account-config/components/configuration-modal.vue

@@ -15,15 +15,15 @@
                         <acount-search :disabled="modalTitle === 'edit'" class="acount-search-class" :appId.sync="configForm.accountId" :multiple="false" request="1,3"></acount-search>
                     </a-form-model-item>
                     <a-form-model-item label="dp链接范围" class="dp-link-start" prop="dpLinkStartIndex">
-                        <a-input class="common-input" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkStartIndex" placeholder="请输入" allow-clear/>
+                        <a-input-number class="common-input" placeholder="请输入" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkStartIndex" :min="1"/>
                         <span>~</span>
                     </a-form-model-item>
                     <a-form-model-item label="" class="dp-link-end" prop="dpLinkEndIndex">
-                        <a-input class="common-input" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkEndIndex" placeholder="请输入" allow-clear/>
+                        <a-input-number class="common-input" placeholder="请输入" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkEndIndex" :min="configForm.dpLinkStartIndex"/>
                     </a-form-model-item>
                     <a-form-model-item label="预算方式">
-                        <a-radio-group v-model="configForm.accountBudgetMode" button-style="solid">
-                            <a-radio-button value="1">不限于算</a-radio-button>
+                        <a-radio-group v-model="configForm.accountBudgetMode" button-style="solid" @change="handleAccountMode">
+                            <a-radio-button value="1">不限</a-radio-button>
                             <a-radio-button value="2">指定预算</a-radio-button>
                         </a-radio-group>
                     </a-form-model-item>
@@ -59,7 +59,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="1"/>
+                        <a-input-number v-model="configForm.campaignCnt" @change="handleCampaignCnt"/>
                         <a-tooltip placement="top">
                             <template slot="title">
                                 <span>输入的数量为每天所创建的广告组数量</span>
@@ -67,9 +67,10 @@
                             </template>
                             <a-icon class="form-itrm-icon" type="smile-o"/>
                         </a-tooltip>
+                        <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="1"/>
+                        <a-input-number v-model="configForm.campaignAdCnt" @change="handleCampaignAdCnt"/>
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
@@ -81,22 +82,22 @@
                             <a-radio-button value="CPM" disabled>展示量</a-radio-button>
                         </a-radio-group>
                     </a-form-model-item>
-                    <a-form-model-item :disabled="modalTitle === 'edit'" label="下载方式">
-                        <a-radio-group v-model="configForm.adDownloadType" button-style="solid">
+                    <a-form-model-item label="下载方式">
+                        <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adDownloadType" button-style="solid" @change="handleAdDownLoadType">
                             <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
                             <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="落地页链接">
+                    <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="下载链接">
+                    <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="应用包名">
+                    <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>
@@ -125,7 +126,7 @@
                 <div class="separate-module-con">
                     <p class="rock-title">设置投放位置</p>
                     <a-form-model-item label="广告位置">
-                        <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adverPosition" button-style="solid">
+                        <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adverPosition" button-style="solid" @change="handleAdverPosition">
                             <a-radio-button value="a">系统优选广告位</a-radio-button>
                             <a-radio-button value="b">按媒体指定位置</a-radio-button>
                             <a-radio-button value="c">按场景指定位置</a-radio-button>
@@ -265,11 +266,11 @@
                                 <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
                                 <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
                             </a-select>
-                            <a-input-number class="common-input" v-model="configForm.adBudget" :min="1" :step="0.01"/>
+                            <a-input-number class="common-input" v-model="configForm.adBudget" :min="adBudgetNum" :step="0.01"/>
                         </a-input-group>
                     </a-form-model-item>
                     <a-form-model-item label="投放时间">
-                        <a-radio-group v-model="configForm.adScheduleType" button-style="solid">
+                        <a-radio-group v-model="configForm.adScheduleType" button-style="solid" @change="handleAdScheduleType">
                             <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
                             <a-radio-button value="SCHEDULE_START_END">设置开始和结束日期</a-radio-button>
                         </a-radio-group>
@@ -280,7 +281,7 @@
                         </div>
                     </div>
                     <a-form-model-item label="投放时段">
-                        <a-radio-group v-model="configForm.launchTimeInterval" button-style="solid">
+                        <a-radio-group v-model="configForm.launchTimeInterval" button-style="solid" @change="handleLaunchTimeInterval">
                             <a-radio-button value="buxian">不限</a-radio-button>
                             <a-radio-button value="a">指定时间段</a-radio-button>
                         </a-radio-group>
@@ -300,7 +301,7 @@
                         </a-radio-group>
                     </a-form-model-item>
                     <a-form-model-item label="目标转化出价" prop="adCpaBid">
-                        <a-input-number class="common-input" v-model="configForm.adCpaBid" :min="0.1" :max="10000" :step="0.01"/> 元
+                        <a-input-number class="common-input" v-model="configForm.adCpaBid" :min="0.1" :max="configForm.adBudget" :step="0.01"/> 元
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
@@ -467,7 +468,18 @@ export default {
         SelectCheckAll
     },
     data() {
+        let handleConfirmValue = (rule, value, callback) => {
+            const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+            if (urlregex.test(value)) {
+                callback();
+            }
+            else {
+                callback('请输入正确的格式');
+            }
+        };
         return {
+            adBudgetNum: 0,
+            campaignStatus: false,
             detailData: {},
             modalTitle: '',
             toolConvertList: [],
@@ -494,6 +506,17 @@ export default {
             labelCol: {span: 4},
             wrapperCol: {span: 14},
             rules: {
+                adExternalUrl: [
+                    {required: true, message: '请输入', trigger: 'blur'},
+                    {validator: handleConfirmValue, trigger: 'blur'}
+                ],
+                adPackage: [
+                    {required: true, message: '请输入', trigger: 'blur'}
+                ],
+                adDownloadUrl: [
+                    {required: true, message: '请输入', trigger: 'blur'},
+                    {validator: handleConfirmValue, trigger: 'blur'}
+                ],
                 campaignCnt: [
                     {required: true, message: '请输入', trigger: 'blur'}
                 ],
@@ -537,10 +560,10 @@ export default {
                 productSellingPoints: [], // 商品买点
                 adBudgetMode: 'BUDGET_MODE_DAY', // 预算类型
                 adDownloadUrl: '', // 下载链接
-                accountBudget: '', // 账户日预算
+                accountBudget: 0, // 账户日预算
                 accountId: undefined, // 账户
-                dpLinkStartIndex: '',
-                dpLinkEndIndex: '',
+                dpLinkStartIndex: 0,
+                dpLinkEndIndex: 0,
                 accountBudgetMode: '1', // 预算方式
                 campaignLandingType: 'APP', // 推广目标
                 advertisingType: '1', // 广告类型
@@ -571,13 +594,13 @@ export default {
                 adAndroidOsv: 'NONE', // 定向-安卓版本
                 androidChangeValue: '', // 安卓版本-自定义
                 adSmartBidType: 'SMART_BID_CUSTOM', // 投放场景
-                adBudget: '', // 预算
+                adBudget: 0, // 预算
                 adScheduleType: 'SCHEDULE_FROM_NOW', // 投放时间
                 launchDateRange: [], // 设置开始和结束时间
                 launchTimeInterval: 'buxian', // 投放时段
                 scheduleTimeData: str, // 指定时段选择
                 adPricing: 'PRICING_OCPM', // 付费方式
-                adCpaBid: '', // 目标转化出价
+                adCpaBid: 0, // 目标转化出价
                 creativeActionTrackUrl: '', // 监测地址
                 creativeMaterialMode: 'STATIC_ASSEMBLE', // 创意方式
                 creativeImageMode: 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL', // 创意内容
@@ -598,17 +621,53 @@ export default {
         },
         NewAdPackage() {
             return this.configForm.adPackage;
+        },
+        NewAdExternalUrl() {
+            return this.configForm.adExternalUrl;
         }
     },
     watch: {
+        NewAdExternalUrl(newVal, oldVal) {
+            if (newVal && this.configForm.accountId) {
+                const paramsData = {
+                    advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
+                    advertiserId: this.configForm.accountId,
+                    deliveryRange: 'DEFAULT',
+                    externalUrl: this.configForm.adExternalUrl,
+                    landingType: this.configForm.campaignLandingType,
+                    promotionContent: this.configForm.adDownloadType
+                };
+                this.handleGetOptimizationObjective(paramsData);
+            }
+        },
         NewAdPackage(newVal, oldVal) {
             if (newVal && this.configForm.accountId) {
-                this.handleGetOptimizationObjective();
+                const paramsData = {
+                    advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
+                    advertiserId: this.configForm.accountId,
+                    appType: 'APP_ANDROID',
+                    deliveryRange: 'DEFAULT',
+                    externalUrl: this.configForm.adExternalUrl,
+                    landingType: this.configForm.campaignLandingType,
+                    packageName: this.configForm.adPackage,
+                    promotionContent: this.configForm.adDownloadType
+                };
+                this.handleGetOptimizationObjective(paramsData);
             }
         },
         NewAountId(newVal, oldVal) {
             if (newVal && this.configForm.adPackage) {
-                this.handleGetOptimizationObjective();
+                const paramsData = {
+                    advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
+                    advertiserId: this.configForm.accountId,
+                    appType: 'APP_ANDROID',
+                    deliveryRange: 'DEFAULT',
+                    externalUrl: this.configForm.adExternalUrl,
+                    landingType: this.configForm.campaignLandingType,
+                    packageName: this.configForm.adPackage,
+                    promotionContent: this.configForm.adDownloadType
+                };
+                this.handleGetOptimizationObjective(paramsData);
             }
             this.handleGetCreativeClassification();
         }
@@ -626,6 +685,63 @@ export default {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         moment,
+        handleAdScheduleType(e) {
+            if (e.target.value === 'SCHEDULE_FROM_NOW') {
+                this.configForm.launchDateRange = [];
+            }
+        },
+        handleLaunchTimeInterval(e) {
+            if (e.target.value === 'buxian') {
+                this.configForm.scheduleTimeData = str;
+            }
+        },
+        handleAdverPosition(e) {
+            if (e.target.value === 'a') {
+                this.configForm.radioChangeValue = '';
+                this.configForm.checkboxChangeValue = [];
+            }
+            else if (e.target.value === 'b') {
+                this.configForm.radioChangeValue = '';
+            }
+            else if (e.target.value === 'c') {
+                this.configForm.checkboxChangeValue = [];
+            }
+        },
+        handleAccountMode(e) {
+            if (e.target.value === '1') {
+                this.configForm.accountBudget = '';
+            }
+        },
+        handleAdDownLoadType(e) {
+            if (e.target.value === 'DOWNLOAD_URL') {
+                this.configForm.adExternalUrl = '';
+                this.configForm.adOpenUrl = '';
+                this.configForm.adConvertId = '';
+            }
+            else if (e.target.value === 'EXTERNAL_URL') {
+                this.configForm.adDownloadUrl = '';
+                this.configForm.adPackage = '';
+                this.configForm.adConvertId = '';
+            }
+        },
+        handleCampaignCnt(e) {
+            const finallyResult = e * this.configForm.campaignAdCnt;
+            if (finallyResult >= 500) {
+                this.campaignStatus = true;
+            }
+            else {
+                this.campaignStatus = false;
+            }
+        },
+        handleCampaignAdCnt(e) {
+            const finallyResult = e * this.configForm.campaignCnt;
+            if (finallyResult >= 500) {
+                this.campaignStatus = true;
+            }
+            else {
+                this.campaignStatus = false;
+            }
+        },
         handleConvertChange(e) {
             const convertTitle = this.optimizationOption.filter(item => item.convert_id === e);
             this.configForm.creativeActionTrackUrl = convertTitle[0].action_track_url;
@@ -755,17 +871,7 @@ export default {
             });
         },
         // 优化目标数据获取
-        handleGetOptimizationObjective() {
-            const paramsData = {
-                advancedCreativeType: 'ATTACHED_CREATIVE_NONE',
-                advertiserId: this.configForm.accountId,
-                appType: 'APP_ANDROID',
-                deliveryRange: 'DEFAULT',
-                externalUrl: this.configForm.adExternalUrl,
-                landingType: this.configForm.campaignLandingType,
-                packageName: this.configForm.adPackage,
-                promotionContent: this.configForm.adDownloadType
-            };
+        handleGetOptimizationObjective(paramsData) {
             postAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getToolConvert', paramsData).then(result => {
                 if (result.code === 0) {
                     this.toolConvertList = result.result;
@@ -799,7 +905,6 @@ export default {
         handleAddList(data) {
             postAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/addBytedanceStrategy', data).then(result => {
                 if (result.code === 0) {
-                    console.log(result, 'result--result');
                     this.$message.success('创建成功');
                     this.$router.replace('/account-config/account-config');
                     this.$bus.$emit('remove', '/account-config/components/configuration-modal');
@@ -823,8 +928,12 @@ export default {
         handleBudgetMode(e) {
             if (e === 'BUDGET_MODE_TOTAL') {
                 this.configForm.adScheduleType = 'SCHEDULE_START_END';
+                this.adBudgetNum = this.configForm.launchTarget === 'OCPM' ? 300 : 0;
                 this.$message.warning('请设置投放时间');
             }
+            else if (e === 'BUDGET_MODE_DAY') {
+                this.adBudgetNum = 0;
+            }
         },
         handleDelOrigin(list) {
             let formData = this.configForm.defaultFormList;
@@ -862,7 +971,32 @@ export default {
             reader.readAsDataURL(img);
         },
         beforeUpload(info) {
-            this.handleMd5(info);
+            const isZip = info.type.includes('gif');
+            const fileOvesize = info.size > (1024 * 1024);
+            if (isZip) {
+                this.$message.error('不支持上传gif');
+                return;
+            }
+            if (fileOvesize) {
+                this.$message.error('图片大小不能超过1M');
+                return;
+            }
+            new Promise(function (resolve, reject) {
+                let width = 108;
+                let height = 108;
+                let _URL = window.URL || window.webkitURL;
+                let img = new Image();
+                img.onload = function () {
+                    let valid = img.width === width && img.height === height;
+                    valid ? resolve() : reject();
+                };
+                img.src = _URL.createObjectURL(info);
+            }).then(() => {
+                this.handleMd5(info);
+            }, () => {
+                this.$message.error('图片尺寸必须是108*108!');
+                return Promise.reject();
+            });
         },
         handleChange(info) {
             this.getBase64(info.file.originFileObj, imageUrl => {
@@ -914,7 +1048,6 @@ export default {
                         url: '//' + data.Location
                     });
                     that.urlResult = '//' + data.Location;
-                    console.log(that.fileList, 'fileListfileList--fileList');
                 }
             );
         },