cashier-web/src/views/tool/Instead/components/diner-number.vue

<template>
  <div class="select_desk">
    <el-dialog width="410px" title="就餐人数" v-model="show">
      <div class="select_desk_dialog u-p-b-20">
        <key-board
          isCanEmpty
          v-model="number"
          @clear="clear"
          :max="max"
          :maxTips="'最多' + max + '位'"
        >
          <template #clear>
            <div>清空</div>
          </template>
          <template #input>
            <div class="u-flex w-full">
              <el-input
                placeholder="请输入就餐人数"
                v-model="number"
                @input="inputNumber"
                @change="inputChange"
                type="number"
              >
                <template #append>位</template>
              </el-input>
            </div>
          </template>
        </key-board>
        <div class="confirm_btns">
          <el-button size="large" @click="close">取消</el-button>
          <el-button size="large" type="primary" @click="confirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import keyBoard from "./keyboard.vue";
import { ElMessage } from "element-plus";
export default {
  components: { keyBoard },
  props: {
    max: {
      type: Number,
      default: 99,
    },
  },
  data() {
    return {
      number: "",
      show: false,
      hasOpen: false,
      loading: false,
    };
  },
  watch: {
    number(newval) {
      if (newval > this.max) {
        this.number = this.max;
        ElMessage.error("最多只能选择" + this.max + "位就餐人数");
      }
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(newval)) {
        this.number = newval.substring(0, newval.length - 1);
      }
    },
  },
  methods: {
    inputNumber(e) {},
    inputChange(e) {},
    clear(e) {
      console.log(e);
      this.number = "";
    },
    confirm() {
      if (this.number > this.max) {
        ElMessage.error("最多只能选择" + this.max + "位就餐人数");
      }
      // if (!this.number) {
      //   ElMessage.error("请选择就餐人数");
      // }
      console.log(this.number);
      this.$emit("confirm", this.number);
      this.close();
    },
    open(number) {
      this.number = number || "";
      this.show = true;
    },
    close() {
      this.show = false;
      this.number = "";
    },
  },
  mounted() {},
};
</script>
  
  <style lang="scss" scoped>
:deep(.el-button) {
  padding: 12px 20px;
}

:deep(.el-input__inner::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
:deep(.el-input__inner::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
:deep(.el-button--success) {
  border-color: #22bf64;
  background-color: #22bf64;
}
.select_desk .btn {
  height: 34px;
}
.tags {
  font-size: 16px;
  &.using {
    color: rgb(234, 64, 37);
  }
  &.wait {
    color: rgb(252, 236, 79);
  }
  &.idle {
    color: rgb(137, 234, 71);
  }
  &.closed {
    color: rgb(221, 221, 221);
    filter: grayscale(1);
  }
}
:deep(.inputs .el-input__inner) {
  border-color: transparent !important;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  font-size: 20px;
}
.select_desk .select_desk_dialog {
  display: flex;

  flex-direction: column;

  align-items: center;
}

.select_desk .select_desk_dialog .nav {
  width: 286px;
  height: 38px;
  background: #dcf0e8;

  justify-content: space-around;
}

.select_desk .select_desk_dialog .nav .li,
.select_desk .select_desk_dialog .nav {
  border-radius: 4px;

  display: flex;

  align-items: center;
}

.select_desk .select_desk_dialog .nav .li {
  width: 140px;
  height: 34px;
  color: #0fc161;

  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.select_desk .select_desk_dialog .nav .lion {
  background: #0fc161;
  color: #fff;
}

.select_desk .select_desk_dialog .inputs {
  width: 370px;
  line-height: 54px;
  margin-top: 24px;
  height: 54px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  text-align: center;
  font-size: 20px;
  position: relative;
}

.select_desk .select_desk_dialog .inputs .close {
  color: #aaa;
  position: absolute;
  right: 10px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
}

.select_desk .select_desk_dialog .keyboard {
  display: flex;

  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

.select_desk .select_desk_dialog .keyboard .li {
  height: 60px;
  width: 33.333%;

  display: flex;

  justify-content: center;

  align-items: center;
  font-size: 24px;
  color: #212121;
  cursor: pointer;

  user-select: none;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;

  transition: all 0.1s;
}

.select_desk .select_desk_dialog .keyboard .li:hover {
  background: #dcdfe6;
}

.select_desk .select_desk_dialog .keyboard .li .icon {
  font-size: 1.3em;
}

.select_desk .select_desk_dialog .keyboard .confirm {
  height: 140px;
  background: #ff9f2e;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: none;
}

.select_desk .select_desk_dialog .keyboard .confirm:hover {
  background: #f88502;
}

.confirm_btns {
  display: flex;

  justify-content: space-between;
  width: 100%;
}

.confirm_btns .el-button {
  width: 175px;
}
</style>