更新记录

V1.0.0（2026-11-10） 下载此版本

1. 百年首页 轮播 Banner、快捷入口、焦点推荐、统计数据 新闻资讯列表 / 详情（正文 + 外链 webview） 校庆日程与倒计时

2. 校史频道 学校概况、沿革时间轴、两校区、荣誉与外链 校史老照片时间轴（按届别 / 年份筛选） 老照片投稿独立页：选图上传、届别班级选择、地点选择；未登录可匿名投稿（提前提示）

3. 校友圈 动态 Feed + 话题筛选 + 祝福弹幕 图文发帖（文字 + 最多 9 图 + 话题） 与祝福墙数据可合并展示

4. 雷中角落（校友地图） 城市分布地图浏览 登录后点亮城市并留言，形成祝福光带

5. 我的 / 账号 游客 / 登录双态 短信登录 + 账号密码登录（SM2 加密） 完善 / 编辑校友资料（届别、城市、行业、单位等选择器） 校庆名片生成与保存 校友通讯录（游客仅看姓名届别，详情需登录且资料完善） 退出登录（GET /auth/c/doLogout）

6. 其它 纪念海报、祝福墙、活动详情 统一请求封装、Token 鉴权、软提示 SoftToast、确认弹窗 AppDialog 媒体地址自动把后端 localhost 映射到当前环境

平台兼容性

百年校庆 · 校友端（UniApp Vue3）

面向学校百年校庆 / 校友会场景的 C 端前端模板。基于 uni-app + Vue3，可编译到 App、微信小程序、H5。内置登录鉴权、校史展示、校友圈图文、老照片征集、校友地图点亮、通讯录、校庆名片等完整业务闭环，对接常见 Snowy / 自研 Java 后台接口风格，改配置即可联调。

适用场景

• 中小学 / 高校建校周年校庆小程序 / App
• 校友会、校友中心运营端（C 端）
• 校史宣传 + 校友互动 + 活动日程一体化门户

兼容平台

技术栈：Vue3 · uni-app · scss · 原生组件

功能亮点

1. 百年首页

• 轮播 Banner、快捷入口、焦点推荐、统计数据
• 新闻资讯列表 / 详情（正文 + 外链 webview）
• 校庆日程与倒计时

2. 校史频道

• 学校概况、沿革时间轴、两校区、荣誉与外链
• 校史老照片时间轴（按届别 / 年份筛选）
• 老照片投稿独立页：选图上传、届别班级选择、地点选择；未登录可匿名投稿（提前提示）

3. 校友圈

• 动态 Feed + 话题筛选 + 祝福弹幕
• 图文发帖（文字 + 最多 9 图 + 话题）
• 与祝福墙数据可合并展示

4. 雷中角落（校友地图）

• 城市分布地图浏览
• 登录后点亮城市并留言，形成祝福光带

5. 我的 / 账号

• 游客 / 登录双态
• 短信登录 + 账号密码登录（SM2 加密）
• 完善 / 编辑校友资料（届别、城市、行业、单位等选择器）
• 校庆名片生成与保存
• 校友通讯录（游客仅看姓名届别，详情需登录且资料完善）
• 退出登录（GET /auth/c/doLogout）

6. 其它

• 纪念海报、祝福墙、活动详情
• 统一请求封装、Token 鉴权、软提示 SoftToast、确认弹窗 AppDialog
• 媒体地址自动把后端 localhost 映射到当前环境

目录结构

├── pages/                    # 业务页面
│   ├── index/                # 首页
│   ├── school/               # 校史
│   ├── alumni-circle/        # 校友圈
│   ├── service/              # 雷中角落
│   ├── mine/                 # 我的
│   ├── gallery/              # 老照片 + 投稿
│   ├── login/ profile/       # 登录 / 完善资料
│   ├── card/ contacts/       # 名片 / 通讯录
│   ├── news/ events/ poster/ # 新闻 / 日程 / 海报
│   └── interact/             # 祝福墙
├── common/
│   ├── api/                  # 接口层（按模块拆分）
│   ├── auth.js               # 登录态 / requireLogin / requireProfile
│   ├── config.js             # ★ 环境配置（只改这里）
│   ├── request.js            # 统一请求
│   ├── softToast.js          # 提示与错误中文化
│   └── mock.js               # 接口失败兜底数据
├── components/               # SoftToast、AppDialog 等
├── static/                   # 静态资源 / Tab 图标
├── pages.json                # 路由与 TabBar
└── manifest.json

快速开始

1. 导入项目

使用 HBuilderX 打开本项目，或用 CLI 创建 uni-app Vue3 工程后合并源码。

2. 配置环境

编辑 common/config.js：

export const ENV = {
  // 业务接口根地址（不要末尾斜杠）
  apiBase: 'https://your-api-domain.com',
  // 文件服务根地址（下载 / 上传）
  fileOrigin: 'https://your-file-domain.com',
  timeout: 15000,
  // 账号密码登录用 SM2 公钥（与后端一致）
  sm2PublicKey: '04....'
}

真机调试请填局域网 IP，不要用 localhost。

3. 运行

• HBuilderX：运行到浏览器 / 微信开发者工具 / 手机模拟器
• 微信小程序：在 manifest.json → mp-weixin 填写 appid

4. 主题色

项目默认校庆气质色板（可在 uni.scss / 页面 scss 中统一替换）：

主要接口约定（C 端）

以下为前端已对接路径，可按自有后台微调 common/api/*。

请求头默认附带：token、Authorization: Bearer {token}。

登录与权限说明

相关工具：requireLogin(from)、requireProfile(from)（common/auth.js）。

二次开发建议

1. 只改配置联调：先改 common/config.js，再按后台字段微调 common/api/*.js 的 map 函数。
2. 换校名 / 文案：搜索「雷州一中」「雷州市第一中学」批量替换；静态图在 static/。
3. Tab 增减：改 pages.json 的 tabBar.list 与对应页面。
4. 接口失败兜底：common/mock.js 仅作演示；上线建议改为空态提示，避免展示假数据。
5. 部分能力仍可增强：班级归队真实数据、动态点赞/评论接口、头像上传等，可按后台能力继续扩展。

注意事项

1. 账号密码登录依赖后端 SM2 公钥，必须与服务端一致。
2. App / 真机访问局域网接口时，注意清文本流量与 ATS 配置（工程已放宽调试用 HTTP）。
3. 图片上传依赖文件服务与登录 Token；若匿名上传被后端拒绝，前端会提示去登录。
4. 请勿将生产环境密钥、真实校友数据提交到公开仓库。

版本信息

• 版本：1.0.0
• 框架：uni-app（Vue3）
• 示例主题：雷州市第一中学百年校庆（1926—2026）

更新日志

v1.0.0

• 五频道校庆 C 端完整页面与接口封装
• 短信 / 账号登录、资料完善、退出登录
• 校友圈图文发帖、老照片投稿（支持匿名提示 + 选择器）
• 角落点亮、通讯录、名片、海报、祝福墙等业务模块

反馈

如需对接自有后台、换皮定制或增加报名 / 支付等模块，可在插件评论区留言或私信作者说明接口文档。

感谢使用。