designer-hub/packages/app/src/pages/home/offline-activity/cycling-rankings/index.vue

<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { NetImages } from '../../../../core/libs/net-images'
import { getRidingOptions, getRidings } from '../../../../core/libs/requests'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import dayjs from 'dayjs'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const current = ref('')
// const { data, run } = useRequest(() => ({}), { initialData: [] })
const { data: ridingOptions, run: setRidingOptions } = useRequest(() => getRidingOptions(), {
  initialData: [],
})
const query = computed(() => (current.value ? { activityId: current.value } : {}))
onLoad(async () => {
  await setRidingOptions()
})
onShareAppMessage(() => ({
  title: '骑行排行榜',
}))
onShareTimeline(() => ({
  title: '骑行排行榜',
}))
</script>
<template>
  <div class="flex-grow flex flex-col bg-[length:100%]">
    <NavbarEvo transparent dark title="骑行榜"></NavbarEvo>
    <div class="aspect-[1.19/1] relative">
      <wd-img
        width="100%"
        custom-class="vertical-bottom"
        mode="widthFix"
        :src="NetImages.CyclingRankingsHeaderBg"
      ></wd-img>
      <div class="absolute bottom-60 left-7.25">
        <wd-picker
          v-model="current"
          :columns="[
            { label: '全部', value: '' },
            ...ridingOptions.map((it) => ({ label: it.name, value: it.id })),
          ]"
          use-default-slot
        >
          <div class="text-[white] text-sm font-normal font-['PingFang_SC'] leading-relaxed">
            <!--          {{ dayjs(year).format('YYYY') }}-->
            {{ ridingOptions.find((it) => it.id === current)?.name ?? '全部' }}
            <wd-icon name="arrow-down" size="12" class="text-[#ffffff]"></wd-icon>
          </div>
        </wd-picker>
      </div>
    </div>
    <PageHelperEvo
      class="flex-grow flex flex-col"
      :request="getRidings"
      :is-load-more="false"
      :query="query"
    >
      <template #default="{ source }">
        <div class="flex-grow relative bg-[linear-gradient(180deg,#EFEFEF_0.4%,#FFF_21.41%)]">
          <div class="absolute h-4 top--4 left-0 right-0 bg-[#EFEFEF] rounded-t-2xl"></div>
          <div class="flex justify-between">
            <template
              v-for="(it, i) in [
                ...source.list.slice(0, 3),
                ...Array.from({
                  length: source?.list?.length < 3 ? 3 - source?.list?.length : 0,
                }).map(() => ({
                  radeKmTotal: '0',
                  avatar: '',
                  memberStylistName: '暂无',
                })),
              ]"
              :key="i"
            >
              <div
                class="flex-1 py-2 relative"
                :class="`${i === 0 ? 'w-[143px] h-[141px] bg-white rounded-xl relative bottom-8 pt-4 order-1 ' : ''}`"
                :style="{ order: i === 0 ? 1 : i - 1 }"
              >
                <div
                  class="text-center font-bold font-['D-DIN'] leading-relaxed"
                  :class="`${i === 0 ? 'text-[#ef4343] text-2xl ' : 'text-black text-[22px]'}`"
                >
                  <!-- 198.2 -->
                  {{ it.radeKmTotal }}
                </div>
                <div
                  class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  骑行里程km
                </div>
                <div class="absolute top--34 left-0 right-0 flex flex-col items-center gap-2">
                  <div class="relative">
                    <wd-img
                      class="rounded-full border-2 border-solid border-[#c5cdd4] overflow-hidden"
                      width="71"
                      height="71"
                      round
                      :src="it.avatar || NetImages.DefaultAvatar"
                    ></wd-img>
                    <div
                      class="absolute left-0"
                      :class="{ 0: 'top--5', 1: 'top--0', 2: 'top--0' }[i]"
                    >
                      <wd-img
                        width="76"
                        mode="widthFix"
                        :src="
                          {
                            0: NetImages.RankingOne,
                            1: NetImages.RankingTwo,
                            2: NetImages.RankingThree,
                          }[i]
                        "
                      ></wd-img>
                    </div>
                  </div>
                  <div
                    class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
                  >
                    <!-- 苏小萌 -->
                    {{ it.memberStylistName }}
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="flex flex-col gap-8 mt--14">
            <template v-for="(it, i) in source.list" :key="i">
              <div v-if="i > 2" class="flex items-center gap-2 px-7">
                <div
                  class="text-center w-8 text-black/40 text-base font-bold font-['D-DIN-PRO'] leading-relaxed"
                >
                  {{ i < 9 ? '0' + (i + 1) : i + 1 }}
                </div>
                <wd-img
                  class="w-8 h-8 rounded-full"
                  round
                  :src="it.avatar || NetImages.DefaultAvatar"
                />
                <div
                  class="text-center text-black/80 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  {{ it.memberStylistName }}
                </div>
                <div class="flex-1"></div>
                <div>
                  <div
                    class="text-center text-black/80 text-xl font-bold font-['D-DIN'] leading-relaxed"
                  >
                    {{ it.radeKmTotal }}
                  </div>
                  <div
                    class="text-center text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-relaxed"
                  >
                    累计里程km
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <BottomAppBar fixed placeholder custom-class="p-0!">
          <div class="bg-gradient-to-b from-neutral-100 to-white shadow-inner">
            <div class="py-3 flex items-center gap-2 px-7">
              <div
                class="text-center w-8 text-black/40 text-base font-bold font-['D-DIN-PRO'] leading-relaxed"
              >
                <!--            {{ i < 9 ? '0' + (i + 1) : i + 1 }}-->
                {{
                  source.list.findIndex((it) => it.memberStylistName === userInfo.nickname) === -1
                    ? '-'
                    : source.list.findIndex((it) => it.memberStylistName === userInfo.nickname) +
                          1 <
                        9
                      ? '0' +
                        (source.list.findIndex((it) => it.memberStylistName === userInfo.nickname) +
                          1)
                      : source.list.findIndex((it) => it.memberStylistName === userInfo.nickname) +
                        1
                }}
              </div>
              <wd-img class="w-12 h-12 rounded-full" round :src="userInfo.avatar" />
              <div
                class="text-center text-black/80 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
              >
                {{ userInfo.nickname ?? NetImages.DefaultAvatar }}
              </div>
              <div class="flex-1"></div>
              <div>
                <div
                  class="text-center text-black/80 text-xl font-bold font-['D-DIN'] leading-relaxed"
                >
                  <!--              {{ it.radeKmTotal }}-->
                  {{
                    source.list.find((it) => it.memberStylistName === userInfo.nickname)
                      ?.radeKmTotal ?? 0
                  }}
                </div>
                <div
                  class="text-center text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  累计里程km
                </div>
              </div>
            </div>
          </div>
        </BottomAppBar>
      </template>
    </PageHelperEvo>
  </div>
</template>