fix: 修改ui

zhengyiming

17 小时以前 23bfd958545ab5548d561ef6db1eafafe03e4e05

 packages/components/src/views/Mine/Dashboard.vue

@@ -1,68 +1,77 @@
<template>
  <NutGrid :gutter="10" :column-num="3" square class="dashboard-view">
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">累计收款</div>
        <div class="pro-statistics-content">
          {{ toThousand(topStatistics?.accumulatedReceipts ?? 0) }}
        </div>
  <div class="dashboard-view">
    <Chunk title="核心数据">
      <DashboardLargeCell class="dashboard-large-cell1">
        <DashboardItem
          title="累计收款"
          :icon="IconDashboard1"
          :value="toThousand(topStatistics?.accumulatedReceipts ?? 0)"
          need-symbol
        />
        <DashboardItem
          title="昨日收款"
          :icon="IconDashboard2"
          :value="toThousand(topStatistics?.receiptsYesterday ?? 0)"
          need-symbol
        />
      </DashboardLargeCell>
      <div class="dashboard-item-grad">
        <DashboardItem
          title="累计下单"
          :icon="IconDashboard3"
          :value="toThousand(topStatistics?.accumulatedOrders ?? 0)"
        />
        <DashboardItem
          title="昨日下单"
          :icon="IconDashboard4"
          :value="toThousand(topStatistics?.ordersNumYesterday ?? 0)"
        />
        <DashboardItem
          title="累计收益"
          :icon="IconDashboard5"
          :value="toThousand(topStatistics?.accumulatedIncome ?? 0)"
          need-symbol
        />
        <DashboardItem
          title="昨日成功"
          :icon="IconDashboard6"
          :value="toThousand(topStatistics?.yesterdaySuccess ?? 0)"
        />
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">昨日收款</div>
        <div class="pro-statistics-content">
          {{ toThousand(topStatistics?.receiptsYesterday ?? 0) }}
        </div>
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">累计收益</div>
        <div class="pro-statistics-content">
          {{ toThousand(topStatistics?.accumulatedIncome ?? 0) }}
        </div>
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">累计下单</div>
        <div class="pro-statistics-content">{{ topStatistics?.accumulatedOrders ?? 0 }}</div>
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">昨日下单</div>
        <div class="pro-statistics-content">{{ topStatistics?.ordersNumYesterday ?? 0 }}</div>
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">昨日成功</div>
        <div class="pro-statistics-content">{{ topStatistics?.yesterdaySuccess ?? 0 }}</div>
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">累计用户</div>
        <div class="pro-statistics-content">{{ topStatistics?.accumulatedUsers ?? 0 }}</div>
      </div>
    </NutGridItem>
    <NutGridItem>
      <div class="pro-statistics-wrapper">
        <div class="pro-statistics-title">昨日活跃</div>
        <div class="pro-statistics-content">{{ topStatistics?.yesterdayActiveUsers ?? 0 }}</div>
      </div>
    </NutGridItem>
  </NutGrid>
    </Chunk>
    <Chunk title="用户统计">
      <DashboardLargeCell>
        <DashboardItem
          title="累计用户"
          :icon="IconDashboard7"
          :value="toThousand(topStatistics?.accumulatedUsers ?? 0)"
        />
        <DashboardItem
          title="昨日活跃"
          :icon="IconDashboard8"
          :value="toThousand(topStatistics?.yesterdayActiveUsers ?? 0)"
        />
      </DashboardLargeCell>
    </Chunk>
  </div>
</template>

<script setup lang="ts">
import { Grid as NutGrid, GridItem as NutGridItem } from '@nutui/nutui-taro';
import { toThousand } from '../../utils';
import { useQuery } from '@tanstack/vue-query';
import { useLifeRechargeContext, TopStatisticsOutput } from '@life-payment/core-vue';
import { computed } from 'vue';
import Chunk from '../../components/Layout/Chunk.vue';
import DashboardLargeCell from './components/DashboardLargeCell.vue';
import DashboardItem from './components/DashboardItem.vue';
import IconDashboard1 from '../../assets/dashboard/icon-dashboard1.png';
import IconDashboard2 from '../../assets/dashboard/icon-dashboard2.png';
import IconDashboard3 from '../../assets/dashboard/icon-dashboard3.png';
import IconDashboard4 from '../../assets/dashboard/icon-dashboard4.png';
import IconDashboard5 from '../../assets/dashboard/icon-dashboard5.png';
import IconDashboard6 from '../../assets/dashboard/icon-dashboard6.png';
import IconDashboard7 from '../../assets/dashboard/icon-dashboard7.png';
import IconDashboard8 from '../../assets/dashboard/icon-dashboard8.png';

defineOptions({
  name: 'Dashboard',
@@ -75,7 +84,7 @@
  queryFn: async () => {
    return await blLifeRecharge.services.getTopStatistics(
      {
        channleId: '',
        channleList: blLifeRecharge.accountModel.userChannles.map((x) => x.channlesNum),
      },
      {
        showLoading: false,
@@ -83,6 +92,6 @@
    );
  },
  placeholderData: () => ({} as TopStatisticsOutput),
  enabled: computed(() => blLifeRecharge.accountModel.userChannles.length > 0),
  enabled: computed(() => blLifeRecharge.accountModel.isBackClientUser),
});
</script>