From b021f0949fa97aa1e316b32b041872deeebe27c6 Mon Sep 17 00:00:00 2001 From: kola-web Date: Fri, 15 May 2026 16:43:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E4=BC=97=E6=B5=8B=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/image-merge/index.ts | 4 +- src/components/noteImagePreview/index.scss | 57 +++++++++++++++++++++ src/components/noteImagePreview/index.ts | 80 +++++++++++++++++++++++++++++- src/components/noteImagePreview/index.wxml | 14 +++++- src/pages/d_noteDiff/index.wxml | 2 +- src/patient/components/camera/index.ts | 6 +++ src/patient/pages/note/index.scss | 2 +- src/patient/pages/noteAdd/index.scss | 8 ++- src/patient/pages/noteAdd/index.ts | 35 +++++++++++++ src/patient/pages/noteAdd/index.wxml | 3 ++ src/patient/pages/noteDiff/index.wxml | 2 +- src/patient/pages/noteHistory/index.scss | 2 +- 12 files changed, 206 insertions(+), 9 deletions(-) diff --git a/src/components/image-merge/index.ts b/src/components/image-merge/index.ts index e46c449..aa0fe2c 100644 --- a/src/components/image-merge/index.ts +++ b/src/components/image-merge/index.ts @@ -139,7 +139,7 @@ Component({ const textY = yPositions[index] + 40 ctx.fillStyle = '#ffffff' - ctx.font = 'bold 28px sans-serif' + ctx.font = 'bold 38px sans-serif' ctx.textAlign = 'left' ctx.shadowColor = 'rgba(0, 0, 0, 0.5)' ctx.shadowBlur = 4 @@ -155,7 +155,7 @@ Component({ if (index === imageInfos.length - 1) { const lastImageBottom = yPositions[index] + scaledHeights[index] ctx.fillStyle = 'rgba(255, 255, 255, 0.8)' - ctx.font = '24px sans-serif' + ctx.font = '32px sans-serif' ctx.textAlign = 'right' ctx.fillText('由-TED关爱小助手-小程序生成', canvasWidth - 20, lastImageBottom - 20) } diff --git a/src/components/noteImagePreview/index.scss b/src/components/noteImagePreview/index.scss index 5736736..bce7c81 100644 --- a/src/components/noteImagePreview/index.scss +++ b/src/components/noteImagePreview/index.scss @@ -27,12 +27,69 @@ align-items: center; justify-content: center; overflow: hidden; + position: relative; .preview-image { display: block; width: 100%; height: 100%; } + + // 左右切换按钮 + .nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 72rpx; + height: 72rpx; + border-radius: 50%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + + &:active:not(.disabled) { + background: rgba(0, 0, 0, 0.6); + } + + &.disabled { + opacity: 0.3; + } + + &.nav-prev { + left: 24rpx; + } + + &.nav-next { + right: 24rpx; + } + } +} + +// 页码指示器 +.indicator { + position: absolute; + left: 0; + right: 0; + text-align: center; + color: #fff; + font-size: 28rpx; + z-index: 10; + bottom: calc(168rpx + env(safe-area-inset-bottom)); + + .current { + font-weight: 600; + } + + .separator { + margin: 0 8rpx; + opacity: 0.6; + } + + .total { + opacity: 0.6; + } } // 底部操作栏 diff --git a/src/components/noteImagePreview/index.ts b/src/components/noteImagePreview/index.ts index 6884178..ff4db82 100644 --- a/src/components/noteImagePreview/index.ts +++ b/src/components/noteImagePreview/index.ts @@ -11,12 +11,34 @@ Component({ type: String, value: '', }, + images: { + type: Array, + value: [], + }, + currentIndex: { + type: Number, + value: 0, + }, }, data: { visible: false, src: '', + images: [] as string[], + currentIndex: 0, navHeight: wx.getSystemInfoSync().statusBarHeight + 44, + startX: 0, + startY: 0, + }, + + observers: { + 'currentIndex, images': function (currentIndex: number, images: string[]) { + if (images && images.length > 0 && images[currentIndex]) { + this.setData({ + src: images[currentIndex], + }) + } + }, }, methods: { @@ -42,10 +64,66 @@ Component({ handleHidePreview() { this.setData({ visible: false, - sec: '', + src: '', + }) + }, + + // 上一张 + handlePrev() { + const { currentIndex, images } = this.data + if (currentIndex > 0) { + const newIndex = currentIndex - 1 + this.setData({ + currentIndex: newIndex, + }) + this.triggerEvent('change', { index: newIndex }) + } + }, + + // 下一张 + handleNext() { + const { currentIndex, images } = this.data + if (currentIndex < images.length - 1) { + const newIndex = currentIndex + 1 + this.setData({ + currentIndex: newIndex, + }) + this.triggerEvent('change', { index: newIndex }) + } + }, + + // 滑动手势 - 开始 + handleTouchStart(e: any) { + this.setData({ + startX: e.touches[0].clientX, + startY: e.touches[0].clientY, }) }, + // 滑动手势 - 结束 + handleTouchEnd(e: any) { + const { startX, startY, currentIndex, images } = this.data + const endX = e.changedTouches[0].clientX + const endY = e.changedTouches[0].clientY + const diffX = endX - startX + const diffY = endY - startY + + // 水平滑动距离大于50且大于垂直滑动距离时才触发切换 + if (Math.abs(diffX) > 50 && Math.abs(diffX) > Math.abs(diffY)) { + if (diffX > 0) { + // 右滑 - 上一张 + if (currentIndex > 0) { + this.handlePrev() + } + } else { + // 左滑 - 下一张 + if (currentIndex < images.length - 1) { + this.handleNext() + } + } + } + }, + // 删除 handleDelete() { wx.showModal({ diff --git a/src/components/noteImagePreview/index.wxml b/src/components/noteImagePreview/index.wxml index a01528c..4af199f 100644 --- a/src/components/noteImagePreview/index.wxml +++ b/src/components/noteImagePreview/index.wxml @@ -3,8 +3,20 @@ - + + + + + + + + + + + {{currentIndex + 1}} + / + {{images.length}} diff --git a/src/pages/d_noteDiff/index.wxml b/src/pages/d_noteDiff/index.wxml index 4fb7db6..c6308f0 100644 --- a/src/pages/d_noteDiff/index.wxml +++ b/src/pages/d_noteDiff/index.wxml @@ -6,7 +6,7 @@ - 您可以同时选择多个日期，系统将按时间顺序排列照片。点击右上角按钮可预览并保存生成的对比长图。 + 您可以同时选择多个日期，系统将按时间顺序排列照片。点击生成对比图按钮可以生成对比长图。 diff --git a/src/patient/components/camera/index.ts b/src/patient/components/camera/index.ts index 366aa03..8e5be4f 100644 --- a/src/patient/components/camera/index.ts +++ b/src/patient/components/camera/index.ts @@ -313,8 +313,14 @@ Component({ switchCamera() { const newPosition = this.data.devicePosition === 'back' ? 'front' : 'back' + // 前置摄像头镜像，左侧45度和右侧45度需要互换 frame 图片 + const frame = { ...this.data.frame } + const temp6 = { ...frame[6] } + frame[6] = { ...frame[7] } + frame[7] = temp6 this.setData({ devicePosition: newPosition, + frame, }) this.triggerEvent('positionchange', { position: newPosition }) }, diff --git a/src/patient/pages/note/index.scss b/src/patient/pages/note/index.scss index 0abe980..da731f5 100644 --- a/src/patient/pages/note/index.scss +++ b/src/patient/pages/note/index.scss @@ -139,7 +139,7 @@ page { right: 0; width: 60rpx; height: 60rpx; - background: linear-gradient(45deg, #e5d2ff 0%, #f6f8f9 50%, #f6f8f9 100%); + background: linear-gradient(45deg, #f6edff 0%, #f6edff 50%, #f6f8f9 50%, #f6f8f9 100%); border-radius: 0 0 0 18rpx; } } diff --git a/src/patient/pages/noteAdd/index.scss b/src/patient/pages/noteAdd/index.scss index caafd64..97c107a 100644 --- a/src/patient/pages/noteAdd/index.scss +++ b/src/patient/pages/noteAdd/index.scss @@ -10,6 +10,7 @@ page { font-size: 28rpx; color: #211d2e; .wx-checkbox-input { + padding: 2rpx; background: rgba(173, 172, 178, 0.36); border-color: transparent; width: 32rpx; @@ -17,6 +18,9 @@ page { } .wx-checkbox-input-checked { background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%); + width: 32rpx; + height: 33rpx; + border: none; } } } @@ -87,7 +91,7 @@ page { } } .container { - margin-top: 72rpx; + margin-top: 32rpx; padding: 32rpx 40rpx 0; background-color: #fff; border-radius: 32rpx 32rpx 0 0; @@ -110,6 +114,7 @@ page { margin-top: 30rpx; display: flex; align-items: center; + justify-content: center; gap: 22rpx; .btn { flex: 1; @@ -119,6 +124,7 @@ page { padding: 26rpx; border-radius: 18rpx; .icon { + flex-shrink: 0; width: 36rpx; height: 36rpx; } diff --git a/src/patient/pages/noteAdd/index.ts b/src/patient/pages/noteAdd/index.ts index ed0db6a..5ac733d 100644 --- a/src/patient/pages/noteAdd/index.ts +++ b/src/patient/pages/noteAdd/index.ts @@ -41,6 +41,9 @@ Page({ imagePreview: false, previewImageSrc: '', currentPhotoAngle: '', + previewImages: [] as string[], + previewAngles: [] as string[], + previewCurrentIndex: 0, recordId: '', // 表单数据 @@ -377,10 +380,30 @@ Page({ const { angle } = e.currentTarget.dataset const photo = this.data.photoMap[angle] if (photo) { + // 构建已上传图片列表（按 cameraList 顺序） + const allAngles = [ + ...this.data.cameraList.frontend, + ...this.data.cameraList.backend, + ...this.data.cameraList.other, + ] + const previewAngles: string[] = [] + const previewImages: string[] = [] + allAngles.forEach((item) => { + const p = this.data.photoMap[item.angle] + if (p) { + previewAngles.push(item.angle) + previewImages.push(p.photoUrl) + } + }) + const currentIndex = previewAngles.indexOf(angle) + this.setData({ imagePreview: true, previewImageSrc: photo.photoUrl, currentPhotoAngle: angle, + previewImages, + previewAngles, + previewCurrentIndex: currentIndex >= 0 ? currentIndex : 0, }) } }, @@ -392,6 +415,18 @@ Page({ }) }, + // 预览图片切换 + handleImageChange(e: any) { + const { index } = e.detail + const angle = this.data.previewAngles[index] + if (angle) { + this.setData({ + currentPhotoAngle: angle, + previewCurrentIndex: index, + }) + } + }, + // 重新拍摄 handleImageRetake() { this.setData({ diff --git a/src/patient/pages/noteAdd/index.wxml b/src/patient/pages/noteAdd/index.wxml index ffd7720..36bcbb0 100644 --- a/src/patient/pages/noteAdd/index.wxml +++ b/src/patient/pages/noteAdd/index.wxml @@ -143,9 +143,12 @@ id="note-image-preview" visible="{{imagePreview}}" src="{{previewImageSrc}}" + images="{{previewImages}}" + currentIndex="{{previewCurrentIndex}}" bind:close="handleImagePreviewClose" bind:delete="handleImageDel" bind:retake="handleImageRetake" + bind:change="handleImageChange" > - 您可以同时选择多个日期，系统将按时间顺序排列照片。点击右上角按钮可预览并保存生成的对比长图。 + 您可以同时选择多个日期，系统将按时间顺序排列照片。点击生成对比图按钮可以生成对比长图。 diff --git a/src/patient/pages/noteHistory/index.scss b/src/patient/pages/noteHistory/index.scss index ec6b8b8..97ead62 100644 --- a/src/patient/pages/noteHistory/index.scss +++ b/src/patient/pages/noteHistory/index.scss @@ -18,7 +18,7 @@ padding: 2rpx 12rpx; font-size: 24rpx; color: #ffa300; - line-height: 32rpx; + line-height: 36rpx; border-radius: 6rpx; &.tag1 { background: rgba(255, 163, 0, 0.17);