hair/src/views/Queue.vue

<template>
  <div class="queue">
    <van-nav-bar
      title="当前队列"
      @click-left="toAdmin"
      left-text="添加预定"
      left-arrow
    />
    <van-cell-group>
      <van-cell v-for="(item, i) in queueList" :key="i">
        <template #title>
          {{ [i + 1 + ".", item.orderTime + "  ", item.userName].join(" ") }}
        </template>
        <template #default>
          <van-button
            v-if="i === 0"
            type="default"
            size="small"
            @click="skipUser"
          >
            跳过
          </van-button>
          <van-button
            v-if="i === 0"
            type="info"
            size="small"
            @click="nextItem"
          >
            完成
          </van-button>
          <van-button
            type="warning"
            size="small"
            @click="() => removequeue(item.id, i)"
            >删除</van-button
          >
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Button as vanButton,
  NavBar as vanNavBar,
  Dialog,
} from "vant";
import "vant/lib/cell/style/index";
import "vant/lib/cell-group/style/index";
import "vant/lib/dialog/style/index";
import "vant/lib/button/style/index";
import "vant/lib/nav-bar/style/index";

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

export default {
  name: "Queue",
  data() {
    return {
      queueList: [],
    };
  },
  mounted() {
    this.reloadOrder();
  },
  computed: {},
  methods: {
    reloadOrder() {
      orderList().then(res => {
        this.queueList = res || [];
      });
    },
    toAdmin() {
      this.$router.push({ name: "Apply", params: { a: 0 } });
    },
    skipUser() {
      Dialog.confirm({
        message: "是否跳过该用户？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        skip().then(() => {
          this.reloadOrder();
        });
      });
    },
    nextItem() {
      Dialog.confirm({
        message: "该服务是否已完成？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        nextone().then(() => {
          this.reloadOrder();
        });
      });
    },
    removequeue(id, i) {
      console.log(id);
      Dialog.confirm({
        message: "确定要删除该预约？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        // on confirm
        cancel({
          id,
        }).then(() => {
          let queueList = JSON.parse(JSON.stringify(this.queueList));
          queueList.splice(i, 1);
          this.queueList = queueList;
        });
      });
    },
  },
  beforeUnmount: function () {},
  components: {
    vanCell,
    vanCellGroup,
    vanButton,
    vanNavBar,
  },
};
</script>

<style>
.queue {
  width: 990px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}
</style>