Spaces:

zengxi123
/

barcode-ninja-scanner

Running

App Files Files Community

zengxi123 commited on Oct 3, 2025

Commit

3c33f14

verified ·

1 Parent(s): fefdb8d

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

Browse files

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

Files changed (1) hide show

barcode-scanner.html +227 -197

barcode-scanner.html CHANGED Viewed

@@ -3,254 +3,284 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Barcode Scanner</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
 </head>
-<body>
-    <div id="app" class="min-h-screen bg-gray-100 p-4">
-        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
-            <!-- Scanner Controls -->
-            <div class="mb-6">
-                <h1 class="text-2xl font-bold text-gray-800 mb-4">Barcode Scanner</h1>
-                <button
-                    @click="initiateScan"
-                    class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center transition"
-                >
-                    <i data-feather="maximize" class="mr-2"></i> Start Scanning
-                </button>
-            </div>
-            <!-- Special Barcodes Input -->
-            <div class="mb-6">
-                <label class="block text-gray-700 text-sm font-bold mb-2" for="specialBarcodes">
-                    Special Barcodes (one per line)
-                </label>
-                <textarea
-                    id="specialBarcodes"
-                    v-model="specialBarcodes"
-                    @change="updateWatchlist"
-                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    rows="3"
-                ></textarea>
             </div>
-            <!-- Scan History -->
-            <div class="mb-4">
-                <div class="flex justify-between items-center mb-2">
-                    <h2 class="text-lg font-semibold text-gray-800">Scan History</h2>
-                    <button
-                        @click="clearHistory"
-                        class="text-sm text-blue-600 hover:text-blue-800"
-                    >
-                        Clear All
-                    </button>
-                </div>
-                <div class="space-y-2">
-                    <div
-                        v-for="(scan, index) in scanHistory"
-                        :key="index"
-                        class="flex justify-between items-center p-2 bg-gray-50 rounded-lg"
-                    >
-                        <span class="font-mono">{{ scan.barcode }}</span>
-                        <span class="text-xs text-gray-500">{{ scan.time }}</span>
                     </div>
-                    <p v-if="scanHistory.length === 0" class="text-gray-500 text-center py-4">
-                        No scans yet
-                    </p>
                 </div>
             </div>
-            <!-- Toast Notification -->
-            <div
-                v-if="showToast"
-                :class="toastClasses"
-                class="fixed bottom-4 right-4 text-white px-4 py-2 rounded-lg shadow-lg transition-all duration-300"
-            >
-                <div class="flex items-center">
-                    <i data-feather="alert-circle" class="mr-2"></i>
-                    <span>{{ toastMessage }}</span>
-                </div>
             </div>
         </div>
     </div>
     <script>
-        const { createApp, ref, computed } = Vue;
-        // Barcode Scanner Module
-        const createBarcodeScanner = () => {
-            const scanHistory = ref([]);
-            const maxHistorySize = 10;
-            const addToHistory = (barcode) => {
-                if (scanHistory.value.some(scan => scan.barcode === barcode)) {
-                    return false; // Already exists
-                }
-                const newScan = {
-                    barcode,
-                    time: new Date().toLocaleTimeString()
-                };
-                if (scanHistory.value.length >= maxHistorySize) {
-                    scanHistory.value.pop();
-                }
-                scanHistory.value.unshift(newScan);
-                return true;
             };
-            const clearHistory = () => {
-                scanHistory.value = [];
             };
-            return {
-                scanHistory,
-                addToHistory,
-                clearHistory
             };
-        };
-        // Watchlist Module
-        const createWatchlist = () => {
-            const specialBarcodes = ref('');
-            const watchlist = computed(() =>
-                specialBarcodes.value.split('\n').filter(b => b.trim() !== '')
-            );
-            const updateWatchlist = (value) => {
-                specialBarcodes.value = value;
             };
-            const isSpecialBarcode = (barcode) => {
-                return watchlist.value.includes(barcode);
             };
-            return {
-                specialBarcodes,
-                watchlist,
-                updateWatchlist,
-                isSpecialBarcode
             };
-        };
-        // API Module
-        const createApiClient = () => {
-            const sendBarcode = async (barcode) => {
-                try {
-                    // Replace with your actual API endpoint
-                    const response = await fetch('https://your-api-endpoint.com/barcodes', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ barcode })
-                    });
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    return await response.json();
-                } catch (error) {
-                    console.error('Error sending barcode:', error);
-                    throw error;
-                }
             };
