Browse Source

账户数据展示

zhuxinbo 5 years ago
parent
commit
033ce0e34d

+ 20 - 0
src/api/statistics.js

@@ -0,0 +1,20 @@
+
+import {axios} from '@/utils/request'
+
+// 获取所有账户
+export function getAdvertiserList() {
+    return axios({
+      url: "/ctop/accountReport/getAdvertiserList",
+      method: 'post',
+    //   data: parameter
+    })
+}
+
+// getReportList 
+export function getReportList(parameter) {
+    return axios({
+      url: "/ctop/accountReport/getReportList",
+      method: 'post',
+      data: parameter
+    })
+}

+ 6 - 3
src/views/modules/Statistics/Statistics.vue

@@ -142,7 +142,7 @@
             style="margin-left:0"
             class="styleElse"
           >{{kuaishou.photoClickProportion?Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip"  v-show="active==1">
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
             <template slot="title">
               <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
             </template>
@@ -173,7 +173,7 @@
             class="styleElse"
             style="  margin-left:0"
           >{{kuaishou.showProportion?Math.abs(kuaishou.showProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip"  v-show="active==1">
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
             <template slot="title">
               <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
             </template>
@@ -205,7 +205,7 @@
             class="styleElse"
             style="  margin-left:0"
           >{{kuaishou.aClickProportion?Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip"  v-show="active==1">
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
             <template slot="title">
               <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
             </template>
@@ -1481,6 +1481,9 @@ export default {
         }, 0)
       }, 120000)
     })
+  },
+  deactivated() {
+    window.clearTimeout(upDate)
   }
 }
 </script>

+ 1 - 45
src/views/modules/Statistics/accountStatistics.vue

@@ -2,53 +2,9 @@
 .statistics .ant-col-6 {
   margin: 10px 0;
 }
-.statistics .ant-col-6 .ant-card-body {
-  display: flex;
-  justify-content: center;
-}
-.statistics .ant-col-6 p,
-.statistics .ant-col-6 span {
-  display: block;
-  text-align: center;
-  line-height: 40px;
-  font-size: 30px;
-  font-weight: 600;
-  color: red;
-  margin: 0;
-}
-.search-box .ant-card-body {
-  padding: 5px 15px;
-}
-.search-box p {
-  display: inline-block;
-  border: 1px solid #f2f2f2;
-  border-radius: 5px;
-  margin-right: 10px;
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.statistics .ant-col-6 .ant-card-body .styleElse {
-  line-height: 60px;
-  height: 40px;
-  font-size: 16px;
-  font-weight: 400;
-  margin-left: 10px;
-}
-.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
-  display: none !important;
-}
-.yincang .ant-col-6 p {
-  text-align: left;
-  color: red;
-  font-size: 16px;
-  font-weight: 500;
-}
-.ant-table-thead div {
-  font-weight: 700;
-}
 </style>
 <template>
-  <div class="statistics">
+  <div class="accountStatistics">
     <a-row class="image-list-heading vm-panel">
       <a-row>
         <div class="panel-heading">{{ title }}</div>

+ 462 - 0
src/views/modules/Statistics/dataDisplayStatistics.vue

