payment-statistics/src/views/components/WinCustomer.vue

<template>
  <div class="h-[320px] relative bg-[#082059]">
    <div class="flex h-full custom-border absolute top-0 left-0">
      <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
      <div class="absolute top-[2px] left-[15px] flex items-center">
        <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
        <div class="text-color text-[20px] ml-[9px] font-700" data-text="获客排行榜">获客排行榜</div>
      </div>
    </div>
    <div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
      <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
        <div class="text-[15px] text-[#84E8FF]">更多</div>
        <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
      </div>
      <div class="mt-[26px] mx-[16px]">
        <RankingTable :value="products" :columns="columns" header-class="custom-table-header" body-class="custom-table-body">
          <template #rank="{ index }">
            <SvgComponent :content="goldMedalSvg" class="w-[34px] h-[20px]" v-if="index === 0" />
            <SvgComponent :content="silverMedalSvg" class="w-[34px] h-[20px]" v-if="index === 1" />
            <SvgComponent :content="bronzeMedalSvg" class="w-[34px] h-[20px]" v-if="index === 2" />
            <span class="text-[14px] font-600" v-if="index > 2">{{ index + 1 }}</span>
          </template>
          <template #name="{ data }">
            <span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span>
          </template>
        </RankingTable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SvgComponent from "@/components/SvgComponent.vue";
  import RankingTable from "@/components/table/RankingTable.vue";

  const columns = [
    { field: "rank", header: "名次", align: "justify-center", width: "68px" },
    { field: "name", header: "姓名", align: "justify-left", width: "100px" },
    { field: "total", header: "获客人数", align: "justify-center", width: "96px" },
  ];

  let products = ref<any[]>([]);
  const chargingRankingData = inject(
    "chargingRankingData",
    ref<{
      acqRanks: any[];
    }>({
      acqRanks: [],
    }),
  );

  watch(
    () => chargingRankingData.value,
    () => {
      PageTransitionEvent;
      initData();
    },
  );

  const initData = () => {
    if (chargingRankingData.value.acqRanks) {
      products.value = chargingRankingData.value.acqRanks;
    }
  };

  const headerLeftSvg = ref("");
  const headerRightSvg = ref("");

  const getHeaderLeftSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-bg-left-sort.svg?raw");
    headerLeftSvg.value = svg;
  };

  const getHeaderRightSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-bg-right-sort.svg?raw");
    headerRightSvg.value = svg;
  };

  const arrowLeftSvg = ref("");
  const getArrowLeftSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/arrow-left.svg?raw");
    arrowLeftSvg.value = svg;
  };

  const moreArrowSvg = ref("");
  const getMoreArrowSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/more-arrow.svg?raw");
    moreArrowSvg.value = svg;
  };

  const goldMedalSvg = ref("");
  const getGoldMedalSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/gold-medal.svg?raw");
    goldMedalSvg.value = svg;
  };

  const silverMedalSvg = ref("");
  const getSilverMedalSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/silver-medal.svg?raw");
    silverMedalSvg.value = svg;
  };

  const bronzeMedalSvg = ref("");
  const getBronzeMedalSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/bronze-medal.svg?raw");
    bronzeMedalSvg.value = svg;
  };

  onBeforeMount(() => {
    getHeaderLeftSvg();
    getHeaderRightSvg();
    getArrowLeftSvg();

    getMoreArrowSvg();

    getGoldMedalSvg();
    getSilverMedalSvg();
    getBronzeMedalSvg();

    initData();
  });
</script>

<style scoped lang="scss">
@use "@/styles/text-color.scss";
  .custom-border {
    border-image-slice: 27 27 27 27;
    border-image-width: 1px 1px 2px 1px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("src/assets/svg-img/border-image.png");
    border-style: solid;
  }

  :deep(.custom-table-header) {
    tr {
      background-color: rgb(14, 39, 97);
      th {
        padding: 13px 10px;
        color: #44c1ef;
        font-weight: 400;
        line-height: 1;
      }
    }
  }

  :deep(.custom-table-body) {
    tr {
      td {
        padding: 10px;
        line-height: 1;
      }
    }
  }
</style>