# patients-h5

**Repository Path**: wessonc/patients-h5

## Basic Information

- **Project Name**: patients-h5
- **Description**: 本项目是一个基于 Vue3 和 TypeScript 的大型项目开发解决方案，使用了多种技术方案，包括状态管理、组件封装、第三方登录与支付等，以及特色业务领域的医疗问诊、支付宝支付、地图业务等。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://gitee.com/wessonc/patients-h5
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-03-28
- **Last Updated**: 2025-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# patients-h5

​    本项目是一个基于 Vue3 和 TypeScript 的大型项目开发解决方案，使用了多种技术方案，包括状态管理、组件封装、第三方登录与支付等，以及特色业务领域的医疗问诊、支付宝支付、地图业务等。

技术方案
1. Vue3 + TypeScript
    本项目使用 Vue3 和 `TypeScript` 进行开发，提供了稳定的基础架构和类型安全的编程环境。
2. Vant 组件库
    使用 Vant 组件库快速构建 H5 界面，提高工作效率。
3. Vue Router
    使用 Vue Router 进行前端路由管理，实现了良好的路由切换效果。
4. Vite
    使用 Vite 的 `create-vue` 构建 Vue3 项目，提供了快速开发的环境。
5. Pinia
    使用 `Pinia` 进行状态管理，提供了良好的数据管理和组件通信方式。
6. Pinia-Plugin-Persistedstate
    使用 `Pinia-Plugin-Persistedstate` 进行状态持久化，提供了数据保存和恢复的功能。
7. @Vuecore/Use
    使用 `@Vuecore/Use` 的组合式 API 工具库，提供了方便的组件编写方式。
8. Id-Validator
    引用 `Id-Validator` 插件进行身份证信息校验，提供了良好且严谨的数据验证方式。
9. Postcss-Px-To-Viewport
    使用`Postcss-Px-To-Viewport`进行移动端适配，提供了良好的屏幕适配效果。
10. Vite-Plugin-Svg-Icons
    使用 `Vite-Plugin-Svg-Icons`的 svg 图标组件，提供了良好的图标展示效果。
11. Vite-Plugin-Html
    使用 `Vite-Plugin-Html` 自定义 html 模板，提供了自定义的页面结构。
12. Unplugin-Vue-Components
    使用 `Unplugin-Vue-Components` 进行组件自动注册，提供了方便的组件使用方式。
13. Socket.io
    使用 `Socket.io` 的即时通讯问诊室，提供了实时的消息通讯功能。
14. 第三方登录
    提供了第三方登录解决方案，支持 QQ 登录等方式。
15. 第三方支付
    提供了支付宝支付解决方案，支持问诊费用和药品订单的支付功能。
16. 第三方地图
    提供了高德地图解决方案，支持实时物流的展示。
17. Pnpm
    使用 Pnpm 进行包管理，提供了稳定的依赖管理方式。
18. CSS 变量主题定制
    使用 CSS 变量主题定制方案，提供了灵活的主题切换效果。
19. 自定义 Hook
    提供了自定义 Hook 解决方案，提高了代码复用率和可维护性。
20. Axios 二次封装
    使用 Axios 进行二次封装，提供了良好的 HTTP 请求处理方式。
21. Services API 接口分层
    使用 Services API 接口分层，提供了良好的接口管理和调用方式。
22. Vant 通用组件封装
    使用 Vant 进行通用组件封装，提供了良好的组件复用和扩展方式。
23. Mock 本地数据模拟
    使用 Mock 进行本地数据模拟，提供了良好的开发测试环境。
24. Eruda 移动端调试
    使用 Eruda 进行移动端调试，提供了方便的移动端调试方式。
25. 生产环境配置
    提供了生产环境配置方案，保证了项目的稳定性和可靠性。
26. CI/CD 持续集成自动部署
    使用 CI/CD 进行持续集成和自动部署，提供了快速发布和部署的方式。

特色业务
1. 医生与文章推荐业务
    提供了医生和文章推荐的业务功能，帮助用户更好地了解医疗知识和相关医生信息。

    ![feature-01](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-01.png)

2. 快速问诊业务
    提供了快速问诊的业务功能，方便用户进行在线问诊和诊断。

    ![feature-02](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-02.png)

3. 问诊费用支付宝支付业务
    提供了问诊费用支付宝支付的业务功能，方便用户进行支付。

    ![feature-03](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-03.png)

4. 问诊室业务
    提供了问诊室的业务功能，帮助用户在线咨询医生并进行问诊操作。

    ![feature-04](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-04.png)

5. 药品订单支付宝支付业务
    提供了药品订单支付宝支付的业务功能，方便用户进行支付。

    ![feature-05](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-05.png)

6. 实时物流高德地图业务
    提供了实时物流高德地图的业务功能，帮助用户了解物流信息和配送进度。

    ![feature-06](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-06.png)

7. QQ 登录业务
    提供了 QQ 登录业务功能，方便用户进行登录和授权操作。

    ![feature-07](https://gitee.com/wessonc/image-warehouse/raw/master/patients-h5/feature-07.png)

## 安装与使用

1. 克隆仓库到本地

   ```bash
   git clone https://gitee.com/wessonc/patients-h5.git
   ```

2. 安装依赖

   ```bash
   cd project
   npm install
   ```

3. 运行开发环境

   ```bash
   npm run dev
   ```

4. 构建生产环境

   ```bash
   npm run build
   ```

5. 运行生产环境

   ```bash
   pnpm run serve
   ```

## 技术栈

### 前端

- [Vue3](https://v3.vuejs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vant](https://vant-contrib.gitee.io/vant/#/zh-CN/)
- [vue-router](https://next.router.vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Pinia](https://pinia.esm.dev/)
- [pinia-plugin-persistedstate](https://github.com/posva/pinia/tree/dev/packages/plugin-persistedstate)
- [@vuecore/use](https://github.com/vueuse/vueuse)
- [id-validator](https://github.com/mc-zone/IDValidator)
- [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)
- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons)
- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html)
- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
- [axios](https://axios-http.com/)
- [eruda](https://github.com/liriliri/eruda)