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,
  //   getAPPUser,
  //   getAPPToken,
  //   getAPPUserDetail,
} from "../api/index";
// import { urlSearchData } from "../utils/tool";

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 = "";
    // let search = urlSearchData();
    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];
        if (that.group[key]) {
          that.group[key].push(v);
        } else {
          l.push(key);
          that.group[key] = [v];
        }
      }
      that.dataList = l;
      that.onChange();
    });
    // getAPPUser({
    //   ticket: search.ticket,
    // }).then(r => {
    //   getAPPToken("rest/63bada00-7d01-4acc-ab2b-df8061eeeb8f").then(res => {
    //     const t = JSON.parse(res || "{}");
    //     localStorage.token = t.id;
    //     getAPPUserDetail({
    //       loginName: r,
    //     }).then(detail => {
    //       const obj = JSON.parse(detail || "{}");
    //       console.log(obj);
    //       that.phone = obj.telNumber;
    //       that.name = obj.name;
    //       orderList({
    //         userPhone: that.phone || "",
    //       }).then(res => {
    //         const li = res || [];
    //         let l = [];
    //         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];
    //           v.orderTime = v.orderTime.replace(/:00$/, "");
    //           let key = v.orderTime.split(" ")[0];
    //           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.replace({
        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>