designer-hub/packages/app/src/pages/mine/honors/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, getHonorStatistics } from '../../../core/libs/requests'
import { useRouter } from '../../../core/utils/router'
import arcBottom from '@designer-hub/assets/src/libs/assets/arcBottom'
import { NetImages } from '../../../core/libs/net-images'
import ProgressEvo from '@/components/progress-evo.vue'

const router = useRouter()
const active = ref('badge')
const tabs = ref([
  { label: '徽章', value: 'badge' },
  { label: '证书', value: 'certificate' },
])
const { data: statistics, run: setStatistics } = useRequest(() => getHonorStatistics())
const { data: badges, run: setBadges } = useRequest(() => getBadges({}), {
  initialData: {},
})
const { data: certificates, run: setCertificates } = useRequest(() => getCertificates({}), {
  initialData: [],
})
onMounted(async () => {
  await setStatistics()
  await setBadges()
  await setCertificates()
  console.log(badges.value)
})
</script>
<template>
  <div class="flex-grow bg-gradient-to-b from-[#181614] to-[#0f0f0f] flex flex-col gap-4 p-3.5">
    <div class="aspect-[1.63/1] m--3.5 overflow-hidden relative">
      <wd-img width="100%" mode="widthFix" :src="NetImages.HonorsHeader"></wd-img>
      <div class="absolute left-7 bottom-6.5">
        <div
          class="text-white text-3xl font-bold font-['Alimama_ShuHeiTi'] leading-relaxed pr-2.5"
          style="
            background: linear-gradient(92deg, #fff 0.4%, #ffebb2 107.42%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
          "
        >
          荣誉主页
        </div>
        <div class="mt-4 flex justify-between">
          <template
            v-for="(it, i) in [
              { label: '获得徽章', value: statistics?.badgeCount, unit: '枚' },
              { label: '获得证书', value: statistics?.certCount, unit: '个' },
            ]"
            :key="i"
          >
            <div class="flex flex-col items-center gap-1.25">
              <div
                class="text-center text-[#f6e8da]/80 text-xs font-normal font-['PingFang_SC'] leading-snug"
              >
                {{ it.label }}
              </div>
              <div class="flex items-end gap-1">
                <div class="text-center text-white text-2xl font-medium font-['DIN'] leading-6">
                  {{ it.value }}
                </div>
                <div
                  class="text-center text-[#f6e8da]/80 text-xs font-normal font-['PingFang_SC'] leading-snug"
                >
                  {{ it.unit }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <NavbarEvo dark fixed transparent></NavbarEvo>
    <!-- <wd-tabs v-model="active">
      <template v-for="(it, i) in tabs" :key="i">
        <wd-tab :title="it.label" :name="it.value"></wd-tab>
      </template>
    </wd-tabs> -->
    <div class="flex items-center justify-around">
      <template v-for="(it, i) in tabs" :key="i">
        <div class="flex flex-col items-center gap-1" @click="active = it.value">
          <div
            class="text-center font-normal font-['PingFang_SC']"
            :class="`${it.value === active ? 'text-white text-lg leading-relaxed ' : 'text-white/60 text-base leading-normal'}`"
          >
            {{ it.label }}
          </div>
          <wd-img v-if="it.value === active" width="17" height="5.6" :src="arcBottom"></wd-img>
        </div>
      </template>
    </div>
    <template v-if="active === 'badge'">
      <Card custom-class="border border-solid bg-[#25221f]! border-[rgba(255,236,185,0.20)]">
        <div class="grid grid-cols-[90px_1fr] gap-x-4">
          <div class="grid-row-start-1 grid-row-end-4 col-start-1">
            <wd-img width="90" height="90" src="https://via.placeholder.com/86x91"></wd-img>
          </div>
          <div class="row-start-1 col-start-2 flex items-center justify-between">
            <div
              class="text-center text-[#ffecb9] text-lg font-normal font-['PingFang_SC'] leading-relaxed"
            >
              学习大师
            </div>
            <div
              class="h-[26px] px-2.5 rounded-[30px] border border-solid border-[#ffecb9] justify-center items-center gap-2.5 inline-flex"
            >
              <div
                class="text-center text-[#ffecb9] text-xs font-normal font-['PingFang_SC'] leading-relaxed"
              >
                获取条件
              </div>
            </div>
          </div>
          <div class="row-start-2 col-start-2">
            <div
              class="text-start text-white/60 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
            >
              参加游学解锁典藏徽章
            </div>
          </div>
          <div class="row-start-3 col-start-2 flex items-center gap-4">
            <div class="flex-1">
              <ProgressEvo
                :height="5"
                :model-value="0.2 * 100"
                color="linear-gradient(90deg, #FFDA72 0%, #FFECB9 100%)"
              ></ProgressEvo>
            </div>
            <div>
              <span class="text-white text-xs font-normal font-['PingFang_SC'] leading-none">
                2
              </span>
              <span class="text-[#a1a1a1] text-xs font-normal font-['PingFang_SC'] leading-none">
                /8
              </span>
            </div>
          </div>
          <div class="row-start-4 col-start-1 flex items-center justify-center">
            <div
              class="w-[59px] h-[21px] px-2.5 bg-[#524c3b] rounded-[30px] shadow shadow-inner justify-center items-center gap-0.5 inline-flex"
            >
              <div
                class="text-center text-[#ffecb9] text-[10px] font-normal font-['PingFang_SC'] leading-relaxed"
              >
                获取榜
              </div>
            </div>
          </div>
        </div>
      </Card>
      <template v-for="([key, it], index) in Object.entries(badges)" :key="index">
        <Card
          custom-class="bg-[#171615]! text-white border border-solid border-[rgba(255,236,185,0.20)]"
        >
          <div class="flex items-center gap-2 py-4">
            <div class="w-1.5 h-1.5 bg-[#ffecb9] rounded-full"></div>
            <SectionHeading :title="key.toString()" dark></SectionHeading>
          </div>
          <div class="grid grid-cols-3 gap-y-6">
            <template v-for="(item, i) in it" :key="i">
              <div
                class="w-full px-4 box-border"
                @click="router.push(`/pages/mine/honors/detail/index?data=${JSON.stringify(item)}`)"
              >
                <wd-img
                  width="100%"
                  mode="widthFix"
                  :src="item.quantity ? item.badgeYesObtainedImage : item.badgeNotObtainedImage"
                ></wd-img>
                <div
                  class="text-center text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  <!-- 清华大学 -->
                  {{ item.badgeName }}
                </div>
              </div>
            </template>
          </div>
          <!-- {{ it }} -->
        </Card>
      </template>
    </template>
    <template v-if="active === 'certificate'">
      <div>
        <template v-for="(it, i) in certificates" :key="i">
          <div class="grid grid-cols-2">
            <wd-img width="100%" :src="it.certificateImage" mode="widthFix"></wd-img>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>