feat:增加账单搜索功能

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()
 })
 

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>

src/views/meta.ts

@@ -41,6 +41,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '账单图表',
     icon: ''
   },
+  '/bill/search': {
+    title: '账单搜索',
+    icon: ''
+  },
   '/bill/detail/:id': {
     title: '账单内容',
     icon: ''