designer-hub/packages/app/src/pages/mine/honors/detail/collection.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "我的典藏",
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { getCollectionBadge } from '../../../../core/libs/requests'
import { Collection, CollectionDetail } from '../../../../core/libs/models'
import { NetImages } from '../../../../core/libs/net-images'
import dayjs from 'dayjs'

const id = ref<string | number>()
const { data: collectionBadges, run: setCollectionBadges } = useRequest(
  () => getCollectionBadge({ badgeId: id.value }),
  {
    initialData: {
      badgeList: [],
      id: 0,
      userId: 0,
      quantity: 0,
      badgeId: 0,
      badgeType: '',
      badgeName: '',
      badgeNotObtainedImage: '',
      badgeYesObtainedImage: '',
      badgeDescription: '',
      popUp: false,
      userSize: '',
      badgeSize: '',
    },
  },
)
const data = ref<CollectionDetail>({
  badgeList: [],
  id: 0,
  userId: 0,
  quantity: 0,
  badgeId: 0,
  badgeType: '',
  badgeName: '',
  badgeNotObtainedImage: '',
  badgeYesObtainedImage: '',
  badgeDescription: '',
  popUp: false,
  userSize: '',
  badgeSize: '',
})
onLoad(async (query: Record<string | 'id', string>) => {
  if (query?.id) {
    id.value = query.id
    await setCollectionBadges()
    data.value = collectionBadges.value
    console.log('data', data.value)
  }
})
</script>
<template>
  <div
    class="flex-grow bg-[#100f18] backdrop-blur-2xl flex flex-col items-center justify-between py-32 gap-4 relative"
  >
    <div class="absolute top-[-60px] left-0 right-0 rotate-[-50deg]">
      <wd-img
        width="100%"
        mode="widthFix"
        custom-clas="vertical-bottom"
        :src="NetImages.TopSpotlight"
      ></wd-img>
    </div>
    <div class="absolute top-[-60px] left-0 right-[0px] rotate-[50deg]">
      <wd-img
        width="100%"
        mode="widthFix"
        custom-clas="vertical-bottom"
        :src="NetImages.TopSpotlight"
      ></wd-img>
    </div>
    <div class="absolute top-20 left-0 right-0 flex flex-col items-center">
      <wd-img
        width="40%"
        mode="widthFix"
        custom-clas="vertical-bottom mx-auto"
        :src="NetImages.Stars"
      ></wd-img>
    </div>
    <NavbarEvo fixed dark transparent></NavbarEvo>
    <wd-img width="42%" mode="widthFix" :src="data.badgeImage"></wd-img>
    <div class="flex flex-col items-center gap-1">
      <div class="text-white text-[26px] font-normal font-['PingFang_SC'] uppercase">
        {{ data.badgeName }}
      </div>
      <div class="text-center text-white text-sm font-normal font-['PingFang_SC'] uppercase">
        <!-- 参加东方艺术设计研学营 -->
        {{ `${data.badgeDescription}` }}
      </div>
      <div class="text-[#868686] text-[16px] font-normal font-['PingFang_SC'] uppercase">
        已解锁：
        <text class="text-white text-[18px]">{{ data.userSize }}</text>
        / {{ data.badgeSize }} 枚
      </div>
      <div class="mt-6 flex items-center gap-4">
        <div
          class="w-[37px] h-[1px] bg-gradient-to-l from-[#D9D9D9] to-[rgba(217, 217, 217, 0.00)]"
        ></div>
        <div class="text-center text-white text-sm font-normal font-['PingFang_SC'] uppercase">
          需解锁全部徽章
        </div>
        <div
          class="w-[37px] h-[1px] bg-gradient-to-r from-[#D9D9D9] to-[rgba(217, 217, 217, 0.00)]"
        ></div>
      </div>
      <div
        class="text-center pt-[55px] text-white text-sm font-normal font-['PingFang_SC'] uppercase"
      >
        <div class="grid grid-cols-3 gap-y-6">
          <template v-for="(item, i) in data.badgeList" :key="i">
            <div class="w-full px-4 box-border">
              <wd-img width="100%" mode="widthFix" :src="item.badgeImage"></wd-img>
              <div
                class="text-center text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed"
              >
                {{ item.badgeName }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>