# 医生开方订单确认页面使用说明

## 📋 功能概述

医生开方订单确认页面是一个独立的业务页面,用于医生在填写完处方信息后,预览并确认订单详情,然后发送给患者。

## 🎯 页面路径

```
/doctor/orders/confirm
```

## 📊 页面结构

### 1. 页面信息展示

#### 患者信息区
- ✅ 患者头像
- ✅ 患者姓名
- ✅ 性别标签
- ✅ 联系电话
- ✅ 年龄信息

#### 诊断信息区
- ✅ 诊断结果
- ✅ 治疗方案
- ✅ 修改按钮(返回编辑)

#### 处方信息区
- ✅ 处方类型(中药/西药)
- ✅ 药品数量统计
- ✅ 药品明细列表
  - 药品名称
  - 单价
  - 规格
  - 数量
  - 小计
- ✅ 煎药说明(可选)

#### 病例图片区(可选)
- ✅ 图片网格展示
- ✅ 点击预览大图

#### 费用明细区
- ✅ 药品费用
- ✅ 服务费
- ✅ 订单总计

#### 温馨提示区
- ✅ 处方发送后的流程说明
- ✅ 患者支付提醒
- ✅ 修改提示

### 2. 底部操作栏
- ✅ 订单总价显示
- ✅ 返回修改按钮
- ✅ 确认并发送按钮(带loading状态)

## 🔄 业务流程

### 完整流程

```
开方页面 (/doctor/orders/add.tsx)
  ↓
  [填写诊断信息]
  ↓
  [选择患者]
  ↓
  [选择处方]
  ↓
  [上传病例图片]
  ↓
  [填写煎药说明]
  ↓
  [点击"下一步:确认订单信息"]
  ↓
订单确认页 (/doctor/orders/confirm.tsx)
  ↓
  [预览所有信息]
  ↓
  [检查费用明细]
  ↓
  [点击"确认并发送给患者"]
  ↓
调用API创建订单
  ↓
发送成功提示
  ↓
跳转订单列表 (/doctor/orders/index)
```

### 数据传递方式

使用 Taro 本地存储传递数据:

```typescript
// add.tsx 传递数据
const orderData = {
  patient: toUser || selectedPatient,
  prescription: selectedPrescription,
  diagnosis: values.diagnosis,
  treatmentPlan: values.treatmentPlan,
  decoctionInstructions: values.decoctionInstructions,
  images: fileList,
  orderPrice: selectedPrescription?.orderPrice || '0.00'
}
Taro.setStorageSync('tempOrderData', JSON.stringify(orderData))

// confirm.tsx 接收数据
const tempData = Taro.getStorageSync('tempOrderData')
const parsedData = JSON.parse(tempData)
```

## 💻 技术实现

### 主要组件

```typescript
import {
  Button,
  Cell,
  CellGroup,
  Avatar,
  Tag,
  Divider,
  Image
} from '@nutui/nutui-react-taro'
```

### 状态管理

```typescript
const [orderData, setOrderData] = useState<OrderData | null>(null)
const [loading, setLoading] = useState<boolean>(false)
const [submitLoading, setSubmitLoading] = useState<boolean>(false)
```

### 关键方法

#### 1. 计算药品总价
```typescript
const getMedicinePrice = () => {
  if (!orderData?.prescription?.items) return '0.00'
  const total = orderData.prescription.items.reduce((sum, item) => {
    const price = parseFloat(item.unitPrice || '0')
    const quantity = item.quantity || 1
    return sum + (price * quantity)
  }, 0)
  return total.toFixed(2)
}
```

#### 2. 计算订单总价
```typescript
const getTotalPrice = () => {
  const medicinePrice = parseFloat(getMedicinePrice())
  const serviceFee = parseFloat(getServiceFee())
  return (medicinePrice + serviceFee).toFixed(2)
}
```

#### 3. 确认订单
```typescript
const handleConfirmOrder = async () => {
  const clinicOrderData = {
    userId: orderData.patient.userId,
    doctorId: Taro.getStorageSync('UserId'),
    type: 0,
    title: `${orderData.patient.realName}的处方订单`,
    totalPrice: getTotalPrice(),
    payPrice: getTotalPrice(),
    // ... 其他字段
  }
  
  await addClinicOrder(clinicOrderData)
  Taro.removeStorageSync('tempOrderData')
  
  Taro.redirectTo({
    url: '/doctor/orders/index'
  })
}
```

## 🎨 样式特点

### 配色方案
- 主色调: 绿色系 (#059669)
- 价格强调: 红色 (#dc2626)
- 提示信息: 黄色系 (#d97706)
- 背景色: 浅灰 (#f5f5f5)

### 响应式设计
- 采用 Flexbox 布局
- 图片采用 Grid 布局(3列)
- 底部操作栏固定定位

### 交互细节
- 图片点击预览大图
- 修改按钮返回编辑
- 提交按钮带 loading 状态
- 成功提示后自动跳转

## 📱 页面配置

```typescript
// confirm.config.ts
export default {
  navigationBarTitleText: '确认处方订单',
  navigationBarBackgroundColor: '#fff',
  navigationBarTextStyle: 'black',
  backgroundColor: '#f5f5f5'
}
```

## 🔐 数据类型定义

```typescript
interface OrderData {
  patient: ClinicPatientUser;
  prescription?: ClinicPrescription;
  diagnosis: string;
  treatmentPlan: string;
  decoctionInstructions?: string;
  images?: Array<{
    url: string;
    name?: string;
    uid?: string;
  }>;
  orderPrice?: string;
}
```

## ✅ 与商城订单确认页的区别

| 维度 | 商城订单 | 医生开方订单 |
|------|---------|------------|
| **目标用户** | 普通消费者 | 医生专业人员 |
| **业务场景** | 购买商品 | 诊疗开方 |
| **关键信息** | 商品、价格、地址、优惠券 | 患者、诊断、处方、药品 |
| **支付流程** | 立即支付 | 患者后续支付 |
| **地址信息** | 收货地址 | 患者信息 |
| **优惠系统** | 支持优惠券 | 无优惠券 |
| **配送方式** | 快递/自提 | 无配送选择 |
| **特殊功能** | 购物车合并 | 图片上传、煎药说明 |

## 🚀 使用示例

### 从开方页面跳转

```typescript
// add.tsx
const submitSucceed = async (values: any) => {
  const orderData = {
    patient: toUser,
    prescription: selectedPrescription,
    diagnosis: values.diagnosis,
    treatmentPlan: values.treatmentPlan,
    decoctionInstructions: values.decoctionInstructions,
    images: fileList,
    orderPrice: selectedPrescription?.orderPrice
  }
  
  Taro.setStorageSync('tempOrderData', JSON.stringify(orderData))
  
  Taro.navigateTo({
    url: '/doctor/orders/confirm'
  })
}
```

## 🐛 常见问题

### 1. 数据加载失败
**原因**: 本地存储数据缺失或格式错误
**解决**: 检查 `tempOrderData` 是否正确存储,确保 JSON 格式正确

### 2. 图片无法预览
**原因**: 图片 URL 格式不正确
**解决**: 确保图片 URL 是完整的网络地址

### 3. 价格计算错误
**原因**: 药品单价或数量字段缺失
**解决**: 确保处方明细中的 `unitPrice` 和 `quantity` 字段存在

### 4. 提交后跳转失败
**原因**: 路由路径配置错误
**解决**: 检查 `app.config.ts` 中的路由配置是否正确

## 📝 注意事项

1. ⚠️ 确保患者信息完整(特别是 userId)
2. ⚠️ 处方信息必须包含药品明细
3. ⚠️ 服务费金额可根据业务需求调整
4. ⚠️ 提交成功后会清除临时数据,无法返回
5. ⚠️ 图片上传数量限制为5张

## 🔧 扩展建议

### 可优化点
1. 添加价格优惠功能
2. 支持处方模板
3. 添加患者病历查看
4. 支持打印处方
5. 增加订单草稿保存

### 待完善功能
1. 处方审核流程
2. 电子签名
3. 处方分享
4. 统计报表
5. 患者评价

## 📞 技术支持

如有问题,请联系开发团队或查阅项目文档。

---

**版本**: v1.0.0  
**创建日期**: 2025-01-28  
**最后更新**: 2025-01-28
