yt-zcb-distribution-admin/src/views/main/dashboard/components/card/index.vue

<template>
  <div class="card-list">
    <Row v-for="row in list" :key="row.id" :row="row" />
  </div>
</template>

<script lang="js" setup>
import { ref, onBeforeMount } from 'vue'
import Row from './row.vue'
import { statisticsHome,statisticsHomePart1 } from '@/api/dashboard.js'

const list = ref([
  { id: 1, name: '用户总数', data: '31258', color: '#4e73df', icon: 'sfont system-yonghu' },
  { id: 2, name: '当日增长用户数', data: '5542', color: '#1cc88a', icon: 'sfont system-xiaoxi' },
  { id: 3, name: '总收益金额(元)', data: '108827', color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
  { id: 4, name: '当日收益金额(元)', data: '64581.04', color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' }
])

const getTopCountData = async () => {
  try {
    const res = await statisticsHomePart1()
    const { totalAmount, todayAmount, userCount,todayUserCount } = res.data
    list.value = [
      { id: 1, name: '用户总数', data: userCount || 0, color: '#4e73df', icon: 'sfont system-yonghu' },
      { id: 2, name: '当日增长用户数', data: todayUserCount || 0, color: '#1cc88a', icon: 'sfont system-xiaoxi' },
      { id: 3, name: '总收益金额(元)', data: totalAmount || 0, color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
      { id: 4, name: '当日收益金额(元)', data: parseFloat(todayAmount || 0).toFixed(2), color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' }
    ]
  } catch (e) {
    console.log('错误', e)
  }
}

onBeforeMount(() => {
  getTopCountData()
})
</script>

<style lang="scss" scoped>
.card-list {
  width: calc(100% + 20px);
  margin-left: -10px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
</style>