77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
# 活动榜单弹窗设计
|
||
|
||
**日期**: 2026-05-14
|
||
**状态**: 已批准
|
||
|
||
## 概述
|
||
|
||
新建 `ActivityRankingModal.vue` 弹窗组件，从 `ThemeBanner` 点击触发，专门显示单活动的排名数据。
|
||
|
||
## 核心功能
|
||
|
||
1. **TOP3 展示** - 排名前三用户卡片（头像、昵称、人气值）
|
||
2. **排名列表** - 第4名及以后，支持滚动加载更多
|
||
3. **当前用户栏** - 固定底部，显示当前用户排名和贡献值
|
||
4. **下拉刷新** - 支持 pull-to-refresh 刷新数据
|
||
5. **单活动模式** - 直接使用传入的 `activityId` 获取数据，无需活动切换
|
||
|
||
## 组件接口
|
||
|
||
### Props
|
||
|
||
| 属性 | 类型 | 必填 | 说明 |
|
||
|------|------|------|------|
|
||
| visible | Boolean | 是 | 弹窗显示状态 |
|
||
| activityId | String \| Number | 是 | 活动ID |
|
||
| starId | String \| Number | 否 | 明星ID，默认从 storage 获取 |
|
||
| currentUser | Object | 否 | 当前用户数据 |
|
||
|
||
### Emits
|
||
|
||
| 事件 | 参数 | 说明 |
|
||
|------|------|------|
|
||
| update:visible | Boolean | 关闭弹窗 |
|
||
| visit | { userId, nickname } | 拜访按钮点击 |
|
||
| view-profile | userId | 查看用户资料 |
|
||
| view-artwork | { artworkId, userId } | 查看作品 |
|
||
|
||
## API 调用（独立实现）
|
||
|
||
使用 `getActivityRankingApi(activityId, starId, page, pageSize)` 获取活动排名数据。
|
||
|
||
响应数据格式复用 RankingModal 的 `transformActivityRankingData` 逻辑：
|
||
|
||
```javascript
|
||
{
|
||
rank: Number,
|
||
userId: String,
|
||
avatar: String,
|
||
nickname: String,
|
||
popularityScore: Number, // total_contribution
|
||
artworkImage: String
|
||
}
|
||
```
|
||
|
||
## 页面结构
|
||
|
||
```
|
||
ActivityRankingModal
|
||
├── 遮罩层（点击关闭）
|
||
├── 弹窗容器
|
||
│ ├── 背景
|
||
│ ├── 头部（活动名称 + 关闭按钮）
|
||
│ ├── 滚动内容区
|
||
│ │ ├── 加载中/错误/空状态
|
||
│ │ ├── TOP3 卡片区
|
||
│ │ ├── 排名列表
|
||
│ │ └── 加载更多
|
||
│ └── 当前用户栏（固定底部）
|
||
```
|
||
|
||
## 样式
|
||
|
||
复用 `RankingModal.vue` 的现有样式主题（渐变背景、卡片样式等）。
|
||
|
||
## 触发方式
|
||
|
||
在 `ThemeBanner` 组件上添加点击事件，打开 `ActivityRankingModal`。 |