feat: 添加 ActivityRankingModal 活动榜单弹窗组件

- 新建 ActivityRankingModal.vue 组件,实现单活动排名展示
- TOP3 展示使用 TOP3Card 组件
- 排名列表使用 RankingListItem 组件
- 支持下拉刷新和滚动加载更多
- 当前用户栏固定底部显示
- ThemeBanner 添加 @tap 事件触发弹窗
- index.vue 集成 ActivityRankingModal

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
zheng020 2026-05-14 13:06:19 +08:00
parent 63b0b0423d
commit 0a09048a85
3 changed files with 1082 additions and 1 deletions

File diff suppressed because it is too large Load Diff

View File

@ -10,7 +10,7 @@
/>
<!-- 内容层 -->
<view class="banner-content">
<view class="banner-content" @tap="handleBannerClick">
<!-- 上半部分标题区域 -->
<view class="title-section">
@ -74,6 +74,12 @@ watch(() => props.target, (newVal) => {
formattedTarget.value = newVal.toLocaleString()
}, { immediate: false })
const emit = defineEmits(['tap'])
const handleBannerClick = () => {
emit('tap')
}
const progressPercent = computed(() => {
if (props.target === 0) return 0
return Math.min((props.current / props.target) * 100, 100)

View File

@ -18,6 +18,7 @@
:current="progressData.current"
:target="progressData.target"
:is-stale-data="isStaleData"
@tap="openRankingModal"
/>
<!-- 实时贡献列表 -->
@ -99,6 +100,16 @@
<button class="retry-button" @click="retryLoad">重试</button>
</view>
</view>
<!-- 排行榜弹窗 -->
<ActivityRankingModal
v-model:visible="rankingModalVisible"
:activity-id="activityId"
:activity-title="currentActivityTitle"
@visit="handleVisitUser"
@view-profile="handleViewUserProfile"
@view-artwork="handleViewArtwork"
/>
</view>
</template>
@ -118,6 +129,7 @@ import ThemeBanner from './components/ThemeBanner.vue'
import ContributionList from './components/ContributionList.vue'
import StageArea from './components/StageArea.vue'
import FloatingBubbles from './components/FloatingBubbles.vue'
import ActivityRankingModal from './components/ActivityRankingModal.vue'
import ActionBar from './components/ActionBar.vue'
const activityType = ref('birthday')
@ -139,10 +151,35 @@ const navExpanded = ref(false)
// ActionBar
const actionBarVisible = ref(false)
//
const rankingModalVisible = ref(false)
const currentActivityTitle = ref('')
function toggleActionBar() {
actionBarVisible.value = !actionBarVisible.value
}
//
function openRankingModal() {
currentActivityTitle.value = config.value?.title || '活动排名'
rankingModalVisible.value = true
}
// 访
function handleVisitUser(data) {
console.log('拜访用户:', data)
}
//
function handleViewUserProfile(data) {
console.log('查看用户资料:', data)
}
//
function handleViewArtwork(data) {
console.log('查看作品:', data)
}
let progressManager = null
const isCompleted = computed(() => progressData.value.current >= progressData.value.target)