update：数据统计

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

@@ -35,29 +35,47 @@
           </div>
         </li>
       </ul>
-      <!-- <el-date-picker class="m-l-10 w-330" style="width: 330px" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker> -->
-    </div>
-    <div class="flex justify-between title">
-      <div class="flex">
-        <div class="blue-block"></div>
-        <span class="font-w-500">查看明细</span>
+      <div class="flex justify-end">
+        <div class="rightBox">
+          <ul class="datebox" v-for="(lis, index) in dateLis" :key="lis.key">
+            <li :class="dateKey == index ? 'activeClass' : 'noActive'" class="dateLisBox" @click="btnChange(index)">{{ lis.value }}</li>
+          </ul>
+          <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker>
+        </div>
       </div>
-      <div class="flex">
-        <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
-        <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
+    </div>
+    <div>
+      <div class="flex justify-between title">
+        <div class="flex">
+          <div class="blue-block"></div>
+          <span class="font-w-500">查看明细</span>
+        </div>
+        <div class="flex">
+          <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
+          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
+        </div>
       </div>
+      <data-detail :id="actCode"></data-detail>
     </div>
   </div>
 </template>
 <script>
+import dataDetail from '../../components/dataDetail.vue';
 export default {
   name: 'act-code-detail-statistics',
+  components: { dataDetail },
   props: {
     brandId: {
       type: String,
       default() {
         return '';
       }
+    },
+    actCode: {
+      type: String,
+      default() {
+        return '';
+      }
     }
   },
   data() {
@@ -65,55 +83,48 @@ export default {
       welcomeSpeech: false,
       useMemberData: [{ cardName: '电话电话电话' }],
       loading: false,
-      pickerOptions: {
-        shortcuts: [
-          {
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          },
-          {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
+      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;
           },
-          {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
+          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;
           }
-        ],
-        onPick: ({ maxDate, minDate }) => {
-          this.choiceDateCopy = [minDate.getTime()];
-          if (maxDate) {
-            this.choiceDateCopy = [];
-          }
-        },
-        disabledDate: time => {
-          if (this.choiceDateCopy.length) {
-            const one = 365 * 24 * 3600 * 1000;
-            const minTime = this.choiceDateCopy[0] - one;
-            const maxTime = this.choiceDateCopy[0] + one;
-            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6;
-          }
-          return time.getTime() > Date.now() - 8.64e6;
-        }
+        };
       }
     };
   },
   methods: {
+    explain() {
+      console.log(11);
+    },
     getUseTableList() {
       const that = this;
       that.loading = true;
@@ -142,11 +153,75 @@ export default {
       //         message: error.message
       //       });
       //     });
+    },
+    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);
+          return new Date(endDate);
+        };
+      } else if (index == 3) {
+        // 近半年
+        setDate = endDate => {
+          endDate.setMonth(endDate.getMonth() - 6);
+          return new Date(endDate);
+        };
+      } else {
+        // 近一年
+        setDate = endDate => {
+          endDate.setFullYear(endDate.getFullYear() - 1);
+          return new Date(endDate);
+        };
+      }
+      const [start, end] = that.getDateRange(setDate);
+      that.dateDefault.push(end);
+      that.dateDefault.push(start);
+    },
+    onDateChange() {
+      this.dateKey = -1;
     }
   },
   mounted() {
     let that = this;
     // 判断brandId
+    // 默认显示近七天
+    that.btnChange(0);
     that.getUseTableList();
   }
 };
@@ -165,6 +240,9 @@ export default {
 .justify-between {
   justify-content: space-between;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .data-total-cell {
   position: relative;
   min-width: 282px;
@@ -194,4 +272,27 @@ export default {
 .m-r-22 {
   margin-right: 22px;
 }
+.w256 {
+  width: 256px;
+}
+.rightBox {
+  //   float: right;
+  line-height: 32px;
+  padding-top: 20px;
+  //   height: 32px;
+  .datebox {
+    display: inline-block;
+    .dateLisBox {
+      font-size: 14px;
+      margin-right: 24px;
+      cursor: pointer;
+    }
+  }
+}
+.activeClass {
+  color: #2f54eb;
+}
+.noActive {
+  color: #303133;
+}
 </style>