106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 文件职责：其他费用设置卡片。
|
||
* 1. 展示餐具费、加急费开关与金额输入。
|
||
* 2. 通过回调上抛字段更新，保存/重置由父级处理。
|
||
*/
|
||
import { Button, Card, InputNumber, Switch } from 'ant-design-vue';
|
||
|
||
interface Props {
|
||
cutleryAmount: number;
|
||
cutleryEnabled: boolean;
|
||
isSaving: boolean;
|
||
onSetCutleryAmount: (value: number) => void;
|
||
onSetCutleryEnabled: (value: boolean) => void;
|
||
onSetRushAmount: (value: number) => void;
|
||
onSetRushEnabled: (value: boolean) => void;
|
||
rushAmount: number;
|
||
rushEnabled: boolean;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
|
||
const emit = defineEmits<{
|
||
(event: 'reset'): void;
|
||
(event: 'save'): void;
|
||
}>();
|
||
|
||
function toNumber(value: null | number | string, fallback = 0) {
|
||
const parsed = Number(value);
|
||
return Number.isFinite(parsed) ? parsed : fallback;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Card :bordered="false" class="fees-card">
|
||
<template #title>
|
||
<span class="section-title">其他费用</span>
|
||
<span class="section-sub-title">可选，按需开启</span>
|
||
</template>
|
||
|
||
<div class="other-fee-row">
|
||
<Switch
|
||
:checked="props.cutleryEnabled"
|
||
@update:checked="(value) => props.onSetCutleryEnabled(Boolean(value))"
|
||
/>
|
||
<div class="other-fee-meta">
|
||
<div class="other-fee-name">餐具费</div>
|
||
<div class="other-fee-hint">
|
||
向顾客收取一次性餐具费用，顾客可选择不需要餐具
|
||
</div>
|
||
</div>
|
||
<div class="other-fee-input-row">
|
||
<span class="fees-unit">¥</span>
|
||
<InputNumber
|
||
:value="props.cutleryAmount"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="0.5"
|
||
:controls="false"
|
||
:disabled="!props.cutleryEnabled"
|
||
class="other-fee-input"
|
||
placeholder="如：1.00"
|
||
@update:value="
|
||
(value) =>
|
||
props.onSetCutleryAmount(toNumber(value, props.cutleryAmount))
|
||
"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="other-fee-row">
|
||
<Switch
|
||
:checked="props.rushEnabled"
|
||
@update:checked="(value) => props.onSetRushEnabled(Boolean(value))"
|
||
/>
|
||
<div class="other-fee-meta">
|
||
<div class="other-fee-name">加急费</div>
|
||
<div class="other-fee-hint">顾客选择加急配送时额外收取的费用</div>
|
||
</div>
|
||
<div class="other-fee-input-row">
|
||
<span class="fees-unit">¥</span>
|
||
<InputNumber
|
||
:value="props.rushAmount"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="0.5"
|
||
:controls="false"
|
||
:disabled="!props.rushEnabled"
|
||
class="other-fee-input"
|
||
placeholder="如：3.00"
|
||
@update:value="
|
||
(value) => props.onSetRushAmount(toNumber(value, props.rushAmount))
|
||
"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fees-actions">
|
||
<Button :disabled="props.isSaving" @click="emit('reset')">重置</Button>
|
||
<Button type="primary" :loading="props.isSaving" @click="emit('save')">
|
||
保存设置
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
</template>
|