Spaces:

zengxi123
/

barcode-ninja-scanner

Running

App Files Files Community

zengxi123 commited on Oct 3, 2025

Commit

fefdb8d

verified ·

1 Parent(s): 49b56fb

创建一个条形扫码uni-app x应用程序，它是html文件+uvue文件的格式。

Browse files

1.当它触发扫码时，发送POST请求，以将单号上传到数据库
2.创建一个存储十个条形码的数组，数组采用先进后出以确保最大只有十个，当扫码触发时将条形码数据加入这个数组中，当扫码得出的条形码数据已经在这个数组中时，应当发出提示说明单号已经扫描过，且不应该触发POST请求
3.它提供一个文本框，文本框放置需要注意的单号，以回车区分下一个，当扫码得出的条形码数据在文本框中时，应当给出提示
4.在编写代码时，你应该尽可能的去除耦合，以无数代码块的形式组成一个功能

Files changed (3) hide show

history.html +64 -0
index.html +3 -1
scan-app.html +127 -156

history.html ADDED Viewed

	@@ -0,0 +1,64 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scan History - Barcode Ninja</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-md">
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-indigo-600 mb-2">Scan History</h1>
+            <div class="flex justify-center space-x-2 mt-2">
+                <a href="index.html" class="text-blue-500 hover:text-blue-700">Back to Scanner</a>
+            </div>
+        </header>
+        <div class="bg-white rounded-xl shadow-md p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">Recent Scans</h2>
+                <button id="clearHistoryBtn" class="text-indigo-600 hover:text-indigo-800">Clear All</button>
+            </div>
+            <div id="historyList" class="space-y-2">
+                <p class="text-gray-500 text-center py-4">No scan history available</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Load history from localStorage
+        const history = JSON.parse(localStorage.getItem('scanHistory') || '[]');
+        const historyList = document.getElementById('historyList');
+        const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+        // Display history
+        if (history.length === 0) {
+            historyList.innerHTML = '<p class="text-gray-500 text-center py-4">No scan history available</p>';
+        } else {
+            historyList.innerHTML = history.map(item => `
+                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
+                    <div>
+                        <p class="font-mono font-medium">${item.barcode}</p>
+                        <p class="text-xs text-gray-500">${new Date(item.timestamp).toLocaleString()}</p>
+                    </div>
+                    <span class="text-xs ${item.special ? 'text-yellow-600' : 'text-gray-400'}">
+                        ${item.special ? 'Special' : 'Regular'}
+                    </span>
+                </div>
+            `).join('');
+        }
+        // Clear history
+        clearHistoryBtn.addEventListener('click', () => {
+            localStorage.removeItem('scanHistory');
+            historyList.innerHTML = '<p class="text-gray-500 text-center py-4">No scan history available</p>';
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -25,9 +25,11 @@
             <h1 class="text-3xl font-bold text-indigo-600 mb-2">Barcode Ninja</h1>
             <p class="text-gray-600">Scan, track, and manage barcodes efficiently</p>
             <div class="flex space-x-2 mt-2">
-                <a href="scan-app.html" class="text-blue-500 hover:text-blue-700 inline-block">New Scanner App</a>
                 <span class="text-gray-400">|</span>
                 <a href="scan.html" class="text-blue-500 hover:text-blue-700 inline-block">Classic Scanner</a>
             </div>
 </header>
 <!-- Scanner Section -->

             <h1 class="text-3xl font-bold text-indigo-600 mb-2">Barcode Ninja</h1>
             <p class="text-gray-600">Scan, track, and manage barcodes efficiently</p>
             <div class="flex space-x-2 mt-2">
+                <a href="scan-app.html" class="text-blue-500 hover:text-blue-700 inline-block">UniScan X App</a>
                 <span class="text-gray-400">|</span>
                 <a href="scan.html" class="text-blue-500 hover:text-blue-700 inline-block">Classic Scanner</a>
+                <span class="text-gray-400">|</span>
+                <a href="history.html" class="text-blue-500 hover:text-blue-700 inline-block">Scan History</a>
             </div>
 </header>
 <!-- Scanner Section -->

scan-app.html CHANGED Viewed

@@ -6,57 +6,62 @@
     <title>Barcode Scanner App</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8 max-w-md">
         <!-- Scanner Section -->
-        <div id="scannerContainer" class="bg-white rounded-xl shadow-md p-6 mb-6 hidden">
-            <div class="relative h-64 w-full bg-black rounded-lg overflow-hidden">
-                <video id="scannerVideo" class="absolute inset-0 w-full h-full object-cover"></video>
-                <div class="absolute inset-0 flex items-center justify-center">
-                    <div class="border-4 border-indigo-400 rounded-lg w-64 h-32"></div>
-                </div>
-            </div>
-            <div class="flex justify-between mt-4">
-                <button id="cancelScan" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
-                    Cancel
-                </button>
-                <button id="toggleTorch" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
-                    Toggle Torch
                 </button>
             </div>
-        </div>
-        <!-- Main UI -->
-        <div id="mainUI">
-            <header class="mb-8 text-center">
-                <h1 class="text-3xl font-bold text-indigo-600 mb-2">Barcode Scanner</h1>
-                <p class="text-gray-600">Scan and track barcodes efficiently</p>
-            </header>
-            <div class="bg-white rounded-xl shadow-md p-6 mb-6">
-                <button id="startScan" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-lg font-medium">
-                    Start Scanning
-                </button>
             </div>
-            <div class="bg-white rounded-xl shadow-md p-6 mb-6">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4">Watchlist</h2>
-                <textarea id="watchlist" rows="3" class="w-full p-3 border border-gray-300 rounded-lg mb-3"
-                    placeholder="Enter important barcodes (one per line)"></textarea>
-            </div>
-            <div class="bg-white rounded-xl shadow-md p-6">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4">Scan History</h2>
-                <div id="scanHistory" class="space-y-2">
-                    <p class="text-gray-500 text-center py-4">No scans yet</p>
-                </div>
             </div>
         </div>
         <!-- Toast Notification -->
-        <div id="toast" class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg transform translate-y-16 transition-transform duration-300 opacity-0 hidden">
             <div class="flex items-center">
                 <span id="toastMessage"></span>
             </div>
@@ -68,20 +73,15 @@
         const state = {
             scanHistory: [],
             watchlist: [],
-            isScanning: false,
-            scanner: null,
-            torchEnabled: false
         };
         // DOM Elements
-        const elements = {
-            scannerContainer: document.getElementById('scannerContainer'),
-            scannerVideo: document.getElementById('scannerVideo'),
-            mainUI: document.getElementById('mainUI'),
-            startScan: document.getElementById('startScan'),
-            cancelScan: document.getElementById('cancelScan'),
-            toggleTorch: document.getElementById('toggleTorch'),
-            watchlist: document.getElementById('watchlist'),
             scanHistory: document.getElementById('scanHistory'),
             toast: document.getElementById('toast'),
             toastMessage: document.getElementById('toastMessage')
@@ -91,104 +91,94 @@
         feather.replace();
         // Event Listeners
-        elements.startScan.addEventListener('click', startBarcodeScanner);
-        elements.cancelScan.addEventListener('click', stopBarcodeScanner);
-        elements.toggleTorch.addEventListener('click', toggleTorch);
-        elements.watchlist.addEventListener('change', updateWatchlist);
-        // Scanner Functions
-        function startBarcodeScanner() {
-            state.isScanning = true;
-            elements.mainUI.classList.add('hidden');
-            elements.scannerContainer.classList.remove('hidden');
-            Quagga.init({
-                inputStream: {
-                    name: "Live",
-                    type: "LiveStream",
-                    target: elements.scannerVideo,
-                    constraints: {
-                        width: 640,
-                        height: 480,
-                        facingMode: "environment"
-                    },
-                },
-                decoder: {
-                    readers: ["ean_reader", "ean_8_reader", "code_128_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader"]
-                },
-            }, function(err) {
-                if (err) {
-                    console.error(err);
-                    showToast("Scanner initialization failed", "error");
-                    return;
-                }
-                Quagga.start();
-            });
-            Quagga.onDetected(handleBarcodeDetection);
         }
-        function stopBarcodeScanner() {
-            state.isScanning = false;
-            Quagga.stop();
-            elements.scannerContainer.classList.add('hidden');
-            elements.mainUI.classList.remove('hidden');
         }
-        function toggleTorch() {
-            if (!('ImageCapture' in window)) {
-                showToast("Torch not supported on this device", "warning");
                 return;
             }
-            if (!state.torchEnabled) {
-                const track = elements.scannerVideo.srcObject.getVideoTracks()[0];
-                track.applyConstraints({
-                    advanced: [{torch: true}]
-                });
-                state.torchEnabled = true;
             } else {
-                const track = elements.scannerVideo.srcObject.getVideoTracks()[0];
-                track.applyConstraints({
-                    advanced: [{torch: false}]
-                });
-                state.torchEnabled = false;
             }
         }
-        // Barcode Handling
-        function handleBarcodeDetection(result) {
-            const barcode = result.codeResult.code;
-            if (isBarcodeScanned(barcode)) {
-                showToast("Barcode already scanned", "warning");
-                return;
-            }
-            addToHistory(barcode);
-            checkWatchlist(barcode);
-            sendToServer(barcode);
         }
-        function isBarcodeScanned(barcode) {
-            return state.scanHistory.includes(barcode);
         }
-        function addToHistory(barcode) {
-            if (state.scanHistory.length >= 10) {
                 state.scanHistory.pop();
             }
             state.scanHistory.unshift(barcode);
-            updateHistoryDisplay();
         }
         function updateHistoryDisplay() {
             if (state.scanHistory.length === 0) {
-                elements.scanHistory.innerHTML = '<p class="text-gray-500 text-center py-4">No scans yet</p>';
                 return;
             }
-            elements.scanHistory.innerHTML = state.scanHistory.map(barcode => `
                 <div class="flex justify-between items-center p-2 bg-gray-50 rounded-lg">
                     <span class="font-mono">${barcode}</span>
                     <span class="text-xs text-gray-500">Just now</span>
@@ -196,58 +186,39 @@
             `).join('');
         }
-        function updateWatchlist() {
-            state.watchlist = elements.watchlist.value
-                .split('\n')
-                .filter(barcode => barcode.trim() !== '');
-        }
-        function checkWatchlist(barcode) {
-            if (state.watchlist.includes(barcode)) {
-                showToast("⚠️ Watchlist barcode detected!", "warning");
-            }
-        }
-        // API Communication
-        function sendToServer(barcode) {
-            fetch('https://api.example.com/barcodes', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
                 body: JSON.stringify({ barcode })
             })
-            .then(response => response.json())
-            .then(data => {
-                showToast(`Barcode ${barcode} saved`, "success");
             })
             .catch(error => {
                 console.error('Error:', error);
-                showToast("Failed to save barcode", "error");
             });
         }
-        // UI Helpers
-        function showToast(message, type = "info") {
-            elements.toastMessage.textContent = message;
             const colors = {
-                info: "bg-gray-800",
-                success: "bg-green-600",
-                warning: "bg-yellow-600",
-                error: "bg-red-600"
             };
-            elements.toast.className = `fixed bottom-4 right-4 text-white px-4 py-2 rounded-lg shadow-lg transform translate-y-16 transition-transform duration-300 ${colors[type]}`;
-            elements.toast.classList.remove("hidden");
-            elements.toast.style.opacity = "1";
-            elements.toast.style.transform = "translateY(0)";
             setTimeout(() => {
-                elements.toast.style.opacity = "0";
-                elements.toast.style.transform = "translateY(16px)";
-                setTimeout(() => elements.toast.classList.add("hidden"), 300);
             }, 3000);
         }
     </script>

     <title>Barcode Scanner App</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .scan-animation {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .toast {
+            transition: all 0.3s ease;
+        }
+    </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8 max-w-md">
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-indigo-600 mb-2">UniScan X</h1>
+            <p class="text-gray-600">Advanced barcode scanning solution</p>
+        </header>
         <!-- Scanner Section -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">Scanner</h2>
+                <button id="scanBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center transition">
+                    <i data-feather="maximize" class="mr-2"></i> Start Scan
                 </button>
             </div>
+            <div class="text-center">
+                <div id="scannerPlaceholder" class="mx-auto w-full h-48 bg-gray-200 rounded-lg flex items-center justify-center scan-animation">
+                    <div class="text-center">
+                        <i data-feather="camera" class="w-12 h-12 mx-auto text-gray-400 mb-2"></i>
+                        <p class="text-gray-500">Ready to scan</p>
+                    </div>
+                </div>
             </div>
+        </div>
+        <!-- Watchlist Section -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Special Watchlist</h2>
+            <textarea id="watchlistInput" rows="3" class="w-full p-3 border border-gray-300 rounded-lg mb-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter barcodes to watch (one per line)"></textarea>
+        </div>
+        <!-- Scan History -->
+        <div class="bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Recent Scans</h2>
+            <div id="scanHistory" class="space-y-2">
+                <p class="text-gray-500 text-center py-4">No scans yet</p>
             </div>
         </div>
         <!-- Toast Notification -->
+        <div id="toast" class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg hidden toast">
             <div class="flex items-center">
                 <span id="toastMessage"></span>
             </div>
         const state = {
             scanHistory: [],
             watchlist: [],
+            maxHistorySize: 10,
+            isScanning: false
         };
         // DOM Elements
+        const dom = {
+            scanBtn: document.getElementById('scanBtn'),
+            scannerPlaceholder: document.getElementById('scannerPlaceholder'),
+            watchlistInput: document.getElementById('watchlistInput'),
             scanHistory: document.getElementById('scanHistory'),
             toast: document.getElementById('toast'),
             toastMessage: document.getElementById('toastMessage')
         feather.replace();
         // Event Listeners
+        dom.scanBtn.addEventListener('click', startScanProcess);
+        dom.watchlistInput.addEventListener('change', updateWatchlist);
+        // Scanner Functionality
+        function startScanProcess() {
+            if (state.isScanning) return;
+            state.isScanning = true;
+            dom.scanBtn.disabled = true;
+            dom.scannerPlaceholder.innerHTML = `
+                <div class="text-center">
+                    <div class="border-4 border-indigo-400 rounded-lg w-64 h-32 mb-4"></div>
+                    <p class="text-gray-700">Scanning...</p>
+                </div>
+            `;
+            // Simulate scanning (in real app, this would use device camera)
+            setTimeout(() => {
+                const barcode = generateRandomBarcode();
+                handleScannedBarcode(barcode);
+                state.isScanning = false;
+                dom.scanBtn.disabled = false;
+                resetScannerUI();
+            }, 2000);
+        }
+        function resetScannerUI() {
+            dom.scannerPlaceholder.innerHTML = `
+                <div class="text-center">
+                    <i data-feather="camera" class="w-12 h-12 mx-auto text-gray-400 mb-2"></i>
+                    <p class="text-gray-500">Ready to scan</p>
+                </div>
+            `;
+            feather.replace();
         }
+        // Barcode Processing
+        function generateRandomBarcode() {
+            return 'BC' + Math.floor(100000 + Math.random() * 900000);
         }
+        function handleScannedBarcode(barcode) {
+            if (isBarcodeInHistory(barcode)) {
+                showToast('This barcode has already been scanned!', 'warning');
                 return;
             }
+            addBarcodeToHistory(barcode);
+            updateHistoryDisplay();
+            if (isBarcodeInWatchlist(barcode)) {
+                showToast('⚠️ Special barcode detected!', 'warning');
             } else {
+                sendBarcodeToServer(barcode);
             }
         }
+        function isBarcodeInHistory(barcode) {
+            return state.scanHistory.includes(barcode);
         }
+        function isBarcodeInWatchlist(barcode) {
+            return state.watchlist.includes(barcode);
         }
+        function addBarcodeToHistory(barcode) {
+            if (state.scanHistory.length >= state.maxHistorySize) {
                 state.scanHistory.pop();
             }
             state.scanHistory.unshift(barcode);
         }
+        // Watchlist Management
+        function updateWatchlist() {
+            const text = dom.watchlistInput.value;
+            state.watchlist = text.split('\n')
+                .map(item => item.trim())
+                .filter(item => item !== '');
+        }
+        // History Display
         function updateHistoryDisplay() {
             if (state.scanHistory.length === 0) {
+                dom.scanHistory.innerHTML = '<p class="text-gray-500 text-center py-4">No scans yet</p>';
                 return;
             }
+            dom.scanHistory.innerHTML = state.scanHistory.map(barcode => `
                 <div class="flex justify-between items-center p-2 bg-gray-50 rounded-lg">
                     <span class="font-mono">${barcode}</span>
                     <span class="text-xs text-gray-500">Just now</span>
             `).join('');
         }
+        // Server Communication
+        function sendBarcodeToServer(barcode) {
+            fetch('https://api.example.com/scans', {
                 method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ barcode })
             })
+            .then(response => {
+                if (!response.ok) throw new Error('Server error');
+                showToast(`Barcode "${barcode}" saved successfully`, 'success');
             })
             .catch(error => {
                 console.error('Error:', error);
+                showToast('Failed to save barcode', 'error');
             });
         }
+        // Toast Notifications
+        function showToast(message, type = 'info') {
+            dom.toastMessage.textContent = message;
             const colors = {
+                info: 'bg-gray-800',
+                success: 'bg-green-600',
+                warning: 'bg-yellow-600',
+                error: 'bg-red-600'
             };
+            dom.toast.className = `fixed bottom-4 right-4 text-white px-4 py-3 rounded-lg shadow-lg toast ${colors[type]}`;
+            dom.toast.classList.remove('hidden');
             setTimeout(() => {
+                dom.toast.classList.add('hidden');
             }, 3000);
         }
     </script>