客户预约表&&次卡时间修改

src/pages/customerMan/myOrder/index.vue

@@ -79,7 +79,12 @@
                   <div>{{ scope.row.card_name | ellipsis(8) }}</div>
                 </template>
               </el-table-column>
-              <el-table-column prop="total_num" label="总次数" show-overflow-tooltip align="center">
+              <el-table-column
+                prop="total_num"
+                label="总次数"
+                show-overflow-tooltip
+                align="center"
+              >
               </el-table-column>
               <el-table-column
                 prop="num"
@@ -99,7 +104,13 @@
                 label="过期时间"
                 width="180"
                 show-overflow-tooltip
-              ></el-table-column>
+              >
+                <template slot-scope="{ row }">
+                  <div class="expir_time" @click.stop="amendCardTime(row)">
+                    {{ row.expir_time }}
+                  </div>
+                </template>
+              </el-table-column>
               <el-table-column
                 prop="create_time"
                 label="创建时间"
@@ -179,7 +190,15 @@ status: 5 -->
                         ? goodStatus[scope.row.status]
                         : goodStatus[goodStatus.length - 1]
                     }} -->
-                    {{scope.row.status==2||scope.row.status==3?'已取货':scope.row.status==0?'未支付':scope.row.status==1?'待取货':'已取消'}}
+                    {{
+                      scope.row.status == 2 || scope.row.status == 3
+                        ? "已取货"
+                        : scope.row.status == 0
+                        ? "未支付"
+                        : scope.row.status == 1
+                        ? "待取货"
+                        : "已取消"
+                    }}
                   </div>
                 </template>
               </el-table-column>
@@ -319,6 +338,39 @@ type: "全额券" -->
         <div class="confirm" @click="confirm">确定</div>
       </div>
     </mine-pupop>
+    <!-- 修改次卡时间 -->
+    <mine-pupop :show="isAmend">
+      <div class="amendTime">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeAmend"
+          />
+        </div>
+        <div class="admendTime-content">
+          <div class="oldTime">
+            次卡过期时间 :<span> {{ amendCardInfo.expir_time }}</span>
+          </div>
+          <div class="newTime">
+            选择更改日期:
+            <el-date-picker
+              class="date"
+              v-model="cardTime"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              @focus="forbid"
+            >
+            </el-date-picker>
+          </div>
+          <div class="radio">
+            <button class="cancelBtn" @click="cancel">取消</button>
+            <button class="affirmBtn" @click="affirm">确定</button>
+          </div>
+        </div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
@@ -381,12 +433,59 @@ export default {
       cardInfo: {}, //订单详情
       cardLogList: [], //次卡消耗记录
       cardListData: [], //用户次卡列表
+      isAmend: false, //修改次卡时间弹窗
+      amendCardInfo: "", // 要修改次卡的信息
+      cardTime: "", //次卡修改时间(年月日)
     };
   },
   computed: {},
   watch: {},
 
   methods: {
+    // 阻止修改次卡时间时键盘弹出
+    forbid() {
+      //禁止软键盘弹出
+      document.activeElement.blur();
+    },
+    // 修改次卡时间取消
+    cancel() {
+      this.isAmend = false;
+      this.cardTime = "";
+    },
+    // 修改次卡时间确定
+    affirm() {
+      this.amendCardTimeApi();
+    },
+    // 修改次卡时间
+    amendCardTime(e) {
+      this.isAmend = true;
+      this.amendCardInfo = e;
+      console.log(e);
+    },
+    // 关闭修改次卡时间弹窗
+    closeAmend() {
+      this.isAmend = false;
+      this.cardTime = "";
+    },
+    // 发起修改次卡订单请求
+    amendCardTimeApi() {
+      api
+        .amendCardTime({
+          id: this.amendCardInfo.id,
+          expire_date: this.cardTime,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message({
+              message: res.msg,
+              type: "success",
+            });
+            this.isAmend = false;
+            // 更新次卡列表
+            this.getCardList();
+          }
+        });
+    },
     // 获取优惠券订单
     getUserCoupon() {
       let params = {
@@ -547,8 +646,8 @@ export default {
       this.getCardList();
     } else if (this.activeName == "third") {
       this.getUserGoods();
-    }else if (this.activeName == 'fourth'){
-      this.getUserCoupon()
+    } else if (this.activeName == "fourth") {
+      this.getUserCoupon();
     }
   },
 
@@ -730,4 +829,64 @@ export default {
     text-align: center;
   }
 }
