474 lines
12 KiB
Vue
474 lines
12 KiB
Vue
<template>
|
||
<view class="app-page" :class="themeClass">
|
||
<view class="surface-card hero-card">
|
||
<text class="hero-date">{{ todayLabel }}</text>
|
||
<text class="hero-title">账单小管家</text>
|
||
<!-- <text class="hero-subtitle">轻量记账、预算管理、消费统计，所有账单仅保存在当前设备。</text> -->
|
||
<view class="hero-metrics">
|
||
<view class="metric-block">
|
||
<text class="tiny-text">今日支出</text>
|
||
<text class="metric-value negative">{{ formatCurrency(todayExpense) }}</text>
|
||
</view>
|
||
<view class="metric-block">
|
||
<text class="tiny-text">本月支出</text>
|
||
<text class="metric-value negative">{{ formatCurrency(monthExpense) }}</text>
|
||
</view>
|
||
<view class="metric-block">
|
||
<text class="tiny-text">本月收入</text>
|
||
<text class="metric-value positive">{{ formatCurrency(monthIncome) }}</text>
|
||
</view>
|
||
<view class="metric-block">
|
||
<text class="tiny-text">本月结余</text>
|
||
<text class="metric-value">{{ formatCurrency(balance) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<ad-custom unit-id="adunit-74730c6c27c95a37"></ad-custom>
|
||
|
||
<section-card title="预算概览" subtitle="实时查看预算执行情况与剩余额度">
|
||
<view class="budget-head">
|
||
<view>
|
||
<text class="budget-value">{{ formatCurrency(remainingBudget) }}</text>
|
||
<text style="margin-left: 16rpx;"></text>
|
||
<text class="tiny-text">剩余预算</text>
|
||
</view>
|
||
<view class="budget-side">
|
||
<text class="tiny-text">预算使用</text>
|
||
<text style="margin-left: 16rpx;"></text>
|
||
<text class="budget-percent">{{ budgetProgressLabel }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="progress-track">
|
||
<view class="progress-fill" :style="{ width: budgetProgressWidth }"></view>
|
||
</view>
|
||
<view class="budget-note-row">
|
||
<text class="tiny-text">{{ totalBudget ? `总预算 ${formatCurrency(totalBudget)}` : '当前尚未设置月预算' }}</text>
|
||
<text class="tiny-text">{{ dailyBudgetText }}</text>
|
||
</view>
|
||
<view v-if="!totalBudget" class="budget-action-row">
|
||
<view class="ghost-button" @click="goBudget">去设置预算</view>
|
||
</view>
|
||
</section-card>
|
||
|
||
<section-card title="快捷记账" subtitle="常用场景一步录入，提高日常记录效率">
|
||
<view class="quick-action-row">
|
||
<view class="primary-button quick-main" @click="openQuickAdd('', 'expense')">记录支出</view>
|
||
<view class="ghost-button quick-main" @click="openQuickAdd('', 'income')">记录收入</view>
|
||
</view>
|
||
<view class="quick-grid">
|
||
<view
|
||
v-for="item in quickCategories"
|
||
:key="item.id"
|
||
class="quick-chip"
|
||
@click="openQuickAdd(item.id, 'expense')"
|
||
>
|
||
<view class="quick-dot" :style="{ background: item.color }"></view>
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</section-card>
|
||
|
||
<section-card title="最近记录" subtitle="保留最近 5 笔账单，长按可编辑或删除">
|
||
<template #action>
|
||
<text class="section-link" @click="goBills">查看全部</text>
|
||
</template>
|
||
<view v-if="recentBills.length" class="bill-list">
|
||
<view
|
||
v-for="bill in recentBills"
|
||
:key="bill.id"
|
||
class="bill-item"
|
||
@longpress="handleBillLongPress(bill)"
|
||
>
|
||
<view class="bill-leading">
|
||
<view class="bill-dot" :style="{ background: getCategory(bill).color || '#7b8794' }"></view>
|
||
<view>
|
||
<text class="bill-title">{{ getCategory(bill).name || '未分类' }}</text>
|
||
<text class="bill-meta">{{ getAccount(bill).name || '账户' }} · {{ formatDateLabel(bill.date) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="bill-right">
|
||
<text class="bill-amount" :class="bill.type === 'income' ? 'positive' : 'negative'">
|
||
{{ bill.type === 'income' ? '+' : '-' }}{{ formatCurrency(bill.amount).replace('¥', '') }}
|
||
</text>
|
||
<text class="tiny-text">{{ bill.note || '无备注' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="empty-card">
|
||
<text class="section-subtitle">还没有账单记录，先记下第一笔收支。</text>
|
||
<view class="ghost-button empty-action" @click="openQuickAdd('', 'expense')">立即记账</view>
|
||
</view>
|
||
</section-card>
|
||
|
||
<view class="fab-button" @click="openQuickAdd('', 'expense')">+ 记一笔</view>
|
||
<app-tab-bar current="home" />
|
||
<bill-editor-popup
|
||
:visible="editorVisible"
|
||
:entry="editingBill"
|
||
:categories="store.state.categories"
|
||
:accounts="store.state.accounts"
|
||
:default-type="quickType"
|
||
:initial-category-id="quickCategoryId"
|
||
@close="closeEditor"
|
||
@save="saveBill"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import { onPullDownRefresh,onShareAppMessage,onShow,onLoad } from '@dcloudio/uni-app'
|
||
import SectionCard from '../../components/SectionCard.vue'
|
||
import AppTabBar from '../../components/AppTabBar.vue'
|
||
import BillEditorPopup from '../../components/BillEditorPopup.vue'
|
||
import { useAppStore } from '../../utils/store'
|
||
import { formatDateLabel, getDaysLeftInMonth, isSameMonth, toDateKey, toMonthKey } from '../../utils/date'
|
||
import { clampPercent, formatCurrency, formatPercent } from '../../utils/money'
|
||
|
||
const store = useAppStore()
|
||
const editorVisible = ref(false)
|
||
const editingBill = ref(null)
|
||
const quickCategoryId = ref('')
|
||
const quickType = ref('expense')
|
||
|
||
const todayKey = computed(() => toDateKey())
|
||
const currentMonth = computed(() => toMonthKey())
|
||
const themeClass = computed(() => (store.state.settings.theme === 'dark' ? 'theme-dark' : ''))
|
||
const todayLabel = computed(() => formatDateLabel(todayKey.value))
|
||
|
||
const sortedBills = computed(() => [...store.state.bills].sort((left, right) => right.createdAt - left.createdAt))
|
||
const recentBills = computed(() => sortedBills.value.slice(0, 5))
|
||
const todayBills = computed(() => sortedBills.value.filter((item) => item.date === todayKey.value))
|
||
const monthBills = computed(() => sortedBills.value.filter((item) => isSameMonth(item.date, currentMonth.value)))
|
||
const todayExpense = computed(() => todayBills.value.filter((item) => item.type === 'expense').reduce((sum, item) => sum + Number(item.amount), 0))
|
||
const monthExpense = computed(() => monthBills.value.filter((item) => item.type === 'expense').reduce((sum, item) => sum + Number(item.amount), 0))
|
||
const monthIncome = computed(() => monthBills.value.filter((item) => item.type === 'income').reduce((sum, item) => sum + Number(item.amount), 0))
|
||
const balance = computed(() => monthIncome.value - monthExpense.value)
|
||
const totalBudget = computed(() => Number(store.state.budgets.total) || 0)
|
||
const remainingBudget = computed(() => totalBudget.value - monthExpense.value)
|
||
const dailyAllowance = computed(() => Math.max(remainingBudget.value, 0) / Math.max(1, getDaysLeftInMonth(currentMonth.value)))
|
||
const budgetProgressWidth = computed(() => clampPercent(monthExpense.value / Math.max(totalBudget.value || 1, 1)))
|
||
const budgetProgressLabel = computed(() => (totalBudget.value ? formatPercent(monthExpense.value / Math.max(totalBudget.value, 1)) : '未设置'))
|
||
const dailyBudgetText = computed(() => {
|
||
if (!totalBudget.value) {
|
||
return '设置预算后可查看日均可用额度'
|
||
}
|
||
|
||
if (remainingBudget.value < 0) {
|
||
return `已超支 ${formatCurrency(Math.abs(remainingBudget.value))}`
|
||
}
|
||
|
||
return `日均可用 ${formatCurrency(dailyAllowance.value)}`
|
||
})
|
||
const quickCategories = computed(() => store.state.categories.expense.slice(0, 6))
|
||
|
||
function getCategory(bill) {
|
||
return (store.state.categories[bill.type] || []).find((item) => item.id === bill.categoryId) || {}
|
||
}
|
||
|
||
function getAccount(bill) {
|
||
return store.state.accounts.find((item) => item.id === bill.accountId) || {}
|
||
}
|
||
|
||
function openQuickAdd(categoryId = '', type = 'expense') {
|
||
quickCategoryId.value = categoryId
|
||
quickType.value = type
|
||
editingBill.value = null
|
||
editorVisible.value = true
|
||
}
|
||
|
||
function closeEditor() {
|
||
editorVisible.value = false
|
||
editingBill.value = null
|
||
quickCategoryId.value = ''
|
||
quickType.value = 'expense'
|
||
}
|
||
|
||
function saveBill(payload) {
|
||
store.saveBill(payload)
|
||
uni.showToast({
|
||
title: payload.id ? '账单已更新' : '账单已保存',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
function confirmDelete(bill) {
|
||
uni.showModal({
|
||
title: '删除账单',
|
||
content: `确认删除 ${getCategory(bill).name || '这笔账单'} 吗？`,
|
||
success: ({ confirm }) => {
|
||
if (confirm) {
|
||
store.deleteBill(bill.id)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function handleBillLongPress(bill) {
|
||
uni.showActionSheet({
|
||
itemList: ['编辑账单', '删除账单'],
|
||
success: ({ tapIndex }) => {
|
||
if (tapIndex === 0) {
|
||
editingBill.value = { ...bill }
|
||
editorVisible.value = true
|
||
}
|
||
if (tapIndex === 1) {
|
||
confirmDelete(bill)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function goBills() {
|
||
uni.redirectTo({
|
||
url: '/pages/bills/index'
|
||
})
|
||
}
|
||
|
||
function goBudget() {
|
||
uni.redirectTo({
|
||
url: '/pages/budget/index'
|
||
})
|
||
}
|
||
|
||
onPullDownRefresh(() => {
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh()
|
||
}, 200)
|
||
})
|
||
|
||
const showFlag = ref(false);
|
||
|
||
onLoad(()=>{
|
||
showIt()
|
||
})
|
||
|
||
onShow(()=>{
|
||
showIt()
|
||
})
|
||
|
||
function showIt(){
|
||
if (showFlag.value){
|
||
return
|
||
}
|
||
showFlag.value = true
|
||
let interstitialAd = null;
|
||
if (wx.createInterstitialAd) {
|
||
interstitialAd = wx.createInterstitialAd({
|
||
adUnitId: 'adunit-0abc32053b19a4e9'
|
||
})
|
||
interstitialAd.onLoad(() => {})
|
||
interstitialAd.onError((err) => {
|
||
console.error('插屏广告加载失败', err)
|
||
})
|
||
interstitialAd.onClose(() => {})
|
||
}
|
||
|
||
setTimeout(()=>{
|
||
if (interstitialAd) {
|
||
|
||
interstitialAd.show().catch((err) => {
|
||
console.error('插屏广告显示失败', err)
|
||
})
|
||
showFlag.value = false
|
||
}
|
||
}, 5480)
|
||
}
|
||
|
||
onShareAppMessage((res) => {
|
||
// res.from === 'button' 代表来自页面内按钮
|
||
// res.from === 'menu' 代表来自右上角菜单
|
||
return {
|
||
title: '账单助手', // 分享卡片标题
|
||
desc:'本地单机极简记账，支持收支记录、预算管控、消费报表，数据安全私密，轻便好用的个人账单管家。',
|
||
path: '/pages/home/index', // 分享后点击跳转的页面（必须是绝对路径）
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.hero-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
padding: 32rpx;
|
||
background: var(--bg-accent);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.hero-date,
|
||
.hero-subtitle,
|
||
.hero-card .tiny-text {
|
||
color: rgba(255, 255, 255, 0.76);
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 46rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 24rpx;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 18rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.metric-block {
|
||
padding: 20rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.metric-value {
|
||
display: block;
|
||
margin-top: 10rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.budget-head,
|
||
.budget-note-row,
|
||
.quick-action-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
.budget-side {
|
||
text-align: right;
|
||
}
|
||
|
||
.budget-value,
|
||
.budget-percent {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.progress-track {
|
||
overflow: hidden;
|
||
height: 18rpx;
|
||
margin: 24rpx 0 16rpx;
|
||
border-radius: 999rpx;
|
||
background: var(--surface-muted);
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: linear-gradient(90deg, #d36c43 0%, #1f6f5f 100%);
|
||
}
|
||
|
||
.budget-action-row {
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.quick-action-row .quick-main {
|
||
flex: 1;
|
||
}
|
||
|
||
.quick-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.quick-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
padding: 16rpx 18rpx;
|
||
border-radius: 22rpx;
|
||
background: var(--surface-muted);
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.quick-dot,
|
||
.bill-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.section-link {
|
||
font-size: 24rpx;
|
||
color: var(--brand);
|
||
}
|
||
|
||
.bill-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
.bill-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
padding: 22rpx;
|
||
border-radius: 24rpx;
|
||
background: var(--surface-muted);
|
||
}
|
||
|
||
.bill-leading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.bill-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.bill-title,
|
||
.bill-amount {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.bill-meta {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.empty-card {
|
||
padding: 28rpx 0 8rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-action {
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.fab-button {
|
||
position: fixed;
|
||
right: 32rpx;
|
||
bottom: 348rpx;
|
||
padding: 24rpx 30rpx;
|
||
border-radius: 999rpx;
|
||
background: var(--bg-accent);
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
box-shadow: 0 20rpx 42rpx rgba(16, 42, 67, 0.24);
|
||
z-index: 18;
|
||
}
|
||
</style>
|