# 文物管家项目文档 ## 项目概述 厦门文物管家是一个加强文物管理的科技创新平台，打造文物数字化保护的厦门模式，遵循"保护第一、加强管理、挖掘价值、有效利用、让文物活起来"的新时代文物工作方针。 ## 技术栈 - **前端框架**: UniApp (Vue 2) - **UI组件库**: uView UI、ColorUI - **状态管理**: Vuex - **地图服务**: 腾讯地图 (key: FHEBZ-HYVNS-KGHOD-65O3N-O32P3-5FBI6) - **微信小程序**: AppID: - **构建工具**: Node-sass - **编译器**: UniApp 3.0 ## 项目结构 ``` WenWuGuanJia/ ├── App.vue # 应用入口文件 ├── main.js # 主入口配置 ├── manifest.json # 应用配置清单 ├── pages.json # 页面路由配置 ├── uni.scss # 全局样式变量 ├── ├── answer_pages/ # 答题系统分包 │ ├── examine/ # 考试相关页面 │ │ ├── answer.vue # 答题页面 │ │ ├── history.vue # 历史记录 │ │ ├── matchanswer.vue # 匹配答案 │ │ ├── review.vue # 复习页面 │ │ ├── summary.vue # 总结页面 │ │ └── top.vue # 排行榜 │ ├── gift/ # 礼品兑换系统 │ │ ├── detail.vue # 礼品详情 │ │ ├── exchange.vue # 兑换页面 │ │ ├── express_feed.vue # 物流信息 │ │ ├── index.vue # 礼品首页 │ │ ├── order.vue # 订单列表 │ │ └── order_detail.vue # 订单详情 │ └── user/ # 用户相关 │ ├── autoLogin.vue # 自动登录 │ ├── changeCode.vue # 修改密码 │ ├── changePhone.vue # 修改手机 │ ├── login.vue # 登录页面 │ ├── mine.vue # 个人中心 │ └── tips.vue # 提示页面 │ ├── colorui/ # ColorUI 样式库 │ ├── main.css # 主样式文件 │ ├── icon.css # 图标样式 │ └── animation.css # 动画样式 │ ├── common/ # 公共工具库 │ ├── app.css # 应用样式 │ ├── cache.js # 缓存管理 │ ├── common.css # 通用样式 │ ├── common.scss # SCSS样式 │ ├── fa.mixin.js # 通用混入 │ ├── fa.style.mixin.js # 样式混入 │ ├── fa.weixin.mixin.js # 微信混入 │ ├── share.js # 分享功能 │ ├── util.js # 工具函数 │ └── WXBizDataCrypt.js # 微信数据解密 │ ├── components/ # 自定义组件 │ ├── FuWenBen/ # 富文本编辑器 │ ├── SCimage/ # 图片组件 │ ├── Segmented/ # 分段控制器 │ ├── TouGao/ # 投稿组件 │ ├── fa-array/ # 数组组件 │ ├── fa-array-download/ # 数组下载组件 │ ├── fa-captchaparts/ # 验证码组件 │ ├── fa-check-radio/ # 单选框组件 │ ├── fa-editor/ # 编辑器组件 │ ├── fa-selectpages/ # 页面选择器 │ ├── fa-selects/ # 下拉选择器 │ ├── fa-switch/ # 开关组件 │ ├── fa-upload-file/ # 文件上传 │ ├── fa-upload-image/ # 图片上传 │ ├── mapComponent/ # 地图组件 │ └── quick-cart/ # 快速购物车 │ ├── config/ # 配置文件 │ ├── api.js # API接口定义 │ ├── common.js # 公共配置 │ ├── config.js # 基础配置 │ └── db.js # 数据库配置 │ ├── index_fenbao/ # 首页功能分包 │ ├── GuanLi/ # 管理模块 │ │ ├── GuanLi.vue # 管理首页 │ │ ├── XiangQing.vue # 详情页面 │ │ ├── GouJian.vue # 构建页面 │ │ ├── gengDuoFC.vue # 更多风采 │ │ ├── online-patrol.vue # 在线巡查 │ │ ├── cr-video.vue # 视频播放 │ │ └── zhiYuanGeRen.vue # 志愿者个人 │ ├── HuoHuaLiYong/ # 活化利用 │ │ ├── YanXue/ # 研学模块 │ │ ├── YouJin/ # 尤锦模块 │ │ ├── chanPin/ # 产品模块 │ │ └── waJue/ # 挖掘模块 │ ├── XinWen/ # 新闻资讯 │ ├── XuanJiangYuan/ # 宣讲员管理 │ │ ├── index.vue # 宣讲员首页 │ │ ├── XuanJiangYuan.vue # 宣讲员列表 │ │ ├── bm_page.vue # 报名页面 │ │ ├── ck_page.vue # 查看页面 │ │ ├── xq_page.vue # 详情页面 │ │ ├── xjy_XiangQing.vue # 宣讲员详情 │ │ ├── activity-review-list.vue # 活动审核列表 │ │ └── activity-review-details.vue # 活动审核详情 │ └── fuWu/ # 服务模块 │ ├── FaLv/ # 法律服务 │ ├── zuZhi/ # 组织服务 │ ├── baoMing/ # 报名服务 │ ├── jiJin/ # 基金服务 │ ├── fengCai/ # 风采展示 │ ├── diTu/ # 地图服务 │ └── paiMing/ # 排名服务 │ ├── mixins/ # Vue混入文件 │ ├── auth.js # 认证混入 │ ├── common.js # 通用混入 │ └── goods.js # 商品混入 │ ├── pages/ # 主包页面 │ ├── index/ # 首页 │ │ └── index.vue # 首页主文件 │ ├── shouhu/ # 守护页面 │ │ └── shouhu.vue # 守护主页 │ ├── wenWuPage/ # 文物页面 │ │ └── wenWuPage.vue # 文物展示 │ ├── dongtai/ # 动态页面 │ │ └── dongtai.vue # 动态展示 │ ├── user/ # 用户中心 │ │ ├── index.vue # 用户首页 │ │ ├── login.vue # 登录页面 │ │ └── learn.vue # 学习页面 │ ├── course/ # 课程相关 │ │ ├── index.vue # 课程列表 │ │ ├── detail.vue # 课程详情 │ │ └── rich.vue # 富文本课程 │ ├── schedule/ # 日程安排 │ │ ├── index.vue # 日程列表 │ │ └── detail.vue # 日程详情 │ ├── order/ # 订单相关 │ │ └── preview.vue # 订单预览 │ └── teacher/ # 教师相关 │ └── detail.vue # 教师详情 │ ├── service/ # 服务层 │ ├── api/ # API接口定义 │ │ ├── common.js # 通用接口 │ │ ├── course.js # 课程接口 │ │ ├── examine.js # 考试接口 │ │ ├── gift.js # 礼品接口 │ │ ├── mock.js # 模拟数据 │ │ ├── page.js # 页面接口 │ │ └── user.js # 用户接口 │ ├── config.js # 服务配置 │ └── request/ # 请求封装 │ ├── main.js # 主请求文件 │ └── request.js # 请求类 │ ├── shouhu_fenbao/ # 守护功能分包 │ ├── shouHu/ # 守护模块 │ │ ├── woDe.vue # 我的守护 │ │ ├── touGao.vue # 投稿页面 │ │ ├── tuanDui.vue # 团队管理 │ │ ├── yaoQing.vue # 邀请页面 │ │ └── webview.vue # 网页视图 │ ├── yuJing/ # 预警模块 │ │ └── yuJing.vue # 预警页面 │ ├── xunCha/ # 巡查模块 │ │ ├── xunCha.vue # 巡查页面 │ │ └── jiLu.vue # 记录页面 │ └── chuangGuan/ # 闯关模块 │ ├── daTi.vue # 答题页面 │ └── chuTi.vue # 出题页面 │ ├── static/ # 静态资源 │ ├── img/ # 图片资源 │ └── js/ # JS脚本 │ └── md5.js # MD5加密 │ ├── store/ # 状态管理 │ ├── index.js # Vuex主文件 │ └── module/ # 模块化状态 │ ├── examine.js # 考试状态 │ └── user.js # 用户状态 │ ├── uni_modules/ # UniApp插件模块 │ ├── mp-html/ # HTML解析器 │ ├── sp-editor/ # 富文本编辑器 │ ├── uni-data-picker/ # 数据选择器 │ ├── uni-easyinput/ # 输入框组件 │ ├── uni-forms/ # 表单组件 │ ├── uni-icons/ # 图标组件 │ ├── uni-load-more/ # 加载更多 │ ├── uni-nav-bar/ # 导航栏 │ ├── uv-calendars/ # 日历组件 │ ├── uv-popup/ # 弹窗组件 │ ├── uv-ui-tools/ # UI工具库 │ └── uview-ui/ # uView UI库 │ ├── user_fenbao/ # 用户功能分包 │ ├── myTouGao/ # 我的投稿 │ ├── huoDong/ # 活动管理 │ ├── rongYu/ # 荣誉系统 │ ├── info/ # 信息管理 │ └── houTai/ # 后台管理 │ └── xueYuan_fenbao/ # 学院功能分包 ├── keCheng/ # 课程模块 ├── wenWu/ # 文物模块 ├── zhengCe/ # 政策模块 └── zhuangJia/ # 专家模块 ``` ## 核心功能模块详解 ### 1. 用户认证与权限系统 **核心文件**: `pages/user/login.vue`, `config/api.js` **功能特性**: - 支持多种登录方式：姓名+密码、编号+密码、手机验证码、微信快捷登录 - 自动打卡功能：每日首次进入应用自动打卡 - Token认证机制：基于JWT的身份验证 - 权限分级：普通用户、志愿者、管理员不同权限 **关键接口**: ```javascript // 用户认证相关接口 login() // 用户登录 register() // 用户注册 profile() // 用户信息 refreshUser() // 刷新用户信息 checkIn() // 每日打卡 bindphone() // 绑定手机号 ``` ### 2. 文物管理系统 **核心文件**: `index_fenbao/GuanLi/`, `pages/wenWuPage/` **功能特性**: - 文物信息展示：支持图片、视频、文字介绍 - 文物分类管理：按地区、类型、年代等分类 - 文物详情查看：包含历史背景、保护状况等 - 文物风采展示：用户可浏览文物相关内容 **数据流程**: ```javascript getContentList() // 获取文物列表 getContentDetail() // 获取文物详情 getCulturalRelic() // 获取文物场景列表 getCulturalDetails() // 获取文物详情页数据 ``` ### 3. 志愿者守护系统 **核心文件**: `pages/shouhu/`, `shouhu_fenbao/` **功能特性**: - 志愿者注册申请：在线申请成为志愿者 - 任务管理：接收、执行、提交巡查任务 - 团队协作：加入志愿者团队，协作完成任务 - 巡查记录：记录文物巡查情况，上传照片和描述 - 排行榜系统：根据活跃度、积分、任务完成率排名 **核心业务流程**: ```javascript // 志愿者管理流程 applyVolunteer() // 申请成为志愿者 examineVolunteer() // 审核志愿者申请 getPatrolTask() // 获取巡查任务 submitTask() // 提交任务结果 getPatrolLog() // 获取巡查记录 rankingList() // 获取排行榜数据 ``` ### 4. 活化利用模块 **核心文件**: `index_fenbao/HuoHuaLiYong/` **功能特性**: - 研学活动：文物相关的教育活动组织 - 文创产品：展示文物衍生的创意产品 - 成果展示：展示文物保护和利用成果 - 挖掘利用：文物价值的深度挖掘和展示 **子模块详解**: - **YanXue** (研学): 教育活动管理，报名参与 - **chanPin** (产品): 文创产品展示和销售 - **YouJin** (尤锦): 特色项目展示 - **waJue** (挖掘): 文物价值挖掘展示 ### 5. 宣讲员管理系统 **核心文件**: `index_fenbao/XuanJiangYuan/` **功能特性**: - 宣讲员信息管理：注册、认证、信息维护 - 活动组织：创建和管理宣讲活动 - 活动审核：对宣讲活动进行审核管理 - 报名系统：用户可报名参加宣讲活动 **关键页面**: - `index.vue`: 宣讲员主页 - `bm_page.vue`: 报名页面 - `activity-review-list.vue`: 活动审核列表 - `activity-review-details.vue`: 活动审核详情 ### 6. 答题系统 **核心文件**: `answer_pages/examine/` **功能特性**: - 在线答题：文物知识竞答 - 历史记录：查看答题历史 - 排行榜：答题成绩排名 - 礼品兑换：积分兑换奖品 **答题流程**: ```javascript // 答题系统流程 startExamine() // 开始答题 submitAnswer() // 提交答案 getExamineResult() // 获取答题结果 getExamineHistory() // 获取答题历史 ``` ## 技术架构详解 ### 1. 前端架构 **框架选择**: UniApp + Vue 2 - 支持多端发布：H5、微信小程序、支付宝小程序等 - 组件化开发，提高代码复用率 - 统一的开发体验和API **状态管理**: Vuex - 集中式状态管理 - 用户信息、考试数据等全局状态管理 - 支持模块化管理 **UI组件库**: - **uView UI**: 主要UI组件库，提供丰富的基础组件 - **ColorUI**: 样式库，提供色彩和动画支持 ### 2. 网络请求架构 **请求封装**: `service/request/request.js` - Promise-based 请求封装 - 统一错误处理 - 请求拦截器支持 - 自动重试机制 **API管理**: `config/api.js` - 统一API接口定义 - Token认证处理 - 请求参数预处理 **认证机制**: ```javascript // Token认证流程 methodsToken[] // 需要认证的接口列表 header: { 'token': userToken, '__token__': userToken } ``` ### 3. 分包策略 **主包页面**: - 首页 (`pages/index/`) - 守护页面 (`pages/shouhu/`) - 用户中心 (`pages/user/`) - 文物页面 (`pages/wenWuPage/`) **分包设计**: - `index_fenbao`: 首页功能分包 - `shouhu_fenbao`: 守护功能分包 - `user_fenbao`: 用户功能分包 - `answer_pages`: 答题系统分包 - `xueYuan_fenbao`: 学院功能分包 **预加载策略**: `pages.json`中配置分包预加载，提升用户体验 ### 4. 数据流管理 **本地存储**: `common/cache.js` - 用户信息缓存 - Token缓存 - 配置信息缓存 **状态同步**: ```javascript // 状态管理模块 store/ ├── index.js // 主store配置 └── module/ ├── user.js // 用户状态管理 └── examine.js // 考试状态管理 ``` ## API接口文档 ### 用户相关接口 ```javascript // 用户认证 login(data, callback) // 用户登录 register(data, callback) // 用户注册 third(data, callback) // 第三方登录 wxLogin(data, callback) // 微信登录 logout(data, callback) // 退出登录 // 用户信息 profile(data, callback) // 用户资料 refreshUser(data, callback) // 刷新用户信息 getMainBodyUser(data, callback) // 获取主体用户信息 editMainBodyUser(data, callback) // 编辑用户信息 // 手机相关 bindphone(data, callback) // 绑定手机号 changeMobile(data, callback) // 修改手机号 sendSmsVerify(data, callback) // 发送短信验证码 ``` ### 文物管理接口 ```javascript // 文物信息 getContentList(data, callback) // 获取文物列表 getContentDetail(data, callback) // 获取文物详情 getCulturalRelic(data, callback) // 获取文物场景列表 getCulturalDetails(data, callback) // 获取文物详情 // 文物分类 getCulturalRelicCategory(data, callback) // 获取文物分类 getCategoryCascadeList(data, callback) // 获取级联分类 getCategoryList(data, callback) // 获取培训分类列表 ``` ### 志愿者管理接口 ```javascript // 志愿者申请 applyVolunteer(data, callback) // 申请志愿者 examineVolunteer(data, callback) // 审核志愿者 editApplyVolunteer(data, callback) // 修改志愿者申请 logOffVolunteer(data, callback) // 注销志愿者 // 任务管理 getPatrolTask(data, callback) // 获取巡查任务 submitTask(data, callback) // 提交任务 examineTask(data, callback) // 审核任务 getPatrolTaskDetails(data, callback) // 获取任务详情 getPatrolLog(data, callback) // 获取巡查记录 // 团队管理 joinTeam(data, callback) // 加入团队 getTeamMember(data, callback) // 获取团队成员 removeMemberm(data, callback) // 移除成员 getTeamDetails(data, callback) // 获取团队详情 ``` ### 活动相关接口 ```javascript // 活动管理 activityLists(data, callback) // 获取活动列表 activityDetails(data, callback) // 获取活动详情 activitySignup(data, callback) // 活动报名 activityScheduleList(data, callback) // 活动日程列表 activitySignupParams(data, callback) // 活动报名参数 // 用户活动 getUserSignupActivity(data, callback) // 获取用户报名活动 getUserSignupActivityDetails(data, callback) // 获取用户报名活动详情 submitActivitySignupInfo(data, callback) // 提交活动报名信息 ``` ### 系统配置接口 ```javascript // 配置信息 getConfig() // 获取系统配置 getIndexBanner(data, callback) // 获取轮播图 getBannerList(data, callback) // 获取横幅列表 // 通知公告 getNotice(data, callback) // 获取最新公告 getNewsNotice(data, callback) // 获取新闻公告 // 统计数据 regionData(data, callback) // 区域数据统计 cityData(data, callback) // 市级数据统计 rankingList(data, callback) // 排行榜数据 ``` ## 关键配置信息 ### 环境配置 ```javascript // config/config.js export const baseUrl = 'https://wwgj.wenlvti.net/' export const baseApiUrl = 'https://wwgj.wenlvti.net/api/' export const baseLogo = 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/logo.png' export const title = '文物管家' ``` ### 应用配置 ```json // manifest.json 核心配置 { "name": "文物管家", "appid": "__UNI__45DC458", "versionName": "1.0.0", "mp-weixin": { "appid": "" }, "h5": { "domain": "http://demo.usiyi.com/discover_h5/" } } ``` ### 分包配置 ```json // pages.json 分包配置示例 { "subPackages": [ { "root": "index_fenbao/XuanJiangYuan", "pages": [ {"path": "index"}, {"path": "bm_page"}, {"path": "XuanJiangYuan"} ] } ], "preloadRule": { "pages/index/index": { "network": "all", "packages": ["index_fenbao/fuWu/FaLv"] } } } ``` ## 开发指南 ### 1. 环境要求 - **Node.js**: >= 12.0.0 - **HBuilderX**: 最新版本 - **微信开发者工具**: (如需开发微信小程序) ### 2. 项目启动 ```bash # 安装依赖(如果有package.json) npm install # 在HBuilderX中打开项目 # 选择运行到对应平台 ``` ### 3. 开发规范 **命名规范**: - 页面文件：使用驼峰命名，如 `xiangQing.vue` - 组件：使用帕斯卡命名，如 `MapComponent.vue` - API方法：使用驼峰命名，如 `getUserInfo()` **目录结构规范**: - 主包页面放在 `pages/` 目录 - 分包页面按功能模块组织 - 公共组件放在 `components/` 目录 - 工具函数放在 `common/` 目录 **代码规范**: - 使用 ES6+ 语法 - 统一使用 Promise 处理异步操作 - 组件需要包含 `name` 属性 - 合理使用 Vue 生命周期 ### 4. 调试指南 **H5调试**: - 在浏览器中直接调试 - 使用浏览器开发者工具 **微信小程序调试**: - 使用微信开发者工具 - 注意小程序特有的限制和API **真机调试**: - 使用HBuilderX的真机调试功能 - 注意权限申请和平台差异 ## 部署指南 ### 1. H5部署 ```bash # 构建H5版本 # 在HBuilderX中选择 发行 -> H5 # 将dist目录内容部署到服务器 ``` ### 2. 微信小程序发布 ```bash # 在HBuilderX中选择 发行 -> 微信小程序 # 使用微信开发者工具打开生成的项目 # 提交审核并发布 ``` ### 3. App打包 ```bash # 云端打包 # 在HBuilderX中选择 发行 -> App云打包 # 配置相应的证书和密钥 # 等待打包完成并下载安装包 ``` ## 维护指南 ### 1. 代码维护 - 定期检查和更新依赖库 - 遵循代码审查流程 - 保持代码风格一致性 - 及时修复已知问题 ### 2. 数据维护 - 定期备份重要数据 - 监控API接口性能 - 优化数据库查询 - 处理异常数据 ### 3. 用户反馈 - 建立用户反馈收集机制 - 及时响应用户问题 - 定期分析用户行为数据 - 持续优化用户体验 ## 常见问题 ### 1. 登录问题 **问题**: 用户登录失败 **解决方案**: - 检查网络连接 - 验证用户名密码 - 检查Token是否过期 - 查看服务器日志 ### 2. 分包加载问题 **问题**: 分包页面无法访问 **解决方案**: - 检查pages.json配置 - 确认分包路径正确 - 检查预加载配置 - 重新编译项目 ### 3. 权限问题 **问题**: 某些功能无法使用 **解决方案**: - 检查用户权限等级 - 确认接口权限配置 - 验证Token有效性 - 联系管理员分配权限 ### 4. 性能问题 **问题**: 应用加载缓慢 **解决方案**: - 优化图片资源大小 - 使用分包预加载 - 减少不必要的API请求 - 使用本地缓存 ## 项目特色 1. **多端适配**: 一套代码，多平台运行，包括H5、微信小程序、支付宝小程序等 2. **分包优化**: 合理的分包策略，提升应用加载速度和用户体验 3. **权限管理**: 完善的权限体系，支持不同角色的差异化功能 4. **数据安全**: 完整的数据加密和权限验证机制 5. **用户体验**: 优秀的UI设计和交互体验 6. **功能完整**: 涵盖文物管理的各个方面，功能全面 ## 扩展建议 1. **移动端优化**: 针对移动设备进一步优化交互体验 2. **离线功能**: 添加离线数据缓存和同步功能 3. **推送通知**: 集成消息推送功能 4. **多语言支持**: 添加国际化支持 5. **数据分析**: 集成用户行为分析工具 6. **性能监控**: 添加应用性能监控和错误上报 --- 这是一个功能完整、架构清晰的文物管理平台项目，具有良好的扩展性和维护性。通过本文档，开发者可以快速了解项目结构，掌握核心功能，并能够有效地进行开发和维护工作。