TakeoutSaaS.TenantUI/apps/web-antd/src/views/store/fees/index.vue

<script setup lang="ts">
/**
 * 文件职责：费用设置页面主视图。
 * 1. 组合起送/配送费、包装费、其他费用卡片。
 * 2. 承接门店维度切换、阶梯抽屉与复制弹窗。
 */
import type { PackagingFeeTierDto } from '#/api/store-fees';

import { Page } from '@vben/common-ui';

import { Card, Empty, Spin } from 'ant-design-vue';

import CopyToStoresModal from '../../shared/components/CopyToStoresModal.vue';
import StoreScopeToolbar from '../../shared/components/StoreScopeToolbar.vue';
import FeesDeliveryCard from './components/FeesDeliveryCard.vue';
import FeesOtherCard from './components/FeesOtherCard.vue';
import FeesPackagingCard from './components/FeesPackagingCard.vue';
import FeesTierDrawer from './components/FeesTierDrawer.vue';
import { useStoreFeesPage } from './composables/useStoreFeesPage';

const {
  canOperate,
  copyCandidates,
  copyTargetStoreIds,
  form,
  formatCurrency,
  formatTierRange,
  handleCopyCheckAll,
  handleCopySubmit,
  handleSubmitTier,
  hasLoadedStoreSettings,
  isCopyAllChecked,
  isCopyIndeterminate,
  isCopyModalOpen,
  isCopySubmitting,
  isConfigured,
  isPageLoading,
  isSavingDelivery,
  isSavingOther,
  isSavingPackaging,
  isSwitchingPackagingMode,
  isStoreLoading,
  isTierDrawerOpen,
  onDeleteTier,
  openCopyModal,
  openTierDrawer,
  resetDeliverySection,
  resetOtherSection,
  resetPackagingSection,
  saveDeliverySection,
  saveOtherSection,
  savePackagingSection,
  selectedStoreId,
  selectedStoreName,
  setBaseDeliveryFee,
  setCopyModalOpen,
  setCutleryAmount,
  setCutleryEnabled,
  setFixedPackagingFee,
  setFreeDeliveryThreshold,
  setMinimumOrderAmount,
  setPackagingMode,
  setRushAmount,
  setRushEnabled,
  setSelectedStoreId,
  setTierDrawerOpen,
  setTierFee,
  setTierMaxAmount,
  setTierMinAmount,
  setTieredEnabled,
  storeOptions,
  tierDrawerTitle,
  tierForm,
  toggleCopyStore,
} = useStoreFeesPage();

function onEditTier(tier: PackagingFeeTierDto) {
  openTierDrawer('edit', tier);
}
</script>

<template>
  <Page title="费用设置" content-class="space-y-4 page-store-fees">
    <StoreScopeToolbar
      :selected-store-id="selectedStoreId"
      :store-options="storeOptions"
      :is-store-loading="isStoreLoading"
      :copy-disabled="
        !canOperate || !isConfigured || copyCandidates.length === 0
      "
      copy-button-text="复制费用设置到其他门店"
      @update:selected-store-id="setSelectedStoreId"
      @copy="openCopyModal"
    />

    <template v-if="storeOptions.length === 0">
      <Card :bordered="false">
        <Empty description="暂无门店，请先创建门店" />
      </Card>
    </template>

    <template v-else>
      <Spin :spinning="isPageLoading">
        <Card v-if="hasLoadedStoreSettings && !isConfigured" :bordered="false">
          <Empty
            description="当前门店尚未配置费用规则。请先填写并保存，之后可执行复制。"
          />
        </Card>

        <FeesDeliveryCard
          :can-operate="canOperate"
          :minimum-order-amount="form.minimumOrderAmount"
          :base-delivery-fee="form.baseDeliveryFee"
          :free-delivery-threshold="form.freeDeliveryThreshold"
          :is-saving="isSavingDelivery"
          :on-set-minimum-order-amount="setMinimumOrderAmount"
          :on-set-base-delivery-fee="setBaseDeliveryFee"
          :on-set-free-delivery-threshold="setFreeDeliveryThreshold"
          @save="saveDeliverySection"
          @reset="resetDeliverySection"
        />

        <FeesPackagingCard
          :can-operate="canOperate"
          :packaging-mode="form.packagingFeeMode"
          :tiered-enabled="form.orderPackagingFeeMode === 'tiered'"
          :fixed-packaging-fee="form.fixedPackagingFee"
          :tiers="form.packagingFeeTiers"
          :is-saving="isSavingPackaging"
          :is-switching-mode="isSwitchingPackagingMode"
          :format-currency="formatCurrency"
          :format-tier-range="formatTierRange"
          :on-set-packaging-mode="setPackagingMode"
          :on-set-tiered-enabled="setTieredEnabled"
          :on-set-fixed-packaging-fee="setFixedPackagingFee"
          @add-tier="openTierDrawer('create')"
          @edit-tier="onEditTier"
          @delete-tier="onDeleteTier"
          @save="savePackagingSection"
          @reset="resetPackagingSection"
        />

        <FeesOtherCard
          :can-operate="canOperate"
          :cutlery-enabled="form.otherFees.cutlery.enabled"
          :cutlery-amount="form.otherFees.cutlery.amount"
          :rush-enabled="form.otherFees.rush.enabled"
          :rush-amount="form.otherFees.rush.amount"
          :is-saving="isSavingOther"
          :on-set-cutlery-enabled="setCutleryEnabled"
          :on-set-cutlery-amount="setCutleryAmount"
          :on-set-rush-enabled="setRushEnabled"
          :on-set-rush-amount="setRushAmount"
          @save="saveOtherSection"
          @reset="resetOtherSection"
        />
      </Spin>
    </template>

    <FeesTierDrawer
      :can-operate="canOperate"
      :open="isTierDrawerOpen"
      :title="tierDrawerTitle"
      :form="tierForm"
      :is-saving="isSavingPackaging"
      :on-set-min-amount="setTierMinAmount"
      :on-set-max-amount="setTierMaxAmount"
      :on-set-fee="setTierFee"
      @update:open="setTierDrawerOpen"
      @submit="handleSubmitTier"
    />

    <CopyToStoresModal
      :open="isCopyModalOpen"
      :copy-candidates="copyCandidates"
      :target-store-ids="copyTargetStoreIds"
      :is-all-checked="isCopyAllChecked"
      :is-indeterminate="isCopyIndeterminate"
      :is-submitting="isCopySubmitting"
      :selected-store-name="selectedStoreName"
      title="复制费用设置到其他门店"
      confirm-text="确认复制"
      @update:open="setCopyModalOpen"
      @check-all="handleCopyCheckAll"
      @submit="handleCopySubmit"
      @toggle-store="
        ({ storeId, checked }) => toggleCopyStore(storeId, checked)
      "
    />
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>