feat: 调整输入组件

src/pages-base/queue/components/PartySizeStepper.vue

@@ -0,0 +1,86 @@
+<template>
+  <view class="queue-party-stepper" :class="{ 'queue-party-stepper--disabled': disabled }">
+    <text class="queue-party-stepper__value">{{ currentValue }}</text>
+    <view class="queue-party-stepper__controls">
+      <button
+        class="queue-party-stepper__control"
+        :class="{ 'queue-party-stepper__control--disabled': increaseDisabled }"
+        :disabled="increaseDisabled"
+        hover-class="none"
+        @click.stop="increase"
+      >
+        <uni-icons type="up" size="14" :color="increaseDisabled ? '#aeb7b1' : '#56665f'" />
+      </button>
+      <button
+        class="queue-party-stepper__control"
+        :class="{ 'queue-party-stepper__control--disabled': decreaseDisabled }"
+        :disabled="decreaseDisabled"
+        hover-class="none"
+        @click.stop="decrease"
+      >
+        <uni-icons type="down" size="14" :color="decreaseDisabled ? '#aeb7b1' : '#56665f'" />
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: 1,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const minValue = computed(() => {
+  const value = Number(props.min);
+  return Number.isFinite(value) ? Math.max(1, Math.round(value)) : 1;
+});
+
+const maxValue = computed(() => {
+  const value = Number(props.max);
+  return Number.isFinite(value) ? Math.max(minValue.value, Math.round(value)) : minValue.value;
+});
+
+const currentValue = computed(() => {
+  const value = Number(props.modelValue);
+  if (!Number.isFinite(value)) return minValue.value;
+  return Math.min(maxValue.value, Math.max(minValue.value, Math.round(value)));
+});
+
+const increaseDisabled = computed(() => props.disabled || currentValue.value >= maxValue.value);
+const decreaseDisabled = computed(() => props.disabled || currentValue.value <= minValue.value);
+
+const commitValue = (value) => {
+  const nextValue = Math.min(maxValue.value, Math.max(minValue.value, value));
+  if (nextValue === currentValue.value) return;
+  emit("update:modelValue", nextValue);
+  emit("change", nextValue);
+}
+
+const increase = () => {
+  if (increaseDisabled.value) return;
+  commitValue(currentValue.value + 1);
+}
+
+const decrease = () => {
+  if (decreaseDisabled.value) return;
+  commitValue(currentValue.value - 1);
+}
+</script>

src/pages-base/queue/index.vue

@@ -89,19 +89,17 @@
 
                 <text v-if="selectedProject?.visitorNotice" class="queue-notice">{{ selectedProject.visitorNotice }}</text>
 
-                <label class="queue-field">
+                <view class="queue-field">
                   <text>同行人数</text>
-                  <input
-                    type="number"
-                    inputmode="numeric"
-                    :value="ticketForm.partySize"
+                  <PartySizeStepper
+                    v-model="ticketForm.partySize"
                     :disabled="createBusy"
                     :min="minPartySize"
                     :max="maxPartySize"
-                    @input="handleTicketFormInput('partySize', $event)"
+                    @change="handlePartySizeChange"
                   />
                   <text class="queue-field__hint">本项目每个号码可绑定 {{ minPartySize }} 到 {{ maxPartySize }} 人</text>
-                </label>
+                </view>
 
                 <label class="queue-field">
                   <text>手机号</text>
@@ -236,6 +234,7 @@ import TopNavBar from "@/components/TopNavBar/index.vue";
 import FeedbackBanner from "./components/FeedbackBanner.vue";
 import FreshnessBanner from "./components/FreshnessBanner.vue";
 import LoadingState from "./components/LoadingState.vue";
+import PartySizeStepper from "./components/PartySizeStepper.vue";
 import QueuePublicHeader from "./components/QueuePublicHeader.vue";
 import TicketCard from "./components/TicketCard.vue";
 import {
@@ -495,6 +494,13 @@ const handleTicketFormInput = (field, event) => {
   return updateTicketForm(field, getEventValue(event));
 }
 
+const handlePartySizeChange = () => {
+  confirmDuplicatePhone.value = false;
+  phoneError.value = "";
+  formError.value = "";
+  clearCreateIntent();
+}
+
 const updateTicketForm = (field, value) => {
   let nextValue = value;
   if (field === "partySize") {

src/pages-base/queue/scss/queue.scss

@@ -103,6 +103,7 @@
 .queue-button,
 .queue-back-button,
 .queue-honorific__option,
+.queue-party-stepper__control,
 .queue-result-option,
 .queue-feedback__action {
   margin: 0;
@@ -192,7 +193,8 @@
   }
 
   input,
-  .queue-picker {
+  .queue-picker,
+  .queue-party-stepper {
     min-height: 96rpx;
     box-sizing: border-box;
     border: 1rpx solid #aebeb4;
@@ -215,6 +217,53 @@
   gap: 12rpx;
 }
 
+.queue-party-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+  border: 1rpx solid #aebeb4;
+  padding: 0 24rpx 0 30rpx;
+}
+
+.queue-party-stepper--disabled {
+  opacity: 0.72;
+}
+
+.queue-party-stepper__value {
+  min-width: 0;
+  flex: 1;
+  color: #10261d;
+  font-size: 34rpx;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.queue-party-stepper__controls {
+  display: grid;
+  width: 54rpx;
+  height: 64rpx;
+  flex: 0 0 auto;
+  grid-template-rows: 1fr 1fr;
+  overflow: hidden;
+  background: #f1f1f1;
+}
+
+.queue-party-stepper__control {
+  display: flex;
+  width: 54rpx;
+  min-height: 0;
+  height: 32rpx;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  line-height: 1;
+}
+
+.queue-party-stepper__control--disabled {
+  opacity: 0.45;
+}
+
 .queue-field__hint {
   color: #68736c;
   font-size: 23rpx;