Compare commits
2 Commits
ffeb03a3fc
...
51e7277ab1
| Author | SHA1 | Date | |
|---|---|---|---|
| 51e7277ab1 | |||
| 010f238b65 |
86
src/pages-base/queue/components/PartySizeStepper.vue
Normal file
86
src/pages-base/queue/components/PartySizeStepper.vue
Normal file
@@ -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>
|
||||||
@@ -89,24 +89,22 @@
|
|||||||
|
|
||||||
<text v-if="selectedProject?.visitorNotice" class="queue-notice">{{ selectedProject.visitorNotice }}</text>
|
<text v-if="selectedProject?.visitorNotice" class="queue-notice">{{ selectedProject.visitorNotice }}</text>
|
||||||
|
|
||||||
<label class="queue-field">
|
<view class="queue-field">
|
||||||
<text>同行人数</text>
|
<text>同行人数</text>
|
||||||
<input
|
<PartySizeStepper
|
||||||
type="number"
|
v-model="ticketForm.partySize"
|
||||||
inputmode="numeric"
|
|
||||||
:value="ticketForm.partySize"
|
|
||||||
:disabled="createBusy"
|
:disabled="createBusy"
|
||||||
:min="minPartySize"
|
:min="minPartySize"
|
||||||
:max="maxPartySize"
|
:max="maxPartySize"
|
||||||
@input="handleTicketFormInput('partySize', $event)"
|
@change="handlePartySizeChange"
|
||||||
/>
|
/>
|
||||||
<text class="queue-field__hint">本项目每个号码可绑定 {{ minPartySize }} 到 {{ maxPartySize }} 人</text>
|
<text class="queue-field__hint">本项目每个号码可绑定 {{ minPartySize }} 到 {{ maxPartySize }} 人</text>
|
||||||
</label>
|
</view>
|
||||||
|
|
||||||
<label class="queue-field">
|
<label class="queue-field">
|
||||||
<text>手机号</text>
|
<text>手机号</text>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="text"
|
||||||
inputmode="numeric"
|
inputmode="numeric"
|
||||||
maxlength="15"
|
maxlength="15"
|
||||||
placeholder="请输入手机号"
|
placeholder="请输入手机号"
|
||||||
@@ -175,7 +173,7 @@
|
|||||||
<label class="queue-field">
|
<label class="queue-field">
|
||||||
<text>手机号</text>
|
<text>手机号</text>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="text"
|
||||||
inputmode="numeric"
|
inputmode="numeric"
|
||||||
maxlength="15"
|
maxlength="15"
|
||||||
placeholder="请输入手机号"
|
placeholder="请输入手机号"
|
||||||
@@ -236,6 +234,7 @@ import TopNavBar from "@/components/TopNavBar/index.vue";
|
|||||||
import FeedbackBanner from "./components/FeedbackBanner.vue";
|
import FeedbackBanner from "./components/FeedbackBanner.vue";
|
||||||
import FreshnessBanner from "./components/FreshnessBanner.vue";
|
import FreshnessBanner from "./components/FreshnessBanner.vue";
|
||||||
import LoadingState from "./components/LoadingState.vue";
|
import LoadingState from "./components/LoadingState.vue";
|
||||||
|
import PartySizeStepper from "./components/PartySizeStepper.vue";
|
||||||
import QueuePublicHeader from "./components/QueuePublicHeader.vue";
|
import QueuePublicHeader from "./components/QueuePublicHeader.vue";
|
||||||
import TicketCard from "./components/TicketCard.vue";
|
import TicketCard from "./components/TicketCard.vue";
|
||||||
import {
|
import {
|
||||||
@@ -256,6 +255,7 @@ import {
|
|||||||
isTimestampStale,
|
isTimestampStale,
|
||||||
resolveStatusTarget,
|
resolveStatusTarget,
|
||||||
} from "./utils/queueUtils.mjs";
|
} from "./utils/queueUtils.mjs";
|
||||||
|
import { getLoginUserPhone } from "@/request/api/LoginApi";
|
||||||
|
|
||||||
const VIEW_HOME = "home";
|
const VIEW_HOME = "home";
|
||||||
const VIEW_TOKEN = "token";
|
const VIEW_TOKEN = "token";
|
||||||
@@ -272,6 +272,7 @@ const honorificOptions = [
|
|||||||
const viewMode = ref(VIEW_HOME);
|
const viewMode = ref(VIEW_HOME);
|
||||||
const activeTab = ref(TAB_TAKE);
|
const activeTab = ref(TAB_TAKE);
|
||||||
const currentToken = ref("");
|
const currentToken = ref("");
|
||||||
|
const loginUserPhone = ref("");
|
||||||
const lookupPhone = ref("");
|
const lookupPhone = ref("");
|
||||||
const lookupError = ref("");
|
const lookupError = ref("");
|
||||||
const selectedProjectId = ref("");
|
const selectedProjectId = ref("");
|
||||||
@@ -313,6 +314,8 @@ const tokenResource = reactive(createStatusResource());
|
|||||||
let statusTimer = null;
|
let statusTimer = null;
|
||||||
let projectsRequestId = 0;
|
let projectsRequestId = 0;
|
||||||
let statusRequestId = 0;
|
let statusRequestId = 0;
|
||||||
|
let loginUserPhoneRequested = false;
|
||||||
|
let loginUserPhoneLoading = false;
|
||||||
const statusRequestGate = createSingleFlight();
|
const statusRequestGate = createSingleFlight();
|
||||||
|
|
||||||
const selectedProject = computed(() => projectsResource.projects.find((project) => project.id === selectedProjectId.value) || null);
|
const selectedProject = computed(() => projectsResource.projects.find((project) => project.id === selectedProjectId.value) || null);
|
||||||
@@ -374,6 +377,7 @@ onLoad((options = {}) => {
|
|||||||
|
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
if (viewMode.value === VIEW_HOME) {
|
if (viewMode.value === VIEW_HOME) {
|
||||||
|
ensureLoginUserPhoneFilled();
|
||||||
ensureProjectsLoaded();
|
ensureProjectsLoaded();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -420,8 +424,45 @@ const getErrorMessage = (error) => {
|
|||||||
return error.message || "暂时无法更新数据。";
|
return error.message || "暂时无法更新数据。";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ensureLoginUserPhoneFilled = async () => {
|
||||||
|
if (loginUserPhoneRequested || loginUserPhoneLoading) return;
|
||||||
|
loginUserPhoneLoading = true;
|
||||||
|
try {
|
||||||
|
const response = await getLoginUserPhone();
|
||||||
|
if (response?.code !== undefined && response.code !== 0) return;
|
||||||
|
const phone = formatLoginUserPhone(response?.data ?? response);
|
||||||
|
if (!phone) return;
|
||||||
|
loginUserPhone.value = phone;
|
||||||
|
applyDefaultLoginUserPhone(phone);
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
loginUserPhoneRequested = true;
|
||||||
|
loginUserPhoneLoading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const applyDefaultLoginUserPhone = (phone) => {
|
||||||
|
if (!phone) return;
|
||||||
|
if (!ticketForm.phone) {
|
||||||
|
ticketForm.phone = phone;
|
||||||
|
phoneError.value = "";
|
||||||
|
clearCreateIntent();
|
||||||
|
}
|
||||||
|
if (!lookupPhone.value) {
|
||||||
|
lookupPhone.value = phone;
|
||||||
|
lookupError.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatLoginUserPhone = (value) => {
|
||||||
|
const text = String(value ?? "").trim();
|
||||||
|
if (text.includes("*")) return text;
|
||||||
|
return digitsOnly(text);
|
||||||
|
}
|
||||||
|
|
||||||
const setActiveTab = (tab) => {
|
const setActiveTab = (tab) => {
|
||||||
activeTab.value = tab;
|
activeTab.value = tab;
|
||||||
|
ensureLoginUserPhoneFilled();
|
||||||
if (tab === TAB_TAKE) {
|
if (tab === TAB_TAKE) {
|
||||||
ensureProjectsLoaded();
|
ensureProjectsLoaded();
|
||||||
}
|
}
|
||||||
@@ -495,6 +536,13 @@ const handleTicketFormInput = (field, event) => {
|
|||||||
return updateTicketForm(field, getEventValue(event));
|
return updateTicketForm(field, getEventValue(event));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handlePartySizeChange = () => {
|
||||||
|
confirmDuplicatePhone.value = false;
|
||||||
|
phoneError.value = "";
|
||||||
|
formError.value = "";
|
||||||
|
clearCreateIntent();
|
||||||
|
}
|
||||||
|
|
||||||
const updateTicketForm = (field, value) => {
|
const updateTicketForm = (field, value) => {
|
||||||
let nextValue = value;
|
let nextValue = value;
|
||||||
if (field === "partySize") {
|
if (field === "partySize") {
|
||||||
@@ -592,7 +640,7 @@ const submitTicket = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const resetTicketForm = () => {
|
const resetTicketForm = () => {
|
||||||
ticketForm.phone = "";
|
ticketForm.phone = loginUserPhone.value || "";
|
||||||
ticketForm.lastName = "";
|
ticketForm.lastName = "";
|
||||||
ticketForm.honorific = "";
|
ticketForm.honorific = "";
|
||||||
ticketForm.partySize = minPartySize.value;
|
ticketForm.partySize = minPartySize.value;
|
||||||
|
|||||||
@@ -103,6 +103,7 @@
|
|||||||
.queue-button,
|
.queue-button,
|
||||||
.queue-back-button,
|
.queue-back-button,
|
||||||
.queue-honorific__option,
|
.queue-honorific__option,
|
||||||
|
.queue-party-stepper__control,
|
||||||
.queue-result-option,
|
.queue-result-option,
|
||||||
.queue-feedback__action {
|
.queue-feedback__action {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -192,7 +193,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
.queue-picker {
|
.queue-picker,
|
||||||
|
.queue-party-stepper {
|
||||||
min-height: 96rpx;
|
min-height: 96rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1rpx solid #aebeb4;
|
border: 1rpx solid #aebeb4;
|
||||||
@@ -215,6 +217,53 @@
|
|||||||
gap: 12rpx;
|
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 {
|
.queue-field__hint {
|
||||||
color: #68736c;
|
color: #68736c;
|
||||||
font-size: 23rpx;
|
font-size: 23rpx;
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
const IMMINENT_PEOPLE_THRESHOLD = 50;
|
const IMMINENT_PEOPLE_THRESHOLD = 50;
|
||||||
|
|
||||||
export const isPhoneInputValid = (value) => {
|
export const isPhoneInputValid = (value) => {
|
||||||
return /^\d{7,15}$/.test(String(value ?? "").trim());
|
const text = String(value ?? "").trim();
|
||||||
|
return /^\d{7,15}$/.test(text) || /^\d{3}\*{4}\d{4}$/.test(text);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const digitsOnly = (value) => {
|
export const digitsOnly = (value) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user