gxt_app/pages/score/ranking.uvue

<template>
  <uni-navbar-lite :showLeft="true" title="排名详情"></uni-navbar-lite>
  <view class="ranking-page">
    <!-- 排名列表 -->
    <common-list
      :dataList="rankingList"
      :loading="loading"
      :refreshing="refreshing"
      :hasMore="false"
      @refresh="handleRefresh"
      class="list-with-padding"
    >
      <template #default="{ item, index }">
        <view class="ranking-item">
          <view class="ranking-info">
            <view class="ranking-position">
              <view class="position-circle" :class="getPositionClass(index as number)">
                  <text class="position-text">{{ (item as UTSJSONObject).get('rank').toString() }}</text>
              </view>
            </view>
            <view class="user-info">
              <text class="user-name" :style="{ color: (item as UTSJSONObject).get('nickName') == currentUserNickName ? '#ff0000' : '#333333' }">{{ (item as UTSJSONObject).get('nickName') as string }}</text>
              <text class="user-dept">{{ (item as UTSJSONObject).get('deptName') as string }}</text>
            </view>
          </view>
          <view class="score-info">
              <text class="score-value">{{ formatScore((item as UTSJSONObject).get('finalScore') as number | null) }}</text>
          </view>
        </view>
      </template>
    </common-list>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { selectHomePageData } from '@/api/index/index'

// 数据状态
const loading = ref<boolean>(false)
const refreshing = ref<boolean>(false)

// 排名类型 (dept, center, company)
const rankingType = ref<string>('')
const rankingTypeName = ref<string>('')

// 排名列表数据
const rankingList = ref<UTSJSONObject[]>([]) 

// 当前用户昵称
const currentUserNickName = ref<string>('')

// 获取排名数据
const loadRankingData = async (): Promise<void> => {
	try {
		loading.value = true
		refreshing.value = true

		const response = await selectHomePageData()
		if (response != null) {
		  const respObj = response as UTSJSONObject
		  const data = respObj['data'] as UTSJSONObject
		  
		  // 保存当前用户昵称
		  currentUserNickName.value = data.get('nickName') as string
		 console.log("当前用户昵称:", currentUserNickName.value)
		  
		  // 根据类型获取相应的排名数据
		  let rawData: UTSJSONObject[] = [] 
		  const type = rankingType.value;
		   
		  if (type == 'dept' && data.get('scoreDept') != null) { 
			const deptData = data.get('scoreDept'); 
			if (Array.isArray(deptData)) {
			  rawData = deptData as UTSJSONObject[];
			}
		  } else if (type == 'center' && data.get('scoreCenter') != null) { 
			const centerData = data.get('scoreCenter'); 
			if (Array.isArray(centerData)) {
			  rawData = centerData as UTSJSONObject[];
			}
		  } else if (type == 'company' && data.get('scoreCompany') != null) { 
			const companyData = data.get('scoreCompany'); 
			if (Array.isArray(companyData)) {
			  rawData = companyData as UTSJSONObject[];
			}
		  } else {
			  console.log("没有匹配到任何分支") 
		  } 
		  // 按照分数排序
		  rawData.sort((a: UTSJSONObject, b: UTSJSONObject): number => {
			const scoreA = (a['finalScore'] as number | null) ?? 0
			const scoreB = (b['finalScore'] as number | null) ?? 0
			return scoreB - scoreA
		  })

		  // 处理排名（相同分数排名相同）
		  const processedData: UTSJSONObject[] = []
		  rawData.forEach((item: UTSJSONObject, index: number) => {
			let rank = index + 1

			// 如果当前项分数与前一项相同，则排名也相同
			if (index > 0) {
			  const prevScore = (rawData[index - 1]['finalScore'] as number | null) ?? 0
			  const currentScore = (item['finalScore'] as number | null) ?? 0

			  if (currentScore === prevScore) {
				// 找到前一个处理后的项的排名
				rank = (processedData[processedData.length - 1]['rank'] as number)
			  }
			} 
			processedData.push({
			  ...item,
			  'rank': rank
			})
		  }) 
		  rankingList.value = processedData
		}
	} catch (error) {
		console.error('获取排名数据失败:', error)
	} finally {
		loading.value = false
		refreshing.value = false
	}
}

const formatScore = (score: number | null): string => {
	if (score === null) return '0.00'
	return score.toFixed(2)
}

// 获取排名位置的样式类
const getPositionClass = (index: number): string => {
	if (index == 0) {
		return 'first'
	} else if (index == 1) {
		return 'second'
	} else if (index == 2) {
		return 'third'
	}
	return 'other'
}

// 下拉刷新
const handleRefresh = (): void => {
	loadRankingData()
}

// 页面加载时获取参数
onLoad((options: UTSJSONObject | null) => {
	if (options != null && options['type'] != null) {
		const typeVal = options['type'] as string
		rankingType.value = typeVal 
		/* switch(rankingType.value) {
		  case 'dept':
			rankingTypeName.value = '部门'
			break
		  case 'center':
			rankingTypeName.value = '中心'
			break
		  case 'company':
			rankingTypeName.value = '公司'
			break
		  default:
			rankingTypeName.value = '排名'
		} */ 
		loadRankingData()
	}
})
</script>

<style lang="scss">
.ranking-page {
  flex: 1;
  background-color: #e8f0f9;
}

.ranking-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  margin: 12rpx 30rpx;
  border-radius: 16rpx;
}

.ranking-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.ranking-position {
  margin-right: 24rpx;
}

.position-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.position-circle.first {
  //background-color: #ffd700; /* 金色 */
}

.position-circle.second {
  //background-color: #c0c0c0; /* 银色 */
}

.position-circle.third {
  //background-color: #cd7f32; /* 铜色 */
}

.position-circle.other {
  //background-color: #e0e0e0;
}

.position-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.user-name {
  font-size: 30rpx;
  color: #333333;
  font-weight: bold;
  margin-right: 20rpx;
}

.user-dept {
  font-size: 30rpx;
  color: #666666;
}

.score-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.score-value {
  font-size: 30rpx;
  font-weight: bold;
  color: #165dff;
}

// 添加底部填充的类
.list-with-padding {
  padding-bottom: 40rpx;
}
</style>