支持在线时间跨天并优化发布与筛选体验
允许在线时段 end 早于 start 表示跨天,统一展示「次日」文案;修复移动端价格区间清空后被 sessionStorage 回写;优化 PC/移动端在线时间控件密度与通栏展示。
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user