+// 修改次卡时间
+.amendTime {
+  width: 440px;
+  height: 300px;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 15px;
+  .image {
+    height: 30px;
+    width: 30px;
+    img {
+      width: 100%;
+    }
+  }
+  .oldTime {
+    color: #333;
+    margin-left: 20px;
+    margin-top: 30px;
+    span {
+      margin-left: 20px;
+    }
+  }
+  .newTime {
+    margin-left: 20px;
+    margin-top: 10px;
+    .time {
+      margin-top: 20px;
+      margin-left: 110px;
+    }
+    .date {
+      margin-top: 20px;
+      margin-left: 20px;
+    }
+  }
+  .radio {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    button {
+      width: 176px;
+      height: 28px;
+      border-radius: 14px;
+      background-color: #fff;
+      border: none;
+      margin-top: 90px;
+    }
+    .cancelBtn {
+      border: 1px solid #fa7d22;
+      color: #fa7d22;
+    }
+    .affirmBtn {
+      background-color: #fa7d22;
+      color: #fff;
+      margin-left: 15px;
+    }
+  }
+}
+.expir_time {
+  color: #3115cc;
+}
 </style>

src/pages/home/calendarPop/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <div class="filterPop">
+      <el-dialog
+        top="160px"
+        :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" @click="toUserOrder(data)">
+                <div
+                  :class="{
+                    orderSum: true,
+                    overActive: data.day.split('-').slice(2).join('-') < today,
+                    active:
+                      data.day.split('-').slice(2).join('-') > today &&
+                      newItem(data) != 0,
+                  }"
+                >
+                  {{ newItem(data) }}
+                </div>
+                <div class="date">
+                  {{ data.day.split("-").slice(2).join("-") }}日
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-calendar>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../../server/home";
+export default {
+  props: ["visible"],
+  data() {
+    return {
+      value: "",
+      orderSumList: "", //每天预约人数
+      today: "",
+    };
+  },
+  methods: {
+    closeFilterPop() {
+      this.$emit("update:visible", false);
+    },
+    // 获取每天预约人数
+    OrderSum() {
+      let nowdays = new Date();
+      let year = nowdays.getFullYear();
+      let month = nowdays.getMonth() + 1;
+      let firstDayOfCurMonth = `${year}-${month}-01`;
+      let lastDay = new Date(year, month, 0);
+      let lastDayOfCurMonth = `${year}-${month}-${lastDay.getDate()}`;
+      api
+        .OrderSum({
+          start_time: firstDayOfCurMonth,
+          end_time: lastDayOfCurMonth,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.orderSumList = res.data;
+          }
+          console.log(res);
+        });
+    },
+    // 跳转到指定日期
+    toUserOrder(data) {
+      this.$emit("updateUserOrder", data.day);
+      this.$emit("update:visible", false);
+    },
+  },
+  computed: {
+    newItem: function () {
+      return function (data) {
+        let num = "";
+        if (data.type != "prev-month" && data.type != "next-month") {
+          num =
+            data.day.split("-").slice(2).join("-").indexOf(0) == 0
+              ? this.orderSumList[
+                  data.day.split("-").slice(2).join("-").split("0")[1] - 1
+                ].num
+              : this.orderSumList[data.day.split("-").slice(2).join("-") - 1]
+                  .num;
+        }
+        return num;
+      };
+    },
+  },
+  watch: {
+    visible(newValue, oldValue) {
+      if (newValue) {
+        // 获取没天预约人数
+        this.OrderSum();
+      }
+    },
+  },
+  created() {
+    // 获取当天日
+    let date = new Date();
+    this.today = date.getDate();
+  },
+};
+</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: 460px;
+    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;
+    .orderSum {
+      font-size: 27px;
+      color: #333333 !important;
+    }
+    .overActive{
+      color:darkgrey !important;
+    }
+    .active {
+      color: #fa7d22 !important;
+    }
+    .date {
+      font-size: 10px;
+      color: #333333;
+    }
+  }
+
+  /deep/.el-calendar__header {
+    display: none;
+  }
+  /deep/.el-calendar-table .el-calendar-day {
+    width: 104px;
+    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;
+  }
+  /deep/tr.el-calendar-table__row:last-child {
+    display: none;
+  }
+}
+</style>

src/pages/home/createOrder/index.vue

