75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 文件职责：自提模式切换条。
|
|
* 1. 展示大时段/精细时段切换入口。
|
|
* 2. 抛出模式变更事件。
|
|
*/
|
|
import type { PickupMode } from '#/api/store-pickup';
|
|
|
|
interface Props {
|
|
disabled?: boolean;
|
|
isSwitching?: boolean;
|
|
mode: PickupMode;
|
|
options: Array<{ label: string; value: PickupMode }>;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'change', mode: PickupMode): void;
|
|
}>();
|
|
|
|
function getModeLabel(mode: PickupMode) {
|
|
return props.options.find((item) => item.value === mode)?.label ?? mode;
|
|
}
|
|
|
|
function getModeHint(mode: PickupMode) {
|
|
return mode === 'big'
|
|
? '按时段统一预约，适合固定营业节奏'
|
|
: '按精细时间点预约，适合高峰分流';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pickup-mode-panel" :class="{ switching: props.isSwitching }">
|
|
<div class="pickup-mode-header">
|
|
<div class="pickup-mode-title">自提预约模式</div>
|
|
<div class="pickup-mode-badge">
|
|
{{
|
|
props.isSwitching ? '切换中...' : `当前：${getModeLabel(props.mode)}`
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pickup-mode-grid">
|
|
<button
|
|
type="button"
|
|
class="pickup-mode-card"
|
|
:class="{ active: props.mode === 'big' }"
|
|
:disabled="props.disabled || props.isSwitching"
|
|
@click="emit('change', 'big')"
|
|
>
|
|
<div class="pickup-mode-card-title">
|
|
<span class="pickup-mode-dot"></span>
|
|
{{ getModeLabel('big') }}
|
|
</div>
|
|
<div class="pickup-mode-card-hint">{{ getModeHint('big') }}</div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="pickup-mode-card"
|
|
:class="{ active: props.mode === 'fine' }"
|
|
:disabled="props.disabled || props.isSwitching"
|
|
@click="emit('change', 'fine')"
|
|
>
|
|
<div class="pickup-mode-card-title">
|
|
<span class="pickup-mode-dot"></span>
|
|
{{ getModeLabel('fine') }}
|
|
</div>
|
|
<div class="pickup-mode-card-hint">{{ getModeHint('fine') }}</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|