designer-hub/packages/app/src/pages/mine/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 { getPoints } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import NavbarEvo from '@/components/navbar-evo.vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
</script>
<template>
  <div class="flex-grow">
    <NavbarEvo title="积分明细" transparent dark></NavbarEvo>
    <div class="relative aspect-[3/1]">
      <div class="aspect-[1.69/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="https://image.zhuchaohui.com/zhucaohui/033c6d899ea6ab7b042cc11a93b44f000274b48c5be38874c1f43de93ac90751.png"
              mode="widthFix"
              custom-class=""
            ></wd-img>
          </div>
          <div class="absolute top-0 left-0 right-0">
            <wd-img
              width="100%"
              src="https://image.zhuchaohui.com/zhucaohui/f3571650a267343e33316f4a6ca02dc423a3ce17ad7504caaca7ff2ac61e2465.png"
              mode="widthFix"
            ></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-[#ffefd8] text-4xl font-normal font-['D-DIN_Exp'] leading-9">
            {{ userInfo.level?.point }}
          </span>
        </div>
        <div class="flex-1"></div>
        <div></div>
        <div class="text-[#b6b6b6] text-sm font-normal font-['PingFang_SC'] leading-relaxed">
          2024
        </div>
      </div>
      <Card custom-class="relative">
        <PageHelper :request="getPoints" :query="{ stylistId: 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.name }}
                    </div>
                    <div
                      class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
                    >
                      <!-- 2024/08/10 14:21:54 -->
                      {{ 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.pointsType === '1' ? 'text-[#ef4343]' : 'text-black'}`"
                    >
                      <!-- 8200 -->
                      {{ { '1': '+', '2': '-' }[it.pointsType] }}
                      {{ it.points }}
                    </div>
                  </div>
                </div>
                <div class="h-0.25 bg-[#dadada]" v-if="i !== source.list.length - 1"></div>
              </template>
            </div>
          </template>
        </PageHelper>
      </Card>
    </div>
  </div>
</template>