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
2026-01-09 01:18:46 +07:00
parent 08186fa752
commit e7970a84fa
4 changed files with 85 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/market/components/rwa-list.vue
View File

@@ -1,6 +1,7 @@
<script lang='ts' setup> <script lang='ts' setup>
import type { RwaData } from "@/api/types"; import type { RwaData } from "@/api/types";
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls"; import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
import ui from "@/ui";
defineProps<{ defineProps<{
data: RwaData[]; data: RwaData[];
@@ -38,47 +39,52 @@ function gotoTradeRwa(id: string) {
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<div v-for="item in data" :key="item.id" @click="gotoTradeRwa(item.id)"> <template v-if="data.length === 0">
<ion-grid> <ui-empty />
<ion-row class="ion-align-items-center my-5"> </template>
<ion-col size="6" class="flex items-center"> <template v-else>
<div class="mr-3"> <div v-for="item in data" :key="item.id" @click="gotoTradeRwa(item.id)">
<CryptocurrencyColorNuls class="text-3xl" /> <ion-grid>
</div> <ion-row class="ion-align-items-center my-5">
<div> <ion-col size="6" class="flex items-center">
<div class="text-sm font-semibold mb-1 truncate"> <div class="mr-3">
{{ item.product?.name }} <CryptocurrencyColorNuls class="text-3xl" />
</div> </div>
<div class="flex items-center space-x-2"> <div>
<div class="text-xs text-text-500"> <div class="text-sm font-semibold mb-1 truncate">
{{ item.product?.code }} {{ item.product?.name }}
</div> </div>
<div class="text-xs rounded-md px-1 py-0.5 bg-text-800"> <div class="flex items-center space-x-2">
{{ item.product.category?.name }} <div class="text-xs text-text-500">
{{ item.product?.code }}
</div>
<div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
{{ item.product.category?.name }}
</div>
</div> </div>
</div> </div>
</div> </ion-col>
</ion-col> <ion-col>
<ion-col> <div class="text-xs text-right">
<div class="text-xs text-right"> {{ item.editionName }}
{{ item.editionName }}
</div>
</ion-col>
<ion-col>
<div class="text-xs text-right">
{{ useDateFormat(item.launchDate!, 'MM/DD') }}
</div>
</ion-col>
<ion-col>
<div v-if="item.unitPrice" class="text-right">
<div class="text-lg font-bold text-primary">
${{ Number(item.unitPrice) }}
</div> </div>
</div> </ion-col>
</ion-col> <ion-col>
</ion-row> <div class="text-xs text-right">
</ion-grid> {{ useDateFormat(item.launchDate!, 'MM/DD') }}
</div> </div>
</ion-col>
<ion-col>
<div v-if="item.unitPrice" class="text-right">
<div class="text-lg font-bold text-primary">
${{ Number(item.unitPrice) }}
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</template>
</div> </div>
</template> </template>

8
src/views/market/components/rwa-orders.vue
View File

@@ -58,11 +58,9 @@ onMounted(() => {
<ion-spinner /> <ion-spinner />
</div> </div>
<div v-else-if="holdingsData.length === 0" class="flex flex-col justify-center items-center h-64"> <template v-else-if="holdingsData.length === 0">
<div class="text-text-500"> <ui-empty />
{{ t('holdings.empty') }} </template>
</div>
</div>
<div v-else class="space-y-3"> <div v-else class="space-y-3">
<div <div

65
src/views/market/components/tokenized-list.vue
View File

@@ -32,41 +32,46 @@ function gotoTokenized(id: string) {
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<div v-for="item in data" :key="item.id" @click="gotoTokenized(item.id)"> <template v-if="data.length === 0">
<ion-grid> <ui-empty />
<ion-row class="ion-align-items-center my-5"> </template>
<ion-col size="6" class="flex items-center"> <template v-else>
<div class="mr-3"> <div v-for="item in data" :key="item.id" @click="gotoTokenized(item.id)">
<CryptocurrencyColorNuls class="text-3xl" /> <ion-grid>
</div> <ion-row class="ion-align-items-center my-5">
<div> <ion-col size="6" class="flex items-center">
<div class="text-sm font-semibold mb-1 truncate"> <div class="mr-3">
{{ item.product?.name }} <CryptocurrencyColorNuls class="text-3xl" />
</div> </div>
<div class="flex items-center space-x-2"> <div>
<div class="text-xs text-text-500"> <div class="text-sm font-semibold mb-1 truncate">
{{ item.product?.code }} {{ item.product?.name }}
</div> </div>
<div class="text-xs rounded-md px-1 py-0.5 bg-text-800"> <div class="flex items-center space-x-2">
{{ item.product?.category?.name }} <div class="text-xs text-text-500">
{{ item.product?.code }}
</div>
<div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
{{ item.product?.category?.name }}
</div>
</div> </div>
</div> </div>
</div> </ion-col>
</ion-col>
<ion-col> <ion-col>
<div class="text-xs text-right"> <div class="text-xs text-right">
+12.6% +12.6%
</div> </div>
</ion-col> </ion-col>
<ion-col> <ion-col>
<div class="text-xs text-right"> <div class="text-xs text-right">
连涨3天 连涨3天
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</div> </div>
</template>
</div> </div>
</template> </template>

6
src/views/riwa/components/news.vue
View File

@@ -21,7 +21,11 @@ function openNewsDetail(item: NewData) {
动态新闻 动态新闻
</div> </div>
<div class="space-y-3"> <template v-if="data?.data.length === 0">
<ui-empty />
</template>
<div v-else class="space-y-3">
<div <div
v-for="item in data?.data" v-for="item in data?.data"
:key="item.id" :key="item.id"