hair/src/views/Appointment.vue

<template>
  <div class="Appointment">
    <div class="main">
      <!-- <van-cell title="已预约" /> -->
      <van-cell v-for="(item, i) in mainList" :key="i" :title="item.userName">
        <template #label>
          <div>
            {{ item.orderTime }}
          </div>
        </template>
        <template #default>
          <div style="text-align: right">
            <van-button
              v-if="item.status !== 2 && item.self"
              @click="() => removequeue(item.id)"
              type="danger"
              size="mini"
            >
              取消预约
            </van-button>
            <van-tag type="primary" v-if="item.status === 2">
              已超时 请重新预约
            </van-tag>
          </div>
        </template>
      </van-cell>
    </div>
    <van-sidebar v-model="activeKey" @change="onChange">
      <van-sidebar-item v-for="(item, i) in dataList" :key="i" :title="item" />
    </van-sidebar>

    <div style="clear: both"></div>
    <div
      style="
        padding: 16px;
        position: fixed;
        width: calc(100% - 32px);
        bottom: 0;
      "
    >
      <van-button
        color="#e42417"
        round
        block
        :disabled="isDis"
        type="info"
        @click="toAppointment"
        native-type="submit"
      >
        预约
      </van-button>
      <!-- @click="toAppointment" -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Sidebar as vanSidebar,
  SidebarItem as vanSidebarItem,
  Cell as vanCell,
  Button as vanButton,
  Tag as vanTag,
  Dialog,
  Toast,
} from "vant";
import "vant/lib/sidebar/style/index";
import "vant/lib/tag/style/index";
import "vant/lib/button/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/icon/style/index";
import "vant/lib/toast/style/index";
import "vant/lib/dialog/style/index";
import "vant/lib/sidebar-item/style/index";

import { orderList, cancel } from "../api/index";

export default {
  name: "Appointment",
  data() {
    return {
      group: {},
      phone: "",
      name: "",
      isDis: false,
      activeKey: 0,
      dataList: [],
      mainList: [],
    };
  },
  mounted() {
    this.phone = this.$route.query.phone || "";
    this.name = this.$route.query.userName || "";
    localStorage.token = "";
    const that = this;
    orderList({
      userPhone: that.phone || "",
    }).then(res => {
      const li = res || [];
      let l = [];
      li.sort((a, b) => {
        return new Date(a.orderTime) - new Date(b.orderTime);
      });
      that.isDis = false;
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        // v.orderTime = v.orderTime.replace(/:00$/, "");
        if (v.status !== 2 && v.self) that.isDis = true;
        let key = v.orderTime.split(" ")[0];
        key = key.split("-");
        key.shift();
        if(key.length) key = key.join("月") + '日';
        else key = ""
        if (that.group[key]) {
          that.group[key].push(v);
        } else {
          l.push(key);
          that.group[key] = [v];
        }
      }
      that.dataList = l;
      that.onChange();
    });
  },
  computed: {},
  methods: {
    toAppointment() {
      this.$router.push({
        name: "Apply",
        params: { name: this.name, phone: this.phone },
      });
    },
    onChange() {
      this.mainList = this.group[this.dataList[this.activeKey]];
    },
    removequeue(id) {
      let that = this;
      Dialog.confirm({
        title: "取消预约",
        message: "确定要取消该预约？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        // on confirm
        cancel({
          id,
        }).then(() => {
          orderList({
            userPhone: that.phone || "",
          }).then(res => {
            Toast("已取消预约");
            const li = res || [];
            let l = [],
              group = {};
            that.isDis = false;
            li.sort((a, b) => {
              return new Date(a.orderTime) - new Date(b.orderTime);
            });
            for (let i = 0; i < li.length; i++) {
              const v = li[i];
              if (v.status !== 2 && v.self) that.isDis = true;
              v.orderTime = v.orderTime.replace(/:00$/, "");
              let key = v.orderTime.split(" ")[0];
              if (group[key]) {
                group[key].push(v);
              } else {
                l.push(key);
                group[key] = [v];
              }
            }
            that.dataList = l;
            that.group = group;
            that.onChange();
          });
        });
      });
    },
  },
  beforeUnmount: function () {
    localStorage.token = "";
  },
  components: {
    vanSidebar,
    vanCell,
    vanSidebarItem,
    vanButton,
    vanTag,
  },
};
</script>

<style>
.Appointment {
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f8fa;
  padding-bottom: 76px;
}
.Appointment .van-sidebar {
  width: 100px;
}
.Appointment .main {
  width: calc(100% - 100px);
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  box-sizing: border-box;
  padding: 5px;
  float: right;
}
.Appointment .van-sidebar-item--select::before {
  background-color: #e42417;
}
</style>