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> <script lang='ts' setup>
import type { RefresherCustomEvent } from "@ionic/vue"; import type { RefresherCustomEvent } from "@ionic/vue";
import { searchOutline } from "ionicons/icons";
const { t } = useI18n(); const { t } = useI18n();
const { vibrate } = useHaptics(); const { vibrate } = useHaptics();
@@ -178,20 +177,17 @@ onMounted(() => {
<ui-back-button slot="start" /> <ui-back-button slot="start" />
<ion-title>{{ t("asset.revenue.revenueDetails") }}</ion-title> <ion-title>{{ t("asset.revenue.revenueDetails") }}</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-searchbar
v-model="searchQuery"
:placeholder="t('myIssues.search')"
/>
</ion-header> </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 slot="fixed" @ion-refresh="handleRefresh($event)">
<ion-refresher-content /> <ion-refresher-content />
</ion-refresher> </ion-refresher>
<!-- 类型筛选 --> <div>
<div class="flex gap-2 mb-4 overflow-x-auto pb-2"> <ui-tabs size="small" class="ion-padding-horizontal">
<ui-tabs size="small">
<ui-tab-pane <ui-tab-pane
v-for="option in typeOptions" v-for="option in typeOptions"
:key="option.value" :key="option.value"
@@ -199,89 +195,50 @@ onMounted(() => {
:title="option.label" :title="option.label"
/> />
</ui-tabs> </ui-tabs>
</div>
<!-- 收益记录列表 --> <ion-list>
<ion-list v-if="filteredRecords.length > 0" class="rounded-xl overflow-hidden"> <ion-item
<ion-item v-for="item in filteredRecords"
v-for="item in filteredRecords" :key="item.id"
:key="item.id" lines="full"
lines="full" >
class="record-item" <div class="w-full py-3">
> <div class="flex justify-between items-start">
<div class="w-full py-3"> <div class="flex-1">
<div class="flex justify-between items-start"> <div class="flex items-center gap-2 mb-2">
<div class="flex-1"> <ion-badge
<div class="flex items-center gap-2 mb-2"> :color="getTypeColor(item.type)"
<ion-badge class="text-xs px-2 py-0.5"
:color="getTypeColor(item.type)" >
class="text-xs px-2 py-0.5" {{ item.typeName }}
> </ion-badge>
{{ item.typeName }} <ion-badge color="success" class="text-xs px-2 py-0.5">
</ion-badge> 已完成
<ion-badge color="success" class="text-xs px-2 py-0.5"> </ion-badge>
已完成 </div>
</ion-badge> <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>
<div class="text-base font-semibold mb-1"> <div class="text-right ml-4">
{{ item.assetName }} <div class="text-lg font-bold text-success">
</div> +{{ formatAmountWithSplit(item.amount) }}
<div class="text-xs text-text-400 mb-2"> </div>
{{ 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> </div>
</div> </div>
</div> </div>
</div> </ion-item>
</ion-item> </ion-list>
</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>
</div> </div>
</ion-content> </ion-content>
</ion-page> </ion-page>
</template> </template>
<style lang='css' scoped> <style lang='css' scoped></style>
.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>