feat: 集成二维码扫描功能，优化视频流处理，添加 vconsole 和 SSL 插件
This commit is contained in:
@@ -1,342 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import type { QRScanResult } from "@/composables/useQRScanner";
|
||||
import { CapacitorBarcodeScanner } from "@capacitor/barcode-scanner";
|
||||
import { closeOutline, flashlightOutline, imagesOutline } from "ionicons/icons";
|
||||
<script lang='ts' setup>
|
||||
const videoInst = useTemplateRef<HTMLVideoElement>("videoInst");
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
async function start() {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
console.error("getUserMedia not supported on your browser!");
|
||||
return;
|
||||
}
|
||||
if (!videoInst.value) {
|
||||
console.error("video element not found!");
|
||||
return;
|
||||
}
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: { facingMode: "environment" },
|
||||
});
|
||||
videoInst.value.srcObject = stream;
|
||||
videoInst.value.setAttribute("playsinline", "true"); // required to tell iOS safari we don't want fullscreen
|
||||
await videoInst.value.play();
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
scanSuccess: [result: QRScanResult];
|
||||
scanFromGallery: [];
|
||||
cancel: [];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
title: "扫描二维码",
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { vibrate } = useHaptics();
|
||||
const isScanning = ref(false);
|
||||
const isTorchEnabled = ref(false);
|
||||
|
||||
// 开始扫描
|
||||
async function startScanning() {
|
||||
try {
|
||||
isScanning.value = true;
|
||||
|
||||
// 开始扫描 - Google Barcode Scanner 会打开原生UI
|
||||
const result = await CapacitorBarcodeScanner.scanBarcode({
|
||||
hint: 17, // ALL - 扫描所有格式
|
||||
scanInstructions: props.title,
|
||||
scanButton: false,
|
||||
cameraDirection: 1, // BACK camera
|
||||
});
|
||||
|
||||
if (result.ScanResult) {
|
||||
// 震动反馈
|
||||
vibrate();
|
||||
|
||||
// 发送扫描结果
|
||||
emit("scanSuccess", {
|
||||
text: result.ScanResult,
|
||||
format: result.format?.toString() || "UNKNOWN",
|
||||
rawValue: result.ScanResult,
|
||||
displayValue: result.ScanResult,
|
||||
});
|
||||
}
|
||||
else {
|
||||
// 用户取消了扫描
|
||||
emit("cancel");
|
||||
}
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error("Start scanning failed:", error);
|
||||
if (error.message !== "User cancelled") {
|
||||
emit("cancel");
|
||||
}
|
||||
}
|
||||
finally {
|
||||
await stopScanning();
|
||||
}
|
||||
}
|
||||
|
||||
// 停止扫描
|
||||
async function stopScanning() {
|
||||
try {
|
||||
document.querySelector("body")?.classList.remove("barcode-scanner-active");
|
||||
isScanning.value = false;
|
||||
isTorchEnabled.value = false;
|
||||
}
|
||||
catch (error) {
|
||||
console.error("Stop scanning failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 切换手电筒
|
||||
async function toggleTorch() {
|
||||
try {
|
||||
// Google Barcode Scanner 不支持手电筒控制
|
||||
// 此功能在使用 Google Scanner UI 时不可用
|
||||
vibrate();
|
||||
}
|
||||
catch (error) {
|
||||
console.error("Toggle torch failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 从相册选择
|
||||
function handleGalleryClick() {
|
||||
stopScanning();
|
||||
emit("scanFromGallery");
|
||||
}
|
||||
|
||||
// 取消扫描
|
||||
function handleCancel() {
|
||||
stopScanning();
|
||||
emit("cancel");
|
||||
}
|
||||
|
||||
// 组件挂载后自动开始扫描
|
||||
onMounted(() => {
|
||||
startScanning();
|
||||
});
|
||||
|
||||
// 组件卸载前停止扫描
|
||||
onUnmounted(() => {
|
||||
stopScanning();
|
||||
start();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="qr-scanner-container">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="qr-scanner-header">
|
||||
<IonButton fill="clear" class="header-btn" @click="handleCancel">
|
||||
<IonIcon slot="icon-only" :icon="closeOutline" />
|
||||
</IonButton>
|
||||
|
||||
<div class="header-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<IonButton fill="clear" class="header-btn" @click="toggleTorch">
|
||||
<IonIcon slot="icon-only" :icon="flashlightOutline" :class="{ 'torch-on': isTorchEnabled }" />
|
||||
</IonButton>
|
||||
</div>
|
||||
|
||||
<!-- 扫描区域 -->
|
||||
<div class="qr-scanner-content">
|
||||
<!-- 扫描框 -->
|
||||
<div class="scan-frame">
|
||||
<!-- 四个角的装饰 -->
|
||||
<div class="corner corner-tl" />
|
||||
<div class="corner corner-tr" />
|
||||
<div class="corner corner-bl" />
|
||||
<div class="corner corner-br" />
|
||||
|
||||
<!-- 扫描线 -->
|
||||
<div v-if="isScanning" class="scan-line" />
|
||||
</div>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<div class="scan-hint">
|
||||
{{ t("scanner.hint") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<div class="qr-scanner-footer">
|
||||
<IonButton expand="block" fill="clear" class="footer-btn" @click="handleGalleryClick">
|
||||
<IonIcon slot="start" :icon="imagesOutline" />
|
||||
{{ t("scanner.fromGallery") }}
|
||||
</IonButton>
|
||||
</div>
|
||||
<div>
|
||||
<video ref="videoInst" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.qr-scanner-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部操作栏 */
|
||||
.qr-scanner-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: env(safe-area-inset-top) 8px 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
--color: white;
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.4px;
|
||||
}
|
||||
|
||||
.torch-on {
|
||||
color: #fbbf24 !important;
|
||||
}
|
||||
|
||||
/* 扫描内容区 */
|
||||
.qr-scanner-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 扫描框 */
|
||||
.scan-frame {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 四个角 */
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-color: #00d4ff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.corner-tl {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 3px 0 0 3px;
|
||||
border-radius: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.corner-tr {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 3px 3px 0 0;
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.corner-bl {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-width: 0 0 3px 3px;
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.corner-br {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-width: 0 3px 3px 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
|
||||
/* 扫描线动画 */
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #00d4ff, transparent);
|
||||
box-shadow: 0 0 10px #00d4ff;
|
||||
animation: scan 2s linear infinite;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 提示文字 */
|
||||
.scan-hint {
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 底部操作区 */
|
||||
.qr-scanner-footer {
|
||||
padding: 0 20px env(safe-area-inset-bottom);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
padding-top: 20px;
|
||||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
--color: white;
|
||||
--border-radius: 12px;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.footer-btn ion-icon {
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局样式：隐藏 body 内容以显示相机 */
|
||||
body.barcode-scanner-active {
|
||||
background: transparent !important;
|
||||
--ion-background-color: transparent !important;
|
||||
}
|
||||
|
||||
body.barcode-scanner-active ion-app,
|
||||
body.barcode-scanner-active ion-content {
|
||||
background: transparent !important;
|
||||
--background: transparent !important;
|
||||
}
|
||||
|
||||
/* Modal 样式 */
|
||||
.qr-scanner-modal {
|
||||
--background: transparent;
|
||||
--backdrop-opacity: 0;
|
||||
}
|
||||
|
||||
.qr-scanner-modal ion-modal {
|
||||
--background: transparent;
|
||||
}
|
||||
</style>
|
||||
<style lang='css' scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user