@@ -0,0 +1,392 @@
+<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:10',
+                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:10',
+                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 @click="searchUser" type="primary" class="searchButton"
+              >搜索</el-button
+            >
+          </div>
+          <div class="filter-bottom">
+            <div
+              v-for="(item, index) in userList"
+              :key="index"
+              class="bottom-item"
+              @click="isSelectUser(item, index)"
+            >
+              <div class="left">
+                <img :src="item.avatar_url" alt="">
+              </div>
+              <div class="right">
+                <div class="right-content">
+                  <div class="nickname">
+                    {{ item.nickname }}
+                    <span class="name">{{ item.real_name }}</span>
+                  </div>
+                  <div class="userID">id: {{ item.id }}</div>
+                  <div class="phone">电话: {{ item.mobile }}</div>
+                </div>
+              </div>
+              <img
+                class="radio"
+                :src="item.status ? select : 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>
+import api from "../../../server/home";
+export default {
+  props: ["visible", "orderShow", "toTime"],
+  data() {
+    return {
+      isSelect: false,
+      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;
+        },
+      }, //限制只能选择今天及以后的时间
+      userList: [], //查询的用户列表
+      checkUserList: [], //选中的用户信息ID
+      id: "", //预约记录ID
+      isClick: "", //是否是编辑或者直接点击加号创建的
+    };
+  },
+  methods: {
+    // 取消&&返回按钮关闭弹窗
+    closeFilterPop() {
+      this.$emit("update:orderShow", false);
+      Object.assign(this.$data, this.$options.data());
+    },
+    // 查询用户
+    searchUser(keyword) {
+      api
+        .searchOrderUser({
+          keyword: this.searchText || keyword,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            // 手机号四位隐藏
+            res.data.list.map((item) => {
+              if (item.mobile) {
+                item.mobile =
+                  item.mobile.substring(0, 3) +
+                  "****" +
+                  item.mobile.substring(7);
+              }
+              item.status = false;
+            });
+            // 获取查询的用户
+            this.userList = res.data.list;
+            console.log(this.userList);
+          }
+        });
+    },
+    // 选择用户
+    isSelectUser(item, index) {
+      if (this.userList[index].status) {
+        this.$set(this.userList, index, {
+          ...this.userList[index],
+          status: false,
+        });
+      } else {
+        this.$set(this.userList, index, {
+          ...this.userList[index],
+          status: true,
+        });
+      }
+      let checkList = [];
+      this.userList.forEach((item) => {
+        if (item.status) {
+          checkList.push(item.id);
+        }
+      });
+      this.checkUserList = checkList;
+    },
+    // 创建订单
+    affirm() {
+      if (this.startTime == "" || this.value1 == "") {
+        this.$message.error("请选择预约时间");
+        return;
+      }
+      if (this.checkUserList == "") {
+        this.$message.error("请选择预约用户");
+        return;
+      }
+      let date = this.isClick
+        ? this.value1
+        : `${this.value1.getFullYear()}-${
+            this.value1.getMonth() + 1
+          }-${this.value1.getDate()}`;
+      let start_time = date + " " + this.startTime;
+      let end_time = date + " " + this.endTime;
+      let params = {
+        user_id: this.checkUserList.toString(),
+        start_time,
+        end_time,
+        id: this.id || "",
+      };
+      console.log(params);
+      api.createUserOrder(params).then((res) => {
+        this.$message({
+          message:params.id?'修改成功': "创建成功",
+          type: "success",
+        });
+        this.$emit("update:orderShow", false);
+        this.$emit("updateUserOrder", date);
+      });
+      // 清除数据
+      Object.assign(this.$data, this.$options.data());
+    },
+  },
+  watch: {
+    // 获取父组件赋值的时间
+    toTime(newValue, oldValue) {
+      console.log(newValue);
+      if (newValue.isClick) {
+        this.isClick = newValue.isClick;
+        this.startTime = newValue.start;
+        this.endTime = newValue.end;
+        this.id = newValue.order_id;
+        let date = new Date();
+        if (newValue.day) {
+          this.value1 = newValue.day;
+        } else {
+          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;
+      display: flex;
+      overflow-x: auto;
+      .bottom-item {
+        height: 100%;
+        width: 203px;
+        background-color: #f5f5f5;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+        .left {
+          width: 70px;
+          height: 70px;
+          border-radius: 8px;
+          margin-right: 8px;
+          overflow: hidden;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .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;
+              overflow: hidden; // 溢出隐藏
+              text-overflow: ellipsis; // 文字溢出显示省略号
+              white-space: nowrap; // 强制一行
+              .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,452 @@
 <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>
+          <!-- 设置手动预约标识 -->
+          <!-- 1是线上预约 2是线下预约 -->
+          <div
+            v-if="projectItem.type == 2"
+            class="order-tip"
+            :style="{ color: getStyleByOrderStatus(projectItem).orderTipColor }"
+          >
+            预
+          </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>
+          <!-- 新人预约提示tip -->
+          <!-- 1付费用户 0未付费用户 -->
+          <div
+            v-if="projectItem.pay == 0"
+            :style="{
+              backgroundColor: getStyleByOrderStatus(projectItem).color,
+            }"
+            class="newPeople"
+          >
+            NEW
           </div>
+          <div
+            class="cicle"
+            :style="{
+              backgroundColor:
+                getStyleByOrderStatus(projectItem).backgroundColor,
+            }"
+          ></div>
+          <!-- 预约操作删除编辑 -->
+          <el-dropdown
+            v-if="projectItem.status == 0 || projectItem.status == 1"
+            @command="clickOrder"
+            placement="bottom"
+            trigger="click"
+            class="clickOrder"
+          >
+            <div class="clickOrder-item"></div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="beforeHandleCommand(projectItem, 'a')"
+                >查看详情</el-dropdown-item
+              >
+              <el-dropdown-item :command="beforeHandleCommand(projectItem, 'b')"
+                >编辑</el-dropdown-item
+              >
+              <el-dropdown-item :command="beforeHandleCommand(projectItem, 'c')"
+                >删除</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
+        <!-- 添加订单 -->
+        <i
+          class="el-icon-plus"
+          @click="orderCreate(orderListItem.time)"
+          v-if="
+            thisDays > Days? false: thisDays == Days? orderListItem.time.end > nowTime: true
+          "
+        ></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" @click="backToday" v-if="isBackToday">
+      <i class="el-icon-refresh-right"></i>
+      <span>返回今天</span>
+    </div>
+    <!-- 日历弹窗 -->
+    <calendar-pop
+      @updateUserOrder="updateUserOrder"
+      :visible.sync="visible"
+    ></calendar-pop>
+    <!-- 创建订单弹窗 -->
+    <create-order
+      @updateUserOrder="updateUserOrder"
+      :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",
+          orderTipColor: "#e8e8e8",
+        },
+        {
+          orderStatus: [2],
+          color: "#FA7D22",
+          backgroundColor: "#FEF4ED",
+          orderTipColor: "#f6e1d1",
+        },
+        {
+          orderStatus: [0, 1],
+          color: "#42D351",
+          backgroundColor: "#F5FCF5",
+          orderTipColor: "#e0f6e2",
+        },
       ],
-      timer: null
+      timer: null,
+      visible: false, //控制日历
+      orderShow: false, //控制创建订单弹窗
+      nowTime: "", //当前小时分钟
+      toTime: "", //点击加号创建订单时传过去的时间
+      Days: "", //要查询的日期
+      thisDays: "", //当前日期
+      isBackToday: false, //是否显示返回今天
     };
   },
-  created () {
-    this.fetchOrderList()
+  created() {
+    this.nowTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
+    this.fetchOrderList();
     this.timer = setInterval(() => {
-      this.fetchOrderList()
-    }, 10000)
+      this.fetchOrderList();
+    }, 10000);
+    let date = new Date();
+    let moth = date.getMonth() + 1;
+    let day = date.getFullYear() + "-" + moth + "-" + date.getDate();
+    this.thisDays = day;
+    this.Days = day;
   },
-  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()
+    beforeHandleCommand(orderInfo, command) {
+      return {
+        orderInfo: orderInfo,
+        command: command,
+      };
+    },
+    // 返回今天
+    backToday() {
+      this.Days = this.thisDays;
+      this.fetchOrderList();
+    },
+    // 跳转到指定日期预约表
+    updateUserOrder(e) {
+      this.Days = e;
+      this.fetchOrderList();
+    },
+    // 创建订单  打开创建订单弹窗
+    orderCreate(e) {
+      if (e.end) {
+        e.day = this.Days;
+        e.isClick = true;
+        this.toTime = e;
+      } else {
+        e.isClick = false;
+        this.toTime = e;
+      }
+      this.orderShow = true;
+    },
+    // 删除创建订单
+    delOrder(id) {
+      api.delOrder(
+        {
+          id,
+          type: 1,
+        },
+      ).then(res=>{
+          this.$message({
+            message: "删除成功",
+            type: "success",
+          });
+      });
+    },
+    // 打开日历弹窗
+    openCalendar() {
+      this.visible = true;
+    },
+    async fetchOrderList() {
+      let date = new Date();
+      let moth = date.getMonth() + 1;
+      let day = date.getFullYear() + "-" + moth + "-" + date.getDate();
+      let resp = await api.reservedRecords({
+        day: this.Days || day,
+      });
       if (resp.code === 200) {
-        this.orderList = resp.data
+        this.orderList = resp.data;
+        if (this.thisDays != this.Days && this.Days != "") {
+          this.isBackToday = true;
+        } else {
+          this.isBackToday = false;
+        }
       }
+      this.nowTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
     },
