Procházet zdrojové kódy

账户配置 定向包 页面

jiayufei před 4 roky
rodič
revize
02f834aa4e

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

@@ -29,3 +29,27 @@
     justify-content: center;
     align-items: center;
 }
+/deep/ .mode-modal-class {
+    width: 600px !important;
+    .ant-form-item-label {
+        width: 100px;
+    }
+    .dp-link-start {
+        display: inline-block;
+        .ant-form-item-control-wrapper {
+            width: 163px;
+        }
+    }
+    .dp-link-end {
+        display: inline-block;
+        .ant-form-item-control-wrapper {
+            width: 100%;
+        }
+    }
+    .ant-form-item-control {
+        margin-left: 15px;
+    }
+    .common-input {
+        width: 150px;
+    }
+}

+ 196 - 23
src/views/modules/account-config/account-config.vue

@@ -50,23 +50,7 @@
                     <a-divider type="vertical"/>
                     <a @click="handleListDelete(record)">删除</a>
                     <a-divider type="vertical"/>
-                    <a-popover v-model="record.visible" trigger="click">
-                        <template slot="content">
-                            <div><a-input v-model="modContent" placeholder="请输入" style="width: 140px;"/></div>
-                            <div style="margin-top: 10px;">
-                                <a-button
-                                    size="small"
-                                    type="primary"
-                                    style="margin-left: 15px;margin-right: 15px;"
-                                    @click="handlePopoverSure(record, 'mod')"
-                                >
-                                    确定
-                                </a-button>
-                                <a-button size="small" @click="handleModPopover(record)">取消</a-button>
-                            </div>
-                        </template>
-                        <a>修改出价</a>
-                    </a-popover>
+                    <a @click="handleUpdateMod(record)">修改出价</a>
                     <a-divider type="vertical"/>
                     <a-popover v-model="record.show" trigger="click">
                         <template slot="content">
@@ -98,6 +82,83 @@
                 @showSizeChange="onShowSizeChange"
             />
         </div>
+        <a-modal
+            title="修改出价"
+            v-if="modeVisible"
+            :visible="modeVisible"
+            dialog-class="mode-modal-class"
+            @ok="handleModeSure"
+            @cancel="handleModeCancel"
+        >
+            <div>
+                <a-form-model
+                    ref="ruleForm"
+                    :model="configForm"
+                    :rules="rules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item v-if="updateModTxt.adBidCreateType === 'FIX'" label="目标转化出价" prop="adCpaBid">
+                        <a-input-number
+                            class="common-input"
+                            v-model="configForm.adCpaBid"
+                            :min="0.1"
+                            :step="0.01"
+                        />
+                    </a-form-model-item>
+                    <div v-if="updateModTxt.adBidCreateType === 'RAND'">
+                        <a-form-model-item label="目标转化出价"
+                        class="dp-link-start" prop="adMinBid">
+                            <a-input-number
+                                class="common-input"
+                                v-model="configForm.adMinBid"
+                                :min="0.1"
+                                :max="10000"
+                                placeholder="请输入最小值"
+                            />
+                        </a-form-model-item>
+                        <a-form-model-item class="dp-link-end" prop="adMaxBid">
+                            <span style="margin-right: 16px;">~</span>
+                            <a-input-number
+                                class="common-input"
+                                v-model="configForm.adMaxBid"
+                                :min="0.1"
+                                :max="10000"
+                                placeholder="请输入最大值"
+                            />
+                        </a-form-model-item>
+                    </div>
+                    <div v-if="updateModTxt.adBidCreateType === 'STEP'">
+                        <a-form-model-item label="目标转化出价" class="dp-link-start" prop="adMinBid">
+                            <a-input-number
+                                class="common-input"
+                                v-model="configForm.adMinBid"
+                                :min="0.1"
+                                :max="10000"
+                                placeholder="请输入最小值"
+                            />
+                        </a-form-model-item>
+                        <a-form-model-item class="dp-link-end" prop="adMaxBid">
+                            <span style="margin-right: 16px;">~</span>
+                            <a-input-number
+                                class="common-input"
+                                v-model="configForm.adMaxBid"
+                                :min="0.1"
+                                :max="10000"
+                                placeholder="请输入最大值"
+                            />
+                        </a-form-model-item>
+                        <a-form-model-item label="浮动间隔" prop="adStepBid">
+                            <a-input-number
+                                class="common-input"
+                                v-model="configForm.adStepBid"
+                                placeholder="请输入浮动间隔"
+                            />
+                        </a-form-model-item>
+                    </div>
+                </a-form-model>
+            </div>
+        </a-modal>
     </div>
 </template>
 <script>
