完成业务与模板页面：微课、学习小组等
本节展示知识付费小程序各业务页面的最终实现效果，讲解关键实现点，包括学习计划的渐变色按钮、模态框交互、uni-CMS article 集成、uview-plus 评论模板的使用，以及音视频模板页面的概览。
学习页面
功能模块
学习页面包含以下区域：
- 学习统计：学习时长、完成课程数等
- 学习计划：可添加和定制的计划列表
- 学习小组：社交学习功能
添加计划
点击"添加计划"后弹出选择界面，可以：
- 选择计划类型（视频、图文、音频等）
- 选择课程章节
- 保存计划到列表
渐变色按钮
学习小组中的"加入小组"按钮使用了 CSS 渐变：
<template>
<view class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-4 py-2 rounded-full">
加入小组
</view>
</template>
vue
CSS 渐变语法（UnoCSS 写法）：
bg-gradient-to-r → 从左到右的线性渐变
from-blue-500 → 起始颜色（蓝色）
to-purple-500 → 结束颜色（紫色）
text
对应原生 CSS：
background: linear-gradient(90deg, #3b82f6, #a855f7);
css
加入小组模态框
使用 uview-plus 的 u-popup 组件实现模态框：
<template>
<u-popup :show="showJoinModal" mode="center">
<view class="p-6">
<text class="font-bold text-lg mb-4">加入学习小组</text>
<!-- 小组信息 -->
<up-button type="primary" @click="handleJoin">加入</up-button>
</view>
</u-popup>
</template>
vue
精品微课页面
- 顶部：tabBar（全部/视频/图文）
- 内容区：复用 vp-course-item 组件的列表
- 底部：无限滚动加载（上拉加载更多）
每日一刻页面
uni-CMS article 集成
每日一刻直接使用了 uni-CMS article 组件：
- 列表页：展示文章标题、封面图、摘要
- 搜索页：全文搜索
- 详情页：文章正文渲染
文章详情页
文章详情页结构：
- 顶部：文章封面图
- 中部：文章正文（富文本渲染）
- 底部：card 组件展示推荐课程
- 评论：使用 uview-plus 的 comments 模板
uview-plus 评论模板
uview-plus 提供了完整的评论列表模板，可直接使用：
评论列表模板功能：
├── 评论展示（头像、昵称、内容、时间）
├── 评论回复
├── 点赞功能
└── 评论输入框
text
在模板基础上可扩展：
- 收藏按钮
- 分享按钮
- 评论排序（最新/最热）
音频模板页面
音频页面结构较简单：
- 播放/暂停按钮
- 播放时间（当前/总时长）
- 课程图文介绍
- 推荐课程
- 评论列表（复用评论模板）
注意：小程序端不允许销售虚拟商品，音频课程的付费解锁需要通过 H5 页面或配套实体商品实现。
视频模板页面
视频页面使用 uni-app 内置的 video 组件：
- 视频播放器（含弹幕功能）
- 课程章节横向滚动选择
- 评论区
- 问答区
默认模板（课程详情）
课程详情页是最复杂的页面，包含三个核心区域：
课程详情页
├── 图文详情（文章内容介绍）
├── 课程目录
│ ├── 章节列表（展开/收起）
│ ├── 类型标记（视频/图文/音频）
│ ├── 试看标记
│ └── 付费锁定标记
└── 作者介绍
text
后续重点
本节展示的页面样式已全部实现，后续重点转向：
- 音视频组件深入：音频 API 的完整使用、视频组件的高级配置
- 数据对接：将静态页面与云数据库/后台 API 对接
- 支付集成：实现课程购买流程
完整的页面实现代码可在课程 Git 仓库中查看和下载。
↑