# shizihui

**Repository Path**: front_lss/shizihui

## Basic Information

- **Project Name**: shizihui
- **Description**: 枣庄红十字会
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-25
- **Last Updated**: 2025-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 红十字会志愿者管理系统

## 项目简介

这是一个基于uni-app开发的红十字会志愿者管理系统，支持多端运行（H5、小程序、App）。

## 功能特性

### 1. 用户管理
- 用户登录注册
- 个人中心管理
- VIP会员申请

### 2. 志愿服务
- 无偿献血信息查询
- 造血干细胞捐献
- 器官捐献信息

### 3. VIP申请表单
- 完整的个人信息填写
- 电子签名功能
- 表单验证
- 数据提交

### 志愿者申请功能
- **状态管理**: 支持志愿者申请的状态跟踪
  - `auditStatus = 0`: 审核中
  - `auditStatus = 1`: 审核通过
  - `auditStatus = 2`: 审核拒绝

- **数据回显**: 被拒绝的申请可以重新编辑并提交
- **表单验证**: 完整的表单验证功能
- **状态显示**: 根据申请状态显示不同的界面和按钮

## 技术栈

- **框架**: uni-app (Vue 3)
- **样式**: SCSS
- **组件**: 自定义组件
- **验证**: 自定义验证工具

## 项目结构

```
shizihui/
├── components/          # 组件目录
│   ├── signature/      # 电子签名组件
│   └── mp-html/        # HTML解析组件
├── pages/              # 页面目录
│   ├── index/          # 首页相关
│   ├── login/          # 登录页面
│   ├── blood/          # 献血相关
│   ├── zaogan/         # 造干捐献
│   ├── qiguan/         # 器官捐献
│   ├── my/             # 个人中心
│   ├── volunteer/      # 志愿者相关
│   └── my/             # 个人中心
├── static/             # 静态资源
├── utils/              # 工具函数
│   └── validation.js   # 表单验证
├── App.vue             # 应用入口
├── main.js             # 主入口
├── manifest.json       # 应用配置
├── pages.json          # 页面配置
└── uni.scss            # 全局样式
```

## 主要功能说明

### VIP申请表单

#### 必填项
- 姓名
- 性别（下拉选择）
- 出生年月（日期选择）
- 民族（下拉选择）
- 工作电话（手机号格式验证）
- 联系电话（手机号格式验证）
- 政治面貌（下拉选择）
- 加入红会（下拉选择）
- 电子签名

#### 选填项
- 电子邮箱（格式验证）
- 地址
- 职业
- 文化程度（下拉选择）

#### 表单验证
- 实时字段验证
- 手机号格式校验
- 邮箱格式校验
- 必填项验证
- 提交前完整验证

### 电子签名功能
- 手写签名支持
- 清除重签功能
- 签名保存
- 跨平台兼容

### 志愿者申请流程
1. 用户进入志愿者列表页面
2. 系统检查用户志愿者申请状态
3. 根据状态显示相应按钮：
   - 未申请：显示"加入志愿者"
   - 审核中：显示"审核中"
   - 已通过：显示"已是志愿者"
   - 被拒绝：显示"重新申请"
4. 点击申请按钮进入详情页面
5. 详情页面根据状态显示不同内容：
   - 审核通过：显示"已是志愿者"，表单只读
   - 被拒绝：显示拒绝原因，表单可编辑
   - 审核中：显示提示信息，表单只读

### 表单字段
- 姓名（必填）
- 性别（必填，1=男，2=女）
- 所在区（市）（必填）
- 民族
- 出生年月
- 身份证号（必填）
- 电话号码（必填）
- 职业
- 意愿志愿服务领域（必填，最多4项）

## 安装和运行

### 环境要求
- Node.js 14+
- HBuilderX 或 VS Code

### 安装依赖
```bash
npm install
```

### 运行项目
1. 使用HBuilderX打开项目
2. 选择运行到对应平台（H5、小程序、App）
3. 或使用命令行：
```bash
# H5
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# App
npm run dev:app
```

## 开发说明

### 添加新页面
1. 在`pages`目录下创建页面文件
2. 在`pages.json`中配置页面路由
3. 配置页面样式和导航栏

### 表单验证
使用`utils/validation.js`中的验证函数：
```javascript
import { validatePhone, validateEmail, validateRequired } from '@/utils/validation.js'
```

### 组件开发
- 组件放在`components`目录下
- 使用Vue 3 Composition API
- 支持Props和Emits

## 注意事项

1. **跨平台兼容性**: 使用uni-app的条件编译处理平台差异
2. **表单验证**: 所有必填项都有相应的验证规则
3. **电子签名**: 支持触摸和鼠标操作
4. **样式适配**: 使用rpx单位确保多端适配

## 更新日志

### v1.0.0
- 完成基础功能开发
- 实现VIP申请表单
- 添加电子签名功能
- 完善表单验证

## 联系方式

如有问题或建议，请联系开发团队。

## 登录状态管理功能

### 功能特性

1. **自动登录状态检查** - 应用启动时自动检查登录状态
2. **登录信息持久化** - 登录成功后自动保存用户信息和token
3. **路由守卫** - 需要登录的页面会自动跳转到登录页
4. **Token过期检查** - 自动检查token是否过期
5. **退出登录** - 支持安全退出登录

### 使用方法

#### 1. 登录页面
```javascript
import { userLogin, sendSmsCode } from '@/utils/api.js'
import { saveLoginInfo } from '@/utils/user.js'

// 登录成功后保存信息
const handleLogin = async () => {
  const res = await userLogin({
    phone: formData.phone,
    password: formData.code
  })
  
  if (res.code === 200) {
    // 保存登录信息
    saveLoginInfo({
      token: res.data.token,
      userInfo: res.data.userInfo
    })
  }
}
```

#### 2. 检查登录状态
```javascript
import { isLoggedIn, getUserInfo } from '@/utils/user.js'

// 检查是否已登录
if (isLoggedIn()) {
  const userInfo = getUserInfo()
  console.log('用户信息:', userInfo)
}
```

#### 3. 退出登录
```javascript
import { logout } from '@/utils/auth.js'

// 退出登录
logout()
```

#### 4. 在页面中使用
```javascript
import { ref, onMounted } from 'vue'
import { getUserInfo } from '@/utils/user.js'

const userInfo = ref(null)

onMounted(() => {
  userInfo.value = getUserInfo()
})
```

### 文件结构

- `utils/user.js` - 用户状态管理工具
- `utils/auth.js` - 登录状态检查和路由守卫
- `utils/api.js` - API接口封装（包含认证头部）
- `pages/login/index.vue` - 登录页面
- `pages/my/index.vue` - 个人中心页面

### 配置说明

1. **需要登录的页面** - 在 `utils/auth.js` 中的 `AUTH_PAGES` 数组中配置
2. **公开页面** - 在 `utils/auth.js` 中的 `PUBLIC_PAGES` 数组中配置
3. **Token过期时间** - 在 `utils/user.js` 中的 `isTokenExpired` 函数中配置

### 注意事项

1. 登录成功后会自动跳转到首页
2. 未登录用户访问需要认证的页面会自动跳转到登录页
3. Token过期后会自动清除登录信息并跳转到登录页
4. 所有API请求会自动携带认证头部 

### 主要页面
- `/pages/volunteer/index.vue`: 志愿者列表页面
- `/pages/volunteer/detail.vue`: 志愿者申请详情页面

### API接口
- `GET /rcapi/member/volunteerInfo`: 获取志愿者详情和状态
- `POST /rcapi/member/joinVolunteer`: 提交志愿者申请

## 构建生产版本
```bash
npm run build
```