cdwUniapp/components/keyboard/keyboard.vue

<script setup>
import { defineEmits, ref } from "vue";
import useStore from "@/store";

const emit = defineEmits(["confirm", "cancel"]);

const inputValue = ref("");
const store = useStore();

async function onTap(key) {
  if (key === "confirm") {
    // 处理确定按钮点击事件
    if (inputValue.value === "") {
      uni.showToast({
        title: "请输入数量",
        icon: "none",
        // duration: 99999999,
      });
      return;
    }

    emit("confirm", Number(inputValue.value));

    store.cache.keyboardConfirm(Number(inputValue.value));
  }
  else if (key === "cancel") {
    // 处理取消按钮点击事件
    emit("cancel");
    // const [, cancel] = keyboardEmit();
    // cancel();
  }
  else if (key === "clear") {
    // 处理清空按钮点击事件
    inputValue.value = "";
  }
  else if (key === "delete") {
    // 处理删除按钮点击事件
    inputValue.value = inputValue.value.slice(0, -1);
  }
  else {
    // 处理数字键点击事件
    const nextValue = inputValue.value + key;
    if (nextValue > 999) {
      uni.showToast({
        title: "数量不能超过999",
        icon: "none",
      });
      return;
    }
    inputValue.value = `${Number(nextValue)}`;
  }
}
</script>

<template>
  <view class="keyboard">
    <view class="keyboard-body">
      <input class="select-num-top" placeholder="限0~999" disabled :value="inputValue">
      <view class="key" @tap="() => onTap('1')">
        1
      </view>
      <view class="key" @tap="() => onTap('2')">
        2
      </view>
      <view class="key" @tap="() => onTap('3')">
        3
      </view>
      <view class="key action delete" @tap="() => onTap('delete')">
        ⌫
      </view>

      <view class="key" @tap="() => onTap('4')">
        4
      </view>
      <view class="key" @tap="() => onTap('5')">
        5
      </view>
      <view class="key" @tap="() => onTap('6')">
        6
      </view>
      <view class="key action clear" @tap="() => onTap('clear')">
        清空
      </view>

      <view class="key" @tap="() => onTap('7')">
        7
      </view>
      <view class="key" @tap="() => onTap('8')">
        8
      </view>
      <view class="key" @tap="() => onTap('9')">
        9
      </view>
      <view class="key action confirm" @tap="() => onTap('confirm')">
        确定
      </view>

      <view class="key zero span-2" @tap="() => onTap('0')">
        0
      </view>
      <view class="key cancel" @tap="() => onTap('cancel')">
        取消
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.keyboard {
  width: 100vw;
  height: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: $z-index-popup;
  background: rgba(0, 0, 0, 0.03);
}

/* Grid 容器：3列数字 + 1列操作 */
.keyboard-body {
  box-sizing: border-box;
  background: #f2f3f5;
  padding: 20rpx 20rpx env(safe-area-inset-bottom) 20rpx;
  left: 0;
  bottom: 0;
  display: grid;
  position: fixed;
  width: 100%;
  grid-template-columns: repeat(3, 1fr) 1fr; /* 四列 */
  /* 顶部输入占一整行 + 下方4行按键 */
  grid-template-rows: 100rpx repeat(4, 84rpx);
  gap: 12rpx;
}

/* 键通用样式 */
.key {
  background-color: #fff;
  border-radius: 12rpx;
  // border: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $text-4xl;
  font-weight: 430;
  &:active {
    background-color: #e0e2e7;
  }
}

/* 0 跨两列：第4行的第1-2列 */
.span-2 {
  grid-column: 1 / span 2;
}

/* 取消：第4行第3列 */
.cancel {
  grid-column: 3;
  grid-row: 4;
  background-color: #e0e2e7;
  &:active {
    background-color: #fff;
  }
}

/* 右侧操作列（第4列） */
.action {
  background-color: #e0e2e7;
  &:active {
    background-color: #fff;
  }
}

/* 删除：第1行第4列 */
.action.delete {
  grid-column: 4;
  grid-row: 2;
}

/* 清空：第2行第4列 */
.action.clear {
  grid-column: 4;
  grid-row: 3;
}

/* 确定：第3行开始，跨两行占第3-4行第4列 */
.action.confirm {
  grid-column: 4;
  grid-row: 4 / span 2;
}

/* 取消：第5行第3列 */
.cancel {
  grid-column: 3;
  grid-row: 5;
}

/* 顶部输入：跨4列、位于第1行 */
.keyboard .select-num-top {
  height: 100rpx;
  border: none;
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
  padding: 0rpx 10rpx;
  text-align: center;
  border-radius: 12rpx;
  background: #fff;
  /* 关键定位 */
  grid-column: 1 / -1;
  grid-row: 1;
}
</style>