付费用户页面&&预约表页面&&客户管理详情页

src/pages/confirmOrder/details/index.vue

@@ -197,7 +197,7 @@
           <div v-if="1==1">
             <div>
               <div class="coupon-ps"
-                   v-for="item,index in isSelectCoup"
+                   v-for="item,index in isSelectCoupList"
                    :key="index">
                 <div>{{item.coupon_name}}</div>
                 <div class="cou-price"
@@ -296,7 +296,7 @@
           </li>
         </ul>
         <div class="coupon-confirm"
-             @click="isCoupun=false">确认</div>
+             @click="isCoupunConfirm">确认</div>
       </div>
     </mine-pupop>
     <!-- 选择项目 -->
@@ -628,6 +628,7 @@ export default {
       coupSelectType: '',
       productDiscount: '',
       isSelectCoup: [], // 选择的优惠券
+      isSelectCoupList:[], //选择的优惠券列表
       // 下面是支付的数据
       showMoney: 0, // 价值总额
       discountPrice: 0,//活动后金额
@@ -651,6 +652,17 @@ export default {
   watch: {},
 
   methods: {
+        // 选择优惠券确认
+    isCoupunConfirm(){
+      this.isCoupun = false
+      let list = []
+      this.isSelectCoup.forEach(item=>{
+        if(item.isSelect) {
+          list.push(item)
+          }
+      })
+          this.isSelectCoupList = list
+    },
     toHome () {
       this.$router.replace('/home')
     },

src/pages/coupon/index.vue

@@ -14,6 +14,7 @@
         class="coupon-select"
         v-model="coupon"
         size="mini"
+        filterable
         placeholder="选择优惠券"
       >
         <el-option

src/pages/customerMan/details/index.vue

@@ -172,56 +172,74 @@
       </div>
       <div class="right-bottom">
         <div class="programme">
-          <div class="tab">
-            <div class="tab-title">执行方案</div>
-          </div>
-          <div class="programmeList" v-if="programmeList.length > 0">
-            <div class="programmeWeek">
-              <div
-                class="programmeItem"
-                v-for="(item, index) in programmeList"
-                :key="index"
-              >
-                <div
-                  :class="selectWeek == index ? 'weekItemSelect' : 'weekItem'"
-                  @click="weekSelect(index)"
-                >
-                  {{ item.name }}
+          <div class="consume">
+            <div class="consume-box">
+              <div class="consume-title">总消费</div>
+              <div class="consume-content">
+                <div class="consume-one">
+                  <div class="consume-type">
+                    总消费金额:<span class="consume-price">999</span>
+                  </div>
+                  <div class="consume-type">
+                    项目叠加次数:<span class="consume-price">999</span>
+                  </div>
+                </div>
+                <div class="consume-two">
+                  <div class="consume-type">
+                    总储值金额:<span class="consume-price">999</span>
+                  </div>
+
+                  <div class="consume-type">
+                    转化次数:<span class="consume-price">999</span>
+                  </div>
                 </div>
-                <div class="weekLine" v-if="index == 3 ? false : true"></div>
               </div>
             </div>
-            <div class="doTime">{{ programmeList[selectWeek].time }}</div>
-            <div class="weekDetails" v-if="programmeList.length > 0">
-              <div
-                class="contentItem"
-                v-for="(item, index1) in programmeList[selectWeek].list"
-                :key="index1"
-              >
-                <div class="itemTitle">
-                  <div>{{ item.name }}</div>
-                  <div>{{ item.classify_name }}</div>
-                  <!-- <div>{{item.time}}</div> -->
+            <div class="consume-title">最近消费记录</div>
+            <div class="consume-record">
+              <div class="record-item">
+                <div class="record-title">项目</div>
+                :
+                <div class="record-name">
+                  【进店必做】寡肽小气泡温和清洁拔出黑头…
                 </div>
-                <div
-                  class="itemContent"
-                  v-for="(items, index2) in item.list"
-                  :key="index2"
-                >
-                  <img class="itemContent-img" :src="items.cover_url" />
-                  <div class="itemContent-right">
-                    <div class="right-content">
-                      <div class="right-name">
-                        {{ items.name | ellipsis(14) }}
-                      </div>
-                      <div class="right-price">
-                        {{ items.price | doubleNum(2) }}
-                      </div>
-                    </div>
-                    <div class="right-project">{{ items.product_name }}</div>
-                  </div>
+                <div>2022.10.13 12:12</div>
+              </div>
+              <div class="record-item">
+                <div class="record-title">次卡</div>
+                :
+                <div class="record-name">
+                  【进店必做】寡肽小气泡温和清洁拔出黑头…
+                </div>
+                <div>2022.10.13 12:12</div>
+              </div>
+              <div class="record-item">
+                <div class="record-title">美妆产品</div>
+                :
+                <div class="record-name">
+                  【进店必做】寡肽小气泡温和清洁拔出黑头…
+                </div>
+                <div>2022.10.13 12:12</div>
+              </div>
+              <div class="record-item">
+                <div class="record-title">充值</div>
+                :
+                <div class="record-name">
+                  【进店必做】寡肽小气泡温和清洁拔出黑头…
                 </div>
+                <div>2022.10.13 12:12</div>
+              </div>
+            </div>
+            <div class="consume-title">最近消耗</div>
+            <div class="card-record">
+                          <div class="record-item">
+              <div class="record-title">消耗次卡</div>
+              :
+              <div class="record-name">
+                【进店必做】寡肽小气泡温和清洁拔出黑头…
               </div>
+              <div>2022.10.13 12:12</div>
+            </div>
             </div>
           </div>
         </div>
@@ -377,8 +395,8 @@ export default {
         activeName = "third";
       } else if (index == 2) {
         activeName = "second";
-      }else if(index==4){
-        activeName = 'fourth'
+      } else if (index == 4) {
+        activeName = "fourth";
       }
       this.$router.push({
         path: "/customerMan/projectOrder",
@@ -874,17 +892,60 @@ export default {
             color: #ffc630;
           }
         }
-        .tab {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .tab-title {
+        .consume {
+          .consume-box {
+            display: flex;
+          }
+          .consume-title {
             font-size: 14px;
             font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
+            font-weight: 700;
             color: #333333;
             line-height: 20px;
           }
+          .consume-content {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            .consume-two {
+              margin-left: 90px;
+            }
+            .consume-type {
+              line-height: 25px;
+              width: 160px;
+              font-size: 13px;
+              color: #999999;
+              margin-left: 20px;
+            }
+            .consume-price {
+              font-size: 13px;
+              color: #333333;
+              margin-left: 14px;
+            }
+          }
+          .consume-record,.card-record {
+            .record-item {
+              display: flex;
+              font-size: 13px;
+              color: #666666;
+              margin-top: 15px;
+              .record-title {
+                width: 65px;
+                text-align: justify;
+                text-justify: distribute-all-lines;
+                text-align-last: justify;
+              }
+              .record-name {
+                color: #333333;
+                width: 260px;
+                margin-left: 36px;
+                margin-right: 36px;
+              }
+            }
+            .record-item:last-child {
+              margin-bottom: 15px;
+            }
+          }
         }
         .programme-list {
           margin-top: 10px;

src/pages/customerMan/index.vue

@@ -13,6 +13,7 @@
           v-model="silence"
           active-color="#fa7d22"
           inactive-color="#e7e7e7"
+          @change="showSilence"
         >
         </el-switch>
       </div>
@@ -22,6 +23,7 @@
           v-model="face"
           active-color="#fa7d22"
           inactive-color="#e7e7e7"
+          @change="showFace"
         >
         </el-switch>
       </div>
@@ -110,6 +112,14 @@ export default {
   watch: {},
 
   methods: {
+    // 筛选沉默用户
+    showSilence(e){
+      console.log(e);
+    },
+    // 筛选未面诊用户
+    showFace(e){
+      console.log(e);
+    },
     // 打开筛选条件弹框
     openFilterPop() {
       this.dialogVisible = true;

src/pages/customerMan/selectPop/index.vue

@@ -2,8 +2,9 @@
   <div>
     <div class="filterPop">
       <el-dialog
+      top="130px"
         :visible.sync="visible"
-        width="48.5%"
+        width="52.5%"
         :close-on-click-modal="false"
       >
         <span slot="title" class="slot-title">
@@ -171,10 +172,19 @@ export default {
   },
   methods: {
     // 重置筛选条件
-    reset() {},
+    reset() {
+      // 重置data里的值
+      Object.assign(this.$data, this.$options.data.call(this))
+    },
     // 保存筛选条件
     save() {
-      console.log(this.conditionList);
+      let selectList = []
+      selectList.push(this.conditionList.customerKey)
+      selectList.push(this.conditionList.couponKey)
+      selectList.push(this.conditionList.cardKey)
+      selectList.push(this.conditionList.latelyKey)
+      console.log(selectList);
+      this.$emit("update:visible", false);
     },
     // 关闭弹窗
     closeFilterPop() {
@@ -198,6 +208,12 @@ export default {
       this.$set(this.conditionList, "latelyKey", item);
     },
   },
+  watch:{
+    visible(newValue,oldValue){
+      // 关闭打开弹框重置数据
+      this.reset()
+    }
+  }
 };
 </script>
 
@@ -213,7 +229,7 @@ export default {
       font-size: 24px;
       color: #666666;
       margin-left: 22px;
-      margin-right: 165px;
+      margin-right: 175px;
     }
   }
   // 筛选条件
@@ -353,7 +369,8 @@ export default {
   }
   /deep/.el-dialog {
     border-radius: 8px;
-    height: 400px;
+    height: 500px;
+    margin-left: 300px;
     position: relative;
   }
   /deep/.el-dialog__header {
@@ -365,11 +382,12 @@ export default {
   }
   /deep/.el-dialog__body {
     overflow: hidden;
-    height: 250px;
+    height: 350px;
     padding-left: 38px;
     padding-top: 0;
     color: #333;
     overflow-y: auto; // 设置滚动条
+    padding-bottom: 60px;
   }
   .slot-footer {
     padding: 0;

src/pages/home/calendarPop/index.vue

@@ -0,0 +1,147 @@
+<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

@@ -0,0 +1,261 @@
+<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 v-model="value1" type="date" placeholder="选择日期">
+            </el-date-picker>
+            <el-time-select
+              :disabled="value1 == '' ? true : false"
+              placeholder="起始时间"
+              v-model="startTime"
+              :picker-options="{
+                start: '10:00',
+                step: '00:5',
+                end: '23:00',
+              }"
+            >
+            </el-time-select>
+            <el-time-select
+              :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: "", //搜索框内容
+    };
+  },
+  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 = "";
+      }
+    },
+  },
+};
+</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,164 +1,261 @@
 <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 api from "@/server/home";
+import calendarPop from "../calendarPop/index.vue";
+import createOrder from "../createOrder/index.vue";
 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
+      timer: null,
+      visible: false, //控制日历
+      orderShow: false, //控制创建订单弹窗
+      nowTime: "", //当前小时分钟
+      toTime: "", //点击加号创建订单时传过去的时间
     };
   },
-  created () {
-    this.fetchOrderList()
+  created() {
+    this.nowTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
+    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: {
-    async fetchOrderList () {
-      let resp = await api.reservedRecords()
+    // 创建订单  打开创建订单弹窗
+    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();
       if (resp.code === 200) {
-        this.orderList = resp.data
+        console.log(resp);
+        this.orderList = resp.data;
+        console.log(this.orderList);
       }
     },
-    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;
-    .row {
+.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;
       display: flex;
-      .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;
-      }
-      .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;
-          }
+      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;
         }
       }
+      .el-icon-plus {
+        color: #ededed;
+        font-size: 32px;
+        line-height: 80px;
+        margin-left: 29px;
+      }
     }
   }
+  // 侧边图表样式
+  .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>

vue.config.js

@@ -4,11 +4,11 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   // 测试
-  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
-  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
-  // 正式
-  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
     process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
+  // 正式
+  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
   // 设置跨域
   crossorigin: 'anonymous',
   /**