complete balance page logic

src/components/KUNGalgameTopBar.vue

@@ -226,12 +226,12 @@ $navNumber: v-bind(navItemNum);
 .kungalgamer-info {
   display: flex;
   align-items: center;
+  margin-right: 50px;
   img {
     cursor: pointer;
     border-radius: 50%;
     height: 40px;
     position: relative;
-    margin-right: 50px;
   }
   > span {
     color: $kungalgame-font-color-2;

src/views/balance/Balance.vue

@@ -2,6 +2,9 @@
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 import { currBackground } from '@/hooks/useBackgroundPicture'
 import Form from './components/Form.vue'
+import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+// 导入临时数据
+import { calculateTotalAmount } from './log'
 </script>
 
 <template>
@@ -19,19 +22,17 @@ import Form from './components/Form.vue'
       </div>
       <!-- 收入支出总结 -->
       <div class="sum">
-        <!-- 可支配金额 -->
-        <div class="disposable-amount">可支配金额: <span>1007 CNY</span></div>
         <!-- 经济状态 -->
-        <div class="amount-status">
+        <div
+          class="amount-status-deficit"
+          :class="calculateTotalAmount() >= 0 ? 'amount-status-surplus' : ''"
+        >
           <div>经济状态: <span>亏损</span></div>
-          <div>亏损金额: - 1007 CNY</div>
+          <div>亏损金额: {{ calculateTotalAmount() }} CNY</div>
         </div>
       </div>
       <!-- 版权 -->
-      <div class="copyright">
-        <span>Copyright © 2023 KUNgalgame</span>
-        <span>All rights reserved | Version 0.01</span>
-      </div>
+      <KUNGalgameFooter />
     </div>
   </div>
 </template>
@@ -45,7 +46,7 @@ import Form from './components/Form.vue'
   background-position: center;
   background-size: cover;
   min-width: 1100px;
-  min-height: 700px;
+  min-height: 600px;
 }
 /* 文章部分 */
 .article {
@@ -73,9 +74,10 @@ import Form from './components/Form.vue'
 /* 页面标题 */
 .title {
   /* 固定高度 */
-  height: 50px;
+  height: 60px;
   /* 字体大小 */
   font-size: 30px;
+  flex-shrink: 0;
   /* 居中 */
   display: flex;
   justify-content: center;
@@ -98,31 +100,27 @@ import Form from './components/Form.vue'
   align-items: center;
   font-size: 22px;
 }
-/* 可支配金额 */
-.disposable-amount {
-  height: 50px;
-}
-.disposable-amount > span {
-  padding: 5px;
-  background-color: $kungalgame-green-2;
-}
-/* 经济状态 */
-.amount-status {
+/* 经济状态亏损 */
+.amount-status-deficit {
   width: 100%;
   display: flex;
   justify-content: space-around;
+  span {
+    padding: 5px;
+    background-color: $kungalgame-red-4;
+    color: $kungalgame-white;
+  }
+  & > div:last-child {
+    background-color: $kungalgame-red-2;
+  }
 }
-.amount-status span {
-  padding: 5px;
-  background-color: $kungalgame-red-4;
-  color: $kungalgame-white;
-}
-.amount-status > div:last-child {
-  background-color: $kungalgame-red-2;
-}
-/* 版权 */
-.copyright {
-  position: absolute;
-  bottom: -40px;
+/* 经济状态盈余 */
+.amount-status-surplus {
+  span {
+    background-color: $kungalgame-green-4;
+  }
+  & > div:last-child {
+    background-color: $kungalgame-green-2;
+  }
 }
 </style>

src/views/balance/components/Form.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import Log from './Log.vue'
+// 导入临时数据
+import { calculateTotalIncome, calculateTotalExpenditure } from '../log'
 
 const props = defineProps(['isIncome'])
 const status = props.isIncome ? '收入' : '支出'
@@ -7,15 +9,21 @@ const status = props.isIncome ? '收入' : '支出'
 
 <template>
   <!-- 收入 -->
-  <div class="form" :class="$props.isIncome ? '' : 'expenditure'">
+  <div class="form" :class="$props.isIncome ? '' : 'expenditure-form'">
     <!-- 标题 -->
     <div class="title">{{ status }}</div>
     <!-- 收入记录的容器 -->
     <div class="container">
-      <Log />
+      <Log :isIncome="$props.isIncome" />
     </div>
     <!-- 总收入 -->
-    <div class="sum">总{{ status }}: 1007 CNY</div>
+    <div class="sum">
+      总{{ status }}:
+      {{
+        $props.isIncome ? calculateTotalIncome() : calculateTotalExpenditure()
+      }}
+      CNY
+    </div>
   </div>
 </template>
 
@@ -49,6 +57,7 @@ const status = props.isIncome ? '收入' : '支出'
   .sum {
     height: 40px;
     font-size: 18px;
+    flex-shrink: 0;
     /* 文字居中 */
     display: flex;
     justify-content: center;
@@ -71,7 +80,7 @@ const status = props.isIncome ? '收入' : '支出'
   border-radius: 2px;
 }
 /* 支出的样式 */
-.expenditure {
+.expenditure-form {
   border: 1px solid $kungalgame-red-4;
   .title {
     border-bottom: 1px solid $kungalgame-red-4;

src/views/balance/components/Log.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import { FSLog } from './log'
+import { FSLog } from '../log'
+defineProps(['isIncome'])
 </script>
 
 <template>
-  <!-- 单条记录 -->
-  <div class="log" v-for="kun in FSLog" :key="kun.index">
-    <div v-if="kun.income">
+  <!-- 单条Z收入记录 -->
+  <div v-for="kun in FSLog" :key="kun.index" v-if="$props.isIncome">
+    <div
+      class="log"
+      v-if="kun.income"
+      :class="$props.isIncome ? '' : 'expenditure-log'"
+    >
       <!-- 收入来源 -->
       <div class="reason">{{ kun.reason }}</div>
       <!-- 收入时间和金额 -->
@@ -13,10 +18,17 @@ import { FSLog } from './log'
         <!-- 收入时间 -->
         <span class="date">{{ kun.date }}</span>
         <!-- 收入金额 -->
-        <span class="amount">+ {{ kun.amount }} CNY</span>
+        <span class="amount">{{ kun.amount }}</span>
       </div>
     </div>
-    <div v-if="!kun.income">
+  </div>
+  <!-- 单条支出记录 -->
+  <div v-for="kun in FSLog" :key="kun.index" v-if="!$props.isIncome">
+    <div
+      class="log"
+      v-if="!kun.income"
+      :class="$props.isIncome ? '' : 'expenditure-log'"
+    >
       <!-- 收入来源 -->
       <div class="reason">{{ kun.reason }}</div>
       <!-- 收入时间和金额 -->
@@ -24,7 +36,7 @@ import { FSLog } from './log'
         <!-- 收入时间 -->
         <span class="date">{{ kun.date }}</span>
         <!-- 收入金额 -->
-        <span class="amount">+ {{ kun.amount }} CNY</span>
+        <span class="amount">{{ kun.amount }}</span>
       </div>
     </div>
   </div>
@@ -54,12 +66,12 @@ import { FSLog } from './log'
     }
   }
 }
-.expenditure {
+.expenditure-log {
   border-bottom: 1px solid $kungalgame-red-4;
   .reason {
     border-left: 5px solid $kungalgame-red-4;
   }
-  .amount {
+  .result .amount {
     background-color: $kungalgame-red-2;
   }
 }

src/views/balance/log.ts

@@ -23,7 +23,7 @@ export const FSLog: FS[] = [
     income: true,
     reason: '啊这可海星',
     date: '2019/10/07',
-    amount: 1007,
+    amount: 107,
   },
   {
     index: 3,
@@ -61,3 +61,24 @@ export const FSLog: FS[] = [
     amount: 1007,
   },
 ]
+
+// 计算盈亏
+export const calculateTotalAmount = (): number => {
+  return FSLog.reduce((total, item) => {
+    if (item.income) {
+      return total + item.amount
+    } else {
+      return total - item.amount
+    }
+  }, 0)
+}
+
+// 计算总收入
+export const calculateTotalIncome = (): number => {
+  const filteredData = FSLog.filter((item) => item.income)
+  return filteredData.reduce((total, item) => total + item.amount, 0)
+}
+
+// 计算总支出
+export const calculateTotalExpenditure = (): number =>
+  calculateTotalAmount() - calculateTotalIncome()