root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化收益记录页面，调整搜索框位置和样式，简化代码结构

Browse Source
This commit is contained in:
Seven
2025-12-27 21:15:38 +07:00
parent 4f8f06df09
commit 13089ca2c6
1 changed files with 42 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/revenue/records/index.vue
View File

@@ -1,6 +1,5 @@
<script lang='ts' setup>
import type { RefresherCustomEvent } from "@ionic/vue";
import { searchOutline } from "ionicons/icons";
const { t } = useI18n();
const { vibrate } = useHaptics();
@@ -178,20 +177,17 @@ onMounted(() => {
<ui-back-button slot="start" />
<ion-title>{{ t("asset.revenue.revenueDetails") }}</ion-title>
</ion-toolbar>
<ion-searchbar
v-model="searchQuery"
:placeholder="t('myIssues.search')"
/>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding-horizontal">
<ion-content :fullscreen="true">
<ion-searchbar v-model="searchQuery" :placeholder="t('myIssues.search')" />
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
<ion-refresher-content />
</ion-refresher>
<!-- 类型筛选 -->
<div class="flex gap-2 mb-4 overflow-x-auto pb-2">
<ui-tabs size="small">
<div>
<ui-tabs size="small" class="ion-padding-horizontal">
<ui-tab-pane
v-for="option in typeOptions"
:key="option.value"
@@ -199,89 +195,50 @@ onMounted(() => {
:title="option.label"
/>
</ui-tabs>
</div>
<!-- 收益记录列表 -->
<ion-list v-if="filteredRecords.length > 0" class="rounded-xl overflow-hidden">
<ion-item
v-for="item in filteredRecords"
:key="item.id"
lines="full"
class="record-item"
>
<div class="w-full py-3">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<ion-badge
:color="getTypeColor(item.type)"
class="text-xs px-2 py-0.5"
>
{{ item.typeName }}
</ion-badge>
<ion-badge color="success" class="text-xs px-2 py-0.5">
已完成
</ion-badge>
<ion-list>
<ion-item
v-for="item in filteredRecords"
:key="item.id"
lines="full"
>
<div class="w-full py-3">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<ion-badge
:color="getTypeColor(item.type)"
class="text-xs px-2 py-0.5"
>
{{ item.typeName }}
</ion-badge>
<ion-badge color="success" class="text-xs px-2 py-0.5">
已完成
</ion-badge>
</div>
<div class="text-base font-semibold mb-1">
{{ item.assetName }}
</div>
<div class="text-xs text-text-400 mb-2">
{{ item.assetCode }}
</div>
<div class="flex items-center gap-1.5 text-xs text-text-400">
<i-ic-outline-access-time class="text-sm" />
<span>{{ item.date }}</span>
</div>
</div>
<div class="text-base font-semibold mb-1">
{{ item.assetName }}
</div>
<div class="text-xs text-text-400 mb-2">
{{ item.assetCode }}
</div>
<div class="flex items-center gap-1.5 text-xs text-text-400">
<i-ic-outline-access-time class="text-sm" />
<span>{{ item.date }}</span>
</div>
</div>
<div class="text-right ml-4">
<div class="text-lg font-bold text-success">
+{{ formatAmountWithSplit(item.amount) }}
<div class="text-right ml-4">
<div class="text-lg font-bold text-success">
+{{ formatAmountWithSplit(item.amount) }}
</div>
</div>
</div>
</div>
</div>
</ion-item>
</ion-list>
<!-- 空状态 -->
<div v-else class="flex flex-col items-center justify-center py-20">
<i-ic-baseline-receipt-long class="text-6xl text-text-600 mb-4" />
<div class="text-text-400">
{{ t("income.records.noData") }}
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped>
.container {
--title-font-size: 16px;
}
ion-list {
background: transparent;
}
.custom-searchbar {
--background: var(--ion-color-step-100);
--border-radius: 12px;
--box-shadow: none;
padding: 0;
}
ion-chip {
cursor: pointer;
user-select: none;
transition: all 0.2s;
}
ion-chip:active {
opacity: 0.7;
}
.record-item {
--inner-padding-end: 0;
}
</style>
<style lang='css' scoped></style>