功能添加

Web/src/views/CalendarView.vue

@@ -1,190 +1,211 @@
 <template>
   <div class="calendar-container">
-    <van-calendar title="日历" 
-      :poppable="false" 
-      :show-confirm="false" 
-      :formatter="formatterCalendar" 
+    <van-calendar
+      title="日历"
+      :poppable="false"
+      :show-confirm="false"
+      :formatter="formatterCalendar"
       :min-date="minDate"
-      :max-date="maxDate" 
-      @month-show="onMonthShow" 
-      @select="onDateSelect" />
+      :max-date="maxDate"
+      @month-show="onMonthShow"
+      @select="onDateSelect"
+    />
 
     <!-- 日期交易列表弹出层 -->
-    <van-popup v-model:show="listVisible" position="bottom" :style="{ height: '85%' }" round closeable>
+    <van-popup
+      v-model:show="listVisible"
+      position="bottom"
+      :style="{ height: '85%' }"
+      round
+      closeable
+    >
       <div class="date-transactions">
         <div class="popup-header">
           <h3>{{ selectedDateText }}</h3>
           <p v-if="dateTransactions.length">共 {{ dateTransactions.length }} 笔交易</p>
         </div>
 
-        <TransactionList :transactions="dateTransactions" :loading="listLoading" :finished="true" :show-delete="false"
-          @click="viewDetail" />
+        <TransactionList
+          :transactions="dateTransactions"
+          :loading="listLoading"
+          :finished="true"
+          :show-delete="false"
+          @click="viewDetail"
+        />
       </div>
     </van-popup>
 
     <!-- 交易详情组件 -->
-    <TransactionDetail v-model:show="detailVisible" :transaction="currentTransaction" @save="onDetailSave" />
+    <TransactionDetail
+      v-model:show="detailVisible"
+      :transaction="currentTransaction"
+      @save="onDetailSave"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } 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 { ref, onMounted, nextTick } 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";
 
-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('')
+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日
+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()
+  await nextTick();
   setTimeout(() => {
     // 计算页面高度，滚动3/4高度以显示更多日期
-    const height = document.querySelector('.calendar-container').clientHeight * 0.45
-    document
-      .querySelector('.van-calendar__body')
-      .scrollBy({
-        top: -height,
-        behavior: 'smooth'
-      })
+    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 }
-    })
+    const response = await request.get("/TransactionRecord/GetDailyStatistics", {
+      params: { year, month },
+    });
     if (response.success && response.data) {
       // 将数组转换为对象，key为日期
-      const statsMap = {}
-      response.data.forEach(item => {
+      const statsMap = {};
+      response.data.forEach((item) => {
         statsMap[item.date] = {
           count: item.count,
-          amount: item.amount
-        }
-      })
+          amount: item.amount,
+        };
+      });
       dailyStatistics.value = {
         ...dailyStatistics.value,
-        ...statsMap
-      }
+        ...statsMap,
+      };
     }
   } catch (error) {
-    console.error('获取日历统计数据失败:', error)
+    console.error("获取日历统计数据失败:", error);
   }
-}
+};
 
 // 获取指定日期的交易列表
 const fetchDateTransactions = async (date) => {
   try {
-    listLoading.value = true
-    const dateStr = date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
+    listLoading.value = true;
+    const dateStr = date
+      .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
+      .replace(/\//g, "-");
 
-    const response = await getTransactionsByDate(dateStr)
+    const response = await getTransactionsByDate(dateStr);
 
     if (response.success && response.data) {
-      dateTransactions.value = response.data
+      // 根据金额从大到小排序
+      dateTransactions.value = response
+        .data
+        .sort((a, b) => b.amount - a.amount);
     } else {
-      dateTransactions.value = []
-      showToast(response.message || '获取交易列表失败')
+      dateTransactions.value = [];
+      showToast(response.message || "获取交易列表失败");
     }
   } catch (error) {
-    console.error('获取日期交易列表失败:', error)
-    dateTransactions.value = []
-    showToast('获取交易列表失败')
+    console.error("获取日期交易列表失败:", error);
+    dateTransactions.value = [];
+    showToast("获取交易列表失败");
   } finally {
-    listLoading.value = false
+    listLoading.value = false;
   }
-}
+};
 
 // 当月份显示时触发
 const onMonthShow = ({ date }) => {
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  fetchDailyStatistics(year, month)
-}
+  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
-}
+  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'
-  })
-}
+  return date.toLocaleDateString("zh-CN", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    weekday: "long",
+  });
+};
 
 // 查看详情
 const viewDetail = async (transaction) => {
   try {
-    const response = await getTransactionDetail(transaction.id)
+    const response = await getTransactionDetail(transaction.id);
     if (response.success) {
-      currentTransaction.value = response.data
-      detailVisible.value = true
+      currentTransaction.value = response.data;
+      detailVisible.value = true;
     } else {
-      showToast(response.message || '获取详情失败')
+      showToast(response.message || "获取详情失败");
     }
   } catch (error) {
-    console.error('获取详情出错:', error)
-    showToast('获取详情失败')
+    console.error("获取详情出错:", error);
+    showToast("获取详情失败");
   }
-}
+};
 
 // 详情保存后的回调
 const onDetailSave = () => {
   // 重新加载当前日期的交易列表
   if (selectedDate.value) {
-    fetchDateTransactions(selectedDate.value)
+    fetchDateTransactions(selectedDate.value);
   }
 
   // 重新加载当前月份的统计数据
-  const now = selectedDate.value || new Date()
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
-}
+  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 = '今天';
+    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]
+  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)}元` // 展示消费金额
+    dayCopy.topInfo = `${stats.count}笔`; // 展示消费笔数
+    dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元`; // 展示消费金额
   }
 
   return dayCopy;
 };
 
 // 初始加载当前月份数据
-const now = new Date()
-fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
-
+const now = new Date();
+fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
 </script>
 
 <style scoped>
@@ -238,4 +259,4 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
   font-size: 14px;
   color: #969799;
 }
-</style>
+</style>