-            return {
-                sendBarcode
             };
-        };
-        // Toast Module
-        const createToast = () => {
-            const showToast = ref(false);
-            const toastMessage = ref('');
-            const toastType = ref('info');
-            const toastClasses = computed(() => {
-                const types = {
-                    info: 'bg-blue-600',
                     success: 'bg-green-600',
                     warning: 'bg-yellow-600',
                     error: 'bg-red-600'
                 };
-                return types[toastType.value];
-            });
-            const displayToast = (message, type = 'info') => {
-                toastMessage.value = message;
-                toastType.value = type;
-                showToast.value = true;
                 setTimeout(() => {
-                    showToast.value = false;
                 }, 3000);
             };
-            return {
-                showToast,
-                toastMessage,
-                toastClasses,
-                displayToast
-            };
-        };
-        // Main App
-        createApp({
-            setup() {
-                // Initialize modules
-                const scanner = createBarcodeScanner();
-                const watchlist = createWatchlist();
-                const api = createApiClient();
-                const toast = createToast();
-                // Simulate scan (replace with actual scanner implementation)
-                const initiateScan = () => {
-                    // For demo purposes, generate a random barcode
-                    const barcode = 'BC' + Math.floor(100000 + Math.random() * 900000);
-                    // Check if already in history
-                    if (!scanner.addToHistory(barcode)) {
-                        toast.displayToast('This barcode has already been scanned!', 'warning');
-                        return;
-                    }
-                    // Check if special barcode
-                    if (watchlist.isSpecialBarcode(barcode)) {
-                        toast.displayToast('⚠️ Special barcode detected!', 'warning');
-                    }
-                    // Send to server
-                    api.sendBarcode(barcode)
-                        .then(() => {
-                            toast.displayToast(`Barcode "${barcode}" sent successfully`, 'success');
-                        })
-                        .catch(() => {
-                            toast.displayToast('Failed to send barcode', 'error');
-                        });
-                };
-                // Update watchlist when textarea changes
-                const updateWatchlist = (event) => {
-                    watchlist.updateWatchlist(event.target.value);
-                };
-                return {
-                    ...scanner,
-                    ...watchlist,
-                    ...toast,
-                    initiateScan,
-                    updateWatchlist
-                };
-            },
-            mounted() {
                 feather.replace();
             }
-        }).mount('#app');
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Barcode Scanner App</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">Barcode Scanner</h1>
+            <p class="text-gray-600">Scan and track barcodes efficiently</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> Scan Now
+                </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">
+                    <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 id="lastScanned" class="mt-4 p-3 bg-indigo-50 rounded-lg hidden">
+                    <p class="text-sm text-gray-600 mb-1">Last scanned:</p>
+                    <p id="lastScannedCode" class="font-mono text-lg font-bold text-indigo-700"></p>
                 </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" placeholder="Enter barcodes to watch (one per line)"></textarea>
+        </div>
+        <!-- History Section -->
+        <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-sm text-indigo-600 hover:text-indigo-800">Clear All</button>
+            </div>
+            <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-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>
         </div>
     </div>
     <script>
