From 7032070d3f8b0fe25c90dea385f083ef7b26e55b Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Mon, 10 Nov 2025 19:50:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E8=B4=A6=E5=8D=95?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/bill.ts                        |  9 ++-
 src/components/Bill/BillDailyItem.vue   | 19 ++----
 src/layout/TabBar.vue                   |  5 ++
 src/store/bill.ts                       | 12 +++-
 src/styles/home/bill.mobile.module.scss |  7 +++
 src/types/bill.ts                       |  6 ++
 src/views/bill/data.vue                 | 15 +++++
 src/views/bill/search.vue               | 83 +++++++++++++++++++++++++
 src/views/meta.ts                       |  4 ++
 9 files changed, 143 insertions(+), 17 deletions(-)
 create mode 100644 src/views/bill/search.vue

diff --git a/src/apis/bill.ts b/src/apis/bill.ts
index b75b0c4..2614f8a 100644
--- a/src/apis/bill.ts
+++ b/src/apis/bill.ts
@@ -4,7 +4,7 @@ import {
   IBillCategory,
   IBillPay,
   IBillQuery,
-  IBillRecord
+  IBillRecord, IBillSearch
 } from '@/types/bill'
 import { IStatsChart } from 'vue3-common/dist/types'
 
@@ -41,6 +41,13 @@ export const queryBillSummaryApi = (query: IBillQuery): Promise<IBillRecord[]> =
     params: query
   })
 
