feat:增加账单搜索功能

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>