Browse Source
refactor: 重构患者详情、记录列表和详情页 fix: 修复样式问题和类型定义 docs: 更新AGENTS.md文档说明 style: 统一代码格式和颜色值写法 test: 添加相关接口测试用例 chore: 更新依赖和配置文件dev
kola-web
3 weeks ago
47 changed files with 3479 additions and 832 deletions
@ -0,0 +1,240 @@
@@ -0,0 +1,240 @@
|
||||
# 突眼日记接口联调计划 |
||||
|
||||
## 一、项目现状分析 |
||||
|
||||
### 1.1 已有页面结构 |
||||
|
||||
**医生端 (d\_ 前缀)** |
||||
|
||||
- `d_noteList` - 突眼记录列表页（拍摄示例页） |
||||
|
||||
- `d_noteDetail` - 突眼记录详情页 |
||||
|
||||
- `d_noteDiffData` - 凸眼度对比数据页（表格展示） |
||||
|
||||
_患者端 (patient/pages/note_)\* |
||||
|
||||
- `note` - 突眼日记首页 |
||||
|
||||
- `noteAdd` - 新增记录页 |
||||
|
||||
- `noteHistory` - 历史记录页 |
||||
|
||||
- `noteDiff` - 照片对比页 |
||||
|
||||
- `noteDiffEdit` - 对比编辑页 |
||||
|
||||
- `noteDemo` - 拍摄示例页 |
||||
|
||||
### 1.2 当前状态 |
||||
|
||||
- 所有页面都是静态数据，未接入接口 |
||||
|
||||
- 请求工具已封装在 `utils/request.ts` |
||||
|
||||
- 使用 `wx.ajax` 进行接口调用（在 app.ts 中挂载） |
||||
|
||||
--- |
||||
|
||||
## 二、需要的信息 |
||||
|
||||
在开始联调前，需要你提供以下信息： |
||||
|
||||
### 2.1 环境信息 |
||||
|
||||
| 信息项 | 说明 | 是否必需 | |
||||
| -------------- | --------------------------- | -------- | |
||||
| 后端环境地址 | 开发/测试服务器地址 | 是 | |
||||
| 接口是否已部署 | 后端接口是否已上线可调用 | 是 | |
||||
| 登录态获取方式 | 如何获取 loginState/session | 是 | |
||||
|
||||
### 2.2 接口测试信息 |
||||
|
||||
| 信息项 | 说明 | 是否必需 | |
||||
| ---------- | -------------------------- | -------- | |
||||
| 测试账号 | 医生账号和患者账号 | 是 | |
||||
| 测试患者ID | 用于医生端接口测试 | 是 | |
||||
| 已有数据 | 是否有已创建的突眼记录数据 | 否 | |
||||
|
||||
### 2.3 图片上传相关 |
||||
|
||||
| 信息项 | 说明 | 是否必需 | |
||||
| ------------- | ----------------------------- | -------- | |
||||
| 图片上传方式 | 上传到腾讯云COS还是自家服务器 | 是 | |
||||
| 腾讯云IMS配置 | 是否已配置图片内容安全校验 | 否 | |
||||
|
||||
--- |
||||
|
||||
## 三、接口联调清单 |
||||
|
||||
### 3.1 患者端接口 (10个) |
||||
|
||||
| 序号 | 接口 | 用途 | 对应页面 | 优先级 | |
||||
| ---- | ------------------- | ---------------- | ----------------- | ------ | |
||||
| 1 | `baseline-status` | 获取基准照状态 | note | P0 | |
||||
| 2 | `record-list` | 获取记录列表 | note, noteHistory | P0 | |
||||
| 3 | `record-detail` | 获取记录详情 | noteHistory | P0 | |
||||
| 4 | `record-save` | 创建/更新记录 | noteAdd | P0 | |
||||
| 5 | `photo-upload` | 上传照片 | noteAdd | P0 | |
||||
| 6 | `record-delete` | 删除记录 | noteHistory | P1 | |
||||
| 7 | `compare-dates` | 获取对比可用日期 | noteDiff | P1 | |
||||
| 8 | `compare-photos` | 获取对比照片 | noteDiff | P1 | |
||||
| 9 | `get-compare-angle` | 获取对比角度列表 | noteDiffEdit | P1 | |
||||
| 10 | `get-session-id` | 获取唯一标识 | noteAdd | P2 | |
||||
|
||||
### 3.2 医生端接口 (6个) |
||||
|
||||
| 序号 | 接口 | 用途 | 对应页面 | 优先级 | |
||||
| ---- | ------------------------------------ | ---------------- | --------------- | ------ | |
||||
| 1 | `doctor/proptosis/latest` | 获取最近记录 | d_patientDetail | P0 | |
||||
| 2 | `doctor/proptosis/list` | 获取患者记录列表 | d_noteList | P0 | |
||||
| 3 | `doctor/proptosis/detail` | 获取记录详情 | d_noteDetail | P0 | |
||||
| 4 | `doctor/proptosis/export` | Excel导出 | d_noteDiffData | P1 | |
||||
| 5 | `doctor/proptosis/compare` | 获取对比数据 | d_noteDiffData | P1 | |
||||
| 6 | `doctor/proptosis/get-compare-angle` | 获取对比角度 | d_noteDiffData | P1 | |
||||
|
||||
--- |
||||
|
||||
## 四、实施步骤 |
||||
|
||||
### Phase 1: 基础联调准备 |
||||
|
||||
1. 确认后端环境可用 |
||||
2. 获取测试账号和患者ID |
||||
3. 验证登录态获取 |
||||
|
||||
### Phase 2: 患者端核心功能 |
||||
|
||||
1. 实现记录列表获取 (`record-list`) |
||||
2. 实现记录详情获取 (`record-detail`) |
||||
3. 实现记录创建/更新 (`record-save`) |
||||
4. 实现照片上传 (`photo-upload`) |
||||
|
||||
### Phase 3: 患者端对比功能 |
||||
|
||||
1. 实现对比日期获取 (`compare-dates`) |
||||
2. 实现对比照片获取 (`compare-photos`) |
||||
3. 实现对比角度获取 (`get-compare-angle`) |
||||
|
||||
### Phase 4: 医生端功能 |
||||
|
||||
1. 实现患者最近记录获取 (`doctor/proptosis/latest`) |
||||
2. 实现患者记录列表 (`doctor/proptosis/list`) |
||||
3. 实现记录详情 (`doctor/proptosis/detail`) |
||||
4. 实现对比数据获取 (`doctor/proptosis/compare`) |
||||
|
||||
### Phase 5: 导出功能 |
||||
|
||||
1. 实现Excel导出 (`doctor/proptosis/export`) |
||||
|
||||
--- |
||||
|
||||
## 五、数据结构映射 |
||||
|
||||
### 5.1 患者端 - 记录列表 |
||||
|
||||
```typescript |
||||
// 接口返回 |
||||
interface RecordItem { |
||||
recordId: string |
||||
recordDate: string |
||||
isBaseline: number |
||||
photoCount: number |
||||
firstPhotoUrl: string |
||||
treatmentCount: number |
||||
leftEye: number |
||||
rightEye: number |
||||
interorbitalDistance: number |
||||
uploadCompleted: number |
||||
} |
||||
|
||||
// 页面使用 |
||||
interface DataListItem { |
||||
date: string // recordDate 格式化 |
||||
left: string // leftEye |
||||
spacing: string // interorbitalDistance |
||||
right: string // rightEye |
||||
count: string // treatmentCount |
||||
isBaseline: boolean |
||||
photoCount: number |
||||
firstPhotoUrl: string |
||||
} |
||||
``` |
||||
|
||||
### 5.2 医生端 - 凸眼度对比表格 |
||||
|
||||
```typescript |
||||
// 接口返回 (compare 接口) |
||||
interface CompareItem { |
||||
recordId: string |
||||
recordDate: string |
||||
photoUrl: string |
||||
leftEye: number |
||||
rightEye: number |
||||
interorbitalDistance: number |
||||
treatmentCount: number |
||||
} |
||||
|
||||
// 页面使用 (d_noteDiffData) |
||||
interface TableItem { |
||||
date: string // recordDate 格式化 2026.1.5 |
||||
left: string // leftEye |
||||
spacing: string // interorbitalDistance |
||||
right: string // rightEye |
||||
count: string // treatmentCount |
||||
} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## 六、注意事项 |
||||
|
||||
### 6.1 业务规则 |
||||
|
||||
1. 同一天只能创建一条记录 |
||||
2. 必须先上传照片再保存记录（photoIds 关联） |
||||
3. 基准照只能有一张 |
||||
4. 图片需要经过腾讯云IMS安全校验 |
||||
|
||||
### 6.2 技术注意 |
||||
|
||||
1. 使用 `wx.ajax` 进行请求（已挂载在 app 上） |
||||
2. 医生端页面需要等待登录态 `app.waitLogin({ type: [2] })` |
||||
3. 患者端页面需要等待登录态 `app.waitLogin({ type: [1] })` |
||||
4. 图片URL需要拼接 `{{imageUrl}}` 前缀 |
||||
|
||||
### 6.3 角度映射 |
||||
|
||||
接口角度值与页面显示名称映射： |
||||
|
||||
```typescript |
||||
const angleMap = { |
||||
front_open: '正面睁眼', |
||||
front_closed: '正面闭眼', |
||||
front_looking_up: '正面仰头', |
||||
side_left_90: '90°左侧', |
||||
side_right_90: '90°右侧', |
||||
side_left_45: '45°左侧', |
||||
side_right_45: '45°右侧', |
||||
eye_up_left: '左上', |
||||
eye_up: '向上', |
||||
eye_up_right: '右上', |
||||
eye_left: '向左', |
||||
eye_right: '向右', |
||||
eye_down_left: '左下', |
||||
eye_down: '向下', |
||||
eye_down_right: '右下', |
||||
} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## 七、下一步 |
||||
|
||||
请提供以下信息，我将开始实施联调： |
||||
|
||||
1. **后端环境地址**（如：<https://m.xd.hbraas.com）> |
||||
2. **测试账号**（医生和患者各一个） |
||||
3. **测试患者ID**（用于医生端接口测试） |
||||
4. **接口是否已部署**（确认后端已完成开发） |
||||
5. **图片上传方式**（腾讯云COS或自家服务器） |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"navigationBarTitleText": "照片对比", |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,275 @@
@@ -0,0 +1,275 @@
|
||||
page { |
||||
background-color: #f6f8f9; |
||||
} |
||||
|
||||
.page { |
||||
padding-bottom: 80rpx; |
||||
|
||||
.page-tip { |
||||
padding: 24rpx 28rpx; |
||||
background-color: #fff7e9; |
||||
display: flex; |
||||
|
||||
.icon { |
||||
margin-top: 6rpx; |
||||
flex-shrink: 0; |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
} |
||||
|
||||
.content { |
||||
margin-left: 16rpx; |
||||
font-size: 28rpx; |
||||
color: #ffa300; |
||||
line-height: 44rpx; |
||||
} |
||||
} |
||||
|
||||
.form { |
||||
margin: 32rpx 40rpx 0; |
||||
padding: 38rpx 32rpx 32rpx; |
||||
background: #ffffff; |
||||
border-radius: 32rpx; |
||||
|
||||
.form-item { |
||||
margin-bottom: 48rpx; |
||||
|
||||
&:last-of-type { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.title { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
width: 8rpx; |
||||
height: 32rpx; |
||||
background: #b982ff; |
||||
border-radius: 44rpx; |
||||
} |
||||
} |
||||
|
||||
.select { |
||||
margin-top: 24rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 26rpx 32rpx; |
||||
background: #f6f8f9; |
||||
border-radius: 24rpx; |
||||
|
||||
.content { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
|
||||
&.placeholder { |
||||
color: rgba(173, 172, 178, 0.6); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.multiple { |
||||
margin-top: 24rpx; |
||||
display: grid; |
||||
grid-template-columns: repeat(2, 1fr); |
||||
gap: 24rpx 22rpx; |
||||
|
||||
.item { |
||||
padding: 16rpx; |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: #f6f8f9; |
||||
border-radius: 24rpx; |
||||
|
||||
&.active { |
||||
color: #fff; |
||||
background: linear-gradient(180deg, #e98ff8 0%, #b073ff 100%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.container { |
||||
margin: 76rpx 40rpx 0; |
||||
|
||||
.title { |
||||
padding-bottom: 40rpx; |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
|
||||
.date { |
||||
font-size: 28rpx; |
||||
color: #adacb2; |
||||
font-weight: normal; |
||||
align-self: flex-end; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
width: 8rpx; |
||||
height: 32rpx; |
||||
background: #b982ff; |
||||
border-radius: 44rpx; |
||||
} |
||||
} |
||||
|
||||
.card { |
||||
display: flex; |
||||
|
||||
.aside { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
width: 32rpx; |
||||
|
||||
.circle { |
||||
position: relative; |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
border-radius: 50%; |
||||
background: rgba(185, 130, 255, 0.29); |
||||
flex-shrink: 0; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
display: block; |
||||
content: ''; |
||||
width: 18rpx; |
||||
height: 18rpx; |
||||
border-radius: 50%; |
||||
background-color: #b982ff; |
||||
} |
||||
} |
||||
|
||||
.line-bottom { |
||||
flex: 1; |
||||
width: 2rpx; |
||||
border-left: 2rpx dashed #b982ff; |
||||
margin-top: 8rpx; |
||||
} |
||||
} |
||||
|
||||
.c-container { |
||||
margin-top: -6rpx; |
||||
margin-left: 14rpx; |
||||
flex: 1; |
||||
padding-bottom: 48rpx; |
||||
|
||||
.c-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.date { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
} |
||||
} |
||||
|
||||
.tags { |
||||
margin-top: 12rpx; |
||||
|
||||
.tag { |
||||
display: inline-block; |
||||
margin-right: 16rpx; |
||||
padding: 2rpx 12rpx; |
||||
font-size: 24rpx; |
||||
line-height: 32rpx; |
||||
border-radius: 6rpx; |
||||
|
||||
&.tag1 { |
||||
background: rgba(255, 163, 0, 0.17); |
||||
color: #ffa300; |
||||
} |
||||
|
||||
&.tag2 { |
||||
background: rgba(176, 115, 255, 0.16); |
||||
color: #b073ff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.photo-card { |
||||
margin-top: 24rpx; |
||||
|
||||
.photo { |
||||
border-radius: 32rpx 32rpx 0 0; |
||||
height: 352rpx; |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
|
||||
.row { |
||||
display: flex; |
||||
gap: 24rpx; |
||||
text-align: center; |
||||
border-radius: 0 0 32rpx 32rpx; |
||||
background-color: #fff; |
||||
|
||||
.col { |
||||
padding: 24rpx; |
||||
flex: 1; |
||||
|
||||
.name { |
||||
font-size: 28rpx; |
||||
color: #211d2e; |
||||
line-height: 32rpx; |
||||
} |
||||
|
||||
.content { |
||||
margin-top: 16rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: baseline; |
||||
gap: 8rpx; |
||||
|
||||
.num { |
||||
font-size: 56rpx; |
||||
color: #b073ff; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.sub { |
||||
font-size: 28rpx; |
||||
color: #211d2e; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
margin-top: 46rpx; |
||||
|
||||
.btn1 { |
||||
height: 88rpx; |
||||
font-size: 36rpx; |
||||
color: #ffffff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%); |
||||
border-radius: 100rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,212 @@
@@ -0,0 +1,212 @@
|
||||
const app = getApp<IAppOption>() |
||||
|
||||
interface ComparePhoto { |
||||
recordId: string |
||||
recordDate: string |
||||
isBaseline: number |
||||
photoUrl: string |
||||
leftEye: number |
||||
rightEye: number |
||||
interorbitalDistance: number |
||||
treatmentCount: number |
||||
} |
||||
|
||||
interface CompareDate { |
||||
recordId: string |
||||
recordDate: string |
||||
} |
||||
|
||||
interface ListItem extends CompareDate { |
||||
isBaseline: number |
||||
} |
||||
|
||||
Page({ |
||||
data: { |
||||
patientId: '', |
||||
|
||||
// 对比角度
|
||||
photoAngle: '', |
||||
photoAngleName: '', |
||||
angleList: [] as { key: string, name: string }[], |
||||
angleMap: {} as Record<string, string>, |
||||
|
||||
// 日期选择
|
||||
baseline: null as CompareDate | null, |
||||
nonBaselineList: [] as CompareDate[], |
||||
selectedDates: [] as string[], |
||||
|
||||
// 对比照片
|
||||
comparePhotos: [] as ComparePhoto[], |
||||
}, |
||||
|
||||
onLoad(option: any) { |
||||
this.setData({ |
||||
patientId: option.patientId || '', |
||||
}) |
||||
this.getCompareAngle() |
||||
}, |
||||
|
||||
onShow() { |
||||
app.waitLogin({ type: [2] }).then(() => { |
||||
this.getCompareDates() |
||||
}) |
||||
}, |
||||
|
||||
// 获取对比角度列表
|
||||
getCompareAngle() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/doctor/proptosis/get-compare-angle', |
||||
// 兼容后端实际需要 patientId（文档可能漏写）
|
||||
data: this.data.patientId ? { patientId: this.data.patientId } : {}, |
||||
}).then((res: any) => { |
||||
const angleMap = res.photoAngle || {} |
||||
const angleList = Object.keys(angleMap).map(key => ({ |
||||
key, |
||||
name: angleMap[key], |
||||
})) |
||||
this.setData({ |
||||
angleMap, |
||||
angleList, |
||||
// 默认选择第一个角度
|
||||
photoAngle: angleList[0]?.key || '', |
||||
photoAngleName: angleList[0]?.name || '', |
||||
}) |
||||
// 获取对比日期
|
||||
if (this.data.photoAngle) { |
||||
this.getCompareDates() |
||||
} |
||||
}).catch((err) => { |
||||
console.error('获取对比角度失败:', err) |
||||
wx.showToast({ title: '获取对比角度失败', icon: 'none' }) |
||||
}) |
||||
}, |
||||
|
||||
// 获取对比可用日期
|
||||
getCompareDates() { |
||||
if (!this.data.photoAngle) |
||||
return |
||||
// 医生端接口文档未提供 compare-dates：用记录列表推导 baseline/nonBaseline
|
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/doctor/proptosis/list', |
||||
data: { |
||||
patientId: this.data.patientId, |
||||
page: 1, |
||||
pageSize: 1000, |
||||
}, |
||||
}).then((res: any) => { |
||||
const list: ListItem[] = res.list || [] |
||||
const baselineItem = list.find(i => i.isBaseline === 1) || null |
||||
const nonBaselineList: CompareDate[] = list |
||||
.filter(i => i.isBaseline !== 1) |
||||
.map(i => ({ recordId: i.recordId, recordDate: i.recordDate })) |
||||
|
||||
this.setData({ |
||||
baseline: baselineItem ? { recordId: baselineItem.recordId, recordDate: baselineItem.recordDate } : null, |
||||
nonBaselineList, |
||||
}) |
||||
}).catch((err) => { |
||||
console.error('获取对比日期失败:', err) |
||||
wx.showToast({ title: '获取对比日期失败', icon: 'none' }) |
||||
}) |
||||
}, |
||||
|
||||
// 选择对比角度
|
||||
onAngleChange(e: any) { |
||||
const index = e.detail.value |
||||
const angle = this.data.angleList[index] |
||||
this.setData({ |
||||
photoAngle: angle.key, |
||||
photoAngleName: angle.name, |
||||
selectedDates: [], |
||||
comparePhotos: [], |
||||
}) |
||||
this.getCompareDates() |
||||
}, |
||||
|
||||
// 选择日期
|
||||
onDateSelect(e: any) { |
||||
const { recordId } = e.currentTarget.dataset |
||||
const selectedDates = this.data.selectedDates |
||||
const index = selectedDates.indexOf(recordId) |
||||
if (index > -1) { |
||||
selectedDates.splice(index, 1) |
||||
} |
||||
else { |
||||
selectedDates.push(recordId) |
||||
} |
||||
this.setData({ selectedDates }) |
||||
// 获取对比照片
|
||||
this.getComparePhotos() |
||||
}, |
||||
|
||||
// 获取对比照片
|
||||
getComparePhotos() { |
||||
const { photoAngle, selectedDates, baseline } = this.data |
||||
if (!photoAngle || selectedDates.length === 0) { |
||||
this.setData({ comparePhotos: [] }) |
||||
return |
||||
} |
||||
// 包含基准照ID
|
||||
const recordIds = baseline ? [baseline.recordId, ...selectedDates] : selectedDates |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/doctor/proptosis/compare', |
||||
data: { |
||||
patientId: this.data.patientId, |
||||
photoAngle, |
||||
recordIds: recordIds.join(','), |
||||
}, |
||||
}).then((res: any) => { |
||||
const baselineRes = res.baseline |
||||
const compareList = res.compareList || [] |
||||
const merged: ComparePhoto[] = [] |
||||
if (baselineRes) { |
||||
merged.push({ |
||||
recordId: baselineRes.recordId, |
||||
recordDate: baselineRes.recordDate, |
||||
isBaseline: 1, |
||||
photoUrl: baselineRes.photoUrl, |
||||
leftEye: baselineRes.leftEye, |
||||
rightEye: baselineRes.rightEye, |
||||
interorbitalDistance: baselineRes.interorbitalDistance, |
||||
treatmentCount: baselineRes.treatmentCount, |
||||
}) |
||||
} |
||||
compareList.forEach((item: any) => { |
||||
merged.push({ |
||||
recordId: item.recordId, |
||||
recordDate: item.recordDate, |
||||
isBaseline: 0, |
||||
photoUrl: item.photoUrl, |
||||
leftEye: item.leftEye, |
||||
rightEye: item.rightEye, |
||||
interorbitalDistance: item.interorbitalDistance, |
||||
treatmentCount: item.treatmentCount, |
||||
}) |
||||
}) |
||||
this.setData({ |
||||
comparePhotos: merged, |
||||
}) |
||||
}).catch((err) => { |
||||
console.error('获取对比照片失败:', err) |
||||
wx.showToast({ title: '获取对比照片失败', icon: 'none' }) |
||||
}) |
||||
}, |
||||
|
||||
// 生成对比图
|
||||
handleEdit() { |
||||
if (this.data.selectedDates.length === 0) { |
||||
wx.showToast({ title: '请选择对比日期', icon: 'none' }) |
||||
return |
||||
} |
||||
const { baseline, selectedDates } = this.data |
||||
const recordIds = baseline ? [baseline.recordId, ...selectedDates] : selectedDates |
||||
wx.navigateTo({ |
||||
url: `/pages/d_noteDiffEdit/index?patientId=${this.data.patientId}&photoAngle=${this.data.photoAngle}&recordIds=${recordIds.join(',')}`, |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,81 @@
@@ -0,0 +1,81 @@
|
||||
<view class="page"> |
||||
<view class="page-tip"> |
||||
<image class="icon" src="{{imageUrl}}icon154.png?t={{Timestamp}}"></image> |
||||
<view class="content"> |
||||
您可以同时选择多个日期，系统将按时间顺序排列照片。点击右上角按钮可预览并保存生成的对比长图。 |
||||
</view> |
||||
</view> |
||||
<view class="form"> |
||||
<view class="form-item"> |
||||
<view class="title">选择对比角度</view> |
||||
<picker mode="selector" range="{{angleList}}" range-key="name" value="{{0}}" bindchange="onAngleChange"> |
||||
<view class="select"> |
||||
<view class="content {{photoAngleName ? '' : 'placeholder'}}">{{photoAngleName || '请选择对比角度'}}</view> |
||||
<van-icon class="more" name="arrow-down" /> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="title">选择对比日期(可多选)</view> |
||||
<view class="multiple"> |
||||
<view |
||||
class="item {{selectedDates.indexOf(item.recordId) > -1 ? 'active' : ''}}" |
||||
wx:for="{{nonBaselineList}}" |
||||
wx:key="recordId" |
||||
data-record-id="{{item.recordId}}" |
||||
bind:tap="onDateSelect" |
||||
>{{item.recordDate}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="container" wx:if="{{comparePhotos.length > 0}}"> |
||||
<view class="title"> |
||||
{{photoAngleName}}时间线对比 |
||||
<view class="date">生成日期:{{comparePhotos[0].recordDate}}</view> |
||||
</view> |
||||
<view class="card" wx:for="{{comparePhotos}}" wx:key="recordId"> |
||||
<view class="aside"> |
||||
<view class="circle"></view> |
||||
<view class="line-bottom"></view> |
||||
</view> |
||||
<view class="c-container"> |
||||
<view class="c-header"> |
||||
<view class="date">{{item.isBaseline === 1 ? '基准照片' : '对比照片'}} {{item.recordDate}}</view> |
||||
</view> |
||||
<view class="tags"> |
||||
<view wx:if="{{item.isBaseline === 1}}" class="tag tag1">基准照片</view> |
||||
<view class="tag tag2">替妥尤单抗:{{item.treatmentCount}}</view> |
||||
</view> |
||||
<view class="photo-card"> |
||||
<image class="photo" src="{{item.photoUrl}}" mode="aspectFill"></image> |
||||
<view class="row" wx:if="{{item.leftEye || item.rightEye || item.interorbitalDistance}}"> |
||||
<view class="col"> |
||||
<view class="name">右眼</view> |
||||
<view class="content"> |
||||
<view class="num">{{item.rightEye || '--'}}</view> |
||||
<view class="sub">MM</view> |
||||
</view> |
||||
</view> |
||||
<view class="col"> |
||||
<view class="name">眶间距</view> |
||||
<view class="content"> |
||||
<view class="num">{{item.interorbitalDistance || '--'}}</view> |
||||
<view class="sub">MM</view> |
||||
</view> |
||||
</view> |
||||
<view class="col"> |
||||
<view class="name">左眼</view> |
||||
<view class="content"> |
||||
<view class="num">{{item.leftEye || '--'}}</view> |
||||
<view class="sub">MM</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="btn1" bind:tap="handleEdit">生成对比图</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
@ -1,25 +1,126 @@
@@ -1,25 +1,126 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
const app = getApp<IAppOption>() |
||||
|
||||
interface CompareItem { |
||||
recordId: string |
||||
recordDate: string |
||||
photoUrl: string |
||||
leftEye: number |
||||
rightEye: number |
||||
interorbitalDistance: number |
||||
treatmentCount: number |
||||
} |
||||
|
||||
Page({ |
||||
data: { |
||||
dataList: [ |
||||
{ |
||||
date: '2026.1.5', |
||||
left: '40', |
||||
spacing: '40', |
||||
right: '40', |
||||
count: '30', |
||||
patientId: '', |
||||
dataList: [] as CompareItem[], |
||||
loading: false, |
||||
}, |
||||
|
||||
onLoad(option: any) { |
||||
this.setData({ |
||||
patientId: option.patientId || '', |
||||
}) |
||||
}, |
||||
|
||||
onShow() { |
||||
app.waitLogin({ type: [2] }).then(() => { |
||||
if (this.data.patientId) { |
||||
this.getCompareData() |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 获取对比数据
|
||||
getCompareData() { |
||||
this.setData({ loading: true }) |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/doctor/proptosis/list', |
||||
data: { |
||||
patientId: this.data.patientId, |
||||
page: 1, |
||||
pageSize: 1000, // 尽量拉全，避免导出/对比缺数据
|
||||
}, |
||||
}).then((res: any) => { |
||||
const list: CompareItem[] = (res.list || []) |
||||
.slice() |
||||
.sort((a, b) => String(a.recordDate).localeCompare(String(b.recordDate))) |
||||
this.setData({ |
||||
dataList: list, |
||||
loading: false, |
||||
}) |
||||
}).catch((err) => { |
||||
console.error('获取对比数据失败:', err) |
||||
this.setData({ loading: false }) |
||||
wx.showToast({ title: '获取对比数据失败', icon: 'none' }) |
||||
}) |
||||
}, |
||||
|
||||
// 导出Excel - 直接使用下载链接
|
||||
handleExport() { |
||||
wx.showLoading({ title: '导出中...' }) |
||||
|
||||
// 构建导出URL：该接口为业务接口，优先使用 globalData.url
|
||||
const baseUrl = String(app.globalData.url || '').replace(/\/$/, '') |
||||
const exportUrl = `${baseUrl}/?r=xd/doctor/proptosis/export&patientId=${this.data.patientId}` |
||||
|
||||
wx.downloadFile({ |
||||
url: exportUrl, |
||||
success: (downloadRes) => { |
||||
wx.hideLoading() |
||||
if (downloadRes.statusCode === 200) { |
||||
const filePath = downloadRes.tempFilePath |
||||
// 保存到本地文件系统
|
||||
const fs = wx.getFileSystemManager() |
||||
const savedFilePath = `${wx.env.USER_DATA_PATH}/凸眼度对比_${new Date().toISOString().split('T')[0]}.xlsx` |
||||
|
||||
fs.saveFile({ |
||||
tempFilePath: filePath, |
||||
filePath: savedFilePath, |
||||
success: () => { |
||||
// 打开文档
|
||||
wx.openDocument({ |
||||
filePath: savedFilePath, |
||||
fileType: 'xlsx', |
||||
showMenu: true, |
||||
success: () => { |
||||
wx.showToast({ title: '导出成功', icon: 'success' }) |
||||
}, |
||||
fail: (err) => { |
||||
console.error('打开文档失败:', err) |
||||
wx.showToast({ title: '打开文件失败', icon: 'none' }) |
||||
}, |
||||
}) |
||||
}, |
||||
fail: (err) => { |
||||
console.error('保存文件失败:', err) |
||||
// 直接打开临时文件
|
||||
wx.openDocument({ |
||||
filePath, |
||||
fileType: 'xlsx', |
||||
showMenu: true, |
||||
success: () => { |
||||
wx.showToast({ title: '导出成功', icon: 'success' }) |
||||
}, |
||||
fail: () => { |
||||
wx.showToast({ title: '导出失败', icon: 'none' }) |
||||
}, |
||||
}) |
||||
}, |
||||
}) |
||||
} |
||||
else { |
||||
wx.showToast({ title: '导出失败', icon: 'none' }) |
||||
} |
||||
}, |
||||
{ |
||||
date: '2025.12.30', |
||||
left: '30', |
||||
spacing: '30', |
||||
right: '30', |
||||
count: '20', |
||||
fail: (err) => { |
||||
wx.hideLoading() |
||||
console.error('下载失败:', err) |
||||
wx.showToast({ title: '导出失败', icon: 'none' }) |
||||
}, |
||||
], |
||||
}) |
||||
}, |
||||
onLoad() {}, |
||||
}); |
||||
}) |
||||
|
||||
export {}; |
||||
export {} |
||||
|
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"navigationBarTitleText": "对比图编辑", |
||||
"usingComponents": { |
||||
"imageMerge": "/patient/components/image-merge/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,163 @@
@@ -0,0 +1,163 @@
|
||||
page { |
||||
background-color: #f6f8f9; |
||||
} |
||||
|
||||
.page { |
||||
padding-bottom: 160rpx; |
||||
|
||||
.container { |
||||
margin: 40rpx 40rpx 0; |
||||
|
||||
.title { |
||||
padding-bottom: 40rpx; |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
|
||||
.date { |
||||
font-size: 28rpx; |
||||
color: #adacb2; |
||||
font-weight: normal; |
||||
align-self: flex-end; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
width: 8rpx; |
||||
height: 32rpx; |
||||
background: #b982ff; |
||||
border-radius: 44rpx 44rpx 44rpx 44rpx; |
||||
} |
||||
} |
||||
|
||||
.card { |
||||
display: flex; |
||||
|
||||
.aside { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
width: 32rpx; |
||||
|
||||
.circle { |
||||
position: relative; |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
border-radius: 50%; |
||||
background: rgba(185, 130, 255, 0.29); |
||||
flex-shrink: 0; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
display: block; |
||||
content: ''; |
||||
width: 18rpx; |
||||
height: 18rpx; |
||||
border-radius: 50%; |
||||
background-color: #b982ff; |
||||
} |
||||
} |
||||
|
||||
.line-bottom { |
||||
flex: 1; |
||||
width: 2rpx; |
||||
border-left: 2rpx dashed #b982ff; |
||||
margin-top: 8rpx; |
||||
} |
||||
} |
||||
|
||||
.c-container { |
||||
margin-top: -6rpx; |
||||
margin-left: 14rpx; |
||||
flex: 1; |
||||
padding-bottom: 48rpx; |
||||
|
||||
.c-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.date { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
} |
||||
} |
||||
|
||||
.tags { |
||||
margin-top: 12rpx; |
||||
|
||||
.tag { |
||||
display: inline-block; |
||||
margin-right: 16rpx; |
||||
padding: 2rpx 12rpx; |
||||
font-size: 24rpx; |
||||
line-height: 32rpx; |
||||
border-radius: 6rpx; |
||||
|
||||
&.tag1 { |
||||
background: rgba(255, 163, 0, 0.17); |
||||
color: #ffa300; |
||||
} |
||||
|
||||
&.tag2 { |
||||
background: rgba(176, 115, 255, 0.16); |
||||
color: #b073ff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.photo-card { |
||||
margin-top: 24rpx; |
||||
|
||||
.photo { |
||||
border-radius: 32rpx; |
||||
height: 352rpx; |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
padding: 24rpx 40rpx 48rpx; |
||||
background: #fff; |
||||
display: flex; |
||||
gap: 24rpx; |
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05); |
||||
|
||||
.btn1, |
||||
.btn2 { |
||||
flex: 1; |
||||
height: 88rpx; |
||||
font-size: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 100rpx; |
||||
} |
||||
|
||||
.btn1 { |
||||
color: #ffffff; |
||||
background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%); |
||||
} |
||||
|
||||
.btn2 { |
||||
color: #b073ff; |
||||
background: rgba(176, 115, 255, 0.1); |
||||
border: 2rpx solid #b073ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,156 @@
@@ -0,0 +1,156 @@
|
||||
const app = getApp<IAppOption>() |
||||
|
||||
interface PhotoItem { |
||||
photoId: string |
||||
recordId: string |
||||
photoUrl: string |
||||
recordDate: string |
||||
isBaseline: number |
||||
treatmentCount: number |
||||
} |
||||
|
||||
Page({ |
||||
data: { |
||||
patientId: '', |
||||
photoAngle: '', |
||||
photoAngleName: '', |
||||
recordIds: [] as string[], |
||||
photos: [] as PhotoItem[], |
||||
loading: false, |
||||
}, |
||||
|
||||
onLoad(option: any) { |
||||
this.setData({ |
||||
patientId: option.patientId || '', |
||||
photoAngle: option.photoAngle || '', |
||||
recordIds: option.recordIds ? option.recordIds.split(',') : [], |
||||
}) |
||||
// 获取角度名称
|
||||
this.getAngleName() |
||||
// 获取对比照片
|
||||
this.getComparePhotos() |
||||
}, |
||||
|
||||
onShow() { |
||||
app.waitLogin({ type: [2] }) |
||||
}, |
||||
|
||||
// 获取角度名称
|
||||
getAngleName() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/doctor/proptosis/get-compare-angle', |
||||
data: { |
||||
patientId: this.data.patientId, |
||||
}, |
||||
}).then((res: any) => { |
||||
const angleMap = res.photoAngle || {} |
||||
this.setData({ |
||||
photoAngleName: angleMap[this.data.photoAngle] || '', |
||||
}) |
||||
}).catch((err) => { |
||||
console.error('获取角度名称失败:', err) |
||||
}) |
||||
}, |
||||
|
||||
// 获取对比照片
|
||||
getComparePhotos() { |
||||
const { patientId, photoAngle, recordIds } = this.data |
||||
if (!patientId || !photoAngle || recordIds.length === 0) { |
||||
wx.showToast({ title: '参数错误', icon: 'none' }) |
||||
return |
||||
} |
||||
|
||||
this.setData({ loading: true }) |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/doctor/proptosis/compare', |
||||
data: { |
||||
patientId, |
||||
photoAngle, |
||||
recordIds: recordIds.join(','), |
||||
}, |
||||
}).then((res: any) => { |
||||
const baselineRes = res.baseline |
||||
const compareList = res.compareList || [] |
||||
const photos: PhotoItem[] = [] |
||||
if (baselineRes) { |
||||
photos.push({ |
||||
photoId: baselineRes.recordId, |
||||
recordId: baselineRes.recordId, |
||||
photoUrl: baselineRes.photoUrl, |
||||
recordDate: baselineRes.recordDate, |
||||
isBaseline: 1, |
||||
treatmentCount: baselineRes.treatmentCount, |
||||
}) |
||||
} |
||||
compareList.forEach((item: any) => { |
||||
photos.push({ |
||||
photoId: item.recordId, |
||||
recordId: item.recordId, |
||||
photoUrl: item.photoUrl, |
||||
recordDate: item.recordDate, |
||||
isBaseline: 0, |
||||
treatmentCount: item.treatmentCount, |
||||
}) |
||||
}) |
||||
this.setData({ |
||||
photos, |
||||
loading: false, |
||||
}) |
||||
}).catch((err) => { |
||||
console.error('获取对比照片失败:', err) |
||||
this.setData({ loading: false }) |
||||
wx.showToast({ title: '获取照片失败', icon: 'none' }) |
||||
}) |
||||
}, |
||||
|
||||
// 生成对比图预览
|
||||
handleMergePreview() { |
||||
const { photos, photoAngleName } = this.data |
||||
if (photos.length === 0) { |
||||
wx.showToast({ title: '暂无照片', icon: 'none' }) |
||||
return |
||||
} |
||||
|
||||
const mergeComponent = this.selectComponent('#merge') |
||||
if (mergeComponent) { |
||||
const imageList = photos.map((item) => { |
||||
const label = item.isBaseline === 1 |
||||
? `基准照片 ${item.recordDate}` |
||||
: `对比照片 ${item.recordDate} 替妥尤单抗:${item.treatmentCount}次` |
||||
return { |
||||
src: item.photoUrl, |
||||
time: label, |
||||
} |
||||
}) |
||||
mergeComponent.mergeImages(imageList, { |
||||
title: `${photoAngleName}时间线对比`, |
||||
}) |
||||
} |
||||
}, |
||||
|
||||
// 保存成功回调
|
||||
onMergeSave(e: any) { |
||||
const { tempFilePath } = e.detail |
||||
wx.saveImageToPhotosAlbum({ |
||||
filePath: tempFilePath, |
||||
success: () => { |
||||
wx.showToast({ title: '保存成功', icon: 'success' }) |
||||
}, |
||||
fail: (err) => { |
||||
console.error('保存失败:', err) |
||||
wx.showToast({ title: '保存失败', icon: 'none' }) |
||||
}, |
||||
}) |
||||
}, |
||||
|
||||
// 合并失败回调
|
||||
onMergeError(e: any) { |
||||
const { error } = e.detail |
||||
console.error('合并图片失败:', error) |
||||
wx.showToast({ title: '生成对比图失败', icon: 'none' }) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
<view class="page"> |
||||
<view class="container"> |
||||
<view class="title"> |
||||
{{photoAngleName}}时间线对比 |
||||
<view class="date">生成日期:{{photos[0].recordDate}}</view> |
||||
</view> |
||||
<view class="card" wx:for="{{photos}}" wx:key="recordId"> |
||||
<view class="aside"> |
||||
<view class="circle"></view> |
||||
<view class="line-bottom"></view> |
||||
</view> |
||||
<view class="c-container"> |
||||
<view class="c-header"> |
||||
<view class="date">{{item.isBaseline === 1 ? '基准照片' : '对比照片'}} {{item.recordDate}}</view> |
||||
</view> |
||||
<view class="tags"> |
||||
<view wx:if="{{item.isBaseline === 1}}" class="tag tag1">基准照片</view> |
||||
<view class="tag tag2">替妥尤单抗:{{item.treatmentCount}}</view> |
||||
</view> |
||||
<view class="photo-card"> |
||||
<image class="photo" src="{{item.photoUrl}}" mode="aspectFill"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="btn1" bind:tap="handleMergePreview">对比图预览</view> |
||||
<view class="btn2" bind:tap="handleMergePreview">保存到相册</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<imageMerge id="merge" bindsave="onMergeSave" binderror="onMergeError" /> |
||||
@ -1,21 +1,23 @@
@@ -1,21 +1,23 @@
|
||||
<view class="page"> |
||||
<view class="total">共X条日记记录</view> |
||||
<view class="total">共{{total}}条日记记录</view> |
||||
<view class="history-list"> |
||||
<view class="list-item" bind:tap="handleHistory"> |
||||
<view class="benchmark" style="background: url('{{imageUrl}}bg50.png?t={{Timestamp}}') no-repeat top center/100%"> |
||||
<view class="list-item" wx:for="{{recordList}}" wx:key="recordId" data-record-id="{{item.recordId}}" bind:tap="handleHistory"> |
||||
<view wx:if="{{item.isBaseline === 1}}" class="benchmark" style="background: url('{{imageUrl}}bg50.png?t={{Timestamp}}') no-repeat top center/100%"> |
||||
基准照 |
||||
</view> |
||||
<image class="photo" src="{{imageUrl}}icon143.png?t={{Timestamp}}"></image> |
||||
<image class="photo" src="{{item.firstPhotoUrl || imageUrl + 'icon143.png?t=' + Timestamp}}"></image> |
||||
<view class="wrap"> |
||||
<view class="date">2026-04-01</view> |
||||
<view class="tag">替妥尤单抗:2</view> |
||||
<view class="rotate">已上传1个角度</view> |
||||
<view class="date">{{item.recordDate}}</view> |
||||
<view class="tag">替妥尤单抗:{{item.treatmentCount}}</view> |
||||
<view class="rotate">已上传{{item.photoCount}}个角度</view> |
||||
</view> |
||||
<image class="more" src="{{imageUrl}}icon148.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
</view> |
||||
<view class="loading" wx:if="{{loading}}">加载中...</view> |
||||
<view class="no-more" wx:if="{{!hasMore && recordList.length > 0}}">没有更多了</view> |
||||
<view class="footer"> |
||||
<view class="btn1" bind:tap="handleDiffData">眼突度 对比</view> |
||||
<view class="btn2">照片 对比</view> |
||||
<view class="btn2" bind:tap="handlePhotoCompare">照片 对比</view> |
||||
</view> |
||||
</view> |
||||
|
||||
@ -1,7 +1,7 @@
@@ -1,7 +1,7 @@
|
||||
{ |
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", |
||||
"rules": [{ |
||||
"action": "allow", |
||||
"page": "*" |
||||
"action": "allow", |
||||
"page": "*" |
||||
}] |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue