duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 扫码页优化 — 修复黑屏+右下角相册+Webview透明+扫描框位置调整

Browse Source
This commit is contained in:
duxingchen
2026-08-12 17:05:42 +08:00
parent a09d4481a3
commit f6ba1d1740
1 changed files with 33 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
track-uniapp/src/pages/scan/index.vue
View File

@ -1,17 +1,14 @@
<template>
<!-- 动态切换背景：扫码时必须全透明 -->
<view class="page" :class="{ 'is-scanning': status === 'scanning' }">
<!-- ================= 状态 1：主控台 (保留你的原版UI) ================= -->
<!-- ================= 状态 1：主控台 (你的原版) ================= -->
<view v-show="status === 'idle'" class="dashboard">
<!-- 🚀 全屏扫码大按钮 -->
<view class="scan-btn camera-btn" @tap="startBarcodeScanner">
<text class="scan-icon">📷</text>
<text class="scan-text">拍照扫码</text>
<text class="scan-hint">全屏扫描二维码 / 条码</text>
</view>
<!-- 手动输入 -->
<view class="manual-section">
<text class="section-label">或手动输入</text>
<view class="manual-input">
@ -23,23 +20,21 @@
</view>
</view>
<!-- 最近扫描 -->
<view v-if="lastScanned" class="last-scan">
<text class="last-label">最近扫描</text>
<text class="sn-text" @tap="handleSearch">{{ lastScanned }}</text>
</view>
<!-- 状态提示 -->
<view v-if="loading" class="loading">
<text class="loading-icon">⏳</text>
<text>查询中...</text>
</view>
<view v-if="error" class="error-box">
<text class="error-icon">⚠️</text>
<text>{{ error }}</text>
</view>
<!-- 空状态 -->
<view v-if="!loading && !error && !lastScanned" class="empty">
<text class="empty-icon">📱</text>
<text class="empty-text">扫码或手动输入身份证</text>
@ -69,7 +64,7 @@
<!-- 扫描线动画 -->
<view v-if="scanning && !multiCodes.length" class="scan-line" />
<!-- 多码标记层 (核心功能) -->
<!-- 多码标记层 -->
<view v-if="multiCodes.length > 0" class="multi-marks" @tap="clearMarks">
<view
v-for="(mc, i) in multiCodes"
@ -86,18 +81,10 @@
<view class="mark-hint">点击箭头选择目标条码</view>
</view>
<!-- 底部悬浮胶囊 -->
<view class="bottom-action-bar">
<view class="action-btn" @tap="handleAlbum">
<text class="action-text">相册</text>
</view>
<view class="action-btn" @tap="toggleFlash">
<text class="action-text">{{ flashMode === 'on' ? '关灯' : '照明' }}</text>
</view>
<!-- 点击手动输入，直接关闭摄像头回到你的主页 -->
<view class="action-btn primary" @tap="stopScanner">
<text class="action-text primary-text">手动输入</text>
</view>
<!-- 右下角相册按钮 (仿微信) -->
<view class="album-btn" @tap="handleAlbum">
<text class="album-icon">🖼️</text>
<text class="album-text">相册</text>
</view>
</view>
@ -113,17 +100,12 @@ let scanTimer = null;
export default {
data() {
return {
status: 'idle', // 'idle': 主页 | 'scanning': 扫码中
// 原版业务数据
status: 'idle',
serialNumber: "",
lastScanned: "",
loading: false,
error: "",
// 扫码控制数据
scanning: true,
flashMode: 'off',
multiCodes: [],
};
},
@ -134,7 +116,7 @@ export default {
this.stopScanner();
},
methods: {
// ================= 原版业务查询逻辑 =================
// ================= 原版业务查询 =================
async doQuery(sn) {
if (!sn || sn.length < 8) { this.error = "身份证至少需要 8 位"; return; }
this.serialNumber = sn;
@ -143,10 +125,8 @@ export default {
this.error = "";
try {
await get(`/products/scan/${sn}`);
// 全局存储一下，方便详情页使用
getApp().globalData = getApp().globalData || {};
getApp().globalData.scannedSn = sn;
uni.navigateTo({ url: `/pages/scan/detail?serial=${sn}` });
} catch (e) {
this.error = e?.data?.detail || "未找到该产品";
@ -158,19 +138,22 @@ export default {
this.doQuery(this.serialNumber.trim());
},
// ================= 微信级全屏扫码逻辑 =================
// ================= 全屏扫码核心逻辑 =================
startBarcodeScanner() {
this.status = 'scanning';
this.scanning = true;
this.flashMode = 'off';
// 强制把当前 Webview 背景变透明，防止挡住摄像头
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.setStyle({ background: 'transparent' });
if (barcodeScanner) {
barcodeScanner.start();
return;
}
// 创建透明原生摄像头
// 创建原生摄像头 (去掉了导致黑屏的 background 透明属性)
barcodeScanner = new plus.barcode.Barcode('', [
plus.barcode.QR, plus.barcode.EAN13, plus.barcode.EAN8,
plus.barcode.CODE128, plus.barcode.CODE39, plus.barcode.CODE93,
@ -178,15 +161,13 @@ export default {
top: '0', left: '0', width: '100%', height: '100%',
position: 'absolute',
frameColor: 'rgba(0,0,0,0)',
scanbarColor: 'rgba(0,0,0,0)',
background: 'rgba(0,0,0,0)' // 必须透明才能透出摄像头
scanbarColor: 'rgba(0,0,0,0)'
});
barcodeScanner.onmarked = (type, result) => {
const results = Array.isArray(result) ? result : [{ type, result }];
if (results.length > 1) {
// 多码同框选点逻辑
this.scanning = false;
this.multiCodes = results.map((r, i) => {
let x = 20 + i * 25;
@ -205,7 +186,6 @@ export default {
}
};
const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.append(barcodeScanner);
barcodeScanner.start();
// #endif
@ -217,11 +197,13 @@ export default {
stopScanner() {
this.status = 'idle';
this.flashMode = 'off';
clearTimeout(scanTimer);
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.setStyle({ background: '#f3f4f6' }); // 恢复网页原来的背景色
if (barcodeScanner) {
barcodeScanner.setFlash(false);
barcodeScanner.close();
barcodeScanner = null;
}
@ -230,8 +212,8 @@ export default {
handleScanSuccess(rawResult) {
const sn = (rawResult || "").replace(/[^a-zA-Z0-9]/g, "").slice(0, 16);
this.stopScanner(); // 先关闭摄像头
this.doQuery(sn); // 调用你的原版查询方法
this.stopScanner();
this.doQuery(sn);
},
fallbackScanCode() {
@ -240,9 +222,6 @@ export default {
scanType: ["qrCode", "barCode"],
success: (res) => this.handleScanSuccess(res.result),
fail: (err) => {
if (!err.errMsg || !err.errMsg.includes("cancel")) {
uni.showToast({ title: "扫码失败，请重试", icon: "none" });
}
this.stopScanner();
},
});
@ -265,15 +244,6 @@ export default {
}
},
toggleFlash() {
this.flashMode = this.flashMode === 'on' ? 'off' : 'on';
// #ifdef APP-PLUS
if (barcodeScanner) {
barcodeScanner.setFlash(this.flashMode === 'on');
}
// #endif
},
handleAlbum() {
this.stopScanner();
uni.chooseImage({
@ -295,9 +265,9 @@ export default {
<style scoped>
/* 页面基础 */
.page { min-height: 100vh; background: #f3f4f6; transition: background 0.3s; }
/* 核心：扫码时整个网页必须透明，才能透出底层的原生摄像头 */
.page.is-scanning { background: transparent; }
.page { min-height: 100vh; background: #f3f4f6; }
/* 扫码时强制透明 */
.page.is-scanning { background: transparent !important; }
/* ================= 你的原版主页样式 ================= */
.dashboard { padding: 24px 16px 16px; }
@ -334,14 +304,14 @@ export default {
.top-desc { font-size: 12px; color: rgba(255,255,255,0.7); }
/* 扫描框 */
.scan-frame { position: absolute; top: 15%; left: 10%; right: 10%; bottom: 30%; pointer-events: none; z-index: 10; }
.scan-frame { position: absolute; top: 20%; left: 15%; right: 15%; bottom: 40%; pointer-events: none; z-index: 10; }
.frame-corner { position: absolute; width: 30px; height: 30px; border-color: #00ff88; border-style: solid; }
.frame-tl { top: 0; left: 0; border-width: 3px 0 0 3px; }
.frame-tr { top: 0; right: 0; border-width: 3px 3px 0 0; }
.frame-bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.frame-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
.scan-line { position: absolute; left: 10%; right: 10%; top: 15%; height: 2px; background: linear-gradient(90deg, transparent, #00ff88, transparent); z-index: 11; animation: scanMove 2s ease-in-out infinite; }
@keyframes scanMove { 0% { top: 15%; } 50% { top: 68%; } 100% { top: 15%; } }
.scan-line { position: absolute; left: 15%; right: 15%; top: 20%; height: 2px; background: linear-gradient(90deg, transparent, #00ff88, transparent); z-index: 11; animation: scanMove 2.5s ease-in-out infinite; }
@keyframes scanMove { 0% { top: 20%; } 50% { top: 58%; } 100% { top: 20%; } }
/* 多码标记 */
.multi-marks { position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,0.35); }
@ -350,11 +320,10 @@ export default {
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.mark-core { width: 16px; height: 16px; border-radius: 50%; background: #00ff88; margin-top: -28px; display: flex; align-items: flex-end; justify-content: center; }
.mark-arrow { font-size: 10px; color: #00ff88; margin-bottom: -14px; }
.mark-hint { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0,0,0,0.6); padding: 8px 20px; border-radius: 20px; }
.mark-hint { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0,0,0,0.6); padding: 8px 20px; border-radius: 20px; }
/* 底部操作胶囊 */
.bottom-action-bar { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: row; background-color: rgba(0, 0, 0, 0.6); border-radius: 30px; padding: 6px 10px; gap: 10px; }
.action-btn { padding: 10px 24px; border-radius: 24px; display: flex; align-items: center; justify-content: center; }
.action-text { color: #fff; font-size: 14px; font-weight: 500; }
.primary { background-color: rgba(37, 99, 235, 0.9); }
/* 右下角相册按钮 */
.album-btn { position: absolute; bottom: 80px; right: 30px; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; background: rgba(0, 0, 0, 0.5); border-radius: 28px; }
.album-icon { font-size: 20px; margin-bottom: 2px; }
.album-text { color: #fff; font-size: 11px; }
</style>