新增nvue扫码页面(barcode组件) 全屏无取景框实时扫码

pages.json

@@ -53,6 +53,16 @@
 			"style": {
 				"navigationBarTitleText": "图书上传"
 			}
+		},
+		{
+			"path": "pages/upload/scan-isbn",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"render": "native"
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/upload/scan-isbn.nvue

@@ -0,0 +1,91 @@
+<template>
+	<view class="page">
+		<barcode class="barcode" ref="barcode" autostart="true" background="rgba(0,0,0,0)" frameColor="transparent" scanbarColor="transparent" :filters="[1,2,5,6,7,8,9,10,11]" @marked="onMarked" @error="onError"></barcode>
+		<!-- 返回按钮 -->
+		<view class="close-btn" @click="goBack">
+			<text class="close-icon">✕</text>
+		</view>
+		<!-- 底部提示 -->
+		<view class="tip">
+			<text class="tip-text">对准条码自动识别</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				scanned: false
+			}
+		},
+		onUnload() {
+			this.$refs.barcode && this.$refs.barcode.cancel()
+		},
+		methods: {
+			onMarked(e) {
+				if (this.scanned) return
+				this.scanned = true
+				const code = e.detail && (e.detail.message || '')
+				if (code && code.length === 13) {
+					// 发送结果回上传页面
+					uni.$emit('scan-isbn-result', code)
+					uni.navigateBack()
+				} else {
+					this.scanned = false
+				}
+			},
+			onError() {
+				uni.showToast({ title: '扫码异常', icon: 'none' })
+				uni.navigateBack()
+			},
+			goBack() {
+				this.$refs.barcode && this.$refs.barcode.cancel()
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style>
+	.page {
+		width: 750rpx;
+		flex: 1;
+		background-color: #000000;
+	}
+	.barcode {
+		width: 750rpx;
+		height: 100vh;
+	}
+	.close-btn {
+		position: fixed;
+		top: 60rpx;
+		left: 30rpx;
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		background-color: rgba(255,255,255,0.2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 999;
+	}
+	.close-icon {
+		color: #ffffff;
+		font-size: 36rpx;
+	}
+	.tip {
+		position: fixed;
+		bottom: 120rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		background-color: rgba(0,0,0,0.5);
+		padding: 12rpx 30rpx;
+		border-radius: 40rpx;
+		z-index: 999;
+	}
+	.tip-text {
+		color: #ffffff;
+		font-size: 28rpx;
+	}
+</style>

pages/upload/upload.vue

@@ -958,6 +958,21 @@ export default {
 		}
 	},
 
+	onShow() {
+		// 每次页面显示时注册扫码结果监听
+		uni.$off('scan-isbn-result')
+		uni.$on('scan-isbn-result', (code) => {
+			if (code) {
+				this.isbn = code.trim()
+				this.searchISBN()
+			}
+		})
+	},
+
+	onUnload() {
+		uni.$off('scan-isbn-result')
+	},
+
 	computed: {
 		conditionValue() {
 			const map = {
@@ -1147,16 +1162,8 @@ export default {
 				uni.showToast({ title: '请先登录孔网账号', icon: 'none' })
 				return
 			}
-			// 打开安卓原生扫码界面（无自定义取景框，对准即识别）
+			// 打开nvue扫码页面（全屏摄像头，无取景框，实时识别）
-			uni.scanCode({
+			uni.navigateTo({ url: '/pages/upload/scan-isbn' })
-				onlyFromCamera: true,
-				scanType: ['barcode'],
-				success: (res) => {
-					this.isbn = (res.result || '').trim()
-					this.searchISBN()
-				},
-				fail: () => {}
-			})
 		},
 
 		// ISBN搜索 - 查询图书中心 + 孔网市场