Browse Source

处理众测问题

dev
kola-web 3 days ago
parent
commit
b021f0949f
  1. 4
      src/components/image-merge/index.ts
  2. 57
      src/components/noteImagePreview/index.scss
  3. 80
      src/components/noteImagePreview/index.ts
  4. 14
      src/components/noteImagePreview/index.wxml
  5. 2
      src/pages/d_noteDiff/index.wxml
  6. 6
      src/patient/components/camera/index.ts
  7. 2
      src/patient/pages/note/index.scss
  8. 8
      src/patient/pages/noteAdd/index.scss
  9. 35
      src/patient/pages/noteAdd/index.ts
  10. 3
      src/patient/pages/noteAdd/index.wxml
  11. 2
      src/patient/pages/noteDiff/index.wxml
  12. 2
      src/patient/pages/noteHistory/index.scss

4
src/components/image-merge/index.ts

@ -139,7 +139,7 @@ Component({ @@ -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({ @@ -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)
}

57
src/components/noteImagePreview/index.scss

@ -27,12 +27,69 @@ @@ -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;
}
}
// 底部操作栏

80
src/components/noteImagePreview/index.ts

@ -11,12 +11,34 @@ Component({ @@ -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({ @@ -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({

14
src/components/noteImagePreview/index.wxml

@ -3,8 +3,20 @@ @@ -3,8 +3,20 @@
<van-icon name="arrow-left" slot="left" size="18px" color="#fff" bind:tap="handleBack" />
</navbar>
<view class="image-wrapper" style="padding-top:{{navHeight}}px;">
<view class="image-wrapper" style="padding-top:{{navHeight}}px;" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd">
<view class="nav-btn nav-prev {{currentIndex <= 0 ? 'disabled' : ''}}" wx:if="{{images.length > 1}}" bindtap="handlePrev">
<van-icon name="arrow-left" size="20px" color="{{currentIndex <= 0 ? '#666' : '#fff'}}" />
</view>
<image class="preview-image" src="{{src}}" mode="aspectFit" />
<view class="nav-btn nav-next {{currentIndex >= images.length - 1 ? 'disabled' : ''}}" wx:if="{{images.length > 1}}" bindtap="handleNext">
<van-icon name="arrow" size="20px" color="{{currentIndex >= images.length - 1 ? '#666' : '#fff'}}" />
</view>
</view>
<view class="indicator" wx:if="{{images.length > 1}}">
<text class="current">{{currentIndex + 1}}</text>
<text class="separator">/</text>
<text class="total">{{images.length}}</text>
</view>
<view class="action-bar">

2
src/pages/d_noteDiff/index.wxml

@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
<view class="page-tip">
<image class="icon" src="{{imageUrl}}icon154.png?t={{Timestamp}}"></image>
<view class="content">
您可以同时选择多个日期,系统将按时间顺序排列照片。点击右上角按钮可预览并保存生成的对比长图。
您可以同时选择多个日期,系统将按时间顺序排列照片。点击生成对比图按钮可以生成对比长图。
</view>
</view>
<view class="form">

6
src/patient/components/camera/index.ts

@ -313,8 +313,14 @@ Component({ @@ -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 })
},

2
src/patient/pages/note/index.scss

@ -139,7 +139,7 @@ page { @@ -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;
}
}

8
src/patient/pages/noteAdd/index.scss

@ -10,6 +10,7 @@ page { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -119,6 +124,7 @@ page {
padding: 26rpx;
border-radius: 18rpx;
.icon {
flex-shrink: 0;
width: 36rpx;
height: 36rpx;
}

35
src/patient/pages/noteAdd/index.ts

@ -41,6 +41,9 @@ Page({ @@ -41,6 +41,9 @@ Page({
imagePreview: false,
previewImageSrc: '',
currentPhotoAngle: '',
previewImages: [] as string[],
previewAngles: [] as string[],
previewCurrentIndex: 0,
recordId: '',
// 表单数据
@ -377,10 +380,30 @@ Page({ @@ -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({ @@ -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({

3
src/patient/pages/noteAdd/index.wxml

@ -143,9 +143,12 @@ @@ -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"
></noteImagePreview>
<popup

2
src/patient/pages/noteDiff/index.wxml

@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
<view class="page-tip">
<image class="icon" src="{{imageUrl}}icon154.png?t={{Timestamp}}"></image>
<view class="content">
您可以同时选择多个日期,系统将按时间顺序排列照片。点击右上角按钮可预览并保存生成的对比长图。
您可以同时选择多个日期,系统将按时间顺序排列照片。点击生成对比图按钮可以生成对比长图。
</view>
</view>
<view class="form">

2
src/patient/pages/noteHistory/index.scss

@ -18,7 +18,7 @@ @@ -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);

Loading…
Cancel
Save