孙诚
c550e95f94
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Failing after 2s
Docker Build & Deploy / Deploy to Production (push) Has been skipped
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
332 lines
9.4 KiB
Vue
332 lines
9.4 KiB
Vue
<template>
|
||
<div class="page-container calendar-container">
|
||
<van-calendar
|
||
title="日历"
|
||
:poppable="false"
|
||
:show-confirm="false"
|
||
:formatter="formatterCalendar"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
@month-show="onMonthShow"
|
||
@select="onDateSelect"
|
||
/>
|
||
|
||
<!-- 日期交易列表弹出层 -->
|
||
<PopupContainer
|
||
v-model="listVisible"
|
||
:title="selectedDateText"
|
||
:subtitle="getBalance(dateTransactions)"
|
||
height="75%"
|
||
>
|
||
<template #header-actions>
|
||
<SmartClassifyButton
|
||
ref="smartClassifyButtonRef"
|
||
:transactions="dateTransactions"
|
||
@save="onSmartClassifySave"
|
||
/>
|
||
</template>
|
||
<TransactionList
|
||
:transactions="dateTransactions"
|
||
:loading="listLoading"
|
||
:finished="true"
|
||
:show-delete="true"
|
||
@click="viewDetail"
|
||
@delete="handleDateTransactionDelete"
|
||
/>
|
||
</PopupContainer>
|
||
|
||
<!-- 交易详情组件 -->
|
||
<TransactionDetail
|
||
v-model:show="detailVisible"
|
||
:transaction="currentTransaction"
|
||
@save="onDetailSave"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
|
||
import { showToast } from "vant";
|
||
import request from "@/api/request";
|
||
import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRecord";
|
||
import TransactionList from "@/components/TransactionList.vue";
|
||
import TransactionDetail from "@/components/TransactionDetail.vue";
|
||
import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
|
||
import PopupContainer from "@/components/PopupContainer.vue";
|
||
|
||
const dailyStatistics = ref({});
|
||
const listVisible = ref(false);
|
||
const detailVisible = ref(false);
|
||
const dateTransactions = ref([]);
|
||
const currentTransaction = ref(null);
|
||
const listLoading = ref(false);
|
||
const selectedDate = ref(null);
|
||
const selectedDateText = ref("");
|
||
|
||
// 设置日历可选范围（例如：过去2年到未来1年）
|
||
const minDate = new Date(new Date().getFullYear() - 2, 0, 1); // 2年前的1月1日
|
||
const maxDate = new Date(new Date().getFullYear() + 1, 11, 31); // 明年12月31日
|
||
|
||
onMounted(async () => {
|
||
await nextTick();
|
||
setTimeout(() => {
|
||
// 计算页面高度，滚动3/4高度以显示更多日期
|
||
const height = document.querySelector(".calendar-container").clientHeight * 0.45;
|
||
document.querySelector(".van-calendar__body").scrollBy({
|
||
top: -height,
|
||
behavior: "smooth",
|
||
});
|
||
}, 300);
|
||
});
|
||
|
||
// 获取日历统计数据
|
||
const fetchDailyStatistics = async (year, month) => {
|
||
try {
|
||
const response = await request.get("/TransactionRecord/GetDailyStatistics", {
|
||
params: { year, month },
|
||
});
|
||
if (response.success && response.data) {
|
||
// 将数组转换为对象，key为日期
|
||
const statsMap = {};
|
||
response.data.forEach((item) => {
|
||
statsMap[item.date] = {
|
||
count: item.count,
|
||
amount: item.amount,
|
||
};
|
||
});
|
||
dailyStatistics.value = {
|
||
...dailyStatistics.value,
|
||
...statsMap,
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error("获取日历统计数据失败:", error);
|
||
}
|
||
};
|
||
|
||
const smartClassifyButtonRef = ref(null);
|
||
// 获取指定日期的交易列表
|
||
const fetchDateTransactions = async (date) => {
|
||
try {
|
||
listLoading.value = true;
|
||
const dateStr = date
|
||
.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
|
||
.replace(/\//g, "-");
|
||
|
||
const response = await getTransactionsByDate(dateStr);
|
||
|
||
if (response.success && response.data) {
|
||
// 根据金额从大到小排序
|
||
dateTransactions.value = response
|
||
.data
|
||
.sort((a, b) => b.amount - a.amount);
|
||
// 重置智能分类按钮
|
||
smartClassifyButtonRef.value?.reset()
|
||
} else {
|
||
dateTransactions.value = [];
|
||
showToast(response.message || "获取交易列表失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("获取日期交易列表失败:", error);
|
||
dateTransactions.value = [];
|
||
showToast("获取交易列表失败");
|
||
} finally {
|
||
listLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const getBalance = (transactions) => {
|
||
let balance = 0;
|
||
transactions.forEach(tx => {
|
||
if(tx.type === 1) {
|
||
balance += tx.amount;
|
||
} else if(tx.type === 0) {
|
||
balance -= tx.amount;
|
||
}
|
||
});
|
||
|
||
if(balance >= 0) {
|
||
return `结余收入 ${balance.toFixed(1)} 元`;
|
||
} else {
|
||
return `结余支出 ${(-balance).toFixed(1)} 元`;
|
||
}
|
||
};
|
||
|
||
// 当月份显示时触发
|
||
const onMonthShow = ({ date }) => {
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1;
|
||
fetchDailyStatistics(year, month);
|
||
};
|
||
|
||
// 日期选择事件
|
||
const onDateSelect = (date) => {
|
||
selectedDate.value = date;
|
||
selectedDateText.value = formatSelectedDate(date);
|
||
fetchDateTransactions(date);
|
||
listVisible.value = true;
|
||
};
|
||
|
||
// 格式化选中的日期
|
||
const formatSelectedDate = (date) => {
|
||
return date.toLocaleDateString("zh-CN", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
weekday: "long",
|
||
});
|
||
};
|
||
|
||
// 查看详情
|
||
const viewDetail = async (transaction) => {
|
||
try {
|
||
const response = await getTransactionDetail(transaction.id);
|
||
if (response.success) {
|
||
currentTransaction.value = response.data;
|
||
detailVisible.value = true;
|
||
} else {
|
||
showToast(response.message || "获取详情失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("获取详情出错:", error);
|
||
showToast("获取详情失败");
|
||
}
|
||
};
|
||
|
||
// 详情保存后的回调
|
||
const onDetailSave = async (saveData) => {
|
||
var item = dateTransactions.value.find(tx => tx.id === saveData.id);
|
||
if(!item) return
|
||
|
||
// 如果分类发生了变化 移除智能分类的内容，防止被智能分类覆盖
|
||
if(item.classify !== saveData.classify) {
|
||
// 通知智能分类按钮组件移除指定项
|
||
smartClassifyButtonRef.value?.removeClassifiedTransaction(saveData.id)
|
||
item.upsetedClassify = ''
|
||
}
|
||
|
||
// 更新当前日期交易列表中的数据
|
||
Object.assign(item, saveData);
|
||
|
||
|
||
|
||
// 重新加载当前月份的统计数据
|
||
const now = selectedDate.value || new Date();
|
||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||
};
|
||
|
||
// 处理删除事件：从当前日期交易列表中移除，并刷新当日和当月统计
|
||
const handleDateTransactionDelete = async (transactionId) => {
|
||
dateTransactions.value = dateTransactions.value.filter(t => t.id !== transactionId)
|
||
|
||
// 刷新当前日期以及当月的统计数据
|
||
const now = selectedDate.value || new Date();
|
||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||
};
|
||
|
||
// 智能分类保存回调
|
||
const onSmartClassifySave = async () => {
|
||
// 保存完成后重新加载数据
|
||
if (selectedDate.value) {
|
||
await fetchDateTransactions(selectedDate.value);
|
||
}
|
||
// 重新加载统计数据
|
||
const now = selectedDate.value || new Date();
|
||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||
};
|
||
|
||
const formatterCalendar = (day) => {
|
||
const dayCopy = { ...day };
|
||
if (dayCopy.date.toDateString() === new Date().toDateString()) {
|
||
dayCopy.text = "今天";
|
||
}
|
||
|
||
// 格式化日期为 yyyy-MM-dd
|
||
const dateKey = dayCopy.date
|
||
.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
|
||
.replace(/\//g, "-");
|
||
const stats = dailyStatistics.value[dateKey];
|
||
|
||
if (stats) {
|
||
dayCopy.topInfo = `${stats.count}笔`; // 展示消费笔数
|
||
dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元`; // 展示消费金额
|
||
}
|
||
|
||
return dayCopy;
|
||
};
|
||
|
||
// 初始加载当前月份数据
|
||
const now = new Date();
|
||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||
|
||
// 全局删除事件监听，确保日历页面数据一致
|
||
const onGlobalTransactionDeleted = () => {
|
||
if (selectedDate.value) {
|
||
fetchDateTransactions(selectedDate.value)
|
||
}
|
||
const now = selectedDate.value || new Date()
|
||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
|
||
}
|
||
|
||
window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
|
||
})
|
||
|
||
// 当有交易被新增/修改/批量更新时刷新
|
||
const onGlobalTransactionsChanged = () => {
|
||
if (selectedDate.value) {
|
||
fetchDateTransactions(selectedDate.value)
|
||
}
|
||
const now = selectedDate.value || new Date()
|
||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
|
||
}
|
||
|
||
window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.van-calendar{
|
||
background: transparent !important;
|
||
}
|
||
|
||
.calendar-container {
|
||
/* 使用准确的视口高度减去 TabBar 高度（50px）和安全区域 */
|
||
height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
|
||
max-height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.calendar-container :deep(.van-calendar) {
|
||
height: 100% !important;
|
||
flex: 1;
|
||
overflow: auto;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 移除日历组件可能的底部 padding */
|
||
.calendar-container :deep(.van-calendar__body) {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
.calendar-container :deep(.van-calendar__months) {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
/* 设置页面容器背景色 */
|
||
:deep(.van-calendar__header-title) {
|
||
background: transparent !important;
|
||
}
|
||
|
||
</style>
|