hair/src/views/Queue.vue

<template>
  <div class="queue">
    <van-nav-bar
      title="当前队列"
      right-text="打样"
      @click-left="toAdmin"
      @click-right="toOpen"
      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>

    <van-popup v-model="open" position="right" class="open">
      <van-radio-group v-model="radio">
        <van-row>
          <van-col span="8">周一</van-col>
          <van-col span="8">
              <van-stepper v-model="sH" />
              <van-stepper v-model="sM" />
          </van-col>
          <van-col span="8">
            <van-radio name="1">单选框 2</van-radio>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">周二</van-col>
          <van-col span="8">span: 8</van-col>
          <van-col span="8">
            <van-radio name="2">单选框 2</van-radio>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">周三</van-col>
          <van-col span="8">span: 8</van-col>
          <van-col span="8">
            <van-radio name="3">单选框 2</van-radio>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">周四</van-col>
          <van-col span="8">span: 8</van-col>
          <van-col span="8">
            <van-radio name="4">单选框 2</van-radio>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">周五</van-col>
          <van-col span="8">span: 8</van-col>
          <van-col span="8">
            <van-radio name="5">单选框 2</van-radio>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">周六</van-col>
          <van-col span="8">span: 8</van-col>
          <van-col span="8">
            <van-radio name="6">单选框 2</van-radio>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">周日</van-col>
          <van-col span="8">span: 8</van-col>
          <van-col span="8">
            <van-radio name="7">单选框 2</van-radio>
          </van-col>
        </van-row>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Button as vanButton,
  NavBar as vanNavBar,
  Popup as vanPopup,
  Col as vanCol,
  Row as vanRow,
  Radio as vanRadio,
  RadioGroup as vanRadioGroup,
  Stepper as vanStepper,
  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/popup/style/index";
import "vant/lib/col/style/index";
import "vant/lib/row/style/index";
import "vant/lib/radio/style/index";
import "vant/lib/stepper/style/index";
import "vant/lib/radio-group/style/index";
import "vant/lib/nav-bar/style/index";

import { orderList, skip, nextone, cancel } from "../api/index";
export default {
  name: "Queue",
  data() {
    return {
      queueList: [],
      sH: 0,
      sM: 0,
      eH: 0,
      eM: 0,
      open: false,
      radio: "",
    };
  },
  mounted() {
    this.reloadOrder();
  },
  computed: {},
  methods: {
    toOpen() {
      this.open = true;
    },
    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,
    vanPopup,
    vanCol,
    vanRow,
    vanRadio,
    vanRadioGroup,
    vanStepper
  },
};
</script>

<style>
.queue {
  width: 990px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}
.queue .open {
  height: 100%;
  min-width: 500px;
  padding: 1em;
  box-sizing: border-box;
}
.queue .van-col {
  height: 2em;
  line-height: 2em;
}
</style>