update: dist

src/api/actCode.js

@@ -48,5 +48,14 @@ export const linkAdd = params => postJsonRequest('/haoban-manage3-web/hm/link/ad
 // 【活码链接】-- 编辑
 export const linkUpdate = params => postJsonRequest('/haoban-manage3-web/hm/link/update', params);
 
-// 【活码链接】-- 详情
+// 【活码链接】-- 详情 actCode
 export const linkDetail = params => postJsonRequest('/haoban-manage3-web/hm/link/detail', params);
+
+//  【活码链接】 -- 统计-总计
+export const statisticsTotal = params => postJsonRequest('/haoban-manage3-web/hm/link/statistics/total', params);
+
+//  【活码链接】 -- 统计-图表
+export const statisticsChart = params => postJsonRequest('/haoban-manage3-web/hm/link/statistics/chart', params);
+
+//  【活码链接】 -- 统计--查看明细
+export const statisticsClerk = params => postJsonRequest('/haoban-manage3-web/hm/link/statistics/clerk', params);

src/components/preview-page.vue

@@ -47,7 +47,8 @@ export default {
           this.card = { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroundImg, guideComment };
         }
       },
-      deep: true
+      deep: true,
+      immediate: true
     }
   }
 };

src/components/target-group.vue

+<template>
+  <div class="target-group">
+    <div class="target" :style="{ width: `${100 / dataList.length}%` }" v-for="(el, index) in dataList" :key="index">
+      <div class="target-label">
+        {{ el.label }}
+        <el-tooltip v-if="el.tips" placement="top" popper-class="target-tooltip">
+          <div slot="content" v-html="el.tips" style="max-width: 450px"></div>
+          <i class="iconfont icon-QuestionCircleOutlined target-label-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="target-value">
+        {{ el.value }}<span v-if="el.unit" class="target-value-unit">{{ el.unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TargetGroup',
+  props: {
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.target-group {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: 16px;
+  padding: 20px;
+  width: 100%;
+  min-width: 265px;
+  background: #f7f8fa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  .target {
+    flex-shrink: 0;
+    .target-label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #606266;
+      line-height: 20px;
+      .target-label-icon {
+        font-size: inherit;
+      }
+    }
+    .target-value {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 8px;
+      font-size: 24px;
+      font-family: DIN Alternate-Bold, DIN Alternate;
+      font-weight: bold;
+      color: #303133;
+      line-height: 28px;
+      .target-value-unit {
+        font-size: 14px;
+        line-height: 25px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/views/salesleads/actCodeManage/attractFlowLink/index.vue

@@ -3,7 +3,7 @@
     <dm-sub-title class="m-b-10">
       <div class="title">
         <span>引流加入</span>
-        <span class="info-content cur-po"><i class="iconfont-hb3 iconzhibiaoshuoming  info-icon"></i>指标说明</span>
+        <el-button type="text"><i class="iconfont-hb3 iconzhibiaoshuoming  info-icon"></i>指标说明</el-button>
       </div>
     </dm-sub-title>
     <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -163,11 +163,11 @@ export default {
       btnArr: [
         {
           text: '数据',
-          handler: row => this.goInformation(row)
+          handler: row => this.goDetail(row, 'second')
         },
         {
           text: '详情',
-          handler: row => this.goDetail(row)
+          handler: row => this.goDetail(row, 'first')
         },
         {
           text: '链接',
@@ -251,11 +251,8 @@ export default {
     goLanding() {
       this.$router.push('/ladingPageList');
     },
-    goInformation(row) {
-      console.log(row);
-    },
-    goDetail(row) {
-      this.$router.push(`attractFlowLinkInfo/${row.linkId}`);
+    goDetail(row, type) {
+      this.$router.push(`attractFlowLinkInfo/${row.linkId}?type=${type}`);
     },
     goLink(row) {
       this.linkUrl = row.linkUrl;
@@ -275,10 +272,6 @@ export default {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  .info-content {
-    color: #2f54eb;
-    font-size: 14px;
-  }
   .info-icon {
     margin-right: 8px;
   }

src/views/salesleads/actCodeManage/attractFlowLink/newAddChart.vue

+<template>
+  <div :id="id"></div>
+  <!-- <div v-if="charData.length" :id="id"></div> -->
+  <!-- <div v-else class="chart--nodata"></div> -->
+</template>
+
+<script>
+// import G2 from '@antv/g2';
+import * as G2 from '@antv/g2';
+export default {
+  data() {
+    return {
+      chart: null
+    };
+  },
+  props: {
+    charData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    id: String,
+    width: {
+      type: Number,
+      default: 1192
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
+    }, 30);
+  },
+  beforeUpdate() {
+    this.drawChart();
+  },
+  watch: {
+    charData() {
+      this.drawChart();
+    }
+  },
+  methods: {
+    async drawChart() {
+      this.chart && this.chart.destroy();
+      this.chart = new G2.Chart({
+        container: this.id,
+        height: 359,
+        forceFit: true,
+        width: this.width,
+        padding: [20, 40, 80, 80]
+      });
+      this.chart.data(this.charData, {
+        bizDate: {
+          // type: 'cat', //分类
+          alias: '日期' //别名
+        },
+        addNum: {
+          alias: '今日添加人数'
+        },
+        clickNum: {
+          alias: '今日点击人数'
+        },
+        clickTimes: {
+          alias: '今日点击人次'
+        }
+      });
+      //坐标轴配置(法一配置)
+      this.chart.axis('bizDate', {
+        line: {
+          style: {
+            stroke: '#606266',
+            lineDash: [3, 3]
+          }
+        },
+        tickLine: {
+          style: {
+            fill: '#E4E7ED',
+            lineDash: [3, 3]
+          }
+        },
+        label: {
+          style: {
+            fill: '#606266'
+          }
+        }
+      });
+      // this.chart.axis('新增人数', {
+      //   grid: {
+      //     line: {
+      //       type: 'line',
+      //       style: {
+      //         stroke: '#E4E7ED',
+      //         lineDash: [3, 3]
+      //       }
+      //     }
+      //   },
+      //   label: {
+      //     style: {
+      //       fill: '#606266'
+      //     },
+      //     formatter: val => {
+      //       // 格式化参数值
+      //       return val;
+      //     }
+      //   }
+      // });
+      // 图例
+      this.chart.legend({
+        custom: true,
+        position: 'top-left',
+        items: [
+          { name: '今日添加人数', value: 'addNum', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } },
+          { name: '今日点击人次', value: 'clickTimes', marker: { symbol: 'line', style: { stroke: '#D6B38C', lineWidth: 12, lineHeight: 8 } } },
+          { name: '今日点击人数', value: 'clickNum', marker: { symbol: 'line', style: { stroke: '#14C9C9', lineWidth: 12, lineHeight: 8 } } }
+        ]
+      });
+
+      this.chart
+        .line()
+        .position('bizDate*addNum')
+        .color('#4B74E8');
+      this.chart
+        .line()
+        .position('bizDate*clickTimes')
+        .color('#D6B38C');
+      this.chart
+        .line()
+        .position('bizDate*clickNum')
+        .color('#14C9C9');
+
+      this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
+      //图表绘制的最后一步，用于将图表渲染至画布
+      this.chart.render();
+    }
+  }
+};
+</script>

src/views/salesleads/actCodeManage/components/mixin.js

+export default {
+  data() {
+    return {
+      dateKey: 0,
+      dateLis: [
+        { key: 0, value: '近7天' },
+        { key: 1, value: '近30天' },
+        { key: 2, value: '近三个月' },
+        { key: 3, value: '近半年' },
+        { key: 4, value: '近一年' }
+      ],
+      dateDefault: [],
+      pickerOptions() {
+        let pickerMinDate;
+        return {
+          onPick(obj) {
+            pickerMinDate = obj.minDate;
+          },
+          disabledDate(time) {
+            let start = new Date();
+            start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
+            let start2 = new Date(pickerMinDate);
+            let end = new Date();
+            end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()} 23:59:59`);
+            let end2 = new Date(pickerMinDate);
+            if (pickerMinDate) {
+              start = start.setFullYear(start.getFullYear() - 2);
+              start2 = start2.setDate(start2.getDate() - 60);
+              start = start > start2 ? start : start2;
+              end2 = end2.setDate(end2.getDate() + 60);
+              end = end.getTime() > end2 ? end2 : end.getTime();
+            } else {
+              start = start.setFullYear(start.getFullYear() - 2);
+              end = end.getTime();
+            }
+            return time.getTime() < start || time.getTime() > end;
+          }
+        };
+      }
+    };
+  },
+  methods: {
+    getDateRange(setEndDate) {
+      const start = new Date();
+      let end = new Date();
+      end = setEndDate(end);
+      function getDate(date) {
+        const result = [];
+        result.push(date.getFullYear());
+        result.push((date.getMonth() + 1).toString().padStart(2, '0'));
+        result.push(
+          date
+            .getDate()
+            .toString()
+            .padStart(2, '0')
+        );
+        return result.join('-');
+      }
+      // yyyy-MM-dd
+      return [getDate(start), getDate(end)];
+    },
+    btnChange(index) {
+      let that = this;
+      that.dateKey = index;
+      that.dateDefault = [];
+      let setDate;
+      if (index == 0) {
+        // 近7天
+        setDate = endDate => {
+          endDate.setDate(endDate.getDate() - 6);
+          return new Date(endDate);
+        };
+      } else if (index == 1) {
+        // 近30天
+        setDate = endDate => {
+          endDate.setDate(endDate.getDate() - 29);
+          return new Date(endDate);
+        };
+      } else if (index == 2) {
+        // 近三个月
+        setDate = endDate => {
+          endDate.setMonth(endDate.getMonth() - 3);
+          endDate.setDate(endDate.getDate() + 1);
+          return new Date(endDate);
+        };
+      } else if (index == 3) {
+        // 近半年
+        setDate = endDate => {
+          endDate.setMonth(endDate.getMonth() - 6);
+          endDate.setDate(endDate.getDate() + 1);
+          return new Date(endDate);
+        };
+      } else {
+        // 近一年
+        setDate = endDate => {
+          endDate.setFullYear(endDate.getFullYear() - 1);
+          endDate.setDate(endDate.getDate() + 1);
+          return new Date(endDate);
+        };
+      }
+      const [start, end] = that.getDateRange(setDate);
+      that.dateDefault.push(end);
+      that.dateDefault.push(start);
+      that.getChartList();
+    }
+  }
+};

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue

@@ -64,6 +64,7 @@
 import dataDetail from '../../components/dataDetail.vue';
 import newAddChart from './newAddChart.vue';
 import { postJsonRequest } from '@/api/api';
+import mixin from '../components/mixin';
 import errMsg from '@/common/js/error';
 export default {
   name: 'act-code-detail-statistics',
@@ -76,45 +77,11 @@ export default {
       }
     }
   },
+  mixins: [mixin],
   data() {
     return {
       loading: false,
-      dateKey: 0,
-      dateLis: [
-        { key: 0, value: '近7天' },
-        { key: 1, value: '近30天' },
-        { key: 2, value: '近三个月' },
-        { key: 3, value: '近半年' },
-        { key: 4, value: '近一年' }
-      ],
-      dateDefault: [],
-      pickerOptions() {
-        let pickerMinDate;
-        return {
-          onPick(obj) {
-            pickerMinDate = obj.minDate;
-          },
-          disabledDate(time) {
-            let start = new Date();
-            start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
-            let start2 = new Date(pickerMinDate);
-            let end = new Date();
-            end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()} 23:59:59`);
-            let end2 = new Date(pickerMinDate);
-            if (pickerMinDate) {
-              start = start.setFullYear(start.getFullYear() - 2);
-              start2 = start2.setDate(start2.getDate() - 60);
-              start = start > start2 ? start : start2;
-              end2 = end2.setDate(end2.getDate() + 60);
-              end = end.getTime() > end2 ? end2 : end.getTime();
-            } else {
-              start = start.setFullYear(start.getFullYear() - 2);
-              end = end.getTime();
-            }
-            return time.getTime() < start || time.getTime() > end;
-          }
-        };
-      },
+
       overViewData: { addNumT: 0, addNum: 0, dateList: [] }
     };
   },
@@ -187,70 +154,7 @@ export default {
           });
         });
     },
-    getDateRange(setEndDate) {
-      const start = new Date();
-      let end = new Date();
-      end = setEndDate(end);
-      function getDate(date) {
-        const result = [];
-        result.push(date.getFullYear());
-        result.push((date.getMonth() + 1).toString().padStart(2, '0'));
-        result.push(
-          date
-            .getDate()
-            .toString()
-            .padStart(2, '0')
-        );
-        return result.join('-');
-      }
-      // yyyy-MM-dd
-      return [getDate(start), getDate(end)];
-    },
-    btnChange(index) {
-      let that = this;
-      that.dateKey = index;
-      that.dateDefault = [];
-      let setDate;
-      if (index == 0) {
-        // 近7天
-        setDate = endDate => {
-          endDate.setDate(endDate.getDate() - 6);
-          return new Date(endDate);
-        };
-      } else if (index == 1) {
-        // 近30天
-        setDate = endDate => {
-          endDate.setDate(endDate.getDate() - 29);
-          return new Date(endDate);
-        };
-      } else if (index == 2) {
-        // 近三个月
-        setDate = endDate => {
-          endDate.setMonth(endDate.getMonth() - 3);
-          endDate.setDate(endDate.getDate() + 1);
-          return new Date(endDate);
-        };
-      } else if (index == 3) {
-        // 近半年
-        setDate = endDate => {
-          endDate.setMonth(endDate.getMonth() - 6);
-          endDate.setDate(endDate.getDate() + 1);
-          return new Date(endDate);
-        };
-      } else {
-        // 近一年
-        setDate = endDate => {
-          endDate.setFullYear(endDate.getFullYear() - 1);
-          endDate.setDate(endDate.getDate() + 1);
-          return new Date(endDate);
-        };
-      }
-      const [start, end] = that.getDateRange(setDate);
-      that.dateDefault.push(end);
-      that.dateDefault.push(start);
-      this.getChartList();
-    },
-    onDateChange(res) {
+    onDateChange() {
       this.dateKey = -1;
       this.getChartList();
     }

src/views/salesleads/actCodeManage/staffActCode/actCodeRecord.vue

@@ -152,14 +152,31 @@ export default {
     async getTableList() {
       const that = this;
       that.loading = true;
-      let para = {
-        pageNum: that.currentPage, // 当前页
-        pageSize: that.pageSize, // 一页显示个数
-        hmId: that.$route.query.hmId,
-        createTimeOrder: that.sortType || ''
-      };
+      let para = {};
+      let api = '';
+      if (this.$route.query.hmId) {
+        api = '/haoban-manage3-web/hm/qrcode/wxUserAddLog/list';
+        para = {
+          pageNum: that.currentPage, // 当前页
+          pageSize: that.pageSize, // 一页显示个数
+          hmId: that.$route.query.hmId,
+          createTimeOrder: that.sortType || ''
+        };
+      } else if (this.$route.query.linkId) {
+        const { startTime, endTime, clerkId, linkId } = this.$route.query;
+        api = '/haoban-manage3-web/hm/link/statistics/log';
+        para = {
+          pageNum: that.currentPage, // 当前页
+          pageSize: that.pageSize, // 一页显示个数
+          linkId,
+          clerkId,
+          startTime,
+          endTime
+          // createTimeOrder: that.sortType || ''
+        };
+      }
       // console.log(para);
-      postJsonRequest('/haoban-manage3-web/hm/qrcode/wxUserAddLog/list', para)
+      postJsonRequest(api, para)
         .then(res => {
           let resData = res.data;
           that.loading = false;

src/views/salesleads/components/actCodeDetailInfo.vue

@@ -137,6 +137,7 @@ export default {
     },
     getwelcomeInfo() {
       let that = this;
+      if (!this.welcomeId) return;
       let para = {
         welcomeId: this.welcomeId,
         enterpriseId: this.enterpriseId || ''

src/views/salesleads/components/dataDetail.vue

@@ -61,6 +61,10 @@ export default {
       type: String,
       default: ''
     },
+    api: {
+      type: Function,
+      default: detailClerkList
+    },
     typeT: {
       type: String,
       default: 'code'
@@ -125,7 +129,6 @@ export default {
   created() {
     // 默认显示近七天
     this.btnChange(0);
-    this.getTableList();
   },
   methods: {
     getDateRange(setEndDate) {
@@ -224,10 +227,12 @@ export default {
       if (this.pageParam.inFields.clerkSelect == '') {
         delete this.pageParam.inFields.clerkSelect;
       }
-      await detailClerkList(this.pageParam).then(res => {
+
+      await this.api(this.pageParam).then(res => {
+        console.log(res);
         if (res.data.code == 0) {
-          this.tableData = res.data.result.data || [];
-          this.totalCount = res.result.totalCount;
+          this.tableData = res.data.result.result || [];
+          this.totalCount = res.data.result.totalCount;
         } else {
           return this.$message(res.data.message);
         }
@@ -237,7 +242,14 @@ export default {
       if (row.hmId) {
         this.$router.push(`/actCodeRecord?hmId=${row.hmId}`);
       } else if (row.linkId) {
-        this.$router.push(`/actCodeRecord?linkId=${row.linkId}`);
+        const { clerkId, linkId } = row;
+        const startTime = this.dateDefault && this.dateDefault.length ? this.dateDefault[0] : undefined;
+        const endTime = this.dateDefault && this.dateDefault.length ? this.dateDefault[1] : undefined;
+
+        let query = { linkId, clerkId };
+        startTime ? (query.startTime = startTime) : '';
+        endTime ? (query.endTime = endTime) : '';
+        this.$router.push({ path: '/actCodeRecord', query: query });
       }
     }
   }

static/css/public.css

@@ -474,6 +474,9 @@ input:focus {
 .p-t-185 {
     padding-top: 185px;
 }
+.p-b-40{
+    padding-bottom: 40px;
+}
  
 .m-l-10 {
     margin-left: 10px;
@@ -481,9 +484,7 @@ input:focus {
 .m-l-16 {
     margin-left: 16px;
 }
-.m-l-30 {
-    margin-left: 30px;
-}
+ 
 .m-t-6{
     margin-top: 6px;
 }