pad_spa/src/pages/home/detailList/index.vue

<template>
  <div class="container">
    <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>-</span>
        <span>{{ orderListItem.time.end }}</span>
      </div>
      <div class="project-wrapper">
        <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,
          }"
        >
          <div class="name">{{ projectItem.nickname }}</div>
          <div class="project-time">
            <span>{{ projectItem.start }}</span>
            <span>-</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";
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" },
      ],
      timer: null,
      visible: false, //控制日历
      orderShow: false, //控制创建订单弹窗
      nowTime: "", //当前小时分钟
      toTime: "", //点击加号创建订单时传过去的时间
    };
  },
  created() {
    this.nowTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
    this.fetchOrderList();
    this.timer = setInterval(() => {
      this.fetchOrderList();
    }, 10000);
  },
  mounted() {
    if (this.$refs.row) {
      this.$refs.row.forEach((item) => {
        this.rowHeightList.push(item.clientHeight);
      });
    }
  },
  destroyed() {
    if (this.timer) {
      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();
      if (resp.code === 200) {
        console.log(resp);
        this.orderList = resp.data;
        console.log(this.orderList);
      }
    },
    getStyleByOrderStatus(orderSource) {
      let style = null;
      // 订单状态，0已预约，未支付，1已支付，待使用，2正在使用，3已结算，5已取消
      switch (orderSource.status) {
        case 0:
          style = this.colorStyleList[2];
          break;
        case 1:
          style = this.colorStyleList[2];
          break;
        case 2:
          style = this.colorStyleList[1];
          break;
        case 3:
          style = this.colorStyleList[0];
          break;
        case 5:
          style = this.colorStyleList[0];
          break;
      }
      return style;
    },
    toOrderDetail(source) {
      if (source.status === 0) {
        this.$router.push({
          path: "/confirmOrder/details",
          query: {
            id: source.order_id,
          },
        });
      } else {
        this.$router.push({
          path: "/historicalOrder/details",
          query: {
            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;
      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;
        }
      }
      .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>