新增定时账单功能

Web/src/views/CalendarView.vue

@@ -22,7 +22,10 @@
       <div class="date-transactions">
         <div class="popup-header">
           <h3>{{ selectedDateText }}</h3>
-          <p v-if="dateTransactions.length">共 {{ dateTransactions.length }} 笔交易</p>
+          <p v-if="dateTransactions.length">
+            共 {{ dateTransactions.length }} 笔交易，
+            <span v-html="getBalance(dateTransactions)" />
+          </p>
         </div>
 
       <div class="bills-scroll-container">
@@ -132,6 +135,23 @@ const fetchDateTransactions = async (date) => {
   }
 };
 
+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 `结余<span style="color: var(--van-tag-success-color);">收入 ${balance.toFixed(1)} 元</span>`;
+  } else {
+    return `结余<span style="color: var(--van-tag-danger-color);">支出 ${(-balance).toFixed(1)} 元</span>`;
+  }
+};
+
 // 当月份显示时触发
 const onMonthShow = ({ date }) => {
   const year = date.getFullYear();