EmailBill/Web/src/components/Global/GlobalAddBill.vue

<template>
  <div class="global-add-bill">
    <!-- Floating Add Bill Button -->
    <div
      class="floating-add"
      @click="openAddBill"
    >
      <van-icon name="plus" />
    </div>

    <!-- Add Bill Modal -->
    <PopupContainerV2
      v-model:show="showAddBill"
      title="记一笔"
      :height="'75%'"
    >
      <div style="padding: 0">
        <van-tabs
          v-model:active="activeTab"
          shrink
        >
          <van-tab
            title="一句话录账"
            name="one"
          >
            <OneLineBillAdd
              :key="componentKey"
              @success="handleSuccess"
            />
          </van-tab>
          <van-tab
            title="手动录账"
            name="manual"
          >
            <ManualBillAdd
              :key="componentKey"
              @success="handleSuccess"
            />
          </van-tab>
        </van-tabs>
      </div>
    </PopupContainerV2>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
import OneLineBillAdd from '@/components/Bill/OneLineBillAdd.vue'
import ManualBillAdd from '@/components/Bill/ManualBillAdd.vue'

const emit = defineEmits(['success'])

const showAddBill = ref(false)
const activeTab = ref('one')
const componentKey = ref(0)

const openAddBill = () => {
  showAddBill.value = true
  // 清理状态，默认选中一句话录账
  activeTab.value = 'one'

  // 清理子组件状态通过 key 强制重渲染
  componentKey.value++
}

const handleSuccess = () => {
  showAddBill.value = false

  emit('success')
}
</script>

<style scoped>
.floating-add {
  position: fixed;
  bottom: 95px; /* Above tabbar */
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--van-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
  cursor: pointer;
  transition: transform 0.2s;
}

.floating-add:active {
  transform: scale(0.9);
}

:deep(.van-tabs__wrap) {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--van-background-2);
}
</style>