Vue + Barcode 實現掃一維碼二維碼
阿新 • • 發佈:2021-11-12
<template> <div class="scan"> <div id="bcid"></div> <div class="back-arrow" @click="clickIndexLeft"> <van-icon name="arrow-left" color="#fff" /> </div> </div> </template> <script> let scan = null; export default { data() { return { }; }, async mounted() { await this.startRecognize(); await this.startScan(); }, methods: { //建立掃描控制元件 startRecognize() { if (!window.plus) return; //filter 掃描型別 var filter = [ plus.barcode.CODE128, // CODE128: Code128條形碼,數值為10 plus.barcode.EAN13, // EAN13: EAN條形碼標準版,數值為1 plus.barcode.EAN8, // EAN8: ENA條形碼簡版,數值為2 plus.barcode.QR, // QR: QR二維碼,數值為0 ]; // 提示plus方法要進行真機測試 scan = new plus.barcode.Barcode("bcid", filter, { top: `0px`, left: '0px', height: `100%`, width: '100%', position: 'absolute', background: '#00ff33', frameColor: '#00ff33', scanbarColor: '#00ff33', }); scan.onmarked = (type, result, file) => { switch (type) { case plus.barcode.QR: type = "QR"; break; case plus.barcode.EAN13: type = "EAN13"; break; case plus.barcode.EAN8: type = "EAN8"; break; case plus.barcode.CODE128: type = "EAN8"; break; default: type = "其它" + type; break; } this.clickIndexLeft(`${type}===${result}`) } }, // 開始掃描 startScan() { if (!window.plus) return scan.start(); }, // 關閉控制元件 closeScan() { if (!window.plus) return; scan.close(); }, // 關閉掃描 cancelScan() { if (!window.plus) return; scan.cancel(); }, // 返回上一頁 clickIndexLeft(result) { this.cancelScan(); this.closeScan(); this.$route.params.result = result this.$router.back() } }, destroyed() { this.cancelScan(); this.closeScan(); } }; </script> <style lang="scss"> .scan { width: 100%; height: 100vh; .back-arrow { position: fixed; top: 20px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; justify-content: center; align-items: center; } } #bcid { width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; color: #fff; } </style>