update:触达效果

src/service/api/ecmApi.js

@@ -51,6 +51,8 @@ export const ecmTouchEffectColumnDiagram = params => requests(PREFIX + 'ecmTouch
 export const ecmTouchEffectTable = params => requests(PREFIX + 'ecmTouchEffectTable', params);
 export const ecmTouchEffectFunnelChart = params => requests(PREFIX + 'ecmTouchEffectFunnelChart', params);
 export const ecmPlanTouchConfig = params => requests(PREFIX + 'ecmPlanTouchConfig', params);
+export const getCardLeads = params => requests(PREFIX + 'getCardLeads', params); // 卡券收益
+export const getCardLeadsList = params => requests(PREFIX + 'getCardLeadsList', params); // 卡券收益表格
 // 智能营销--导购线索
 export const ecmGuideCluesColumnDiagram = params => requests(PREFIX + 'ecmGuideCluesColumnDiagram', params);
 export const ecmGuideCluesTable = params => requests(PREFIX + 'ecmGuideCluesTable', params);

src/views/ecm/touch-clue.vue

@@ -17,7 +17,7 @@
       <!--转为树结构下钻-->
       <div class="area_content">
         <div class="tree">
-          <el-tree ref="treeList" highlight-current :props="defaultProps" :load="loadNode" lazy node-key="storeGroupId" :default-expanded-keys="allStoreId"></el-tree>
+          <el-tree ref="treeList" v-loading="treeLoading" highlight-current :props="defaultProps" @node-click="refreshLazyTree" :load="loadNode" lazy node-key="storeGroupId" :default-expanded-keys="allStoreId"></el-tree>
         </div>
         <div class="map_area">
           <div class="top">
@@ -130,7 +130,9 @@ export default {
       isHeade2: false,
       allStoreId: [],
       storeGroupId: '',
-      level: 0
+      level: 0,
+      loading: false,
+      treeLoading: false
     };
   },
   mounted() {
@@ -144,8 +146,6 @@ export default {
     } else {
       name = '导购线索';
     }
-    this.getSecondSecondData();
-    this.getTableFirstData();
     this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果`, path: `/ecm/touch/${planId}?name=${planName}` }, { name }]); // eslint-disable-line
   },
   methods: {
@@ -169,6 +169,7 @@ export default {
         }
       }
       this.currentPage = 1;
+      this.tableExtra = [];
       this.getTableFirstData();
     },
     changeListTab(index) {
@@ -229,6 +230,7 @@ export default {
             formatter(row) {
               if (!row.groupName) return '--';
               else if (row.groupName == '-1') return '【无归属门店】';
+              else if (row.groupName == '合计' || row.groupName == '计划整体' || row.groupId == '-1') return row.groupName;
               return `<span style="color:#1890FF;cursor:pointer;" data-type="groupName">${row.groupName}</span>`;
             }
           },
@@ -271,6 +273,7 @@ export default {
             formatter(row) {
               if (!row.groupName) return '--';
               else if (row.groupName == '-1') return '【无归属门店】';
+              else if (row.groupName == '合计' || row.groupName == '计划整体' || row.groupId == '-1') return row.groupName;
               return `<span style="color:#1890FF;cursor:pointer;" data-type="groupName">${row.groupName}</span>`;
             }
           },
@@ -379,32 +382,43 @@ export default {
       }
       this.getTableList();
     },
+    // 懒加载树结构
     async loadNode(node, resolve) {
+      this.treeLoading = true;
       let params = { level: node.level, storeGroupId: node.data ? node.data.storeGroupId : null };
       this.level = node.level;
       this.storeGroupId = node.data ? node.data.storeGroupId : null;
-      this.getTableList();
+      this.tableExtra = [];
       if (node.level === 0) {
         let allStore = await getGroupTree(params);
         this.allStoreId.push(allStore.result[0].storeGroupId); // 设置默认展开所有门店的叶子节点
         this.$nextTick(() => this.$refs.treeList.setCurrentKey(this.allStoreId[0])); // 设置树默认高亮结点
+        this.treeLoading = false;
         return resolve(allStore.result || []);
       }
       let otherArea = await getGroupTree(params);
+      if (node.level == 1) this.getSecondSecondData();
+      // 所有门店为1，此时也可以重新点击渲染刷新表格数据
+      if (node.level >= 1) {
+        this.getTableFirstData();
+      }
       this.currentPage = 1;
+      this.treeLoading = false;
       return resolve(otherArea.result || []);
     },
+    // 点击表格映射到树结构
     onMapTree(row, event) {
       // 展开且选中对应的树，然后调获取合计字段的接口,给表格接口带入树的参数
       if (event.srcElement.dataset.type == 'groupName') {
-        this.tableExtra = [];
-        this.getTableFirstData();
         this.currentPage = 1;
         this.level = row.level;
         this.$refs.treeList.setCurrentKey(row.groupId);
-        this.getTableList();
         this.allStoreId.push(row.groupId);
+        setTimeout(() => this.allStoreId.splice(this.allStoreId.length - 1, 1)); // 点击表格添加进树结构展开组的要删除掉，否则下次展开树结构会直接加载到对应的叶子结点
       }
+    },
+    refreshLazyTree(data, node) {
+      node.loaded = false;
     }
     // storeChange(val) {  // 门店选择器
     //   console.log(val);

src/views/ecm/touch-components/card-profit.vue

@@ -9,38 +9,38 @@
         <div class="list_left">
           <div>
             <p>触达人数</p>
-            <p>80,120</p>
+            <p>{{ formatterNum(list.touchMbrNum) }}</p>
           </div>
           <div>
-            <p>领取人数<span> （领取率 71.25%）</span></p>
-            <p>80,102</p>
+            <p>
+              领取人数<span> （领取率 {{ formatterRate((list.getMbrNum / list.touchMbrNum) * 100) }}）</span>
+            </p>
+            <p>{{ formatterNum(list.getMbrNum) }}</p>
           </div>
           <div>
-            <p>使用人数<span> （使用率 71.25%）</span></p>
-            <p>80,332</p>
+            <p>
+              使用人数<span> （使用率 {{ formatterRate((list.useMbrNum / list.touchMbrNum) * 100) }}）</span>
+            </p>
+            <p>{{ formatterNum(list.useMbrNum) }}</p>
           </div>
         </div>
         <div class="list_right">
           <div>
             <p>销售单数</p>
-            <p>80,120</p>
+            <p>{{ formatterNum(list.salesAmt) }}</p>
           </div>
           <div>
             <p>销售单金额（元）</p>
-            <p>80,102</p>
-          </div>
-          <div>
-            <p>退货/换货金额（元）</p>
-            <p>10,302,300</p>
+            <p>{{ formatterNum(list.salesAmt, true) }}</p>
           </div>
         </div>
       </div>
       <el-table :data="tableData" v-if="tableData.length" style="margin-bottom:47px" max-height="710">
-        <el-table-column :prop="name" label="卡券名称" min-width="100">
+        <el-table-column :prop="cardName" label="卡券名称" min-width="100">
           <template slot-scope="scope">
-            <div class="name" v-if="scope.row.name">
+            <div class="name" v-if="scope.row.cardName">
               <div class="top">
-                {{ scope.row.name }}
+                {{ scope.row.cardName }}
                 <span class="type">折扣券</span>
               </div>
               <p>卡券副标题</p>
@@ -67,38 +67,34 @@
 <script>
 export default {
   name: 'card-profit',
+  props: {
+    list: {
+      type: Object,
+      default: () => {}
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       isCardProfit: true, // 是否使用卡券营销
-      tableData: [
-        {
-          name: 'XXX生日8折券',
-          touchNum: null,
-          drawNum: null,
-          drawRate: null,
-          useNum: null,
-          useRate: null,
-          salesNum: null,
-          salesMoney: null,
-          refundMoney: null
-        }
-      ],
       tableHeader: [
-        { label: '触达人数', prop: 'touchNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.touchNum) },
-        { label: '领取人数', prop: 'drawNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.drawNum) },
-        { label: '领取率', prop: 'drawRate', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterRate(row.drawRate) },
-        { label: '使用人数', prop: 'useNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.useNum) },
-        { label: '使用率', prop: 'useRate', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterRate(row.useRate) },
-        { label: '销售单数', prop: 'salesNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.salesNum) },
-        { label: '销售单金额', prop: 'salesMoney', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.salesMoney) },
-        { label: '退货/换货金额', prop: 'refundMoney', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.refundMoney) }
+        { label: '触达人数', prop: 'touchMbrNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.touchMbrNum) },
+        { label: '领取人数', prop: 'getMbrNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.getMbrNum) },
+        { label: '领取率', prop: 'drawRate', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterRate((row.getMbrNum / row.touchMbrNum) * 100) },
+        { label: '使用人数', prop: 'useMbrNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.useMbrNum) },
+        { label: '使用率', prop: 'useRate', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterRate((row.useMbrNum / row.touchMbrNum) * 100) },
+        { label: '销售单数', prop: 'orderCnt', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.orderCnt) },
+        { label: '销售单金额', prop: 'salesAmt', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.salesAmt) }
       ]
     };
   },
   computed: {
     formatterNum() {
-      return val => {
-        return !val && val != 0 ? '--' : parseInt(val).toLocaleString();
+      return (val, isToFixed) => {
+        return !val && val != 0 ? '--' : isToFixed ? parseInt(val).toLocaleString('zh', { minimumFractionDigits: 2 }) : parseInt(val).toLocaleString();
       };
     },
     formatterRate() {
@@ -152,6 +148,9 @@ export default {
       div {
         flex: 1;
         padding-top: 26px;
+        &:nth-of-type(1) {
+          flex: 0.8;
+        }
         p {
           &:nth-child(1) {
             font-size: 14px;

src/views/ecm/touch-effect.vue

@@ -7,7 +7,7 @@
       <touch-charts :type="0" :createTime="$route.query.createTime" />
       <market-list v-if="marketListData.length" :isRepeat="isRepeat" :data="marketListData" :isReference="isReference" :batchNum="batchNum" :batchTimes="batchTime" />
     </div>
-    <cardType />
+    <card-profit :list="cardLead" :tableData="cardLeadTable" />
     <div class="dm-wrap effect table">
       <div class="title">
         <span>线索转化对比</span>
@@ -69,9 +69,8 @@
 import funnel from '@/views/ecm/touch-components/funnel.vue';
 import marketList from '@/views/ecm/touch-components/market-list.vue';
 import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
-import cardType from '@/views/ecm/touch-components/card-profit.vue';
-import { ecmTouchEffectTable, ecmTouchEffectFunnelChart, ecmPlanTouchConfig } from '@/service/api/ecmApi.js';
-// ecmPlanTouchConfig
+import cardProfit from '@/views/ecm/touch-components/card-profit.vue';
+import { ecmTouchEffectTable, ecmTouchEffectFunnelChart, ecmPlanTouchConfig, getCardLeads, getCardLeadsList } from '@/service/api/ecmApi.js';
 export default {
   name: 'ecm',
   data() {
@@ -79,27 +78,31 @@ export default {
       marketListData: [],
       funnelData: [],
       clueRate: [],
-      loading: true,
+      loading: false,
       ecmPlanId: '',
       isRepeat: false, // 是否重复营销
       isReference: false,
       batchNum: 0, // 批次数量
-      batchTime: '' // 批次时间
+      batchTime: '', // 批次时间
+      cardLead: {},
+      cardLeadTable: []
     };
   },
   components: {
     marketList,
     touchCharts,
     funnel,
-    cardType
+    cardProfit
   },
   mounted() {
     this.ecmPlanId = this.$route.params.id;
     let planName = this.$route.query.name;
     this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果` }]); // eslint-disable-line
     this.getMarketList();
-    this.getFunnelData();
     this.getTouchConfig();
+    this.getCardLeadsSum();
+    this.getCardLeadTable();
+    this.getFunnelData();
   },
   methods: {
     toClue(type) {
@@ -122,6 +125,7 @@ export default {
       });
     },
     getFunnelData() {
+      this.loading = true;
       ecmTouchEffectFunnelChart({ ecmPlanId: this.ecmPlanId }).then(res => {
         let checkData = res.result.map(item => {
           if (!item || !Object.keys(item).length) {
@@ -203,6 +207,17 @@ export default {
         if (res.result.effectType == 1) this.isRepeat = true;
         else this.isRepeat = false;
       });
+    },
+    // 获取卡券收益数据
+    getCardLeadsSum() {
+      getCardLeads({ ecmPlanId: this.$route.params.id }).then(res => {
+        this.cardLead = res.result;
+      });
+    },
+    getCardLeadTable() {
+      getCardLeadsList({ ecmPlanId: this.$route.params.id }).then(res => {
+        this.cardLeadTable = res.result;
+      });
     }
   }
 };