81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
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 -->
|
|||
|
|
<PopupContainer
|
|||
|
|
v-model="showAddBill"
|
|||
|
|
title="记一笔"
|
|||
|
|
height="85%"
|
|||
|
|
>
|
|||
|
|
<van-tabs v-model:active="activeTab" shrink>
|
|||
|
|
<van-tab title="一句话录账" name="one">
|
|||
|
|
<OneLineBillAdd @success="handleSuccess" />
|
|||
|
|
</van-tab>
|
|||
|
|
<van-tab title="手动录账" name="manual">
|
|||
|
|
<ManualBillAdd @success="handleSuccess" />
|
|||
|
|
</van-tab>
|
|||
|
|
</van-tabs>
|
|||
|
|
</PopupContainer>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, defineEmits } from 'vue'
|
|||
|
|
import PopupContainer from '@/components/PopupContainer.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 openAddBill = () => {
|
|||
|
|
showAddBill.value = true
|
|||
|
|
// Reset to default tab if needed, or keep last used
|
|||
|
|
// activeTab.value = 'one'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSuccess = () => {
|
|||
|
|
showAddBill.value = false
|
|||
|
|
|
|||
|
|
emit('success')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.floating-add {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 80px; /* 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: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|