From ae3855638dba0c927236c1a1b1a85d5b048c40e2 Mon Sep 17 00:00:00 2001 From: Houjie <714924425@qq.com> Date: 星期五, 18 四月 2025 10:31:08 +0800 Subject: [PATCH] 提交 --- pages/spare/spare.vue | 275 +++++++++++++++++++++++------------------------------- 1 files changed, 119 insertions(+), 156 deletions(-) diff --git a/pages/spare/spare.vue b/pages/spare/spare.vue index 22818b5..fb3ea79 100644 --- a/pages/spare/spare.vue +++ b/pages/spare/spare.vue @@ -1,182 +1,145 @@ <template> - <view class="container"> - <button class="scan" @click="openQrcode">鐐瑰嚮鎵爜</button> - <view class="reader-box" v-if="isScaning"> - <view class="reader" id="reader"></view> + <view> + <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index"> + <block slot="backText">杩斿洖</block> + <block slot="content">鎵竴鎵�</block> + </cu-custom> + <view class="scanCode"> + <mumu-get-qrcode :continue="true" @success='qrcodeSucess' @error="qrcodeError" + :definition="true"></mumu-get-qrcode> </view> - <view>鎵爜鍐呭锛歿{scanVal}}</view> </view> </template> + <script> - import { - Html5Qrcode - } from "html5-qrcode"; + import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'; + export default { - name: 'spare', - watch: { - cur: { - immediate: true, - handler() { - console.log('watch', this.cur) - }, - }, + components: { + mumuGetQrcode // 娉ㄥ唽 }, + name: 'spare', data() { return { - html5QrCode: null, - isScaning: false, - cameraId: null, - scanVal: '' - } + NavBarColor: this.NavBarColor, + hasNavigated: false // 鏍囪鏄惁宸茬粡璺宠浆 + }; }, - methods: { + // mounted() { + // window.addEventListener('hashchange', this.handleHashChange); + // // 鍒濆瑙f瀽 hash + // this.handleHashChange(); + // }, + // beforeDestroy() { + // window.removeEventListener('hashchange', this.handleHashChange); + // }, - isValidURL(url) { - const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol - '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name - '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address - '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path - '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string - '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator - return !!pattern.test(url); - }, - checkURL() { - const url = this.scanVal; - if (this.isValidURL(url)) { - uni.openURL({ - url: url - }) - } else { - uni.showToast({ - title: 'url鍦板潃閿欒锛岃閲嶈瘯', - icon: 'none', - duration: 2000 - }); - } - }, - - openQrcode() { - this.isScaning = true; - Html5Qrcode.getCameras().then((devices) => { - if (devices && devices.length) { - if (devices.length > 1) { - this.cameraId = devices[1].id; - } else { - this.cameraId = devices[0].id; - } - this.html5QrCode = new Html5Qrcode('reader'); - this.startInit(); - } - }); - }, - startInit() { - const that = this; - this.html5QrCode.start( - this.cameraId, // retreived in the previous step. - // { - // facingMode: "environment" // environment鍚庣疆鎽勫儚澶� user鍓嶇疆鎽勫儚澶� - // }, - { - fps: 10, // sets the framerate to 10 frame per second - qrbox: 250 // sets only 250 X 250 region of viewfinder to + methods: { + // handleHashChange() { + // if (this.hasNavigated) { + // console.log('Already navigated, skipping hash change handling'); + // return; + // } + + // const hash = window.location.hash; + // console.log('Hash changed:', hash); // 娣诲姞鏃ュ織 + // if (!hash || hash.length === 0) { + // console.warn('Hash is empty or undefined'); + // return; + // } + // const params = new URLSearchParams(hash.split('?')[1]); + // const equipmentId = params.get('equipmentId'); + // console.log('Parsed equipmentId:', equipmentId); // 娣诲姞鏃ュ織 + // if (equipmentId) { + // this.navigateToDeviceDetails(equipmentId); + // } else { + // console.warn('No equipmentId found in hash'); + // } + // }, + navigateToDeviceDetails(equipmentId) { + this.hasNavigated = true; // 鏍囪宸茬粡璺宠浆 + uni.navigateTo({ + url: `/pages/device/deviceWebDeils/deviceWebDeils?equipmentId=${encodeURIComponent(equipmentId)}`, + success: () => { + console.log('Navigated to device details'); }, - qrCodeMessage => { + fail: (err) => { + console.error('Navigation failed:', err); + } + }); + }, + qrcodeSucess(data) { // 鎵爜鎴愬姛 + setTimeout(() => { + let equipmentId; + try { + // 鍏煎鎬у鐞嗭細浼樺厛浣跨敤URL鍜孶RLSearchParams锛屽鏋滀笉鍙敤鍒欎娇鐢ㄥ瓧绗︿覆瑙f瀽 + if ('URL' in window && 'URLSearchParams' in window) { + const url = new URL(data); + const params = new URLSearchParams(url.hash.slice(1).split('?')[1]); + equipmentId = params.get('equipmentId'); + } else { + // 瀛楃涓茶В鏋愭柟寮� + const hashIndex = data.indexOf('#'); + if (hashIndex !== -1) { + const hashPart = data.substring(hashIndex + 1); + const paramIndex = hashPart.indexOf('?'); + if (paramIndex !== -1) { + const paramStr = hashPart.substring(paramIndex + 1); + const pairs = paramStr.split('&'); + for (let pair of pairs) { + const [key, value] = pair.split('='); + if (key === 'equipmentId') { + equipmentId = value; + break; + } + } + } + } + } + + if (equipmentId) { + // 鐧诲綍鎴愬姛涓旇幏鍙栧埌equipmentId锛岃烦杞埌璁惧璇︽儏椤甸潰 + this.navigateToDeviceDetails(equipmentId); + } else { + uni.showModal({ + title: '鎻愮ず', + content: "浜岀淮鐮佷腑鏈壘鍒版湁鏁堢殑equipmentId", + showCancel: false + }); + } + } catch (error) { uni.showModal({ - title: 'success', - content: JSON.stringify(qrCodeMessage), + title: '閿欒', + content: "瑙f瀽URL鍑洪敊锛岃妫�鏌ヤ簩缁寸爜鍐呭", showCancel: false }); - // do something when code is read. For example: - if (qrCodeMessage) { - //鎴愬姛鎵嚭鐮乹rCodeMessage涓烘壂鐮佸唴瀹� - //鎵爜鎴愬姛璁板緱鍏虫帀鎽勫儚 - that.action(qrCodeMessage) //瀵逛簩缁寸爜閫昏緫澶勭悊 - that.stopScan(); //鍏抽棴鎵爜鍔熻兘 - } - - }, - errorMessage => { - console.log('errorMessage', errorMessage); - if (errorMessage.includes('NotFoundException')) { - uni.showToast({ - title: '鏈壘鍒颁簩缁寸爜锛岃閲嶆柊瀵瑰噯', - icon: 'none', - duration: 2000 - }); - } else { - uni.showToast({ - title: '鎵爜澶辫触锛岃閲嶈瘯', - icon: 'none', - duration: 2000 - }); - } - } - ) - .catch((err) => { - // 鎵爜閿欒淇℃伅 - let message = ""; - if (typeof err == "string") { - message = "璇嗗埆澶辫触"; - } else { - if (err.name == "NotAllowedError") { - message = "鎮ㄩ渶瑕佹巿浜堢浉鏈鸿闂潈闄愶紒"; - } - if (err.name == "NotFoundError") { - message = "杩欎釜璁惧涓婃病鏈夋憚鍍忓ご锛�"; - } - if (err.name == "NotSupportedError") { - message = - "鎽勫儚澶磋闂彧鏀寔鍦ㄥ畨鍏ㄧ殑涓婁笅鏂囦腑锛屽https鎴杔ocalhost锛�"; - } - if (err.name == "NotReadableError") { - message = "鐩告満琚崰鐢紒"; - } - if (err.name == "OverconstrainedError") { - message = "瀹夎鎽勫儚澶翠笉鍚堥�傦紒"; - } - if (err.name == "StreamApiNotSupportedError") { - message = "姝ゆ祻瑙堝櫒涓嶆敮鎸佹祦API锛�"; - } + }, 200); // 澧炲姞100姣鐨勫欢杩� + }, + qrcodeError(err) { // 鎵爜澶辫触 + uni.showModal({ + title: '鎽勫儚澶存巿鏉冨け璐�', + content: '鎽勫儚澶存巿鏉冨け璐ワ紝璇锋娴嬪綋鍓嶆祻瑙堝櫒鏄惁鏈夋憚鍍忓ご鏉冮檺銆�', + success: () => { + uni.navigateBack({}); // 杩斿洖鍒颁笂涓�椤� } - uni.showToast({ - title: message, - icon: 'none', - duration: 2000 - }); }); - }, - action(val) { - this.scanVal = val; - const url = this.scanVal; - this.checkURL(url) - - // plus.runtime.openURL(this.scanVal, function(res) { - // console.log(res); - // }); - }, - stopScan() { - console.log('鍋滄鎵爜') - this.isScaning = false; - if (this.html5QrCode) { - this.html5QrCode.stop() - .then((ignore) => { - console.log("鍋滄鎵爜", ignore); - }) - .catch((err) => { - console.log(err); - showToast("鍋滄鎵爜澶辫触"); - }); } - }, - - } - } + } + }; </script> <style> - .container { + .scanCode { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99; height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.7); } .reader-box { -- Gitblit v1.9.3