131 lines
3.7 KiB
Vue
131 lines
3.7 KiB
Vue
<template>
|
||
<div class="weekly-recommend">
|
||
<div class="page-header">
|
||
<h1>每周热门下载地图</h1>
|
||
<div class="header-subtitle">
|
||
<span class="date-range">{{ currentWeekRange }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="table-container">
|
||
<table class="maps-table">
|
||
<thead>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>预览图</th>
|
||
<th>地图名称</th>
|
||
<th>作者</th>
|
||
<th>下载次数</th>
|
||
<th>收藏次数</th>
|
||
<th>玩家数量</th>
|
||
<th>创建时间</th>
|
||
<th>标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(map, index) in recommendedMaps" :key="map.id" @click="goToMapDetail(map.id)" class="table-row">
|
||
<td class="rank-number">{{ index + 1 }}</td>
|
||
<td class="preview-cell">
|
||
<img :src="map.thumbnail" :alt="map.chinese_name">
|
||
</td>
|
||
<td class="map-name">{{ map.chinese_name }}</td>
|
||
<td>{{ map.user }}</td>
|
||
<td>{{ map.download_count }}</td>
|
||
<td>{{ map.favourite_count }}</td>
|
||
<td>{{ map.player_count }}</td>
|
||
<td>{{ formatDate(map.create_time) }}</td>
|
||
<td>
|
||
<div class="tags">
|
||
<span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { getWeeklyTopMaps } from '../../api/maps.js'
|
||
import '../../assets/styles/common.css'
|
||
import '../../assets/styles/WeeklyRecommend.css'
|
||
|
||
const router = useRouter()
|
||
const recommendedMaps = ref([])
|
||
|
||
// 获取当前周的范围
|
||
const currentWeekRange = computed(() => {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setDate(start.getDate() - 6) // 往前推6天，这样加上今天就是7天
|
||
return `${start.toLocaleDateString('zh-CN')} - 今天 ${end.toLocaleDateString('zh-CN')}`
|
||
})
|
||
|
||
const goToMapDetail = (id) => {
|
||
router.push(`/map/${id}`)
|
||
}
|
||
|
||
const formatDate = (dateString) => {
|
||
return new Date(dateString).toLocaleDateString('zh-CN')
|
||
}
|
||
|
||
const fetchRecommendedMaps = async () => {
|
||
try {
|
||
const maps = await getWeeklyTopMaps()
|
||
|
||
// 计算7天前的日期
|
||
const sevenDaysAgo = new Date()
|
||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 6) // 往前推6天，加上今天就是7天
|
||
|
||
// 过滤出最近7天的地图
|
||
const recentMaps = maps.filter(map => {
|
||
const mapDate = new Date(map.create_time)
|
||
return mapDate >= sevenDaysAgo
|
||
})
|
||
|
||
// 按日期分组
|
||
const groupedMaps = recentMaps.reduce((groups, map) => {
|
||
const date = new Date(map.create_time).toLocaleDateString('zh-CN')
|
||
if (!groups[date]) {
|
||
groups[date] = []
|
||
}
|
||
groups[date].push(map)
|
||
return groups
|
||
}, {})
|
||
|
||
// 对每个日期组内的地图按下载量降序排序
|
||
Object.keys(groupedMaps).forEach(date => {
|
||
groupedMaps[date].sort((a, b) => b.download_count - a.download_count)
|
||
})
|
||
|
||
// 获取所有日期并按降序排序
|
||
const sortedDates = Object.keys(groupedMaps).sort((a, b) =>
|
||
new Date(b) - new Date(a)
|
||
)
|
||
|
||
// 按日期顺序拼接所有地图
|
||
recommendedMaps.value = sortedDates.reduce((acc, date) => {
|
||
return acc.concat(groupedMaps[date])
|
||
}, [])
|
||
} catch (error) {
|
||
console.error('获取推荐地图失败:', error)
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchRecommendedMaps()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.rank-number {
|
||
font-weight: bold;
|
||
color: #1a237e;
|
||
text-align: center;
|
||
width: 50px;
|
||
font-size: 1.1em;
|
||
}
|
||
</style> |