优化会员付费管理

src/pages/customerMan/index.vue

@@ -109,6 +109,14 @@ export default {
       face: false, //未面诊用户开关
       silence: false, //沉默用户开关
       dialogVisible: false, // 控制筛选弹框
+      // 筛选框内的变量内容
+      customerKey: 0,
+      couponKey: 0,
+      cardKey: 0,
+      latelyKey: 0,
+      superpositionNum: 0,
+      StoredPrice: 0,
+      transitionNum: 0,
     };
   },
   computed: {},
@@ -125,15 +133,14 @@ export default {
       StoredPrice,
       transitionNum
     ) {
-      this.getUserList(
-        customerKey,
-        couponKey,
-        cardKey,
-        latelyKey,
-        superpositionNum,
-        StoredPrice,
-        transitionNum
-      );
+      (this.customerKey = customerKey),
+        (this.couponKey = couponKey),
+        (this.cardKey = cardKey),
+        (this.latelyKey = cardKey),
+        (this.superpositionNum = superpositionNum),
+        (this.StoredPrice = StoredPrice),
+        (this.transitionNum = transitionNum),
+        this.getUserList();
     },
     // 筛选沉默用户
     showSilence(e) {
@@ -148,39 +155,33 @@ export default {
       this.dialogVisible = true;
     },
     // 获取订单列表
-    getUserList(
-      customerKey,
-      couponKey,
-      cardKey,
-      latelyKey,
-      superpositionNum,
-      StoredPrice,
-      transitionNum
-    ) {
-      console.log(customerKey);
+    getUserList() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
         keywords: this.searchText,
         silence_user: this.silence ? 1 : 0, //沉默付费用户1是显示 0是不显示
         face_user: this.face ? 1 : 0, //显示未面诊付费用户 1是显示 0是不显示
-        tag:customerKey,
-        coupon_days:couponKey,
-        card_days:cardKey,
-        buying_time:latelyKey,
-        project_add:superpositionNum,
-        balance_money:StoredPrice,
-        change_add:transitionNum
+        tag: this.customerKey,
+        coupon_days: this.couponKey,
+        card_days: this.cardKey,
+        buying_time: this.latelyKey,
+        project_add: this.superpositionNum,
+        balance_money: this.StoredPrice,
+        change_add: this.transitionNum,
       };
       api.getUserList(params).then((res) => {
         if (res.code == 200) {
           // 将用户手机号中间四位变成****
           res.data.list.map((item) => {
-            item.mobile =
-              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            if (item.mobile) {
+              item.mobile =
+                item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            }
           });
           this.tableData = res.data.list;
           this.total = res.data.total;
+          console.log(this.tableData);
         }
       });
     },

src/pages/customerMan/selectPop/index.vue

@@ -82,6 +82,7 @@
               v-model="superpositionNum"
               :min="0"
               size="mini"
+              @change="superpositionChange"
             ></el-input-number>
           </div>
           <div class="transition">
@@ -90,6 +91,7 @@
               v-model="transitionNum"
               :min="0"
               size="mini"
+              @change="transitionChange"
             ></el-input-number>
           </div>
           <!-- <div class="consumePrice">
@@ -103,14 +105,23 @@
           <div class="StoredPrice">
             <div class="StoredPrice-title">总储值金额</div>
             <div class="StoredPrice-content">
-              <el-input v-model="minStoredPricePrice"></el-input>
+              <el-input
+                @change="minChange"
+                v-model="minStoredPricePrice"
+              ></el-input>
               <div>-</div>
-              <el-input v-model="maxStoredPricePrice"></el-input>
+              <el-input
+                @change="maxChange"
+                v-model="maxStoredPricePrice"
+              ></el-input>
             </div>
           </div>
         </div>
         <div class="slot-footer" slot="footer">
