feat:更新账单搜索模块

src/components/Bill/BillQuery.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="common-query">
     <el-select v-model="billStore.billQueryForm.billBook"
-               @change="billStore.refreshInfo()" style="width: 120px">
+               @change="billStore.refreshInfo(isStats)" style="width: 120px">
       <el-option
           v-for="(item, index) in billQuery.billBookList"
           :key="index" :label="item.label" :value="item.name"
@@ -9,7 +9,7 @@
     </el-select>
 
     <el-select v-model="billStore.billDateType"
-               @change="billStore.refreshInfo()"
+               @change="billStore.refreshInfo(isStats)"
                style="width: 120px;align-self: center;">
       <el-option v-for="(item, index) in dateTypeOptions" :key="index"
                  :label="item.label" :value="item.value"/>
@@ -20,23 +20,25 @@
         inline-prompt
         active-value="income" inactive-value="expensive"
         active-text="收入账单" inactive-text="支出账单"
-        @change="billStore.refreshInfo()"
+        @change="billStore.refreshInfo(isStats)"
         style="--el-switch-on-color: #6FBB69; --el-switch-off-color: #CA6C65;"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { IBillBook } from '@/types/bill.ts'
+import { useRoute } from 'vue-router'
 
 const billStore = useBillStore()
+const route = useRoute()
+
+const isStats = computed(() => route.path.includes('chart'))
 
 onMounted(async () => {
-  await billStore.initBillInfo()
-
   billQuery.billBookList = deepCopyObject(billStore.billBookList)
   billQuery.billBookList.push({
     color: '',

src/components/Bill/BillSearch.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="common-query">
+    <el-form :model="billStore.billSearchForm">
+      <el-form-item label="账单内容">
+        <el-input v-model="billStore.billSearchForm.content"
+                  @input="billStore.searchInfo()"
+                  placeholder="请输入账单内容" clearable/>
+      </el-form-item>
+
+      <el-form-item label="账单类别">
+        <el-input v-model="billStore.billSearchForm.category"
+                  @input="billStore.searchInfo()"
+                  placeholder="请输入账单类别" clearable/>
+      </el-form-item>
+
+      <el-form-item label="账单地址">
+        <el-input v-model="billStore.billSearchForm.location"
+                  @input="billStore.searchInfo()"
+                  placeholder="请输入账单地址" clearable/>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+
+const billStore = useBillStore()
+
+onMounted(async () => {
+  await billStore.searchInfo()
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module";
+</style>

src/store/bill.ts

@@ -130,15 +130,21 @@ export const useBillStore = defineStore('bill', {
         await this.refreshInfo()
       }
     },
-    async refreshInfo() {
-      this.isLoading = true
-      const bookName = this.billQueryForm.billBook === 'all' ? '' : this.billQueryForm.billBook
+    getBillDateList() {
       const { billYear, billMonth } = this.billQueryForm
       const date = this.billDateType === 'year' ? billYear : billMonth
       this.billDateList = getStartEndDate(date, this.billDateType)
+    },
+    async refreshInfo(isStats = false) {
+      this.isLoading = true
+      const bookName = this.billQueryForm.billBook === 'all' ? '' : this.billQueryForm.billBook
+      this.getBillDateList()
 
-      await this.queryBillSummary(bookName)
+      if (isStats) {
         await this.queryBillStats(bookName)
+      } else {
+        await this.queryBillSummary(bookName)
+      }
       this.isRefresh = !this.isRefresh
       this.isLoading = false
     },

src/styles/home/bill.mobile.module.scss

@@ -32,5 +32,12 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
+
+    .search-result-title {
+      align-self: flex-end;
+
+      display: flex;
+      gap: 10px;
+    }
   }
 }

src/utils/home/billUtil.ts

@@ -113,3 +113,9 @@ export const getRateColor = (rate: number) => {
     return '#CD4F39'
   }
 }
+
+export const getTotalAmount = (billRecordList: IBillRecord[], type: IBillType) => {
+  return billRecordList
+    .filter((record) => record.type === type)
+    .reduce((total, record) => total + record.amount, 0)
+}

src/views/bill/chart.vue

@@ -27,7 +27,7 @@ import { useBillStore } from '@/store/bill.ts'
 const billStore = useBillStore()
 
 onMounted(async () => {
-  await billStore.refreshInfo()
+  await billStore.refreshInfo(true)
 })
 </script>
 

src/views/bill/data.vue

@@ -37,6 +37,7 @@ onMounted(async () => {
 
   billStore.billType = 'expensive'
   billStore.billDateType = 'month'
+
   await billStore.refreshInfo()
 })
 

src/views/bill/detail[id].vue

@@ -129,7 +129,6 @@ const billInfo = reactive({
 onMounted(async () => {
   appStore.isShowMobileBack = true
 
-  await billStore.initBillInfo()
   await initBillRecord()
 })
 

src/views/bill/search.vue

@@ -1,32 +1,16 @@
 <template>
   <div class="mobile-bill-view common-mobile-view">
-    <div class="common-query">
-      <el-form :model="billStore.billSearchForm">
-        <el-form-item label="账单内容">
-          <el-input v-model="billStore.billSearchForm.content"
-                    @input="billStore.searchInfo()"
-                    placeholder="请输入账单内容" clearable/>
-        </el-form-item>
-
-        <el-form-item label="账单类别">
-          <el-input v-model="billStore.billSearchForm.category"
-                    @input="billStore.searchInfo()"
-                    placeholder="请输入账单类别" clearable/>
-        </el-form-item>
-
-        <el-form-item label="账单地址">
-          <el-input v-model="billStore.billSearchForm.location"
-                    @input="billStore.searchInfo()"
-                    placeholder="请输入账单地址" clearable/>
-        </el-form-item>
-      </el-form>
-    </div>
+    <bill-search />
 
     <div v-if="billStore.billRecordList.length === 0">
       <el-empty description="暂无数据"/>
     </div>
 
     <div v-else class="bill-search-list card-item">
+      <div class="search-result-title">
+        <span>收入：{{ formatAmount(getTotalAmount(billStore.billRecordList, 'income')) }}</span>
+        <span>支出：{{ formatAmount(getTotalAmount(billStore.billRecordList, 'expensive')) }}</span>
+      </div>
       <daily-card v-for="(item, index) in billStore.billRecordList"
                   :key="index" @click="selectBillRecordClick(item)"
                   :title="item.category" :content="item.content">
@@ -53,10 +37,11 @@
 </template>
 
 <script lang="ts" setup>
+import BillSearch from '@/components/Bill/BillSearch.vue'
 import DailyCard from '@/components/DailyCard.vue'
 import { onMounted } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
-import { getCategoryByName } from '@/utils/home/billUtil'
+import { getCategoryByName, getTotalAmount } from '@/utils/home/billUtil'
 import { formatAmount } from 'vue3-common/utils/numberUtil'
 import { IBillRecord } from '@/types/bill'
 import { useRouter } from 'vue-router'

src/views/home/index.vue

@@ -13,12 +13,6 @@
 
     <weather-time-card />
 
-<!--    <el-carousel height="150px">-->
-<!--      <el-carousel-item v-for="item in 4" :key="item">-->
-<!--        <h3>{{ item }}</h3>-->
-<!--      </el-carousel-item>-->
-<!--    </el-carousel>-->
-
     <div class="module-list">
       <module-card icon="iconfont icon-fenlei" color="#00CED1"
                    title="博客文章" sub-title="分享学习点滴"
@@ -26,7 +20,7 @@
 
       <module-card icon="iconfont icon-zhangdan" color="#FFCC00"
                    title="账单记录" sub-title="收支一目了然"
-                   router="/bill/data"/>
+                   router="/bill/data" @click="initBillClick"/>
 
       <module-card icon="iconfont icon-jingdian" color="#FF9966"
                    title="旅行记录" sub-title="足迹遍及四方"
@@ -72,17 +66,6 @@
                    title="密码管家" sub-title="守护数字安全"
                    router="/password/list"/>
     </div>
-
-<!--    <div class="note-container">-->
-<!--      <div class="content">-->
-<!--        <span class="title">消息中心</span>-->
-<!--      </div>-->
-<!--      <div class="note-list">-->
-<!--        <div class="note">-->
-
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
   </main>
 </template>
 
@@ -90,9 +73,15 @@
 import WeatherTimeCard from '@/components/Common/WeatherTimeCard.vue'
 import ModuleCard from '@/components/ModuleCard.vue'
 import { useAppStore } from '@/store/app'
+import { useBillStore } from '@/store/bill.ts'
 import { getAssetsImageFile } from '@/utils'
 
 const appStore = useAppStore()
+const billStore = useBillStore()
+
+const initBillClick = async () => {
+  await billStore.initBillInfo()
+}
 </script>
 
 <style lang="scss">