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

fix:去掉自动定时连拍,改为手动逐张拍照预览不消失

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 16:25:25 +08:00
parent e9d146ac74
commit 2600d5b15f
2 changed files with 20 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
pages/upload/camera_capture.nvue
View File

@ -1,6 +1,6 @@
<template> <template>
<view class="cc-page"> <view class="cc-page">
<!-- 相机预览 --> <!-- 相机预览（一直显示） -->
<ima-camera-view <ima-camera-view
ref="cameraRef" ref="cameraRef"
class="cc-camera" class="cc-camera"
@ -10,17 +10,9 @@
@onCameraOpened="onCameraOpened" @onCameraOpened="onCameraOpened"
></ima-camera-view> ></ima-camera-view>
<!-- 连拍模式提示遮罩 -->
<view class="cc-burst-overlay" v-if="isBurstMode">
<text class="cc-burst-tip">连拍中⋯</text>
<text class="cc-burst-count">{{ capturedList.length }} 张</text>
<text class="cc-burst-hint">点击红色按钮停止</text>
</view>
<!-- 顶部：已拍数量 & 确认 --> <!-- 顶部：已拍数量 & 确认 -->
<view class="cc-topbar"> <view class="cc-topbar">
<text class="cc-topbar-title" v-if="capturedList.length > 0">已拍 {{ capturedList.length }}/9</text> <text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 ' + capturedList.length + '/9 张' : '拍照' }}</text>
<text class="cc-topbar-title" v-else>相机</text>
<text class="cc-topbar-confirm" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }"> <text class="cc-topbar-confirm" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
确认 ({{ capturedList.length }}) 确认 ({{ capturedList.length }})
</text> </text>
@ -28,27 +20,21 @@
<!-- 底部操作区 --> <!-- 底部操作区 -->
<view class="cc-footer"> <view class="cc-footer">
<!-- 返回 --> <!-- 取消 -->
<view class="cc-footer-left" @click="goBack"> <view class="cc-footer-left" @click="goBack">
<text class="cc-footer-text">取消</text> <text class="cc-footer-text">取消</text>
</view> </view>
<!-- 中央拍照/停止 --> <!-- 中央拍照按钮 -->
<view class="cc-footer-center"> <view class="cc-footer-center">
<view class="cc-stop-btn" @click="stopBurst" v-if="isBurstMode"> <view class="cc-capture-btn" @click="capturePhoto" :class="{ disabled: capturedList.length >= 9 }">
<view class="cc-stop-inner">■</view>
</view>
<view class="cc-capture-btn" @click="capturePhoto" v-else>
<view class="cc-capture-inner"></view> <view class="cc-capture-inner"></view>
</view> </view>
</view> </view>
<!-- 右侧操作 --> <!-- 右侧：翻转 -->
<view class="cc-footer-right"> <view class="cc-footer-right">
<view class="cc-burst-toggle" @click="toggleBurst" v-if="!isBurstMode && capturedList.length < 9"> <view class="cc-flip-btn" @click="flipCamera">
<text class="cc-burst-toggle-text">⚡连拍</text>
</view>
<view class="cc-flip-btn" @click="flipCamera" v-if="!isBurstMode">
<text class="cc-flip-icon">↺</text> <text class="cc-flip-icon">↺</text>
</view> </view>
</view> </view>
@ -76,14 +62,9 @@
return { return {
capturedList: [], capturedList: [],
cameraReady: false, cameraReady: false,
facing: 'back', facing: 'back'
isBurstMode: false,
burstTimer: null
} }
}, },
onUnload() {
this.clearBurstTimer()
},
methods: { methods: {
// 相机初始化完成 // 相机初始化完成
onCameraOpened() { onCameraOpened() {
@ -91,8 +72,12 @@
console.log('相机已就绪') console.log('相机已就绪')
}, },
// 拍照 // 拍照（预览一直显示，拍完继续拍下一张）
takePhotoAction() { capturePhoto() {
if (this.capturedList.length >= 9) {
uni.showToast({ title: '最多拍9张', icon: 'none' })
return
}
if (!this.cameraReady) { if (!this.cameraReady) {
uni.showToast({ title: '相机未就绪', icon: 'none' }) uni.showToast({ title: '相机未就绪', icon: 'none' })
return return
@ -108,50 +93,6 @@
} }
}, },
// 单拍
capturePhoto() {
if (this.capturedList.length >= 9) {
uni.showToast({ title: '最多拍9张', icon: 'none' })
return
}
this.takePhotoAction()
},
// 连拍开关
toggleBurst() {
if (this.capturedList.length >= 9) {
uni.showToast({ title: '最多拍9张', icon: 'none' })
return
}
this.isBurstMode = true
this.doBurstCapture()
},
doBurstCapture() {
if (!this.isBurstMode || this.capturedList.length >= 9) {
this.isBurstMode = false
return
}
this.takePhotoAction()
// 间隔 1.5 秒后继续
var that = this
this.burstTimer = setTimeout(function() {
that.doBurstCapture()
}, 1500)
},
stopBurst() {
this.isBurstMode = false
this.clearBurstTimer()
},
clearBurstTimer() {
if (this.burstTimer) {
clearTimeout(this.burstTimer)
this.burstTimer = null
}
},
// 切换摄像头 // 切换摄像头
flipCamera() { flipCamera() {
this.facing = this.facing === 'back' ? 'front' : 'back' this.facing = this.facing === 'back' ? 'front' : 'back'
@ -163,7 +104,7 @@
this.capturedList.splice(idx, 1) this.capturedList.splice(idx, 1)
}, },
// 返回 // 取消
goBack() { goBack() {
if (this.capturedList.length > 0) { if (this.capturedList.length > 0) {
uni.showModal({ uni.showModal({
@ -207,36 +148,6 @@
flex: 1; flex: 1;
width: 750rpx; width: 750rpx;
} }
/* 连拍遮罩 */
.cc-burst-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: none;
}
.cc-burst-tip {
color: #fff;
font-size: 40rpx;
font-weight: bold;
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
}
.cc-burst-count {
color: rgba(255,255,255,0.9);
font-size: 32rpx;
margin-top: 16rpx;
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
}
.cc-burst-hint {
color: rgba(255,255,255,0.6);
font-size: 24rpx;
margin-top: 20rpx;
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
}
/* 顶部栏 */ /* 顶部栏 */
.cc-topbar { .cc-topbar {
position: absolute; position: absolute;
@ -298,12 +209,11 @@
justify-content: center; justify-content: center;
} }
.cc-footer-right { .cc-footer-right {
width: 200rpx; width: 120rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 20rpx;
} }
/* 拍照按钮 */ /* 拍照按钮 */
.cc-capture-btn { .cc-capture-btn {
@ -321,33 +231,8 @@
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
} }
/* 停止按钮 */ .cc-capture-btn.disabled {
.cc-stop-btn { opacity: 0.4;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 6rpx solid #ff4444;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,68,68,0.15);
}
.cc-stop-inner {
color: #ff4444;
font-size: 32rpx;
font-weight: bold;
}
/* 连拍按钮 */
.cc-burst-toggle {
padding: 12rpx 18rpx;
border-radius: 28rpx;
border: 2rpx solid #409eff;
background: rgba(64,158,255,0.1);
}
.cc-burst-toggle-text {
color: #409eff;
font-size: 22rpx;
font-weight: bold;
} }
/* 翻转按钮 */ /* 翻转按钮 */
.cc-flip-btn { .cc-flip-btn {

4
pages/upload/upload.vue
View File

@ -126,7 +126,7 @@
</view> </view>
<view class="photo-add photo-burst" @click="openCameraCapture('isbn')" v-if="photoList.length < 9"> <view class="photo-add photo-burst" @click="openCameraCapture('isbn')" v-if="photoList.length < 9">
<text class="add-icon" style="font-size:28rpx;">⚡</text> <text class="add-icon" style="font-size:28rpx;">⚡</text>
<text class="add-text">连拍</text> <text class="add-text">拍照</text>
</view> </view>
</view> </view>
</view> </view>
@ -447,7 +447,7 @@
</view> </view>
<view class="photo-add photo-burst" @click="openCameraCapture('no-isbn')" v-if="noIsbnPhotoList.length < 9"> <view class="photo-add photo-burst" @click="openCameraCapture('no-isbn')" v-if="noIsbnPhotoList.length < 9">
<text class="add-icon" style="font-size:28rpx;">⚡</text> <text class="add-icon" style="font-size:28rpx;">⚡</text>
<text class="add-text">连拍</text> <text class="add-text">拍照</text>
</view> </view>
</view> </view>
</view> </view>