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

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "我的荣誉",
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import Card from '@/components/card.vue'
import SectionHeading from '@/components/section-heading.vue'
import { getBadges, getCertificates } from '../../../../core/libs/requests'
import { Badge } from '../../../../core/libs/models'
import { NetImages } from '../../../../core/libs/net-images'

const active = ref('badge')
const tabs = ref([
  { label: '徽章', value: 'badge' },
  { label: '证书', value: 'certificate' },
])
// 游学徽章,活动徽章,积分徽章,典藏勋章,传播徽章,打卡徽章,课程徽章
const badgeTypes = ref([
  { label: '游学徽章', value: '游学徽章' },
  { label: '活动徽章', value: '活动徽章' },
  { label: '积分徽章', value: '积分徽章' },
  { label: '典藏勋章', value: '典藏勋章' },
  { label: '传播徽章', value: '传播徽章' },
  { label: '打卡徽章', value: '打卡徽章' },
  { label: '课程徽章', value: '课程徽章' },
])
const { data: badges, run: setBadges } = useRequest(() => getBadges({}), {
  initialData: {},
})
const { data: certificates, run: setCertificates } = useRequest(() => getCertificates({}), {
  initialData: [],
})
const data = ref<{
  name: string
  quantity: number
  // 已获取的图片和未获取的图片
  image: string
  activedImage: string
}>()
const image = computed(() => (data.value.quantity ? data.value.activedImage : data.value.image))
onLoad(async (query: { type: 'badge' | 'certificate'; data: string }) => {
  console.log(JSON.parse(query.data))

  if (query.type === 'badge') {
    const badge = JSON.parse(query.data) as Badge
    data.value = {
      name: badge.badgeName,
      quantity: badge.quantity,
      image: badge.badgeNotObtainedImage,
      activedImage: badge.badgeYesObtainedImage,
    }
  }
})
</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-0 left-0 right-0">
      <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="image"></wd-img>
    <div class="flex flex-col items-center gap-1">
      <div class="text-white text-[26px] font-normal font-['PingFang_SC'] uppercase">
        <!-- 东方研习营 -->
        {{ data.name }}
      </div>
      <div class="text-center text-white text-sm font-normal font-['PingFang_SC'] uppercase">
        <!-- 参加东方艺术设计研学营 -->
        {{ `参加${data.name}` }}
      </div>
      <div class="mt-6 flex items-center gap-4">
        <div class="w-4 h-0.25 bg-white"></div>
        <div class="text-center text-white text-sm font-normal font-['PingFang_SC'] uppercase">
          2024年10月2日获得
        </div>
        <div class="w-4 h-0.25 bg-white"></div>
      </div>
      <div class="text-center text-white text-sm font-normal font-['PingFang_SC'] uppercase">
        累计参与{{ data.quantity }}次
      </div>
    </div>
    <wd-button custom-class="w-[161px] h-12 bg-[#0cbe7c]! rounded-[30px]">去分享</wd-button>
  </div>
</template>