支持在线时间跨天并优化发布与筛选体验

允许在线时段 end 早于 start 表示跨天,统一展示「次日」文案;修复移动端价格区间清空后被 sessionStorage 回写;优化 PC/移动端在线时间控件密度与通栏展示。
This commit is contained in:
yml2213
2026-07-19 17:28:57 +08:00
parent 6450b31129
commit ae79550d78
12 changed files with 410 additions and 136 deletions
@@ -3,6 +3,8 @@ import { showDialog, showToast } from 'vant'
import { computed, ref } from 'vue'
import MobileBottomNav from '@/components/MobileBottomNav.vue'
type OnlineTimeSide = 'start' | 'end'
import { usePublishForm } from '@/features/seller/composables/usePublishForm'
import { formatMoney } from '@/shared/utils/money'
import type { AgreementContent } from '@/features/listings/api/listingOptions'
@@ -70,6 +72,7 @@ const {
canAddScreenshot,
getScreenshotLimitHint,
isAllDayOnline,
onlineTimeRangeHint,
selectAllDayOnline,
handleOnlineStartChange,
handleOnlineEndChange,
@@ -117,6 +120,40 @@ function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
const unlockSaidOptions = ['是', '否']
// 在线时间:通栏自定义块 + 底部时间选择,避免 van-field 窄列截断原生 time
const onlineTimePickerVisible = ref(false)
const onlineTimePickerSide = ref<OnlineTimeSide>('start')
const onlineTimePickerValue = ref<string[]>(['00', '00'])
const onlineTimePickerTitle = computed(() =>
onlineTimePickerSide.value === 'start' ? '选择开始时间' : '选择结束时间'
)
function parseTimeToColumns(value: string): string[] {
const match = /^(\d{1,2}):(\d{2})$/.exec(String(value || '').trim())
if (!match?.[1] || !match[2]) return ['00', '00']
return [match[1].padStart(2, '0'), match[2]]
}
function openOnlineTimePicker(side: OnlineTimeSide) {
onlineTimePickerSide.value = side
const current = side === 'start' ? form.online_start : form.online_end
onlineTimePickerValue.value = parseTimeToColumns(current)
onlineTimePickerVisible.value = true
}
function onOnlineTimePickerConfirm(payload: { selectedValues?: Array<string | number> }) {
const values = payload.selectedValues || onlineTimePickerValue.value
const hour = String(values[0] ?? '00').padStart(2, '0')
const minute = String(values[1] ?? '00').padStart(2, '0')
const time = `${hour}:${minute}`
if (onlineTimePickerSide.value === 'start') {
handleOnlineStartChange(time)
} else {
handleOnlineEndChange(time)
}
onlineTimePickerVisible.value = false
}
// 截图槽位的指导示例图(仅展示、点击放大,不占用上传数量)
const screenshotGuides: Record<string, string> = {
tencentSecurity: tencentSecurityGuide,
@@ -379,41 +416,67 @@ const screenshotGuides: Record<string, string> = {
</template>
</van-field>
<van-field label="在线时间" required class="publish-field online-time-field">
<template #input>
<div class="online-time-controls">
<button
type="button"
class="radio-btn"
:class="{ active: isAllDayOnline() }"
@click="selectAllDayOnline"
>
全天
</button>
<div class="online-time-range">
<input
v-model="form.online_start"
type="time"
class="online-time-input"
aria-label="在线开始时间"
@change="handleOnlineStartChange(form.online_start)"
/>
<span class="online-time-sep"></span>
<input
v-model="form.online_end"
type="time"
class="online-time-input"
aria-label="在线结束时间"
@change="handleOnlineEndChange(form.online_end)"
/>
</div>
<div class="online-time-block">
<div class="online-time-head">
<div class="online-time-title">
<span class="req">*</span>
<span>在线时间</span>
</div>
</template>
</van-field>
<button
type="button"
class="radio-btn online-time-allday"
:class="{ active: isAllDayOnline() }"
@click="selectAllDayOnline"
>
全天
</button>
</div>
<div class="online-time-grid">
<button
type="button"
class="online-time-pick"
@click="openOnlineTimePicker('start')"
>
<span class="online-time-label">开始</span>
<strong :class="{ placeholder: !form.online_start }">
{{ form.online_start || '请选择' }}
</strong>
</button>
<button type="button" class="online-time-pick" @click="openOnlineTimePicker('end')">
<span class="online-time-label">
结束
<em v-if="onlineTimeRangeHint()">次日</em>
</span>
<strong :class="{ placeholder: !form.online_end }">
{{ form.online_end || '请选择' }}
</strong>
</button>
</div>
<p v-if="onlineTimeRangeHint()" class="online-time-summary">
{{ onlineTimeRangeHint() }}
</p>
</div>
<p class="field-hint">
此在线时间指的是百分百能够联系上您的时间若是在此期间联系不上您导致无法上号会扣除您的部分订单金额或上架押金在线时长太短可能无法上架请预留充足时间用于扫码以及冻结人脸请谨慎填写
请填写能百分百联系上您的时间该时段联系不上可能影响上架或扣款请预留扫码与冻结人脸时间
</p>
<van-popup
v-model:show="onlineTimePickerVisible"
position="bottom"
round
teleport="body"
>
<van-time-picker
v-model="onlineTimePickerValue"
:title="onlineTimePickerTitle"
:columns-type="['hour', 'minute']"
@confirm="onOnlineTimePickerConfirm"
@cancel="onlineTimePickerVisible = false"
/>
</van-popup>
<van-field label="封禁记录" required class="publish-field">
<template #input>
<div class="radio-group">