h5-colexiu/src/student/leaderboard/index.tsx

import { Button, Cell, Empty, Image, Tab, Tabs } from 'vant'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref
} from 'vue'
import styles from './index.module.less'
import IconTrophy from './image/icon-trophy.png'
import IconLevel from '../share-active/track-review-activity/images/icon_level.png'
import IconLevel2 from '../share-active/track-review-activity/images/icon_level2.png'
import IconLevel3 from '../share-active/track-review-activity/images/icon_level3.png'
import IconEmtry from './image/icon-emtry.png'
import IconAvator from '@/common/images/icon_teacher.png'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import { state as userInfo } from '@/state'
import { useRect } from '@vant/use'

interface IMusicItem {
  loaded: boolean
  musicSheetName: string
  musicSubject: string
  musicSheetId: number
  evaluationId: number
  rankingList: any
  [_: string]: any
}

export default defineComponent({
  name: 'leaderboard',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      tabIndex: 0,
      musicList: [] as IMusicItem[],
      isSignup: false, // 是否报名
      isChallenge: false, // 是否挑战过
      score: 0
    })
    const getMusicList = async () => {
      try {
        const { data } = await request.post(
          `/api-student/open/activity/info/${route.query.id}`
        )
        if (Array.isArray(data.activityMusicVoList)) {
          state.musicList = data.activityMusicVoList.map(n => {
            n.rankingList = []
            return n
          })
          state.isChallenge = data.activityMusicVoList.filter(n => n.join)
            .length
            ? true
            : false
        }
        img.value = data.subjectUrl
        state.isSignup = data.join ? true : false
      } catch (error) {}
    }
    const getData = async () => {
      try {
        const { data } = await request.get(
          '/api-student/open/activityEvaluationRecord/queryRankingList',
          {
            params: {
              activityPlanId: route.query.id,
              activityEvaluationId:
                state.musicList[state.tabIndex].evaluationId,
              limit: 10
            }
          }
        )
        if (Array.isArray(data.rankingList)) {
          state.musicList[state.tabIndex].rankingList = data.rankingList
        }
        if (data.userActivityRankingVo) {
          state.score = data.userActivityRankingVo.score
        }
      } catch (error) {}
    }
    const img = ref()
    const imgShow = ref(false)
    const imgHeight = ref(100)

    const openActive = () => {
      router.back()
      //   router.replace({
      //     path: '/track-review-activity',
      //     query: {
      //       id: route.query.id
      //     }
      //   })
    }

    onMounted(async () => {
      await getMusicList()
      await getData()
    })
    const user = computed(() => {
      if (!state.musicList[state.tabIndex]) return {} as any
      const userdata = userInfo.user.data
      if (!userdata.userId) return {} as any
      const rank = state.musicList[state.tabIndex]
      const item = rank?.rankingList?.find(n => n.userId == userdata.userId)
      let step = rank?.rankingList?.findIndex(n => n.userId == userdata.userId)
      step = step > -1 ? step + 1 : 0
      return {
        join: rank.join,
        score: item?.score || 0,
        isTop: item ? true : false,
        heardUrl: userdata.heardUrl,
        username: userdata.username,
        userId: userdata.userId,
        step
      }
    })
    const imgRef = ref()
    const userRef = ref()
    return () => (
      <div class={styles.leaderboard}>
        <div class={styles.container}>
          <div class={styles.headImg} ref={imgRef}>
            <Image
              width="100%"
              fit="cover"
              src={img.value}
              onLoad={img => {
                nextTick(() => {
                  const { height } = useRect(imgRef)
                  imgShow.value = true
                  imgHeight.value = height || 100
                })
              }}
              onError={err => {
                console.log(err)
              }}
            />
          </div>
          {imgShow.value && (
            <Tabs
              v-model:active={state.tabIndex}
              class={styles.tabs}
              animated
              swipeable
              titleInactiveColor="rgba(153,152,155,1)"
              titleActiveColor="#fff"
              onChange={index => getData()}
            >
              {state.musicList.map((item: IMusicItem) => {
                return (
                  <Tab title={item.musicSheetName}>
                    <div
                      class={[
                        styles.tabContent,
                        user.value.userId &&
                        (!state.isSignup ||
                          !state.isChallenge ||
                          user.value.join)
                          ? styles.hasUser
                          : null
                      ]}
                      style={{ height: `calc(100vh - ${imgHeight.value}px)` }}
                    >
                      <div class={styles.itemContent}>
                        <div class={styles.item}>
                          <div class={styles.left}>排名</div>
                          <div class={styles.center}>昵称</div>
                          <div class={styles.right}>评分</div>
                        </div>

                        {item.rankingList.map((n: any, index: number) => {
                          const t = (index + 1).toString().padStart(2, '0')
                          return (
                            <div class={styles.item}>
                              <div class={styles.left}>
                                {index == 0 && <Image src={IconLevel} />}
                                {index == 1 && <Image src={IconLevel2} />}
                                {index == 2 && <Image src={IconLevel3} />}
                                {index != 0 && index != 1 && index != 2 && t}
                              </div>
                              <div class={styles.center}>
                                <Image
                                  width="38px"
                                  height="38px"
                                  fit="cover"
                                  round
                                  src={n.userAvatar || IconAvator}
                                />
                                <div class={styles.user}>
                                  <div class={styles.userContent}>
                                    <span class={styles.name}>
                                      {n.username}
                                    </span>
                                    <span class={styles.tag}>
                                      {n.userSubject}
                                    </span>
                                  </div>
                                  <div class={styles.times}>{n.joinDate}</div>
                                </div>
                              </div>
                              <div class={styles.right}>
                                <div class={styles.fraction}>{n.score}分</div>
                                <div class={styles.time}>
                                  第 {n.times} 次评测
                                </div>
                              </div>
                            </div>
                          )
                        })}

                        {!item.rankingList.length && (
                          <Empty
                            image={IconEmtry}
                            description="该曲目暂无排名喔～"
                          />
                        )}
                      </div>
                      <div class="van-safe-area-bottom"></div>
                    </div>
                  </Tab>
                )
              })}
            </Tabs>
          )}
          {user.value.userId &&
            (!state.isSignup ? (
              <div
                ref={userRef}
                class={[styles.activeUser, 'van-safe-area-bottom']}
              >
                <Cell
                  center
                  title={user.value.username}
                  label="您尚未报名参赛"
                  v-slots={{
                    icon: () => (
                      <Image
                        class={styles.avator}
                        fit="cover"
                        round
                        src={user.value.heardUrl || IconAvator}
                      />
                    )
                  }}
                />
              </div>
            ) : !state.isChallenge ? (
              <div
                ref={userRef}
                class={[styles.activeUser, 'van-safe-area-bottom']}
              >
                <Cell
                  center
                  title={user.value.username}
                  label="您尚未评测哦!"
                  v-slots={{
                    icon: () => (
                      <Image
                        class={styles.avator}
                        fit="cover"
                        round
                        src={user.value.heardUrl || IconAvator}
                      />
                    )
                  }}
                />
              </div>
            ) : user.value.join ? (
              <div
                ref={userRef}
                class={[styles.activeUser, 'van-safe-area-bottom']}
              >
                <Cell
                  center
                  title={user.value.username}
                  v-slots={{
                    icon: () => (
                      <Image
                        class={styles.avator}
                        fit="cover"
                        round
                        src={user.value.heardUrl || IconAvator}
                      />
                    ),
                    label: () => {
                      if (user.value.isTop) {
                        return (
                          <div>
                            您的评测已上榜! 当前排名
                            <span style={{ color: '#FA6400' }}>
                              {' '}
                              {user.value.step}
                            </span>
                          </div>
                        )
                      } else {
                        return <div>您的评测暂未上榜，快去挑战吧！</div>
                      }
                    },
                    value: () => {
                      if (!user.value.score && !state.score) {
                        return
                      }
                      return (
                        <span class={styles.num}>
                          {user.value.score || state.score}分
                        </span>
                      )
                    }
                  }}
                />
              </div>
            ) : null)}
        </div>
      </div>
    )
  }
})