2.1 KiB
2.1 KiB
目标
- 首页 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，确认占位滑块与默认滚动文案显示。 - 在微信小程序/浏览器预览，验证滚动流畅度与样式适配。