petstore/petstore-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复预约时段及API对接

Browse Source
This commit is contained in:
MaDaLei 2026-04-17 12:13:46 +08:00
parent e91f140bac
commit 6fcb1a828b
5 changed files with 57 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/index.js
View File

@ -69,7 +69,7 @@ export const getAppointmentDetail = (id) => get('/appointment/detail', { id })
// 创建预约
export const createAppointment = (data) => post('/appointment/create', data)
/** 门店某日半小时挂号时段（可约 / 已约满 / 已过） */
/** 门店某日可预约半小时档（可约 / 已满 / 已过） */
export const getAppointmentAvailableSlots = (storeId, date) =>
get('/appointment/available-slots', { storeId, date })
@ -117,7 +117,7 @@ export const updateUser = (data) => put('/user/update', data)
// 门店列表（客户预约选店）
export const getStoreList = () => get('/store/list', {})
// 门店详情（含预约放号配置）
// 门店详情（含营业时间等预约相关配置）
export const getStoreDetail = (id) => get('/store/get', { id })
// 更新店铺

12
src/pages/appointment/CustAppointmentCreate.vue
View File

@ -548,8 +548,8 @@ onMounted(async () => {
.c-time-row { display: flex; gap: 10px; }
.c-time-half { flex: 1; min-width: 0; }
.c-time-half--slot .slot-range-text {
font-size: 12px;
letter-spacing: -0.02em;
font-size: 15px;
letter-spacing: 0;
}
.pet-name-row {
display: flex;
@ -568,9 +568,9 @@ onMounted(async () => {
}
.c-store-hint {
display: block;
margin-top: 6px;
font-size: 11px;
color: #999993;
line-height: 1.4;
margin-top: 8px;
font-size: 13px;
color: #666660;
line-height: 1.5;
}
</style>

2
src/pages/home/Home.vue
View File

@ -243,7 +243,7 @@ const appointmentTime = computed(() => {
return normalizeToHalfHour(part)
})
/** B 端弹窗：挂号式时段 */
/** B 端弹窗：按半小时档选可约时段 */
const staffApptDateStr = ref('')
const staffAvailableTimes = ref([])
const staffLoadingSlots = ref(false)

92
src/pages/mine/Store.vue
View File

@ -13,46 +13,11 @@
</view>
<view class="store-hero-text">
<text class="store-hero-title">门店资料</text>
<text class="store-hero-desc">请先设置「营业时间」，再完善名称、电话与地址。营业时间即客户线上预约可选的时段范围（半小时一号）。</text>
<text class="store-hero-desc">在此维护门店名称、电话、地址与简介，并设置「营业时间」。营业时间决定客户线上可预约的时段范围（每半小时为一个时段，同一时段仅一单）。</text>
</view>
</view>
<!-- 营业时间置顶，避免被误认为没有该配置 -->
<view class="store-card store-card--hours">
<view class="store-card-head">
<text class="store-card-title">营业时间</text>
<text class="store-card-sub">客户可预约时段：从「开始」到「结束」之间的半点档均可放号（与挂号类似）</text>
</view>
<view class="store-field">
<view class="store-field-label">
<span class="store-ico"><AppIcon name="service" :size="15" color="#475569" /></span>
<text>开始时间</text>
</view>
<text class="store-field-tip">当日第一个可预约的半点（例如 09:00）</text>
<picker mode="selector" :range="HALF_HOUR_TIME_SLOTS" :value="bookingStartIdx" @change="onBookingStartChange">
<view class="app-form-input app-form-picker store-picker-like">
<text>{{ form.bookingDayStart || '请选择' }}</text>
<text class="app-form-arrow">›</text>
</view>
</picker>
</view>
<view class="store-field store-field-last">
<view class="store-field-label">
<span class="store-ico"><AppIcon name="service" :size="15" color="#475569" /></span>
<text>结束时间</text>
</view>
<text class="store-field-tip">当日最后一个可预约的半点起始时刻（例如 21:30 表示最晚可约 21:00–21:30 这一档）</text>
<picker mode="selector" :range="HALF_HOUR_TIME_SLOTS" :value="bookingLastIdx" @change="onBookingLastChange">
<view class="app-form-input app-form-picker store-picker-like">
<text>{{ form.bookingLastSlotStart || '请选择' }}</text>
<text class="app-form-arrow">›</text>
</view>
</picker>
<view class="booking-hint">结束须不早于开始。保存后对新建预约生效。</view>
</view>
</view>
<view class="store-card" style="margin-top: 14px">
<view class="store-card">
<view class="store-card-head">
<text class="store-card-kicker">基础信息</text>
</view>
@ -100,6 +65,40 @@
</view>
</view>
<view class="store-card store-card--hours store-card--after-basic">
<view class="store-card-head">
<text class="store-card-title">营业时间</text>
<text class="store-card-sub">客户可预约时段为「开始」至「结束」之间的半点档；每半小时为一档，每档最多一单，已满或已过不可选。</text>
</view>
<view class="store-field">
<view class="store-field-label">
<span class="store-ico"><AppIcon name="service" :size="15" color="#475569" /></span>
<text>开始时间</text>
</view>
<text class="store-field-tip">当日第一个可预约的半点（例如 09:00）</text>
<picker mode="selector" :range="HALF_HOUR_TIME_SLOTS" :value="bookingStartIdx" @change="onBookingStartChange">
<view class="app-form-input app-form-picker store-picker-like">
<text>{{ form.bookingDayStart || '请选择' }}</text>
<text class="app-form-arrow">›</text>
</view>
</picker>
</view>
<view class="store-field store-field-last">
<view class="store-field-label">
<span class="store-ico"><AppIcon name="service" :size="15" color="#475569" /></span>
<text>结束时间</text>
</view>
<text class="store-field-tip">当日最后一个可预约的半点起始时刻（例如 21:30 表示最晚可约 21:00–21:30 这一档）</text>
<picker mode="selector" :range="HALF_HOUR_TIME_SLOTS" :value="bookingLastIdx" @change="onBookingLastChange">
<view class="app-form-input app-form-picker store-picker-like">
<text>{{ form.bookingLastSlotStart || '请选择' }}</text>
<text class="app-form-arrow">›</text>
</view>
</picker>
<view class="booking-hint">结束须不早于开始。保存后对新建预约生效。</view>
</view>
</view>
<view class="store-actions">
<button
class="van-button van-button--primary van-button--block store-save-btn"
@ -343,6 +342,9 @@ onMounted(async () => {
border-color: #86efac;
box-shadow: 0 8px 22px rgba(34, 197, 94, 0.12);
}
.store-card--after-basic {
margin-top: 14px;
}
.store-card-head {
padding: 14px 14px 6px;
}
@ -362,8 +364,8 @@ onMounted(async () => {
.store-card-sub {
display: block;
margin-top: 6px;
font-size: 12px;
line-height: 1.5;
font-size: 13px;
line-height: 1.55;
color: #64748b;
}
@ -385,9 +387,9 @@ onMounted(async () => {
.store-field-tip {
display: block;
margin-bottom: 8px;
font-size: 11px;
line-height: 1.45;
color: #94a3b8;
font-size: 13px;
line-height: 1.5;
color: #64748b;
}
.store-ico {
width: 28px;
@ -489,8 +491,8 @@ onMounted(async () => {
}
.booking-hint {
margin-top: 8px;
font-size: 12px;
color: #94a3b8;
line-height: 1.45;
font-size: 13px;
color: #64748b;
line-height: 1.5;
}
</style>

2
src/utils/halfHourTime.js
View File

@ -43,7 +43,7 @@ export function halfHourPickerIndex(hhmm) {
const pad2 = (n) => String(n).padStart(2, '0')
/**
* 半小时挂号：展示为「开始–结束」时间段（如 09:00–09:30）。
* 半小时预约档：展示为「开始–结束」时间段（如 09:00–09:30）。
* 末档 23:30 结束展示为 23:30–24:00。
*/
export function formatHalfHourSlotRange(startHHmm) {