feat: 新增费用设置页面并对齐原型交互

apps/web-antd/src/views/store/fees/components/FeesDeliveryCard.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+/**
+ * 文件职责：起送与配送费设置卡片。
+ * 1. 展示起送金额、基础配送费、免配送费门槛字段。
+ * 2. 通过回调上抛字段更新，保存/重置由父级处理。
+ */
+import { Button, Card, InputNumber } from 'ant-design-vue';
+
+interface Props {
+  baseDeliveryFee: number;
+  freeDeliveryThreshold: null | number;
+  isSaving: boolean;
+  minimumOrderAmount: number;
+  onSetBaseDeliveryFee: (value: number) => void;
+  onSetFreeDeliveryThreshold: (value: null | number) => void;
+  onSetMinimumOrderAmount: (value: number) => void;
+}
+
+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>
+    </template>
+
+    <div class="fees-field-grid">
+      <div class="fees-field">
+        <label>起送金额</label>
+        <div class="fees-input-row">
+          <span class="fees-unit">¥</span>
+          <InputNumber
+            :value="props.minimumOrderAmount"
+            :min="0"
+            :precision="2"
+            :step="1"
+            :controls="false"
+            class="fees-input"
+            placeholder="如：15.00"
+            @update:value="
+              (value) =>
+                props.onSetMinimumOrderAmount(
+                  toNumber(value, props.minimumOrderAmount),
+                )
+            "
+          />
+        </div>
+        <div class="fees-hint">低于此金额的订单无法下单</div>
+      </div>
+
+      <div class="fees-field">
+        <label>基础配送费</label>
+        <div class="fees-input-row">
+          <span class="fees-unit">¥</span>
+          <InputNumber
+            :value="props.baseDeliveryFee"
+            :min="0"
+            :precision="2"
+            :step="1"
+            :controls="false"
+            class="fees-input"
+            placeholder="如：3.00"
+            @update:value="
+              (value) =>
+                props.onSetBaseDeliveryFee(
+                  toNumber(value, props.baseDeliveryFee),
+                )
+            "
+          />
+        </div>
+        <div class="fees-hint">每笔订单默认收取的配送费</div>
+      </div>
+
+      <div class="fees-field">
+        <label>免配送费门槛</label>
+        <div class="fees-input-row">
+          <span class="fees-unit">¥</span>
+          <InputNumber
+            :value="props.freeDeliveryThreshold ?? undefined"
+            :min="0"
+            :precision="2"
+            :step="1"
+            :controls="false"
+            class="fees-input"
+            placeholder="如：30.00"
+            @update:value="
+              (value) =>
+                props.onSetFreeDeliveryThreshold(
+                  value === null || value === undefined
+                    ? null
+                    : toNumber(value, props.freeDeliveryThreshold ?? 0),
+                )
+            "
+          />
+        </div>
+        <div class="fees-hint">订单满此金额免配送费，留空则不启用</div>
+      </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>