80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<template>
|
||
<div class="common-mobile-view">
|
||
<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, 'expense')) }}</span>
|
||
</div>
|
||
<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 BillSearch from '@/components/Bill/BillSearch.vue'
|
||
import DailyCard from '@/components/DailyCard.vue'
|
||
import { onMounted } from 'vue'
|
||
import { useBillStore } from '@/store/bill.ts'
|
||
import { getCategoryByName, getTotalAmount } 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">
|
||
.bill-search-list {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
.search-result-title {
|
||
align-self: flex-end;
|
||
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
}</style>
|