35 lines
2.1 KiB
Markdown
35 lines
2.1 KiB
Markdown
## 目标
|
||
- 首页 UI 始终可见：轮播图在无数据时也显示占位滑块；通知始终滚动显示（Marquee）。
|
||
- 接口路径统一为 `/api/app/*`，兼容返回 `{list: [...]}` 与字段 `snake_case`（如 `image_url`）。
|
||
|
||
## 变更范围
|
||
- 文件：`pages/index/index.vue`
|
||
- 保留现有登录弹窗，但不阻断首页数据加载；完善数据清洗与空态展示。
|
||
|
||
## 轮播图（无数据也展示）
|
||
- 始终渲染 `swiper.banner-swiper`，不再用 `v-if` 隐藏容器。
|
||
- 数据存在：按 `banners` 渲染；字段映射 `id`、`image_url|imageUrl|image`、`link_url|linkUrl|link|url`。
|
||
- 数据为空：渲染 3 个占位滑块（`swiper-item` 内用 `<view>` 纯色/渐变背景 + 文案“敬请期待”），避免依赖静态图片资源。
|
||
- URL 清洗：移除反引号与空格，保证 `image_url` 可用。
|
||
|
||
## 通知滚动（Marquee）
|
||
- 始终渲染通知条。
|
||
- 有数据：横向无缝滚动（CSS `@keyframes` + `transform: translateX`），将所有通知拼接为一条长文本，重复一份以实现循环滚动。
|
||
- 无数据：使用默认文案（如“欢迎光临”“最新活动敬请期待”）参与滚动，保证始终有动效。
|
||
|
||
## 活动区
|
||
- 保持当前两列栅格布局；无数据时显示“暂无活动”占位文案；点击仅在 `link` 为内部路径时跳转。
|
||
|
||
## 数据与接口
|
||
- 请求入口统一：`/api/app/notices`、`/api/app/banners`、`/api/app/activities`。
|
||
- 解包：支持 `list|items|data`。
|
||
- 映射：通知 `content|text|title`；轮播图 `image_url|imageUrl|image|img|pic`、`link_url|linkUrl|link|url`；活动 `cover_url|coverUrl|image|img|pic`、`title|name`、`sub_title|subTitle|subtitle|desc|description`。
|
||
|
||
## 交互与空态
|
||
- 未登录/未绑定：弹窗提醒，但首页照常加载并显示占位内容。
|
||
- 点击跳转：内部路径以 `/` 开头才触发 `navigateTo`；避免空链接导致错误。
|
||
|
||
## 验证
|
||
- 模拟后端返回 `{list:[...]}` 含反引号的 `image_url`，确认轮播图正常显示。
|
||
- 清空 `banners` 与 `notices`，确认占位滑块与默认滚动文案显示。
|
||
- 在微信小程序/浏览器预览，验证滚动流畅度与样式适配。 |