@@ -0,0 +1,462 @@
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+</style>
+<style>
+/* .data-display-statistics .ant-card-body {
+  padding: 0 15px;
+} */
+.data-display-statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.data-display-statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.data-display-statistics .ant-col-6 p,
+.data-display-statistics .ant-col-6 span {
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search-box .ant-card-body {
+  padding: 5px 15px;
+}
+.data-display-statistics .ant-col-6 .ant-card-body .styleElse {
+  line-height: 60px;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+}
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.yincang .ant-col-6 p {
+  text-align: left;
+  color: red;
+  font-size: 16px;
+  font-weight: 500;
+}
+.ant-table-thead div {
+  font-weight: 700;
+}
+.tool-tip {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+}
+</style>
+<template>
+  <div class="data-display-statistics">
+    <a-row class="image-list-heading vm-panel">
+      <div class="panel-heading">{{ title }}</div>
+      <a-row type="flex" align="middle" justify="space-between" class="panel-body">
+        <div class="search-bar">
+          <a-select
+            v-model="appId"
+            showSearch
+            allowClear
+            mode="multiple"
+            placeholder="请选择账户"
+            optionFilterProp="children"
+            style="width: 700px"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleChange"
+            :filterOption="true"
+            @search="search"
+            :maxTagCount="1"
+          >
+            <a-select-option
+              v-for="appModel in options"
+              :key="appModel.accountId"
+              :value="appModel.accountId"
+            >{{appModel.advertiserName}}&#12288;&#12288;{{appModel.accountId}}&#12288;&nbsp;&#12288;{{appModel.authName}}&#12288;&#12288;{{appModel.operationName}}</a-select-option>
+          </a-select>
+          <a-input-number
+            :min="1"
+            :max="10"
+            :step="0.1"
+            v-model="discount"
+            placeholder="请输入折扣"
+            style="width:100px"
+          />
+          <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
+        </div>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <a-card :bordered="false" class="search-box">
+            <p :style="active==1?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(1)">今天</p>
+            <p :style="active==2?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(2)">昨天</p>
+            <p
+              :style="active==3?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(3)"
+            >近一周</p>
+            <p
+              :style="active==4?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(4)"
+            >近十五天</p>
+            <p
+              :style="active==5?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(5)"
+            >近一月</p>
+            <p
+              :style="active==6?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(6)"
+            >近三月</p>
+            <p
+              :style="active==7?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(7)"
+            >近半年</p>
+            <p :style="active==8?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(8)">所有</p>
+            <a-range-picker
+              style="width:400px"
+              :disabledDate="disabledDate"
+              :showTime="{
+                hideDisabledOptions: true,
+            }"
+              format="YYYY-MM-DD"
+              v-model="startValue"
+              @ok="getAdd(9)"
+            />
+          </a-card>
+        </a-col>
+        <!-- <a-col :span="24">
+          <a-card :bordered="false" class="search-box">
+            <p @click="visible = true">对比</p>
+          </a-card>
+        </a-col>-->
+      </a-row>
+    </a-row>
+    <a-row :gutter="16" v-if="kuaishou">
+      <a-col :span="6" style="width:20%">
+        <a-card title="总消耗" :bordered="false">
+          <!-- <p>{{kuaishou.cost}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.cost" :duration="duration" :decimals="2"></countTo>
+          <a-icon
+            v-if="kuaishou.costProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.costProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
+          <span
+            v-if="active==1"
+            :style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{kuaishou.costProportion?Math.abs(kuaishou.costProportion*100).toFixed(2)+'%':'0.00%'}}</span>
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
+            <template slot="title">
+              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
+            </template>
+            <a-icon type="exclamation-circle" />
+          </a-tooltip>
+        </a-card>
+      </a-col>
+      <a-col :span="6" style="width:20%">
+        <a-card title="折后消耗" :bordered="false">
+          <!-- <p>{{kuaishou.cost}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.discountCost" :duration="duration" :decimals="2"></countTo>
+          <a-icon
+            v-if="kuaishou.discountCostProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.discountCostProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
+          <span
+            v-if="active==1"
+            :style="kuaishou.discountCostProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{kuaishou.discountCostProportion?Math.abs(kuaishou.discountCostProportion*100).toFixed(2)+'%':'0.00%'}}</span>
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
+            <template slot="title">
+              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
+            </template>
+            <a-icon type="exclamation-circle" />
+          </a-tooltip>
+        </a-card>
+      </a-col>
+      <a-col :span="6" style="width:20%">
+        <a-card title="封面点击数" :bordered="false">
+          <!-- <p>{{kuaishou.photoClick}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.photoClick" :duration="duration" :decimals="0"></countTo>
+          <a-icon
+            v-if="kuaishou.photoClickProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.photoClickProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74"
+          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
+          <span
+            v-if="active==1"
+            :style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
+            style="margin-left:0"
+            class="styleElse"
+          >{{kuaishou.photoClickProportion?Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
+            <template slot="title">
+              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
+            </template>
+            <a-icon type="exclamation-circle" />
+          </a-tooltip>
+        </a-card>
+      </a-col>
+      <a-col :span="6" style="width:20%">
+        <a-card title="封面曝光数" :bordered="false">
+          <!-- <p>{{kuaishou.photoShow}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.photoShow" :duration="duration" :decimals="0"></countTo>
+          <a-icon
+            v-if="kuaishou.showProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.showProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
+          <span
+            v-if="active==1"
+            :style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{kuaishou.showProportion?Math.abs(kuaishou.showProportion*100).toFixed(2)+'%':'0.00%'}}</span>
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
+            <template slot="title">
+              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
+            </template>
+            <a-icon type="exclamation-circle" />
+          </a-tooltip>
+        </a-card>
+      </a-col>
+      <a-col :span="6" style="width:20%">
+        <a-card title="素材曝光数" :bordered="false">
+          <!-- <p>{{kuaishou.aclick}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.aclick" :duration="duration" :decimals="0"></countTo>
+
+          <a-icon
+            v-if="kuaishou.aClickProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.aClickProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
+          <span
+            v-if="active==1"
+            :style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{kuaishou.aClickProportion?Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
+          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
+            <template slot="title">
+              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
+            </template>
+            <a-icon type="exclamation-circle" />
+          </a-tooltip>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import countTo from 'vue-count-to'
+import moment from 'moment'
+import { getAdvertiserList, getReportList } from '@api/statistics'
+import axios from 'axios'
+var interval, objTimer
+var a = 0
+export default {
+  name: 'data-display-statistics',
+  components: {
+    ACol,
+    ARow,
+    countTo
+  },
+
+  data: function() {
+    return {
+      title: '账户数据展示',
+      options: [],
+      list: [],
+      appId: [],
+      keyValue: null,
+      keyValueData: [],
+      active: 1,
+      startValue: [],
+      allValue: [],
+      discount: 1,
+      duration: 1000,
+      kuaishou: {
+        aclick: 0,
+        aClickProportion: 0,
+        cost: 0,
+        costProportion: 0,
+        photoClick: 0,
+        photoClickroportion: 0,
+        photoShow: 0,
+        showProportion: 0,
+        discountCost: 0,
+        discountCostProportion: 0
+      }
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
+    }
+  },
+  methods: {
+    moment,
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current > moment().endOf('day')
+    },
+    handleChange(value) {
+      console.log(value)
+      //   this.appId = value
+    },
+    handleBlur() {
+      console.log('blur')
+    },
+    handleFocus() {
+      console.log('focus')
+      if (this.appId.length > 0) {
+        this.options = []
+        for (let i = 0; i < this.list.length; i++) {
+          for (let j = 0; j < this.appId.length; j++) {
+            if (this.list[i].accountId == this.appId[j]) {
+              this.options.push(this.list[i])
+            }
+          }
+        }
+      } else {
+        this.options = this.list
+      }
+    },
+    search(value) {
+      if (value !== '') {
+        this.options = this.list.filter(item => {
+          var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
+          console.log(data, value)
+          return data.toLowerCase().indexOf(value.toLowerCase()) > -1
+        })
+      } else {
+        this.options = this.list
+      }
+    },
+    addUser() {
+      var that = this
+      if (this.appId.length > 0) {
+        var params = {}
+        params.accountIds = JSON.stringify(that.appId)
+        params.type = that.active
+        params.discount = that.discount
+        if (that.active == 9) {
+          params.startDate = dateValue[0]
+          params.endDate = dateValue[1]
+        }
+
+        getReportList(params).then(res => {
+          if (res == '') {
+            that.kuaishou.aclick = 0
+            that.kuaishou.cost = 0
+            that.kuaishou.photoClick = 0
+            that.kuaishou.photoShow = 0
+            that.kuaishou.discountCost = 0
+          } else {
+            that.kuaishou = res.summary
+          }
+        })
+      } else {
+        this.$message.error('请选择账户')
+      }
+    },
+    getAdd(checked) {
+      if (checked == 9) {
+        if (this.startValue.length > 0 && this.startValue[0]) {
+          this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
+          this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
+        }
+      } else {
+        this.startValue = []
+        this.allValue = []
+      }
+      this.active = checked
+      this.addUser()
+    }
+  },
+  watch: {},
+  distoryed() {},
+  mounted: function() {
+    this.$nextTick(() => {
+      getAdvertiserList().then(res => {
+        console.log(res)
+        if (res.code == 0) {
+          this.list = res.result
+          this.options = res.result
+        }
+      })
+    })
+  }
+}
+</script>

+ 280 - 280
src/views/modules/kuaishouapp/campaignCreate.vue

@@ -1,280 +1,280 @@
-<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: 10}, sm: {span: 17} }">
-        <a-radio-group @change="typeChange" v-model="type">
-          <a-radio-button v-for="purpose in typeList" :key="purpose.itemText" :value="purpose.itemValue">
-            {{purpose.itemText}}
-          </a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-
-
-      <a-form-item
-        label="计划名称"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-input v-model="campaignName"></a-input>
-      </a-form-item>
-
-      <a-form-item
-        label="单日预算"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
-          <a-radio-button value="UNLIMITED">不限</a-radio-button>
-          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item
-        label="预算金额"
-        v-if="showBudgetDaily"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-input
-          v-model="dayBudget"
-          v-decorator="[
-                  'confirm_dayBudget',
-                  {rules: [{ required: true, message: 'error:' },
-                  {validator: handleConfirmValue}]}
-                ]"
-          placeholder="不小于500,不超过100000000,仅支持输入自然数" type="number" style="width: 70%"></a-input>
-        元
-      </a-form-item>
-
-
-      <a-form-item
-        v-if="showApp"
-        label="目标应用"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-select
-          v-model="appId"
-          showSearch
-          allowClear
-          placeholder="选择应用目标"
-          optionFilterProp="children"
-          style="width: 600px"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @change="handleChange"
-          :filterOption="filterOption"
-        >
-          <a-select-option value="0">请选择目标应用</a-select-option>
-          <a-select-option  v-for="appModel in appList" :key="appModel.id" :value="appModel.id">{{appModel.appName}}&#12288;&nbsp;&#12288;{{appModel.appType}}&#12288;&#12288;  {{appModel.appVersion}}</a-select-option>
-        </a-select>
-      </a-form-item>
-
-
-      <a-form-item
-        v-if="showUrlType"
-        label="转化类型"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-radio-group v-model="urlType">
-          <a-radio-button value="1">淘宝商品短链</a-radio-button>
-          <a-radio-button value="2">淘宝商品</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showChannelType"
-        label="转化类型"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-radio-group v-model="channelType">
-          <a-radio-button value="1">填写链接</a-radio-button>
-          <a-radio-button value="2" disabled="disabled">落地页工具</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-
-
-      <a-form-item
-        v-if="showRedirect"
-        label="链接地址"
-        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-input v-model="redirectUrl"></a-input>
-
-      </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 moment from "moment"
-  import {mapActions, mapGetters} from 'vuex'
-
-
-  export default {
-    name: 'BaseForm',
-    data() {
-      return {
-        promotionName: '',
-        type: '2',
-        typeList: {},
-        appList: {},
-        showBudgetDaily: false,
-        campaignName: '提升应用安装_' + moment(new Date()),
-        campaignBudget: 'UNLIMITED',
-        dayBudget: 0,
-        appId: '0',//应用目标
-        showApp: true,
-        redirectUrl: '',// 链接地址
-        showRedirect: false,
-        urlType: '1',
-        showUrlType: false,
-        channelType: '1',
-        showChannelType: false,
-
-        form: this.$form.createForm(this),
-        url: {
-          dictListUrl: 'toutiao/dictitem/list',
-          appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
-          insertTemplateUrl: '/kuaishou/kuaiShouCampaignTemplate/insert'
-        }
-      }
-    },
-    methods: {
-      ...mapGetters(["nickname", "avatar", "userInfo"]),
-      handleConfirmValue(rule, value,callback) {
-        if (this.dayBudget == '' || this.dayBudget < 500 || this.dayBudget >= 100000000) {
-          callback('请输入正确预算金额')
-        }
-        callback()
-      },
-
-      handleConfirmAppId(rule,value, callback) {
-        if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
-          callback('请选择目标应用')
-        }
-        callback()
-      },
-      handleSubmit(e) {
-        e.preventDefault()
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            console.log('Received values of form: ', values);
-            let params = {};
-            params.type = this.type;
-            if (this.type == '2') {
-              params.appId = this.appId;
-            }
-            if (this.type == '3') {
-              params.urlType = this.urlType;
-            }
-            if (this.type == '5' || this.type == '4' || this.type == '3') {
-              params.url = this.redirectUrl;
-            }
-            // params.campaignBudget = this.campaignBudget;
-            params.dayBudget = this.dayBudget;
-            params.campaignName = this.campaignName;
-            params.loginId = this.userInfo().id;
-            console.log(params)
-
-            postAction(this.url.insertTemplateUrl, params).then((res) => {
-              console.log(res)
-              if (res.success) {
-                alert("广告组模板创建成功");
-              }
-            });
-          }
-        })
-      },
-      onChange(value) {
-        console.log(value);
-      },
-      showBudgetStatusChange() {
-        if (this.campaignBudget == 'UNLIMITED') {
-          this.showBudgetDaily = false;
-          this.dayBudget = 0;
-        } else {
-          this.showBudgetDaily = true;
-          this.dayBudget = '';
-
-
-        }
-      },
-      typeChange() {
-        if (this.type == 2) {
-          this.promotionName = '提升应用安装';
-          this.showApp = true;
-          this.showRedirect = false;
-          this.showUrlType = false;
-          this.showChannelType = false;
-        }
-        if (this.type == 3) {
-          this.promotionName = '获取电商下单';
-          this.showApp = false;
-          this.showRedirect = true;
-          this.showUrlType = true;
-          this.showChannelType = false;
-        }
-        if (this.type == 4) {
-          this.promotionName = '推广品牌活动';
-          this.showApp = false;
-          this.showRedirect = true;
-          this.showUrlType = false;
-          this.showChannelType = false;
-        }
-        if (this.type == 5) {
-          this.promotionName = '收集销售线索';
-          this.showApp = false;
-          this.showRedirect = true;
-          this.showUrlType = false;
-          this.showChannelType = true;
-        }
-        this.campaignName = this.promotionName + '_' + moment(new Date());
-      },
-      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
-      }
-    },
-    created: function () {
-      //出价方式
-      let params = {};
-      params.dictId = '181afbae847dd3bc7e27795d8958956';
-      params.pageSize = '1000';
-      getAction(this.url.dictListUrl, params).then((res) => {
-        if (res.success) {
-          this.typeList = res.result.records
-        }
-      });
-
-      // 应用列表
-      //出价方式
-      let params2 = {};
-      params2.loginId = this.userInfo().id;
-      params2.pageSize = '1000';
-      getAction(this.url.appListUrl, params).then((res) => {
-        if (res.success) {
-          this.appList = res.result.records
-          console.log(this.appList)
-        }
-      });
-
-
-    }
-  }
-</script>
+<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: 10}, sm: {span: 17} }">
+        <a-radio-group @change="typeChange" v-model="type">
+          <a-radio-button v-for="purpose in typeList" :key="purpose.itemText" :value="purpose.itemValue">
+            {{purpose.itemText}}
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        label="计划名称"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input v-model="campaignName"></a-input>
+      </a-form-item>
+
+      <a-form-item
+        label="单日预算"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
+          <a-radio-button value="UNLIMITED">不限</a-radio-button>
+          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="预算金额"
+        v-if="showBudgetDaily"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-model="dayBudget"
+          v-decorator="[
+                  'confirm_dayBudget',
+                  {rules: [{ required: true, message: 'error:' },
+                  {validator: handleConfirmValue}]}
+                ]"
+          placeholder="不小于500,不超过100000000,仅支持输入自然数" type="number" style="width: 70%"></a-input>
+        元
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showApp"
+        label="目标应用"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-select
+          v-model="appId"
+          showSearch
+          allowClear
+          placeholder="选择应用目标"
+          optionFilterProp="children"
+          style="width: 600px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <!-- <a-select-option value="0">请选择目标应用</a-select-option> -->
+          <a-select-option  v-for="appModel in appList" :key="appModel.id" :value="appModel.id">{{appModel.appName}}&#12288;&nbsp;&#12288;{{appModel.appType}}&#12288;&#12288;  {{appModel.appVersion}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showUrlType"
+        label="转化类型"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="urlType">
+          <a-radio-button value="1">淘宝商品短链</a-radio-button>
+          <a-radio-button value="2">淘宝商品</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+      <a-form-item
+        v-if="showChannelType"
+        label="转化类型"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="channelType">
+          <a-radio-button value="1">填写链接</a-radio-button>
+          <a-radio-button value="2" disabled="disabled">落地页工具</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showRedirect"
+        label="链接地址"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input v-model="redirectUrl"></a-input>
+
+      </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 moment from "moment"
+  import {mapActions, mapGetters} from 'vuex'
+
+
+  export default {
+    name: 'BaseForm',
+    data() {
+      return {
+        promotionName: '',
+        type: '2',
+        typeList: {},
+        appList: {},
+        showBudgetDaily: false,
+        campaignName: '提升应用安装_' + moment(new Date()),
+        campaignBudget: 'UNLIMITED',
+        dayBudget: 0,
+        appId: '0',//应用目标
+        showApp: true,
+        redirectUrl: '',// 链接地址
+        showRedirect: false,
+        urlType: '1',
+        showUrlType: false,
+        channelType: '1',
+        showChannelType: false,
+
+        form: this.$form.createForm(this),
+        url: {
+          dictListUrl: 'toutiao/dictitem/list',
+          appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
+          insertTemplateUrl: '/kuaishou/kuaiShouCampaignTemplate/insert'
+        }
+      }
+    },
+    methods: {
+      ...mapGetters(["nickname", "avatar", "userInfo"]),
+      handleConfirmValue(rule, value,callback) {
+        if (this.dayBudget == '' || this.dayBudget < 500 || this.dayBudget >= 100000000) {
+          callback('请输入正确预算金额')
+        }
+        callback()
+      },
+
+      handleConfirmAppId(rule,value, callback) {
+        if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
+          callback('请选择目标应用')
+        }
+        callback()
+      },
+      handleSubmit(e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            let params = {};
+            params.type = this.type;
+            if (this.type == '2') {
+              params.appId = this.appId;
+            }
+            if (this.type == '3') {
+              params.urlType = this.urlType;
+            }
+            if (this.type == '5' || this.type == '4' || this.type == '3') {
+              params.url = this.redirectUrl;
+            }
+            // params.campaignBudget = this.campaignBudget;
+            params.dayBudget = this.dayBudget;
+            params.campaignName = this.campaignName;
+            params.loginId = this.userInfo().id;
+            console.log(params)
+
+            postAction(this.url.insertTemplateUrl, params).then((res) => {
+              console.log(res)
+              if (res.success) {
+                alert("广告组模板创建成功");
+              }
+            });
+          }
+        })
+      },
+      onChange(value) {
+        console.log(value);
+      },
+      showBudgetStatusChange() {
+        if (this.campaignBudget == 'UNLIMITED') {
+          this.showBudgetDaily = false;
+          this.dayBudget = 0;
+        } else {
+          this.showBudgetDaily = true;
+          this.dayBudget = '';
+
+
+        }
+      },
+      typeChange() {
+        if (this.type == 2) {
+          this.promotionName = '提升应用安装';
+          this.showApp = true;
+          this.showRedirect = false;
+          this.showUrlType = false;
+          this.showChannelType = false;
+        }
+        if (this.type == 3) {
+          this.promotionName = '获取电商下单';
+          this.showApp = false;
+          this.showRedirect = true;
+          this.showUrlType = true;
+          this.showChannelType = false;
+        }
+        if (this.type == 4) {
+          this.promotionName = '推广品牌活动';
+          this.showApp = false;
+          this.showRedirect = true;
+          this.showUrlType = false;
+          this.showChannelType = false;
+        }
+        if (this.type == 5) {
+          this.promotionName = '收集销售线索';
+          this.showApp = false;
+          this.showRedirect = true;
+          this.showUrlType = false;
+          this.showChannelType = true;
+        }
+        this.campaignName = this.promotionName + '_' + moment(new Date());
+      },
+      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
+      }
+    },
+    created: function () {
+      //出价方式
+      let params = {};
+      params.dictId = '181afbae847dd3bc7e27795d8958956';
+      params.pageSize = '1000';
+      getAction(this.url.dictListUrl, params).then((res) => {
+        if (res.success) {
+          this.typeList = res.result.records
+        }
+      });
+
+      // 应用列表
+      //出价方式
+      let params2 = {};
+      params2.loginId = this.userInfo().id;
+      params2.pageSize = '1000';
+      getAction(this.url.appListUrl, params).then((res) => {
+        if (res.success) {
+          this.appList = res.result.records
+          console.log(this.appList)
+        }
+      });
+
+
+    }
+  }
+</script>

+ 2 - 2
vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
        },*/
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
-        target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
-        // target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
+        target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,
         changeOrigin: true