-          <div class="item-title">共有<i>50</i>位用户</div>
+          <div class="item-title">
+            共有<i>{{ total }}</i
+            >位用户
+          </div>
           <div>
             <button @click="reset">重置</button>
             <button @click="save">保存</button>
@@ -122,10 +133,13 @@
 </template>
 
 <script>
+import api from "../../../server/home";
 export default {
   props: ["visible"],
   data() {
     return {
+      total: 0,
+      currentPage1: 1,
       customerSource: {
         name: "客户来源",
         title: [
@@ -172,6 +186,38 @@ export default {
     };
   },
   methods: {
+    // 获取订单列表
+    getUserList() {
+      let StoredPrice = [];
+      StoredPrice.push(this.minStoredPricePrice);
+      StoredPrice.push(this.maxStoredPricePrice);
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        tag: this.customerKey.length == 0 ? 0 : this.customerKey,
+        coupon_days: this.couponKey.length == 0 ? 0 : this.couponKey,
+        card_days: this.cardKey.length == 0 ? 0 : this.cardKey,
+        buying_time: this.latelyKey.length == 0 ? 0 : this.latelyKey,
+        project_add: this.superpositionNum,
+        balance_money:
+          this.maxStoredPricePrice.length == 0 ? 0 : StoredPrice.toString(),
+        change_add: this.transitionNum,
+      };
+      api.getUserList(params).then((res) => {
+        if (
+          this.customerKey.length == 0 &&
+          this.couponKey.length == 0 &&
+          this.cardKey.length == 0 &&
+          this.latelyKey.length == 0 &&
+          this.superpositionNum == 0 &&
+          this.maxStoredPricePrice.length == 0
+        ) {
+          this.total = 0;
+          return;
+        }
+        this.total = res.data.total;
+      });
+    },
     // 重置筛选条件
     reset() {
       // 重置data里的值
@@ -198,31 +244,70 @@ export default {
     closeFilterPop() {
       this.$emit("update:visible", false);
     },
+    // 最小值改变
+    minChange() {
+      this.getUserList();
+    },
+    // 最大值改变
+    maxChange() {
+      this.getUserList();
+    },
+    // 项目叠加事件
+    superpositionChange() {
+      this.getUserList();
+    },
+    // 转换次数事件
+    transitionChange() {
+      this.getUserList();
+    },
     // 选择
     customerFilter(item, index) {
       if (this.customerSelect.indexOf(index) != -1) {
         this.customerSelect.splice(this.customerSelect.indexOf(index), 1);
         this.customerKey.splice(this.customerKey.indexOf(index), 1);
+        this.getUserList();
         return;
       }
       this.customerSelect.push(index);
       // 0 无1线下进店 2种子用户 3美团/大众 4抖音 5达人探店 6霸王餐 7老带新/转介绍,多个使用数组
       this.customerKey.push(index + 1);
+      this.getUserList();
     },
     // 选择优惠券快过期付费用户
     couponFilter(item, index) {
+      if (this.couponSelect == index) {
+        this.couponSelect = 99;
+        this.couponKey = "";
+        this.getUserList();
+        return;
+      }
       this.couponSelect = index;
       this.couponKey = this.couponSource.day[index];
+      this.getUserList();
     },
     // 选择此卡快过期下标
     cardFilter(item, index) {
+      if (this.cardSelect == index) {
+        this.cardSelect = 99;
+        this.cardKey = "";
+        this.getUserList();
+        return;
+      }
       this.cardSelect = index;
       this.cardKey = this.cardSource.day[index];
+      this.getUserList();
     },
     // 选择距离最近消费时间
     latelyFilter(item, index) {
+      if (this.latelySelect == index) {
+        this.latelySelect = 99;
+        this.latelyKey = "";
+        this.getUserList();
+        return;
+      }
       this.latelySelect = index;
       this.latelyKey = this.latelySource.day[index];
+      this.getUserList();
     },
   },
   watch: {

src/pages/home/calendarPop/index.vue

@@ -1,147 +0,0 @@
-<template>
-  <div>
-    <div class="filterPop">
-      <el-dialog
-        top="100px"
-        :visible.sync="visible"
-        width="56.5%"
-        :close-on-click-modal="false"
-      >
-        <span slot="title" class="slot-title">
-          <i @click="closeFilterPop" class="el-icon-arrow-left"></i>
-          10月客户预约表
-        </span>
-        <!-- 日历 -->
-        <el-calendar v-model="value">
-          <template slot="dateCell" slot-scope="{ data }">
-            <div>
-              <div class="status">已预约</div>
-              <div class="Data-bottom">
-                <div class="order-sum">0</div>
-                <div class="date">
-                  {{ data.day.split("-").slice(2).join("-") }}日
-                </div>
-              </div>
-            </div>
-          </template>
-        </el-calendar>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["visible"],
-  data() {
-    return {
-      value:''
-    };
-  },
-  methods: {
-    closeFilterPop() {
-      this.$emit("update:visible", false);
-    },
-  },
-};
-</script>
-
-<style lang='less' scoped>
-// 弹窗
-.filterPop {
-  .slot-title {
-    display: inline-block;
-    font-size: 14px;
-    margin-top: 24px;
-    font-weight: 600;
-    color: #333333;
-    i {
-      font-size: 24px;
-      color: #666666;
-      margin-left: 22px;
-      margin-right: 180px;
-    }
-  }
-  // 筛选条件
-  /deep/.el-dialog {
-    border-radius: 8px;
-    height: 500px;
-    position: relative;
-    margin-left: 300px;
-    overflow: hidden;
-  }
-  /deep/.el-dialog__header {
-    padding: 0;
-    padding-bottom: 10px;
-  }
-  /deep/button.el-dialog__headerbtn {
-    display: none;
-  }
-  /deep/.el-dialog__body {
-    padding: 0;
-  }
-  // 日历样式
-  .status {
-    font-size: 8px;
-    color: #333;
-    margin-bottom: 3px;
-  }
-  .Data-bottom {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .order-sum {
-      font-size: 27px;
-      color: #333333 !important;
-    }
-    .date {
-      font-size: 10px;
-      color: #333333 ;
-    }
-  }
-
-  /deep/.el-calendar__header {
-    display: none;
-  }
-  /deep/.el-calendar-table .el-calendar-day {
-    width: 90px;
-    height: 60px;
-  }
-  /deep/td.prev,
-  /deep/td.next {
-    pointer-events: none;
-    visibility:hidden;
-  }
-  /deep/td.current .el-calendar-day {
-    padding: 8px 20px 8px 15px;
-  }
-  /deep/td.current {
-    border: none;
-    margin-top: 6px;
-    position: relative;
-}
-
-  /deep/td.current::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 10px;
-    height: 40px;
-    background-color: #EDEDED;
-    width: 1px;
-}
-  /deep/td.current:nth-child(7)::after{
-    display: none;
-  }
-/deep/table.el-calendar-table {
-    border: 1px solid #F5F5F5;
-    border-top: none;
-    border-radius: 8px;
-    overflow: hidden;
-}
-/deep/thead {
-    background-color: #f5f5f5;
-    border-radius:8px !important;
-}
-}
-</style>

src/pages/home/createOrder/index.vue

@@ -1,278 +0,0 @@
-<template>
-  <div>
-    <div class="filterPop">
-      <el-dialog
-        top="130px"
-        :visible.sync="orderShow"
-        width="52.5%"
-        :close-on-click-modal="false"
-      >
-        <span slot="title" class="slot-title">
-          <i @click="closeFilterPop" class="el-icon-arrow-left"></i>
-          创建订单
-        </span>
-        <!-- 创建订单内容 -->
-        <div class="create-content">
-          <div class="create-title">预约时间:</div>
-          <div class="filter-top">
-            <el-date-picker
-              :picker-options="pickerOptions"
-              :editable="false"
-              v-model="value1"
-              type="date"
-              placeholder="选择日期"
-            >
-            </el-date-picker>
-            <el-time-select
-              :editable="false"
-              :disabled="value1 == '' ? true : false"
-              placeholder="起始时间"
-              v-model="startTime"
-              :picker-options="{
-                start: '10:00',
-                step: '00:5',
-                end: '23:00',
-                minTime: this.nowTime,
-              }"
-            >
-            </el-time-select>
-            <el-time-select
-              :editable="false"
-              :disabled="startTime == '' ? true : false"
-              placeholder="结束时间"
-              v-model="endTime"
-              :picker-options="{
-                start: '10:00',
-                step: '00:5',
-                end: '23:00',
-                minTime: startTime,
-              }"
-            >
-            </el-time-select>
-          </div>
-          <div class="create-title">选择用户:</div>
-          <div class="filter-center">
-            <el-input
-              placeholder="用户手机号、用户id、用户昵称、用户真实姓名"
-              class="search"
-              v-model="searchText"
-            >
-              <i slot="prefix" class="el-input__icon el-icon-search"></i>
-            </el-input>
-            <el-button type="primary" class="searchButton">搜索</el-button>
-          </div>
-          <div class="filter-bottom">
-            <div class="bottom-item">
-              <div class="left"></div>
-              <div class="right">
-                <div class="right-content">
-                  <div class="nickname">
-                    神经蛙 <span class="name">孙桂祥</span>
-                  </div>
-                  <div class="userID">id: 123456</div>
-                  <div class="phone">电话: 1234567890</div>
-                </div>
-              </div>
-              <img class="radio" :src="unSelect" alt="" />
-            </div>
-          </div>
-        </div>
-        <div class="slot-footer" slot="footer">
-          <button class="cancel" @click="closeFilterPop">取消</button>
-          <button class="affirm" @click="affirm">确认</button>
-        </div>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["visible", "orderShow", "toTime"],
-  data() {
-    return {
-      select:
-        "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/select.png",
-      unSelect:
-        "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png",
-      value1: "", //日期
-      startTime: "", //开始时间
-      endTime: "", //结束时间
-      searchText: "", //搜索框内容
-      nowTime: "", //当前的(小时分钟)时间
-      pickerOptions: {
-        disabledDate(time) {
-          let times = Date.now() - 24 * 60 * 60 * 1000;
-          return time.getTime() < times;
-        },
-      }, //限制只能选择今天及以后的时间
-    };
-  },
-  methods: {
-    // 取消&&返回按钮关闭弹窗
-    closeFilterPop() {
-      this.$emit("update:orderShow", false);
-    },
-    // 确认按钮
-    affirm() {
-      this.$emit("update:orderShow", false);
-    },
-  },
-  watch: {
-    // 获取父组件赋值的时间
-    toTime(newValue, oldValue) {
-      if (newValue.isClick) {
-        this.startTime = newValue.start;
-        this.endTime = newValue.end;
-        let date = new Date();
-        this.value1 = `${date.getFullYear()}-${
-          date.getMonth() + 1
-        }-${date.getDate()}`;
-      } else {
-        this.startTime = "";
-        this.endTime = "";
-        this.value1 = "";
-      }
-    },
-  },
-  created() {
-    let date = new Date();
-    // 限制选择的时间截止到当前之后
-    this.nowTime = `${date.getHours() - 1}:59`;
-  },
-};
-</script>
-
-<style lang='less' scoped>
-// 弹窗
-.filterPop {
-  .slot-title {
-    display: inline-block;
-    font-size: 14px;
-    margin-top: 24px;
-    font-weight: 600;
-    i {
-      font-size: 24px;
-      color: #666666;
-      margin-left: 22px;
-      margin-right: 175px;
-    }
-  }
-  // 创建订单内容
-  .create-content {
-    .create-title {
-      font-size: 14px;
-      color: #333333;
-    }
-    .filter-top {
-      margin-top: 10px;
-      margin-bottom: 15px;
-    }
-    .filter-center {
-      margin-top: 15px;
-      .search {
-        width: 338px;
-      }
-      .searchButton {
-        margin-left: 10px;
-        width: 68px;
-        background: #fa7d22;
-        border-radius: 2px;
-        border-color: #fa7d22;
-      }
-    }
-    .filter-bottom {
-      margin-top: 12px;
-      height: 70px;
-      width: 416px;
-      .bottom-item {
-        height: 100%;
-        width: 203px;
-        background-color: #f5f5f5;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        .left {
-          width: 70px;
-          height: 70px;
-          border-radius: 8px;
-          margin-right: 8px;
-          background-color: #fa7d22;
-        }
-        .right {
-          width: 90px;
-          height: 100%;
-          .right-content {
-            width: 98px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-            .nickname {
-              font-size: 14px;
-              color: #333;
-              .name {
-                font-size: 10px;
-              }
-            }
-            .userID,
-            .phone {
-              font-size: 10px;
-              color: #666666;
-            }
-          }
-        }
-        .radio {
-          width: 24px;
-          height: 24px;
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-  .slot-footer {
-    margin-top: 48px;
-    display: flex;
-    justify-content: center;
-    button {
-      width: 176px;
-      height: 28px;
-      border-radius: 14px;
-      background-color: #fff;
-      border: none;
-    }
-    .cancel {
-      border: 1px solid #fa7d22;
-      color: #fa7d22;
-    }
-    .affirm {
-      background-color: #fa7d22;
-      color: #fff;
-      margin-left: 15px;
-    }
-  }
-  /deep/.el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
-    width: 180px;
-  }
-  /deep/.el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--time-select {
-    width: 150px;
-    margin-left: 10px;
-  }
-  /deep/.el-dialog__body {
-    padding: 0 0 0 56px;
-  }
-  /deep/.el-dialog {
-    border-radius: 8px;
-    height: 500px;
-    margin-left: 300px;
-    position: relative;
-  }
-  /deep/button.el-dialog__headerbtn {
-    display: none;
-  }
-  /deep/.el-dialog__header {
-    padding: 0;
-    padding-bottom: 20px;
-  }
-}
-</style>

src/pages/home/detailList/index.vue

@@ -1,261 +1,164 @@
 <template>
   <div class="container">
-    <div
-      class="row"
-      ref="row"
-      v-for="(orderListItem, index) in orderList"
-      :key="index"
-    >
+    <div class="row" ref="row" v-for="(orderListItem, index) in orderList" :key="index">
       <div class="time" :style="{ height: `${rowHeightList[index]}px` }">
-        <span>{{ orderListItem.time.start }}</span>
+        <span>{{orderListItem.time.start}}</span>
         <span>-</span>
-        <span>{{ orderListItem.time.end }}</span>
+        <span>{{orderListItem.time.end}}</span>
       </div>
       <div class="project-wrapper">
-        <div
-          class="project"
-          v-for="(projectItem, index) in orderListItem.list"
+        <div class="project"
+          v-for="(projectItem, index) in orderListItem.list" 
           :key="index"
           @click="toOrderDetail(projectItem)"
           :style="{
             color: getStyleByOrderStatus(projectItem).color,
             borderLeft: '1px solid',
-            backgroundColor: getStyleByOrderStatus(projectItem).backgroundColor,
+            backgroundColor: getStyleByOrderStatus(projectItem).backgroundColor
           }"
         >
-          <div class="name">{{ projectItem.nickname }}</div>
+          <div class="name">{{projectItem.nickname}}</div>
           <div class="project-time">
-            <span>{{ projectItem.start }}</span>
+            <span>{{projectItem.start}}</span>
             <span>-</span>
-            <span>{{ projectItem.end }}</span>
+            <span>{{projectItem.end}}</span>
           </div>
         </div>
-        <!-- 添加订单 -->
-        <i
-          class="el-icon-plus"
-          @click="orderCreate(orderListItem.time)"
-          v-if="nowTime < orderListItem.time.end"
-        ></i>
       </div>
     </div>
-    <!-- 侧边图标 -->
-    <div class="calendar" @click="openCalendar">
-      <i class="el-icon-date"></i>
-      <span>日历</span>
-    </div>
-    <div class="setUp" @click="orderCreate">
-      <i class="el-icon-circle-plus-outline"></i>
-      <span>创建预约</span>
-    </div>
-    <div class="backNow">
-      <i class="el-icon-refresh-right"></i>
-      <span>返回今天</span>
-    </div>
-    <!-- 日历弹窗 -->
-    <calendar-pop :visible.sync="visible"></calendar-pop>
-    <!-- 创建订单弹窗 -->
-    <create-order :toTime="toTime" :orderShow.sync="orderShow"></create-order>
   </div>
 </template>
 
 <script>
-import api from "@/server/home";
-import calendarPop from "../calendarPop/index.vue";
-import createOrder from "../createOrder/index.vue";
+import api from '@/server/home'
+
 export default {
-  components: { calendarPop, createOrder },
   data() {
     return {
       orderList: [],
       timeList: [],
       rowHeightList: [],
       colorStyleList: [
-        { orderStatus: [3, 5], color: "#A3A3A3", backgroundColor: "#F0F0F0" },
-        { orderStatus: [2], color: "#FA7D22", backgroundColor: "#FEF4ED" },
-        { orderStatus: [0, 1], color: "#42D351", backgroundColor: "#F5FCF5" },
+        { orderStatus: [3, 5], color: '#A3A3A3', backgroundColor: '#F0F0F0' },
+        { orderStatus: [2], color: '#FA7D22', backgroundColor: '#FEF4ED' },
+        { orderStatus: [0, 1], color: '#42D351', backgroundColor: '#F5FCF5' },
       ],
-      timer: null,
-      visible: false, //控制日历
-      orderShow: false, //控制创建订单弹窗
-      nowTime: "", //当前小时分钟
-      toTime: "", //点击加号创建订单时传过去的时间
+      timer: null
     };
   },
-  created() {
-    this.nowTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
-    this.fetchOrderList();
+  created () {
+    this.fetchOrderList()
     this.timer = setInterval(() => {
-      this.fetchOrderList();
-    }, 10000);
+      this.fetchOrderList()
+    }, 10000)
   },
-  mounted() {
+  mounted () {
     if (this.$refs.row) {
       this.$refs.row.forEach((item) => {
-        this.rowHeightList.push(item.clientHeight);
-      });
+        this.rowHeightList.push(item.clientHeight)
+      })
     }
   },
-  destroyed() {
+  destroyed () {
     if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
+      clearInterval(this.timer)
+      this.timer = null
     }
   },
   methods: {
-    // 创建订单  打开创建订单弹窗
-    orderCreate(e) {
-      if (e.end) {
-        e.isClick = true;
-        this.toTime = e;
-      } else {
-        e.isClick = false;
-        this.toTime = e;
-      }
-      this.orderShow = true;
-    },
-    // 打开日历弹窗
-    openCalendar() {
-      this.visible = true;
-    },
-    async fetchOrderList() {
-      let resp = await api.reservedRecords();
+    async fetchOrderList () {
+      let resp = await api.reservedRecords()
       if (resp.code === 200) {
-        console.log(resp);
-        this.orderList = resp.data;
-        console.log(this.orderList);
+        this.orderList = resp.data
       }
     },
-    getStyleByOrderStatus(orderSource) {
-      let style = null;
+    getStyleByOrderStatus (orderSource) {
+      let style = null
       // 订单状态，0已预约，未支付，1已支付，待使用，2正在使用，3已结算，5已取消
-      switch (orderSource.status) {
+      switch(orderSource.status) {
         case 0:
-          style = this.colorStyleList[2];
-          break;
+          style = this.colorStyleList[2]
+        break;
         case 1:
-          style = this.colorStyleList[2];
-          break;
+          style = this.colorStyleList[2]
+        break;
         case 2:
-          style = this.colorStyleList[1];
-          break;
+          style = this.colorStyleList[1]
+        break;
         case 3:
-          style = this.colorStyleList[0];
-          break;
+          style = this.colorStyleList[0]
+        break;
         case 5:
-          style = this.colorStyleList[0];
-          break;
+          style = this.colorStyleList[0]
+        break;
       }
-      return style;
+      return style
     },
-    toOrderDetail(source) {
+    toOrderDetail (source) {
       if (source.status === 0) {
-        this.$router.push({
-          path: "/confirmOrder/details",
+        this.$router.push({ 
+          path: '/confirmOrder/details',
           query: {
-            id: source.order_id,
-          },
-        });
+            id: source.order_id
+          } 
+        })
       } else {
         this.$router.push({
           path: "/historicalOrder/details",
           query: {
-            id: source.order_id,
-          },
-        });
+            id: source.order_id
+          }
+        })
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  background-color: #ffffff;
-  overflow: hidden;
-  overflow-y: auto;
-  border-radius: 8px;
-  position: relative;
-  .row {
-    display: flex;
-    .time,
-    .project-wrapper .project {
-      width: 77px;
-      height: 80px;
+  .container {
+    width: 100%;
+    height: 100%;
+    background-color: #FFFFFF;
+    overflow: hidden;
+    overflow-y: auto;
+    border-radius: 8px;
+    .row {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      font-family: PingFangSC-Medium, PingFang SC;
-    }
-    .time {
-      border-bottom: 2px #f5f5f5 solid;
-    }
-    .project-wrapper {
-      flex: 1;
-      display: flex;
-      flex-wrap: wrap;
-      .project {
-        padding: 3px;
-        box-sizing: border-box;
-        .name {
-          width: 100%;
-          text-align: center;
-          font-size: 14px;
-          margin-bottom: 3px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-        .project-time {
-          display: flex;
-          font-size: 10px;
-        }
+      .time, .project-wrapper .project {
+        width: 77px;
+        height: 80px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-family: PingFangSC-Medium, PingFang SC;
       }
-      .el-icon-plus {
-        color: #ededed;
-        font-size: 32px;
-        line-height: 80px;
-        margin-left: 29px;
+      .time {
+        border-bottom: 2px #f5f5f5 solid;
+      }
+      .project-wrapper {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        .project {
+          padding: 3px;
+          box-sizing: border-box;
+          .name {
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+            margin-bottom: 3px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .project-time {
+            display: flex;
+            font-size: 10px;
+          }
+        }
       }
     }
   }
-  // 侧边图表样式
-  .calendar,
-  .setUp,
-  .backNow {
-    position: fixed;
-    height: 42px;
-    width: 125px;
-    border-radius: 100px 0px 0px 100px;
-    right: 20px;
-    background-color: #fff;
-    box-shadow: 0px 0px 4px 0px rgba(228, 228, 228, 0.5);
-    line-height: 42px;
-    color: #333333;
-    font-size: 16px;
-    i {
-      font-size: 20px;
-      margin-left: 15px;
-      margin-right: 15px;
-    }
-  }
-  .calendar {
-    top: 102px;
-    span {
-      width: 64px;
-      display: inline-block;
-      text-align: justify;
-      text-justify: distribute-all-lines;
-      text-align-last: justify;
-    }
-  }
-  .setUp {
-    top: 154px;
-  }
-  .backNow {
-    top: 206px;
-  }
-}
 </style>