DaShangDao/daShangDao_scanBook
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:左下缩略图放大到100rpx,点击图片可放大预览

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 17:45:59 +08:00
parent 0d7eff7df0
commit 037afffe2a
1 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
pages/upload/camera_capture.nvue
View File

@ -36,20 +36,20 @@
<view class="cc-footer"> <view class="cc-footer">
<!-- 左侧：缩略图预览 --> <!-- 左侧：缩略图预览 -->
<view class="cc-footer-left"> <view class="cc-footer-left">
<view class="cc-thumb-preview" v-if="capturedList.length > 0" @click="confirmCapture"> <view class="cc-thumb-preview" v-if="capturedList.length > 0" @click="previewLast">
<image class="cc-thumb-last" :src="capturedList[capturedList.length-1]" mode="aspectFill"></image> <image class="cc-thumb-last" :src="capturedList[capturedList.length-1]" mode="aspectFill"></image>
<text class="cc-thumb-badge">{{ capturedList.length }}</text> <text class="cc-thumb-badge">{{ capturedList.length }}</text>
</view> </view>
</view> </view>
<!-- 中间：拍照按钮（放大） --> <!-- 中间：拍照按钮 -->
<view class="cc-footer-center"> <view class="cc-footer-center">
<view class="cc-capture-outer"> <view class="cc-capture-outer">
<view class="cc-capture-btn" @click="capturePhoto"></view> <view class="cc-capture-btn" @click="capturePhoto"></view>
</view> </view>
</view> </view>
<!-- 右侧：完成按钮（拍完显示） --> <!-- 右侧：完成按钮 -->
<view class="cc-footer-right"> <view class="cc-footer-right">
<text class="cc-confirm-btn" @click="confirmCapture" v-if="capturedList.length > 0">完成 {{ capturedList.length }}</text> <text class="cc-confirm-btn" @click="confirmCapture" v-if="capturedList.length > 0">完成 {{ capturedList.length }}</text>
</view> </view>
@ -60,7 +60,7 @@
<scroll-view scroll-x="true" show-scrollbar="false" style="flex-direction:row;"> <scroll-view scroll-x="true" show-scrollbar="false" style="flex-direction:row;">
<view style="flex-direction:row;"> <view style="flex-direction:row;">
<view class="cc-thumb-item" v-for="(img, idx) in capturedList" :key="idx"> <view class="cc-thumb-item" v-for="(img, idx) in capturedList" :key="idx">
<image class="cc-thumb-img" :src="img" mode="aspectFill"></image> <image class="cc-thumb-img" :src="img" mode="aspectFill" @click.stop="previewPhoto(idx)"></image>
<view class="cc-thumb-del" @click.stop="deletePhoto(idx)"> <view class="cc-thumb-del" @click.stop="deletePhoto(idx)">
<text class="cc-del-icon">✕</text> <text class="cc-del-icon">✕</text>
</view> </view>
@ -158,6 +158,19 @@
prevPage.$vm.capturedPhotoList = this.capturedList prevPage.$vm.capturedPhotoList = this.capturedList
} }
uni.navigateBack() uni.navigateBack()
},
// 放大预览指定图片
previewPhoto(idx) {
if (this.capturedList.length > 0) {
uni.previewImage({
current: this.capturedList[idx],
urls: this.capturedList
})
}
},
// 放大预览最新一张
previewLast() {
this.previewPhoto(this.capturedList.length - 1)
} }
} }
} }
@ -302,8 +315,8 @@
/* 缩略图预览（最新一张） */ /* 缩略图预览（最新一张） */
.cc-thumb-preview { .cc-thumb-preview {
width: 80rpx; height: 80rpx; width: 100rpx; height: 100rpx;
border-radius: 10rpx; border-radius: 12rpx;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-width: 2rpx; border-width: 2rpx;
@ -311,19 +324,19 @@
border-style: solid; border-style: solid;
} }
.cc-thumb-last { .cc-thumb-last {
width: 80rpx; height: 80rpx; width: 100rpx; height: 100rpx;
} }
.cc-thumb-badge { .cc-thumb-badge {
position: absolute; position: absolute;
top: -6rpx; right: -6rpx; top: -8rpx; right: -8rpx;
min-width: 30rpx; height: 30rpx; min-width: 34rpx; height: 34rpx;
border-radius: 30rpx; border-radius: 34rpx;
background-color: #409eff; background-color: #409eff;
color: #ffffff; color: #ffffff;
font-size: 20rpx; font-size: 22rpx;
text-align: center; text-align: center;
line-height: 30rpx; line-height: 34rpx;
padding-left: 4rpx; padding-right: 4rpx; padding-left: 6rpx; padding-right: 6rpx;
} }
/* 缩略图横条 */ /* 缩略图横条 */