文物管家-前端

lzj a032601326 更新应用配置和文档，优化活动信息展示样式		4 일 전
answer_pages	2a49418347 文物管家	1 년 전
colorui	2a49418347 文物管家	1 년 전
common	2a49418347 文物管家	1 년 전
components	3adfe70628 修改一些志愿者相关的bug	1 년 전
config	e290e0a2fe 同步代码	1 개월 전
index_fenbao	a032601326 更新应用配置和文档，优化活动信息展示样式	4 일 전
mixins	2a49418347 文物管家	1 년 전
node_modules	2a49418347 文物管家	1 년 전
pages	a032601326 更新应用配置和文档，优化活动信息展示样式	4 일 전
service	2a49418347 文物管家	1 년 전
shouhu_fenbao	0c2546f127 巡查页按要求添加弹出对话框	7 달 전
static	810e57aef0 文物跑对接	1 년 전
store	baa596953e 修改接口参数；增加测试报名页面	1 개월 전
uni_modules	baa596953e 修改接口参数；增加测试报名页面	1 개월 전
user_fenbao	f0c0c300d2 增加个人活动信息，优化部分信息展示	1 년 전
xueYuan_fenbao	2a49418347 文物管家	1 년 전
.gitignore	2a49418347 文物管家	1 년 전
1.js	baa596953e 修改接口参数；增加测试报名页面	1 개월 전
App.vue	2a49418347 文物管家	1 년 전
README.md	a032601326 更新应用配置和文档，优化活动信息展示样式	4 일 전
main.js	2a49418347 文物管家	1 년 전
manifest.json	0c2e2c38de 20260305更新	1 주 전
pages.json	baa596953e 修改接口参数；增加测试报名页面	1 개월 전
uni.scss	2a49418347 文物管家	1 년 전

文物管家项目文档

项目概述

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

技术栈

前端框架: 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请求
使用本地缓存

项目特色

多端适配: 一套代码，多平台运行，包括H5、微信小程序、支付宝小程序等
分包优化: 合理的分包策略，提升应用加载速度和用户体验
权限管理: 完善的权限体系，支持不同角色的差异化功能
数据安全: 完整的数据加密和权限验证机制
用户体验: 优秀的UI设计和交互体验
功能完整: 涵盖文物管理的各个方面，功能全面

扩展建议

移动端优化: 针对移动设备进一步优化交互体验
离线功能: 添加离线数据缓存和同步功能
推送通知: 集成消息推送功能
多语言支持: 添加国际化支持
数据分析: 集成用户行为分析工具
性能监控: 添加应用性能监控和错误上报

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

README.md

文物管家项目文档

项目概述

技术栈

项目结构

核心功能模块详解

1. 用户认证与权限系统

2. 文物管理系统

3. 志愿者守护系统

4. 活化利用模块

5. 宣讲员管理系统

6. 答题系统

技术架构详解

1. 前端架构

2. 网络请求架构

3. 分包策略

4. 数据流管理

API接口文档

用户相关接口

文物管理接口

志愿者管理接口

活动相关接口

系统配置接口

关键配置信息

环境配置

应用配置

分包配置

开发指南

1. 环境要求

2. 项目启动

3. 开发规范

4. 调试指南

部署指南

1. H5部署

2. 微信小程序发布

3. App打包

维护指南

1. 代码维护

2. 数据维护

3. 用户反馈

常见问题

1. 登录问题

2. 分包加载问题

3. 权限问题

4. 性能问题

项目特色

扩展建议