WenWuGuanJia

文物管家项目文档

项目概述

厦门文物管家是一个加强文物管理的科技创新平台，打造文物数字化保护的厦门模式，遵循"保护第一、加强管理、挖掘价值、有效利用、让文物活起来"的新时代文物工作方针。

技术栈

• 前端框架: 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的身份验证
• 权限分级：普通用户、志愿者、管理员不同权限

关键接口:

// 用户认证相关接口
login()           // 用户登录
register()        // 用户注册
profile()         // 用户信息
refreshUser()     // 刷新用户信息
checkIn()         // 每日打卡
bindphone()       // 绑定手机号

2. 文物管理系统

核心文件: index_fenbao/GuanLi/, pages/wenWuPage/

功能特性:

• 文物信息展示：支持图片、视频、文字介绍
• 文物分类管理：按地区、类型、年代等分类
• 文物详情查看：包含历史背景、保护状况等
• 文物风采展示：用户可浏览文物相关内容

数据流程:

getContentList()     // 获取文物列表
getContentDetail()   // 获取文物详情
getCulturalRelic()   // 获取文物场景列表
getCulturalDetails() // 获取文物详情页数据

3. 志愿者守护系统

核心文件: pages/shouhu/, shouhu_fenbao/

功能特性:

• 志愿者注册申请：在线申请成为志愿者
• 任务管理：接收、执行、提交巡查任务
• 团队协作：加入志愿者团队，协作完成任务
• 巡查记录：记录文物巡查情况，上传照片和描述
• 排行榜系统：根据活跃度、积分、任务完成率排名

核心业务流程:

// 志愿者管理流程
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/

功能特性:

• 在线答题：文物知识竞答
• 历史记录：查看答题历史
• 排行榜：答题成绩排名
• 礼品兑换：积分兑换奖品

答题流程:

// 答题系统流程
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认证处理
• 请求参数预处理

认证机制:

// 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缓存
• 配置信息缓存

状态同步:

// 状态管理模块
store/
├── index.js        // 主store配置
└── module/
    ├── user.js     // 用户状态管理
    └── examine.js  // 考试状态管理

API接口文档

用户相关接口

// 用户认证
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)            // 发送短信验证码

文物管理接口

// 文物信息
getContentList(data, callback)           // 获取文物列表
getContentDetail(data, callback)         // 获取文物详情
getCulturalRelic(data, callback)         // 获取文物场景列表
getCulturalDetails(data, callback)       // 获取文物详情

// 文物分类
getCulturalRelicCategory(data, callback) // 获取文物分类
getCategoryCascadeList(data, callback)   // 获取级联分类
getCategoryList(data, callback)          // 获取培训分类列表

志愿者管理接口

// 志愿者申请
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)           // 获取团队详情

活动相关接口

// 活动管理
activityLists(data, callback)            // 获取活动列表
activityDetails(data, callback)          // 获取活动详情
activitySignup(data, callback)           // 活动报名
activityScheduleList(data, callback)     // 活动日程列表
activitySignupParams(data, callback)     // 活动报名参数

// 用户活动
getUserSignupActivity(data, callback)         // 获取用户报名活动
getUserSignupActivityDetails(data, callback)  // 获取用户报名活动详情
submitActivitySignupInfo(data, callback)      // 提交活动报名信息

系统配置接口

// 配置信息
getConfig()                              // 获取系统配置
getIndexBanner(data, callback)           // 获取轮播图
getBannerList(data, callback)            // 获取横幅列表

// 通知公告
getNotice(data, callback)                // 获取最新公告
getNewsNotice(data, callback)            // 获取新闻公告

// 统计数据
regionData(data, callback)               // 区域数据统计
cityData(data, callback)                 // 市级数据统计
rankingList(data, callback)              // 排行榜数据

关键配置信息

环境配置

// 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 = '文物管家'

应用配置

// manifest.json 核心配置
{
  "name": "文物管家",
  "appid": "__UNI__45DC458",
  "versionName": "1.0.0",
  "mp-weixin": {
    "appid": ""
  },
  "h5": {
    "domain": "http://demo.usiyi.com/discover_h5/"
  }
}

分包配置

// 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. 项目启动

# 安装依赖(如果有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部署

# 构建H5版本
# 在HBuilderX中选择 发行 -> H5
# 将dist目录内容部署到服务器

2. 微信小程序发布

# 在HBuilderX中选择 发行 -> 微信小程序
# 使用微信开发者工具打开生成的项目
# 提交审核并发布

3. App打包

# 云端打包
# 在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. 性能监控: 添加应用性能监控和错误上报

---

这是一个功能完整、架构清晰的文物管理平台项目，具有良好的扩展性和维护性。通过本文档，开发者可以快速了解项目结构，掌握核心功能，并能够有效地进行开发和维护工作。