designer-hub/packages/merchant/src/pages/agent/points/index.vue

<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import PageHelper from '@/components/page-helper.vue'
import Card from '@/components/card.vue'

import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import NavbarEvo from '@/components/navbar-evo.vue'
import { NetImages } from '../../../core/libs/enums'
import { getPointsFlow } from '../../../core/libs/agent-requests'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { getBroker } from '../../../core/libs/requests'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const { data, run: setData } = useRequest(() =>
  getBroker({ brokerId: String(userInfo.value.userId) }),
)
onMounted(async () => {
  await setData()
})
</script>
<template>
  <div class="flex-grow">
    <NavbarEvo title="任务积分" transparent dark></NavbarEvo>
    <div class="relative aspect-[3/1]">
      <div class="aspect-[1.25/1] absolute top-0 w-full">
        <div class="relative w-full h-full">
          <div class="absolute top-0 left-0 right-0">
            <wd-img
              width="100%"
              :src="NetImages.DefaultPointsHeadBg"
              mode="widthFix"
              custom-class=""
            ></wd-img>
          </div>
        </div>
      </div>
    </div>
    <div class="relative px-3.5">
      <div class="flex items-end px-3.5 mb-5">
        <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-relaxed">
          当前积分
        </div>
        <div>
          <span class="text-white text-4xl font-normal font-['D-DIN_Exp'] leading-9">
            {{ data.points }}
          </span>
        </div>
        <div class="flex-1"></div>
        <div></div>
        <div class="text-[white] text-sm font-normal font-['PingFang_SC'] leading-relaxed">
          2024
        </div>
      </div>
      <Card custom-class="relative">
        <PageHelperEvo :request="getPointsFlow" :query="{ brokerId: userInfo.userId, year: 2024 }">
          <template #default="{ source }">
            <div class="flex flex-col gap-4">
              <template v-for="(it, i) in source?.list" :key="i">
                <div class="flex items-center py-4">
                  <div class="flex-1 flex flex-col">
                    <div
                      class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed"
                    >
                      {{ it.taskName }}
                    </div>
                    <div
                      class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
                    >
                      {{ dayjs(it.createTime).format('YYYY/MM/DD HH:mm:ss') }}
                    </div>
                  </div>
                  <div>
                    <div
                      class="text-lg font-normal font-['D-DIN_Exp'] leading-relaxed"
                      :class="`${it.bizType === '1' ? 'text-[#ef4343]' : 'text-black'}`"
                    >
                      <!-- {{ { '1': '+', '2': '-' }[it.pointsType] }} -->
                      {{ it.points }}
                    </div>
                  </div>
                </div>
                <div class="h-0.25 bg-[#dadada]" v-if="i !== (source?.list.length ?? 0) - 1"></div>
              </template>
            </div>
          </template>
        </PageHelperEvo>
      </Card>
    </div>
  </div>
</template>