# 保险端微信小程序 - 开发指南

## 项目概述

这是一个基于 Vue.js 3.x + uni-app 开发的保险服务微信小程序，后端完全动态调用现有的 insurance_backend 接口，实现了用户登录、产品浏览、在线投保、保单管理、理赔申请等核心功能。

## 技术栈

- **前端框架**: Vue.js 3.x (Composition API)
- **小程序框架**: uni-app 
- **状态管理**: Pinia
- **UI组件**: 自定义组件 + uni-app内置组件
- **网络请求**: 基于uni.request()封装
- **后端API**: 动态调用 c:\nxxmdata\insurance_backend 的所有接口

## 环境要求

- Node.js: **严格要求 16.20.2**
- npm: >= 8.0.0
- 微信开发者工具: 最新稳定版

## 快速开始

### 1. 安装依赖

```bash
# 进入项目目录
cd c:\nxxmdata\insurance_mini_program

# 检查Node.js版本（必须是16.20.2）
node -v

# 安装依赖
npm install
```

### 2. 启动后端服务

```bash
# 启动保险端后端服务
cd c:\nxxmdata\insurance_backend
npm run dev
```

确保后端服务运行在 http://localhost:3000

### 3. 配置小程序

1. 修改 `utils/request.js` 中的 BASE_URL，确保指向正确的后端地址
2. 在微信开发者工具中配置合法域名（开发时可关闭域名校验）

### 4. 编译运行

```bash
# 开发模式编译到微信小程序
npm run dev:mp-weixin

# 或使用
npm run serve
```

### 5. 在微信开发者工具中预览

1. 打开微信开发者工具
2. 导入项目，选择 `dist/dev/mp-weixin` 目录
3. 配置AppID（或使用测试号）
4. 预览调试

## 项目结构

```
insurance_mini_program/
├── components/              # 公共组件
│   ├── ProductCard.vue     # 产品卡片组件
│   ├── StatusBadge.vue     # 状态标签组件
│   ├── LoadingSpinner.vue  # 加载组件
│   └── PolicyCard.vue      # 保单卡片组件
├── pages/                   # 页面
│   ├── index/              # 首页
│   ├── login/              # 登录页
│   ├── products/           # 产品列表
│   ├── application/        # 投保申请
│   └── my/                 # 个人中心
├── store/                   # Pinia状态管理
│   ├── index.js            # Store入口
│   ├── user.js             # 用户状态
│   └── insurance.js        # 保险业务状态
├── utils/                   # 工具类
│   ├── api.js              # API接口封装
│   ├── auth.js             # 认证工具
│   ├── request.js          # 请求封装
│   └── constants.js        # 常量定义
├── static/                  # 静态资源
├── App.vue                  # 应用入口组件
├── main.js                  # 应用入口文件
├── manifest.json            # 应用配置
├── pages.json              # 页面配置
├── uni.scss                # 全局样式
└── package.json            # 项目配置
```

## 核心功能模块

### 1. 用户认证模块
- **微信一键登录**: 集成微信小程序授权登录
- **账号密码登录**: 支持传统用户名密码登录
- **登录状态管理**: 基于Pinia的用户状态管理
- **Token管理**: JWT token自动管理和刷新

### 2. 产品浏览模块
- **产品列表**: 动态加载保险产品，支持分类筛选
- **产品搜索**: 实时搜索，防抖优化
- **产品详情**: 展示详细的产品信息和条款

### 3. 投保申请模块
- **在线申请**: 完整的投保表单，支持表单验证
- **实时保费计算**: 根据保额动态计算保费
- **材料上传**: 支持身份证等材料上传

### 4. 保单管理模块
- **保单列表**: 查看个人所有保单
- **保单详情**: 详细的保单信息展示
- **保单状态**: 实时同步保单状态

### 5. 理赔申请模块
- **理赔申请**: 在线提交理赔申请
- **材料上传**: 支持理赔材料上传
- **进度查询**: 实时查看理赔进度

## API接口说明

本项目所有API接口都动态调用 `c:\nxxmdata\insurance_backend` 的接口：

### 认证接口
- `POST /api/auth/wx-login` - 微信登录（需后端扩展）
- `POST /api/auth/login` - 账号密码登录
- `GET /api/auth/profile` - 获取用户信息

### 产品接口
- `GET /api/insurance-types` - 获取产品列表
- `GET /api/insurance-types/:id` - 获取产品详情

### 申请接口
- `POST /api/insurance/applications` - 提交投保申请
- `GET /api/miniprogram/my-applications` - 获取我的申请（需后端扩展）

### 保单接口
- `GET /api/miniprogram/my-policies` - 获取我的保单（需后端扩展）
- `GET /api/policies/:id` - 获取保单详情

### 理赔接口
- `POST /api/claims` - 提交理赔申请
- `GET /api/miniprogram/my-claims` - 获取我的理赔（需后端扩展）

## 后端扩展要求

为了支持小程序的完整功能，需要在 `insurance_backend` 中扩展以下接口：

1. **微信登录接口**: `POST /api/auth/wx-login`
2. **小程序专用路由**: `GET /api/miniprogram/*`
3. **用户关联**: 在相关模型中添加 `user_id` 字段

详细的后端扩展代码已在开发文档中提供。

## 开发规范

### 1. 代码规范
- 使用 Vue 3 Composition API
- 组件使用 PascalCase 命名
- 文件使用 kebab-case 命名
- 遵循 ESLint 规则

### 2. 状态管理
- 使用 Pinia 进行状态管理
- 按业务模块划分 Store
- 异步操作统一在 actions 中处理

### 3. API调用
- 统一使用封装的 request 方法
- 错误处理统一在请求拦截器中
- 支持请求缓存和防抖

### 4. 组件开发
- 组件职责单一，高内聚低耦合
- 合理使用 props 和 emit
- 样式使用 scoped，避免污染

## 调试指南

### 1. 网络调试
- 在微信开发者工具中查看网络请求
- 检查后端服务是否正常运行
- 确认API接口返回格式正确

### 2. 状态调试
- 使用 Vue DevTools 调试状态
- 在控制台查看 Pinia store 数据
- 检查本地存储数据

### 3. 常见问题
- **登录失败**: 检查后端微信登录接口是否实现
- **API调用失败**: 确认后端服务运行状态
- **页面跳转失败**: 检查页面路径配置

## 部署上线

### 1. 小程序发布
1. 执行 `npm run build:mp-weixin` 构建生产版本
2. 在微信开发者工具中上传代码
3. 在微信公众平台提交审核
4. 审核通过后发布上线

### 2. 后端配置
- 配置生产环境的数据库
- 设置正确的微信小程序配置
- 配置HTTPS域名和SSL证书

## 注意事项

1. **版本兼容**: 严格使用 Node.js 16.20.2，避免版本冲突
2. **接口调用**: 所有数据都从后端动态获取，禁止硬编码
3. **错误处理**: 完善的错误提示和用户反馈
4. **性能优化**: 合理使用分页加载和图片懒加载
5. **安全考虑**: 敏感信息加密传输，Token安全管理

## 技术支持

如有问题，请参考：
1. [uni-app官方文档](https://uniapp.dcloud.net.cn/)
2. [Vue.js官方文档](https://vuejs.org/)
3. [Pinia官方文档](https://pinia.vuejs.org/)
4. [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)