mao-mobile 0.0.1

package/ProPlateKeyboard/README.md

@@ -0,0 +1,86 @@
+# ProPlateKeyboard 车牌输入键盘组件
+
+## 组件介绍
+
+ProPlateKeyboard 是一个专为车牌输入场景设计的虚拟键盘组件，支持普通车牌、新能源车牌输入，内置类型切换、输入高亮、删除、完成等功能，适用于需要车牌输入的表单或弹窗。
+
+## 功能特点
+
+- 支持普通车牌与新能源车牌类型切换
+- 车牌输入高亮、自动切换输入框
+- 虚拟键盘支持省份、字母、数字、特殊字符
+- 操作按钮：取消、删除、完成
+- 主题色可自定义
+- 可与 ProPopup 弹窗组件配合使用
+
+## 属性（Props）
+
+| 属性名     | 类型    | 默认值    | 说明                       |
+| ---------- | ------- | --------- | -------------------------- |
+| modelValue | String  | ""        | 车牌初始值（支持 v-model） |
+| maskClick  | Boolean | false     | 点击遮罩层是否关闭弹窗     |
+| themeColor | String  | '#0BC8C8' | 主题色                     |
+
+## 事件（Events）
+
+| 事件名            | 说明               | 回调参数   |
+| ----------------- | ------------------ | ---------- |
+| update:modelValue | 车牌输入完成时触发 | 车牌字符串 |
+| change            | 车牌输入完成时触发 | 车牌字符串 |
+
+## 方法（Expose）
+
+| 方法名 | 说明         |
+| ------ | ------------ |
+| open   | 打开键盘弹窗 |
+
+## 使用示例
+
+```vue
+<template>
+  <ProPlateKeyboard
+    v-model="plateNumber"
+    :theme-color="'#0BC8C8'"
+    :maskClick="true"
+    ref="plateKeyboardRef"
+    @change="onPlateChange"
+  />
+  <button @click="openKeyboard">打开车牌键盘</button>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ProPlateKeyboard from "./index.vue";
+
+const plateNumber = ref("");
+const plateKeyboardRef = ref(null);
+
+const openKeyboard = () => {
+  plateKeyboardRef.value.open();
+};
+
+const onPlateChange = (val) => {
+  console.log("车牌输入完成:", val);
+};
+</script>
+```
+
+## 样式定制
+
+- `.pro-plate-keyboard`：键盘整体容器
+- `.pro-plate-type`：车牌类型选择区域
+- `.pro-plate-body`：车牌输入框区域
+- `.pro-plate-keyboard-container`：键盘区域
+- `.pro-plate-btn-group`：操作按钮区域
+- `.pro-plate-btn--cancel`：取消按钮
+- `.pro-plate-btn--delete`：删除按钮
+- `.pro-plate-btn--submit`：完成按钮
+
+可通过覆盖这些类名自定义样式。
+
+## 注意事项
+
+- 组件默认配合 ProPopup 弹窗使用，需保证 ProPopup 可用。
+- 主题色通过 `themeColor` 属性传递，影响高亮、按钮等样式。
+- 车牌输入长度根据类型自动切换（普通 7 位，新能源 8 位）。
+- 组件内部已处理输入高亮、切换、删除、完成等交互。

package/ProPlateKeyboard/index.vue