@@ -113,7 +174,61 @@ export default {
         AcountSearch
     },
     data() {
+        let adMinBidValidator = (rule, value, callback) => {
+            const finallyResult = Number(this.configForm.adMaxBid);
+            if (finallyResult !== '' && value && Number(value) < finallyResult) {
+                callback();
+            }
+            else {
+                callback('最低出价不能高于最高出价');
+            }
+        };
+        let adMaxBidValidator = (rule, value, callback) => {
+            const finallyResult = Number(this.configForm.adMinBid);
+            if (finallyResult !== undefined && value && Number(value) > finallyResult) {
+                callback();
+            }
+            else {
+                callback('最高出价不能低于最低出价');
+            }
+        };
+        let floatingIntervalValidator = (rule, value, callback) => {
+            const finallyResult = Number(this.configForm.adMinBid) + Number(value);
+            if (finallyResult !== undefined < Number(this.configForm.adMaxBid)) {
+                callback();
+            }
+            else {
+                callback('最低出价+浮动间隔<最高出价');
+            }
+        };
         return {
+            labelCol: {span: 4},
+            wrapperCol: {span: 14},
+            configForm: {
+                adMinBid: undefined,
+                adMaxBid: undefined,
+                adStepBid: undefined,
+                adCpaBid: undefined
+            },
+            rules: {
+                adCpaBid: [
+                    {required: true, message: '请输入', trigger: 'blur'}
+                ],
+                adStepBid: [
+                    {required: true, message: '请输入', trigger: 'blur'},
+                    {validator: floatingIntervalValidator, trigger: 'blur'}
+                ],
+                adMinBid: [
+                    {required: true, message: '请输入最低出价', trigger: 'blur'},
+                    {validator: adMinBidValidator, trigger: 'blur'}
+                ],
+                adMaxBid: [
+                    {required: true, message: '请输入最高出价', trigger: 'blur'},
+                    {validator: adMaxBidValidator, trigger: 'blur'}
+                ]
+            },
+            modeVisible: false,
+            updateModTxt: {},
             modContent: '',
             budgetContent: '',
             acountId: undefined, // 搜索的账户ID
@@ -182,6 +297,47 @@ export default {
     },
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
+        handleModeSure() {
+            let paramsData = new FormData();
+            if (this.updateModTxt.adBidCreateType === 'FIX') {
+                paramsData.append('type', 1);
+                paramsData.append('id', this.updateModTxt.id);
+                paramsData.append('adCpaBid', this.configForm.adCpaBid);
+            }
+            else if (this.updateModTxt.adBidCreateType === 'RAND') {
+                paramsData.append('type', 1);
+                paramsData.append('id', this.updateModTxt.id);
+                paramsData.append('adMinBid', this.configForm.adMinBid);
+                paramsData.append('adMaxBid', this.configForm.adMaxBid);
+            }
+            else if (this.updateModTxt.adBidCreateType === 'STEP') {
+                paramsData.append('type', 1);
+                paramsData.append('id', this.updateModTxt.id);
+                paramsData.append('adMinBid', this.configForm.adMinBid);
+                paramsData.append('adMaxBid', this.configForm.adMaxBid);
+                paramsData.append('adStepBid', this.configForm.adStepBid);
+            }
+            this.$refs.ruleForm.validate(valid => {
+                if (valid) {
+                    this.handlePopoverChange(paramsData);
+                }
+                else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        handleModeCancel() {
+            this.adMinBid = undefined;
+            this.adMaxBid = undefined;
+            this.adStepBid = undefined;
+            this.adCpaBid = undefined;
+            this.modeVisible = false;
+        },
+        handleUpdateMod(record) {
+            this.updateModTxt = record;
+            this.modeVisible = true;
+        },
         handlePopoverSure(record, type) {
             const defaultList = {
                 accountId: record.accountId,
@@ -193,12 +349,24 @@ export default {
             let paramsData = new FormData();
             if (type === 'mod') {
                 record.visible = false;
-                this.modContent = '';
-                paramsData.append('accountId', defaultList.accountId);
-                paramsData.append('adId', defaultList.adId);
-                paramsData.append('type', 1);
-                paramsData.append('bId', defaultList.bid);
-                paramsData.append('id', defaultList.id);
+                // if (this.updateModTxt === 'FIX') {
+                //     paramsData.append('type', 1);
+                //     paramsData.append('id', defaultList.id);
+                //     paramsData.append('adCpaBid', this.modContent);
+                // }
+                // else if (this.updateModTxt === 'RAND') {
+                //     paramsData.append('type', 1);
+                //     paramsData.append('id', defaultList.id);
+                //     paramsData.append('adMinBid', this.adMinBid);
+                //     paramsData.append('adMaxBid', this.adMaxBid);
+                // }
+                // else if (this.updateModTxt === 'STEP') {
+                //     paramsData.append('type', 1);
+                //     paramsData.append('id', defaultList.id);
+                //     paramsData.append('adMinBid', this.adMinBid);
+                //     paramsData.append('adMaxBid', this.adMaxBid);
+                //     paramsData.append('adStepBid', this.adStepBid);
+                // }
             }
             else if (type === 'budget') {
                 if (Number(defaultList.budget) >= record.adBudget && Number(defaultList.budget) < (record.adBudget + 100)) {
@@ -223,6 +391,11 @@ export default {
             putAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/updStaOrCpaOrBudgetById', data).then(result => {
                 if (result.code === 0) {
                     this.$message.success(result.message);
+                    this.adMinBid = undefined;
+                    this.adMaxBid = undefined;
+                    this.adStepBid = undefined;
+                    this.adCpaBid = undefined;
+                    this.modeVisible = false;
                     this.handleInitTable();
                 }
                 else {

+ 14 - 12
src/views/modules/account-config/components/configuration-modal.vue

@@ -478,7 +478,7 @@
                     <span class="especial-label budget-mode-label">*</span>
                 </a-form-model-item>
                 <a-form-model-item label="投放时间">
-                    <a-radio-group v-model="configForm.adScheduleType" button-style="solid" @change="handleAdScheduleType">
+                    <a-radio-group :disabled="modalTitle === 'edit'" 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>
@@ -487,10 +487,9 @@
                     <div v-if="configForm.adScheduleType === 'SCHEDULE_START_END'" class="position-radio-change">
                         <a-range-picker
                             v-model="configForm.launchDateRange"
-                            :disabled-date="disabledDate"
+                            :disabled="modalTitle === 'edit'"
                             format="YYYY-MM-DD"
                             @change="handleLaunchData"
-                            @calendarChange="handleCalendarChange"
                         />
                     </div>
                 </div>
@@ -828,7 +827,6 @@ export default {
         };
         return {
             selectPackageTabs: '1',
-            choiceDate: '',
             adHideIfConvertedDataOption: [ // 过滤已转化用户option
                 {
                     id: 'NO_EXCLUDE',
@@ -1149,11 +1147,18 @@ export default {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         moment,
-        disabledDate(current) {
-            if (this.choiceDate) {
-                return current && current < this.choiceDate;
-            }
-        },
+        // disabledDate(current) {
+        //     console.log(this.choiceDate, 'this.choiceDate--this.choiceDate');
+        //     // if (this.modalTitle === 'edit' && this.configForm.launchDateRange.length) {
+        //     //     return current && current < new Date(this.configForm.launchDateRange[0]);
+        //     // }
+        //     // else if (this.choiceDate) {
+        //     //     return current && current < this.choiceDate;
+        //     // }
+        //     if (this.choiceDate) {
+        //         return current && current < this.choiceDate;
+        //     }
+        // },
         handleGetAdAudiencePackage() {
             const params = {
                 accountId: this.configForm.accountId
@@ -1630,9 +1635,6 @@ export default {
         handleLaunchData(date, dateString) {
             this.configForm.launchDateRange = dateString;
         },
-        handleCalendarChange([startTime]) {
-            this.choiceDate = startTime;
-        },
         handleBudgetMode(e) {
             if (e === 'BUDGET_MODE_TOTAL') {
                 this.configForm.adScheduleType = 'SCHEDULE_START_END';