-    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;
+    },
+    clickOrder(e) {
+      if (e.command == "b") {
+        if (e.orderInfo.end) {
+          e.orderInfo.isClick = true;
+          e.orderInfo.day = this.Days
+          this.toTime = e.orderInfo;
+        } else {
+          e.orderInfo.isClick = false;
+          this.toTime = e.orderInfo;
+        }
+        this.orderShow = true;
+      } else if (e.command == "a") {
+        api.userOrderDetail({
+          id:e.orderInfo.order_id
+        }).then(res=>{
+        this.$router.push({
+          path: "/customerMan/details",
+          query:{
+            id:res.data[0].user_id
+          }
+        });
+        })
+      } else {
+        this.delOrder(e.orderInfo.order_id);
+        this.fetchOrderList();
       }
-      return style
     },
-    toOrderDetail (source) {
+    toOrderDetail(source) {
+      // 如果是付费用户
+      if (source.type == 2) {
+        return;
+      }
       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 {
+      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;
+        position: relative;
+        .name {
+          position: relative;
+          width: 100%;
+          text-align: center;
+          font-size: 14px;
+          margin-bottom: 3px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .project-time {
+          position: relative;
+          display: flex;
+          font-size: 10px;
+        }
+        .order-tip {
+          position: absolute;
+          font-size: 60px;
+        }
+        .newPeople {
+          text-align: center;
+          font-size: 10px;
+          position: absolute;
+          line-height: 16px;
+          font-size: center;
+          width: 26px;
+          height: 18px;
+          left: 5px;
+          top: 0;
+          background-color: aqua;
+          color: #fff;
+        }
+        .cicle {
+          position: absolute;
+          width: 26px;
+          height: 6px;
+          background-color: bisque;
+          left: 5px;
+          border-radius: 9px 9px 0 0;
+          top: 15px;
+        }
+        .clickOrder {
+          position: absolute;
+          width: 77px;
+          height: 80px;
+          top: 0;
+          left: 0;
+          .clickOrder-item {
             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;
+            height: 100%;
           }
         }
       }
+      .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>

src/server/home.js

@@ -233,4 +233,24 @@ export default class Home {
   static getUserPayList (params) {
     return $http.get(url.getUserPayList, params)
   }
+  // 获取付费用户列表
+  static searchOrderUser (params) {
+    return $http.post(url.searchOrderUser, params)
+  }
+  // 创建订单
+  static createUserOrder (params) {
+    return $http.post(url.createUserOrder, params)
+  }
+  // 获取预约人数统计
+  static OrderSum (params) {
+    return $http.post(url.OrderSum, params)
+  }
+  // 删除预约订单
+  static delOrder (params) {
+    return $http.get(url.delOrder, params)
+  }
+  // 用户预约详情
+  static userOrderDetail (params) {
+    return $http.get(url.userOrderDetail, params)
+  }
 }

src/server/urls.js

@@ -144,4 +144,19 @@ export default {
 
   // 获取付费用户列表
   getUserPayList:'/v2/pad/user/pay_list',
+
+  // 查询预约用户
+  searchOrderUser:'/v2/pad/reserved/user',
+
+  // 创建预约
+  createUserOrder:'/v2/pad/reserved/created',
+
+  // 预约人数统计
+  OrderSum:'/v2/pad/reserved/count',
+
+  // 预约人数统计
+  delOrder:'/v2/pad/reserved/del',
+
+  //用户预约详情
+  userOrderDetail:'/v2/pad/reserved/info'
 }