@@ -0,0 +1,510 @@
+<template>
+  <view>
+    <pro-popup
+      ref="plateKeyboardPopupRef"
+      position="bottom"
+      backgroundColor="#eee"
+      :maskClick="maskClick"
+      borderRadius="0"
+      :is-show-header="false"
+      @change="handlePopupChange"
+      customClass="pro-plate-popup"
+    >
+      <view class="pro-plate-keyboard">
+        <!-- 车牌类型选择 -->
+        <view class="pro-plate-type">
+          <view
+            v-for="item in typeList"
+            :key="item.label"
+            :class="[
+              'pro-plate-type__item',
+              type === item.value
+                ? 'pro-plate-type__item--active'
+                : 'pro-plate-type__item--unactive',
+            ]"
+            @tap="handleTypeChange(item.value)"
+          >
+            <text>{{ item.label }}</text>
+            <view
+              v-show="type === item.value"
+              class="pro-plate-type__underline"
+            ></view>
+          </view>
+        </view>
+        <!-- 车牌输入框 -->
+        <view class="pro-plate-body">
+          <template v-for="(_, index) in plateLength" :key="index">
+            <view
+              :class="[
+                'pro-plate-word',
+                { 'pro-plate-word--active': currentInputIndex === index },
+              ]"
+              @tap="handleInputSwitch(index)"
+            >
+              <text>{{ currentInputValue[index] }}</text>
+            </view>
+            <view v-if="index === 1" class="pro-plate-dot" />
+          </template>
+        </view>
+        <!-- 车牌键盘 -->
+        <view class="pro-plate-keys-container">
+          <view class="pro-plate-keyboard__keys">
+            <template v-if="inputType === 1">
+              <view
+                class="pro-plate-key"
+                v-for="el of provinceText"
+                :key="el"
+                @tap="handleKeyChoose(el)"
+              >
+                <view class="pro-plate-key-text">
+                  <text>{{ el }}</text>
+                </view>
+              </view>
+            </template>
+            <template v-if="inputType >= 3">
+              <view
+                class="pro-plate-key"
+                v-for="el of numberText"
+                :key="el"
+                @tap="handleKeyChoose(el)"
+              >
+                <view class="pro-plate-key-text">
+                  <text>{{ el }}</text>
+                </view>
+              </view>
+            </template>
+            <template v-if="inputType >= 2">
+              <view
+                class="pro-plate-key"
+                v-for="el of wordText"
+                :key="el"
+                @tap="handleKeyChoose(el)"
+              >
+                <view class="pro-plate-key-text">
+                  <text>{{ el }}</text>
+                </view>
+              </view>
+            </template>
+            <template v-if="inputType >= 3">
+              <view
+                class="pro-plate-key"
+                v-for="el of lastWordText"
+                :key="el"
+                @tap="handleKeyChoose(el, 'lastWordText')"
+                :style="{ 'pointer-events': inputType !== 4 ? 'none' : 'auto' }"
+              >
+                <view
+                  class="pro-plate-key-text"
+                  :style="{
+                    color: inputType !== 4 ? '#ddd' : '',
+                  }"
+                >
+                  <text>{{ el }}</text>
+                </view>
+              </view>
+            </template>
+          </view>
+        </view>
+        <!-- 操作按钮 -->
+        <view class="pro-plate-btn-group">
+          <view class="pro-plate-btn-group__left">
+            <view
+              class="pro-plate-btn pro-plate-btn--cancel"
+              @tap="handleClose"
+            >
+              <text>取消</text>
+            </view>
+          </view>
+          <view class="pro-plate-btn-group__right">
+            <view
+              class="pro-plate-btn pro-plate-btn--delete"
+              @tap="handleDelete"
+            >
+              <text>删除</text>
+            </view>
+            <view
+              class="pro-plate-btn pro-plate-btn--submit"
+              @tap="handleSubmit"
+            >
+              <text>完成</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </pro-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import ProPopup from "../ProPopup/index.vue";
+
+// Props 定义
+const props = defineProps({
+  // 默认选中的值
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  maskClick: {
+    type: Boolean,
+    default: true,
+  },
+  // 主题色
+  themeColor: {
+    type: String,
+    default: "#0BC8C8",
+  },
+});
+
+// Emits 定义
+const emit = defineEmits(["update:modelValue", "change"]);
+
+// Refs
+const plateKeyboardPopupRef = ref(null);
+const type = ref("1");
+const currentInputIndex = ref(0);
+const currentInputValue = ref(["", "", "", "", "", "", ""]);
+
+// 常量定义
+const typeList = [
+  { label: "普通车牌", value: "1" },
+  { label: "新能源车牌", value: "2" },
+];
+
+const provinceText = [
+  "粤",
+  "京",
+  "冀",
+  "沪",
+  "津",
+  "晋",
+  "蒙",
+  "辽",
+  "吉",
+  "黑",
+  "苏",
+  "浙",
+  "皖",
+  "闽",
+  "赣",
+  "鲁",
+  "豫",
+  "鄂",
+  "湘",
+  "桂",
+  "琼",
+  "渝",
+  "川",
+  "贵",
+  "云",
+  "藏",
+  "陕",
+  "甘",
+  "青",
+  "宁",
+  "新",
+];
+
+const numberText = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+
+const wordText = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z",
+];
+
+const lastWordText = ["港", "澳", "学", "领", "警"];
+
+// 计算属性
+const plateLength = computed(() => (type.value === "1" ? 7 : 8));
+
+const inputType = computed(() => {
+  switch (currentInputIndex.value) {
+    case 0:
+      return 1;
+    case 1:
+      return 2;
+    case 2:
+    case 3:
+    case 4:
+    case 5:
+      return 3;
+    case 6:
+      return type.value === "2" ? 3 : 4;
+    case 7:
+      return 4;
+    default:
+      return 1;
+  }
+});
+
+// 方法定义
+const resetState = () => {
+  type.value = "1";
+  currentInputIndex.value = 0;
+  currentInputValue.value = ["", "", "", "", "", "", ""];
+};
+
+const open = () => {
+  // 如果有 modelValue，进行回显处理
+  if (props.modelValue) {
+    const plateKey = props.modelValue.split("");
+    if (plateKey.length === 7) {
+      type.value = "1";
+    } else if (plateKey.length === 8) {
+      type.value = "2";
+    }
+    if (plateKey.length === 7 || plateKey.length === 8) {
+      currentInputValue.value = plateKey;
+      currentInputIndex.value = plateKey.length - 1;
+    }
+  }
+  plateKeyboardPopupRef.value.open();
+};
+
+const handlePopupChange = (e) => {
+  if (!e.show) {
+    resetState();
+  }
+};
+
+const handleClose = () => {
+  resetState();
+  plateKeyboardPopupRef.value.close();
+};
+
+const handleTypeChange = (val) => {
+  type.value = val;
+  currentInputIndex.value = 0;
+  currentInputValue.value =
+    val === "1"
+      ? ["", "", "", "", "", "", ""]
+      : ["", "", "", "", "", "", "", ""];
+};
+
+const handleInputSwitch = (index) => {
+  currentInputIndex.value = index;
+};
+
+const handleKeyChoose = (value, keyType) => {
+  if (keyType === "lastWordText" && inputType.value !== 4) return;
+  currentInputValue.value[currentInputIndex.value] = value;
+  if (type.value === "1") {
+    if (currentInputIndex.value < 6) {
+      currentInputIndex.value++;
+    }
+  } else {
+    if (currentInputIndex.value < 7) {
+      currentInputIndex.value++;
+    }
+  }
+};
+
+const handleDelete = () => {
+  currentInputValue.value[currentInputIndex.value] = "";
+  if (currentInputIndex.value !== 0) {
+    currentInputIndex.value--;
+  }
+};
+
+const handleSubmit = () => {
+  const plate = currentInputValue.value.join("");
+  const isValidLength =
+    type.value === "1" ? plate.length === 7 : plate.length === 8;
+
+  if (!isValidLength) {
+    uni.showToast({ title: "请输入完整的车牌号码", icon: "none" });
+    return;
+  }
+  emit("update:modelValue", plate);
+  emit("change", plate);
+  handleClose();
+};
+
+// 暴露方法
+defineExpose({
+  open,
+});
+</script>
+<style lang="scss">
+.pro-plate-popup {
+  :deep(.pro-popup__content--body) {
+    margin: 0 !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.pro-plate-keyboard {
+  font-family: PingFang SC, sans-serif;
+  color: #000000;
+  background: #eeeeee;
+
+  // 车牌类型选择
+  .pro-plate-type {
+    display: flex;
+    flex: 1;
+    padding: 28rpx 0 24rpx;
+    font-weight: 500;
+    font-size: 32rpx;
+    line-height: 48rpx;
+
+    &__item {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      &--active {
+        font-weight: 500;
+        color: v-bind("themeColor");
+      }
+      &--unactive {
+        font-weight: 400;
+        color: #888;
+      }
+    }
+    &__underline {
+      position: absolute;
+      left: 50%;
+      bottom: -24rpx;
+      transform: translateX(-50%);
+      width: 116rpx;
+      height: 6rpx;
+      border-radius: 3rpx;
+      background: v-bind("themeColor");
+    }
+  }
+
+  // 车牌输入框
+  .pro-plate-body {
+    box-sizing: border-box;
+    padding: 40rpx 0 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .pro-plate-word {
+      flex: 1;
+      background: #ffffff;
+      border-radius: 8rpx;
+      height: 0;
+      margin: 0 6rpx;
+      box-sizing: border-box;
+      padding-bottom: 96rpx;
+      position: relative;
+      &--active {
+        border: 2rpx solid v-bind("themeColor");
+      }
+
+      text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        font-weight: 600;
+        font-size: 48rpx;
+        color: #333;
+      }
+    }
+
+    .pro-plate-dot {
+      width: 8rpx;
+      height: 8rpx;
+      background: #333;
+      border-radius: 50%;
+      margin: 0 5rpx;
+      flex-shrink: 0;
+    }
+  }
+  // 键盘区域
+  .pro-plate-keys-container {
+    height: 432rpx;
+    .pro-plate-keyboard__keys {
+      box-sizing: border-box;
+      transition: all 0.3s;
+      display: flex;
+      flex-wrap: wrap;
+
+      .pro-plate-key {
+        padding: 12rpx 6rpx;
+        box-sizing: border-box;
+        width: 10%;
+        line-height: 84rpx;
+
+        .pro-plate-key-text {
+          box-sizing: border-box;
+          background: #fff;
+          border-radius: 10rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 400;
+          font-size: 44rpx;
+          color: #000;
+          &:active {
+            background: v-bind("themeColor");
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  // 按钮组
+  .pro-plate-btn-group {
+    display: flex;
+    justify-content: space-between;
+    padding: 28rpx 0 48rpx;
+    &__right {
+      display: flex;
+    }
+
+    .pro-plate-btn {
+      height: 84rpx;
+      width: 182rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #fff;
+      font-size: 32rpx;
+      border-radius: 10rpx;
+      margin: 0 6rpx;
+
+      &--cancel {
+        color: #666;
+      }
+
+      &--delete {
+        color: #ff0000;
+      }
+
+      &--submit {
+        color: #ffffff;
+        background: v-bind("themeColor");
+      }
+    }
+  }
+}
+</style>