+        /* STATE MANAGEMENT */
+        const AppState = (() => {
+            const state = {
+                scanHistory: [],
+                watchlist: [],
+                maxHistorySize: 10
+            };
+            return {
+                getHistory: () => [...state.scanHistory],
+                addToHistory: (barcode) => {
+                    if (state.scanHistory.length >= state.maxHistorySize) {
+                        state.scanHistory.pop();
+                    }
+                    state.scanHistory.unshift(barcode);
+                },
+                clearHistory: () => {
+                    state.scanHistory = [];
+                },
+                isInHistory: (barcode) => state.scanHistory.includes(barcode),
+                getWatchlist: () => [...state.watchlist],
+                updateWatchlist: (text) => {
+                    state.watchlist = text.split('\n').filter(barcode => barcode.trim() !== '');
+                },
+                isInWatchlist: (barcode) => state.watchlist.includes(barcode)
+            };
+        })();
+        /* SCANNER MODULE */
+        const ScannerModule = (() => {
+            const scanBtn = document.getElementById('scanBtn');
+            const scannerPlaceholder = document.getElementById('scannerPlaceholder');
+            const lastScanned = document.getElementById('lastScanned');
+            const lastScannedCode = document.getElementById('lastScannedCode');
+            const init = () => {
+                scanBtn.addEventListener('click', handleScan);
+            };
+            const handleScan = () => {
+                // In a real app, this would trigger the device camera
+                simulateScan();
             };
+            const simulateScan = () => {
+                const barcode = 'BC' + Math.floor(100000 + Math.random() * 900000);
+                ScannerEvents.dispatch('scan', barcode);
             };
+            const updateLastScanned = (barcode) => {
+                lastScannedCode.textContent = barcode;
+                lastScanned.classList.remove('hidden');
             };
+            return { init, updateLastScanned };
+        })();
+        /* HISTORY MODULE */
+        const HistoryModule = (() => {
+            const scanHistory = document.getElementById('scanHistory');
+            const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+            const init = () => {
+                clearHistoryBtn.addEventListener('click', handleClearHistory);
             };
+            const updateDisplay = () => {
+                const history = AppState.getHistory();
+                if (history.length === 0) {
+                    scanHistory.innerHTML = '<p class="text-gray-500 text-center py-4">No scans yet</p>';
+                    return;
+                }
+                scanHistory.innerHTML = history.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>
+                    </div>
+                `).join('');
             };
+            const handleClearHistory = () => {
+                AppState.clearHistory();
+                updateDisplay();
+                ToastModule.show('Scan history cleared', 'info');
             };
+            return { init, updateDisplay };
+        })();
+        /* WATCHLIST MODULE */
+        const WatchlistModule = (() => {
+            const watchlistInput = document.getElementById('watchlistInput');
+            const init = () => {
+                watchlistInput.addEventListener('change', handleWatchlistUpdate);
             };
+            const handleWatchlistUpdate = () => {
+                AppState.updateWatchlist(watchlistInput.value);
+                ToastModule.show('Watchlist updated', 'success');
+            };
+            return { init };
+        })();
+        /* API MODULE */
+        const ApiModule = (() => {
+            const sendBarcode = (barcode) => {
+                // In a real app, this would be a POST request
+                console.log('Sending to server:', barcode);
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        resolve({ success: true });
+                    }, 500);
+                });
             };
+            return { sendBarcode };
+        })();
+        /* TOAST MODULE */
+        const ToastModule = (() => {
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toastMessage');
+            const show = (message, type = 'info') => {
+                toastMessage.textContent = message;
+                const colors = {
+                    info: 'bg-gray-800',
                     success: 'bg-green-600',
                     warning: 'bg-yellow-600',
                     error: 'bg-red-600'
                 };
+                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]}`;
+                toast.classList.remove('hidden');
+                toast.style.opacity = '1';
+                toast.style.transform = 'translateY(0)';
                 setTimeout(() => {
+                    toast.style.opacity = '0';
+                    toast.style.transform = 'translateY(16px)';
+                    setTimeout(() => toast.classList.add('hidden'), 300);
                 }, 3000);
             };
+            return { show };
+        })();
+        /* EVENT DISPATCHER */
+        const ScannerEvents = (() => {
+            const events = {};
+            const on = (event, callback) => {
+                if (!events[event]) events[event] = [];
+                events[event].push(callback);
+            };
+            const dispatch = (event, data) => {
+                if (!events[event]) return;
+                events[event].forEach(callback => callback(data));
+            };
+            return { on, dispatch };
+        })();
+        /* MAIN CONTROLLER */
+        const AppController = (() => {
+            const init = () => {
                 feather.replace();
+                ScannerModule.init();
+                HistoryModule.init();
+                WatchlistModule.init();
+                ScannerEvents.on('scan', handleScan);
+            };
+            const handleScan = async (barcode) => {
+                if (AppState.isInHistory(barcode)) {
+                    ToastModule.show('This barcode has already been scanned!', 'warning');
+                    return;
+                }
+                if (AppState.isInWatchlist(barcode)) {
+                    ToastModule.show('⚠️ Special barcode detected!', 'warning');
+                }
+                ScannerModule.updateLastScanned(barcode);
+                AppState.addToHistory(barcode);
+                HistoryModule.updateDisplay();
+                try {
+                    await ApiModule.sendBarcode(barcode);
+                    ToastModule.show(`Barcode "${barcode}" sent to server`, 'success');
+                } catch (error) {
+                    ToastModule.show('Failed to send barcode', 'error');
+                }
+            };
+            return { init };
+        })();
+        // Initialize the app
+        AppController.init();
+        // For demo: simulate scanning by pressing 'S' key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 's') {
+                ScannerModule.simulateScan();
             }
+        });
     </script>
 </body>
 </html>