Browse Source

添加广告计划创建模板

syh 5 years ago
parent
commit
6bfc5bb745
2 changed files with 222 additions and 1 deletions
  1. 221 0
      src/views/template/advertiseplan/create.vue
  2. 1 1
      src/views/template/budget/create.vue

+ 221 - 0
src/views/template/advertiseplan/create.vue

@@ -0,0 +1,221 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="选择广告组模板"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-select
+          showSearch
+          placeholder="选择广告主模板"
+          optionFilterProp="children"
+          style="width: 200px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="campaign in campaignList" :key="campaign.id" :value="campaign.id">{{campaign.campaignName}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        label="投放范围"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-radio-group v-model="deliveryRange">
+          <a-radio-button value="default">默认</a-radio-button>
+          <a-radio-button value="csj">穿山甲</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="选择用户定向模板"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-select
+          showSearch
+          placeholder="选择用户定向模板"
+          optionFilterProp="children"
+          style="width: 200px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="campaign in campaignList" :key="campaign.id" :value="campaign.id">{{campaign.campaignName}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        label="选择预算与出价模板"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-select
+          showSearch
+          placeholder="选择预算与出价模板"
+          optionFilterProp="children"
+          style="width: 200px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="campaign in budgetList" :key="campaign.id" :value="campaign.id">{{campaign.name}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        label="选择投放目标模板"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-select
+          showSearch
+          placeholder="选择投放目标模板"
+          optionFilterProp="children"
+          style="width: 200px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="campaign in deliverytargetList" :key="campaign.id" :value="campaign.id">{{campaign.name}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+
+      <a-form-item
+        label="创意方式"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-radio-group v-model="creativeType">
+          <a-radio-button value="customize">自定义创意</a-radio-button>
+          <a-radio-button value="program">程序化创意</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="创意文案"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-input v-model="creativeText"></a-input>
+      </a-form-item>
+      <a-form-item
+        label="迭代数量"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-input-number :min="0" :max="10" v-model="iteratorNum" @change="onChange"/>
+      </a-form-item>
+
+
+
+      <a-form-item
+        :wrapperCol="{ span: 24 }"
+        style="text-align: center"
+      >
+        <a-button htmlType="submit" type="primary">提交</a-button>
+        <a-button style="margin-left: 8px">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+  import {deleteAction, postAction, getAction} from '@/api/manage'
+  import $ from 'jquery'
+  import moment from 'moment';
+
+  export default {
+    name: 'BaseForm',
+    data() {
+      return {
+        iteratorNum:1,
+        campaignList: {},
+        deliverytargetList:{},
+        budgetList:{},
+        creativeType:'customize',
+        creativeText:'',
+        deliveryRange:'default',
+        form: this.$form.createForm(this),
+        url: {
+          dictListUrl: 'toutiao/dictitem/list',
+          campaignTemplateListUrl:'/template/campaign/list',
+          budgetTemplateListUrl:'/template/budget/list',
+          deliverytargetTemplateListUrl:'/template/deliverytarget/list'
+        }
+      }
+    },
+    methods: {
+      moment,
+      handleChange (value) {
+        console.log(`selected ${value}`);
+      },
+      handleBlur() {
+        console.log('blur');
+      },
+      handleFocus() {
+        console.log('focus');
+      },
+      filterOption(input, option) {
+        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+      handleSubmit(e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+
+            let params = {};
+            this.dateQuantumRange = $("#table_time_selected1_time_num").val();
+            params.bidType = this.bidType;
+            params.flowControlMode = this.flowControlMode;
+            params.budgetPrice = this.budgetPrice;
+            params.budgetPriceMode = this.budgetPriceMode;
+            params.flowDateType = this.flowDateType;
+            params.startDate = this.startDate;
+            params.endDate = this.endDate;
+            params.dateQuantum = this.dateQuantum;
+            params.priceType = this.priceType;
+            params.convertPrice = this.convertPrice;
+            params.filterType = this.filterType;
+            params.dateQuantumRange = this.dateQuantumRange;
+            console.log(params)
+            postAction(this.url.insertUrl,params).then((res)=>{
+              console.log(res)
+              if(res.success){
+                alert("预算模板创建成功");
+              }
+            });
+
+          }
+        })
+      },
+      onChange(value) {
+        console.log(value)
+      }
+    },
+    created: function () {
+      let params = {};
+      params.pageSize = '1000';
+      postAction(this.url.campaignTemplateListUrl, params).then((res) => {
+        if (res.success) {
+          this.campaignList = res.result.records
+        }
+      });
+
+      params = {};
+      params.pageSize = '1000';
+      postAction(this.url.budgetTemplateListUrl, params).then((res) => {
+        if (res.success) {
+          this.budgetList = res.result.records
+        }
+      });
+
+      params = {};
+      params.pageSize = '1000';
+      postAction(this.url.deliverytargetTemplateListUrl, params).then((res) => {
+        if (res.success) {
+          this.deliverytargetList = res.result.records
+        }
+      });
+    }
+  }
+</script>

+ 1 - 1
src/views/template/budget/create.vue

@@ -98,7 +98,7 @@
         label="目标转化出价"
         label="目标转化出价"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
         :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
-        <a-input-number v-model="convertPrice" :min="0" :max="10" @change="onChange"/>
+        <a-input-number v-model="convertPrice" :min="0" :max="10"/>
       </a-form-item>
       </a-form-item>
       <a-form-item
       <a-form-item