+export const searchBillSummaryApi = (search: IBillSearch): Promise<IBillRecord[]> =>
+  cloudService({
+    url: '/home-api/bill/search',
+    method: 'get',
+    params: search
+  })
+
 export const queryBillStatsApi = (type: string, query: IBillQuery): Promise<IStatsChart[]> =>
   cloudService({
     url: `/home-api/bill/stats/${type}`,
diff --git a/src/components/Bill/BillDailyItem.vue b/src/components/Bill/BillDailyItem.vue
index 672906c..4c2a5da 100644
--- a/src/components/Bill/BillDailyItem.vue
+++ b/src/components/Bill/BillDailyItem.vue
@@ -43,10 +43,8 @@ import { useBillStore } from '@/store/bill.ts'
 import { useRouter } from 'vue-router'
 import { formatChineseDate } from 'vue3-common/utils/dateUtil'
 import { IBillRecord } from '@/types/bill.ts'
-import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { formatAmount } from 'vue3-common/utils/numberUtil'
 import { getCalendarDailyCount, getCategoryByName } from '@/utils/home/billUtil.ts'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 
 const billStore = useBillStore()
 const router = useRouter()
@@ -101,19 +99,10 @@ const getBillDailyByDate = (date: string) => {
 const selectBillRecordClick = async (billRecord: IBillRecord) => {
   await billStore.queryBillRecord(billRecord.id as number)
   billStore.billApiType = 'UPDATE'
-
-  if (isMobile()) {
-    await router.push({
-      name: 'BillDetailId',
-      params: { id: billStore.currentBillRecord.id }
-    })
-  } else {
-    billStore.billDialog = {
-      title: '编辑账单',
-      visible: true,
-      data: deepCopyObject(billStore.currentBillRecord)
-    }
-  }
+  await router.push({
+    name: 'BillDetailId',
+    params: { id: billStore.currentBillRecord.id }
+  })
 }
 </script>
 
diff --git a/src/layout/TabBar.vue b/src/layout/TabBar.vue
index 61927a9..6aff6cd 100644
--- a/src/layout/TabBar.vue
+++ b/src/layout/TabBar.vue
@@ -15,6 +15,11 @@
       <i class="fa-solid fa-chart-pie"></i>
       <span>统计</span>
     </router-link>
+    <router-link v-if="path.includes('bill')" to="/bill/search"
+                 @click="routerClick()" class="item">
+      <i class="fa-solid fa-magnifying-glass"></i>
+      <span>搜索</span>
+    </router-link>
     <router-link v-if="path.includes('bill')" to="/bill/setting"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-gear"></i>
diff --git a/src/store/bill.ts b/src/store/bill.ts
index 51bb287..0f77afa 100644
--- a/src/store/bill.ts
+++ b/src/store/bill.ts
@@ -8,7 +8,7 @@ import {
   queryBillBookApi,
   queryBillCategoryApi, queryBillPayApi,
   queryBillRecordApi,
-  queryBillStatsApi, queryBillSummaryApi, updateBillRecordApi
+  queryBillStatsApi, queryBillSummaryApi, searchBillSummaryApi, updateBillRecordApi
 } from '@/apis/bill'
 import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
 import { IDateType, ImagePathEnum } from '@/types'
@@ -44,6 +44,11 @@ export const useBillStore = defineStore('bill', {
       billYear: getCurrentYear(),
       billMonth: getCurrentMonth()
     },
+    billSearchForm: {
+      content: '',
+      category: '',
+      location: ''
+    },
     billDateStatsList: [] as IStatsChart[],
     billBookStatsList: [] as IStatsChart[],
     billCategoryStatsList: [] as IStatsChart[],
@@ -137,6 +142,11 @@ export const useBillStore = defineStore('bill', {
       this.isRefresh = !this.isRefresh
       this.isLoading = false
     },
+    async searchInfo() {
+      this.isLoading = true
+      this.billRecordList = await searchBillSummaryApi(this.billSearchForm)
+      this.isLoading = false
+    },
     getEmptyBillRecord(): IBillRecord {
       return {
         amount: 0,
diff --git a/src/styles/home/bill.mobile.module.scss b/src/styles/home/bill.mobile.module.scss
index 6aad67e..87429c9 100644
--- a/src/styles/home/bill.mobile.module.scss
+++ b/src/styles/home/bill.mobile.module.scss
@@ -86,4 +86,11 @@
       gap: 10px;
     }
   }
+
+  .bill-search-list {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
 }
diff --git a/src/types/bill.ts b/src/types/bill.ts
index 183c950..74c23c3 100644
--- a/src/types/bill.ts
+++ b/src/types/bill.ts
@@ -60,6 +60,12 @@ export interface IBillQuery {
   endDate: string;
 }
 
+export interface IBillSearch {
+  content?: string;
+  category?: string;
+  location?: string;
+}
+
 export interface IBillCalendarDaily {
   dailyRecordList: IBillRecord[];
   totalExpensive: number;
diff --git a/src/views/bill/data.vue b/src/views/bill/data.vue
index 53caf76..d81bcd5 100644
--- a/src/views/bill/data.vue
+++ b/src/views/bill/data.vue
@@ -17,11 +17,26 @@ import { onMounted } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
 import { Plus } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
+import { getCurrentMonth, getCurrentYear } from 'vue3-common/utils/dateUtil'
 
 const billStore = useBillStore()
 const router = useRouter()
 
 onMounted(async () => {
+  billStore.billQueryForm = {
+    billBook: 'all',
+    billYear: getCurrentYear(),
+    billMonth: getCurrentMonth()
+  }
+
+  billStore.billSearchForm = {
+    category: '',
+    content: '',
+    location: ''
+  }
+
+  billStore.billType = 'expensive'
+  billStore.billDateType = 'month'
   await billStore.refreshInfo()
 })
 
diff --git a/src/views/bill/search.vue b/src/views/bill/search.vue
new file mode 100644
index 0000000..4a1fa6e
--- /dev/null
+++ b/src/views/bill/search.vue
@@ -0,0 +1,83 @@
+<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>
+
+    <div v-if="billStore.billRecordList.length === 0">
+      <el-empty description="暂无数据"/>
+    </div>
+
+    <div v-else class="bill-search-list card-item">
+      <daily-card v-for="(item, index) in billStore.billRecordList"
+                  :key="index" @click="selectBillRecordClick(item)"
+                  :title="item.category" :content="item.content">
+        <template #icon>
+          <i :class="getCategoryByName(billStore.billCategoryList, item.category).icon"
+             :style="{color: getCategoryByName(billStore.billCategoryList, item.category).color}">
+          </i>
+        </template>
+
+        <template #content>
+          <span v-if="item.location" class="location">
+            <i class="fa-solid fa-location-dot"></i>
+            {{ item.location }}
+          </span>
+        </template>
+
+        <template #extra>
+          <span>{{ formatAmount(item.amount, true) }}</span>
+          <span>{{ item.payAccount }}</span>
+        </template>
+      </daily-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DailyCard from '@/components/DailyCard.vue'
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+import { getCategoryByName } from '@/utils/home/billUtil'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
+import { IBillRecord } from '@/types/bill'
+import { useRouter } from 'vue-router'
+
+const billStore = useBillStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await billStore.searchInfo()
+})
+
+const selectBillRecordClick = async (billRecord: IBillRecord) => {
+  await billStore.queryBillRecord(billRecord.id as number)
+  billStore.billApiType = 'UPDATE'
+  await router.push({
+    name: 'BillDetailId',
+    params: { id: billStore.currentBillRecord.id }
+  })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module";
+</style>
diff --git a/src/views/meta.ts b/src/views/meta.ts
index 4070842..02cf238 100644
--- a/src/views/meta.ts
+++ b/src/views/meta.ts
@@ -41,6 +41,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '账单图表',
     icon: ''
   },
+  '/bill/search': {
+    title: '账单搜索',
+    icon: ''
+  },
   '/bill/detail/:id': {
     title: '账单内容',
     icon: ''