hbuilderX打包项目使用plus调起摄像头扫码的组件

原创已于 2023-06-02 13:14:11 修改 · 885 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

icecreamgaga

关注

标签

#vue.js #前端 #扫码

分类前端开发

于 2023-05-18 09:17:01 首次发布

该组件使用Vue和Vant库创建了一个可显示和隐藏的二维码页面。当`showQrcodePage`属性为真时，启动二维码扫描。扫描成功后，会触发`handleOK`事件，传递扫描结果；失败则触发`handleCancel`事件。

<template>
  <div v-if="qrcodeData.showQrcodePage">
    <div class="left-top-fixed-qr" @click="cancelPage"><van-icon name="arrow-left" /></div>
  </div>
</template>
<script setup>
  import { showSuccessToast, showFailToast } from 'vant'
  import { reactive, ref, onMounted, watch, nextTick } from "vue"
  const props = defineProps({
    showQrcodePage: {
      type: Boolean,
      default:false,
    },
  })
  const qrcodeData = ref({
    showQrcodePage:false
  })
  watch(() => props.showQrcodePage,
    (value) => { 
      qrcodeData.value.showQrcodePage = value
      if(value){
        startRecognize()
      }
    },
  )
  const emits = defineEmits(['handleOK', 'handleCancel'])
  const cancelPage = () => {
    barcode.value.close()
    qrcodeData.value.showQrcodePage=false
    emits('handleCancel')
  }
  const showPage = ref(false)
  let barcode = ref(null)
  const startRecognize = () => {
    barcode.value = plus.barcode.create('barcode', [plus.barcode.QR], {
      top:'50px',
      left:'0px',
      width: '100%',
      height: '100vh',
      position: 'static',
    })
    barcode.value.onmarked = onmarked
    plus.webview.currentWebview().append(barcode.value)
    barcode.value.start()
  }
  const onerror = (e) => {
    alert(e)
  }
  const onmarked = (type, result) => {
    let equipmentInfo = ''
    try {
      equipmentInfo = result;//二维码扫描的结果
    } catch (e) {
      equipmentInfo = ''
      alert(`error:${e}`)
    }
    barcode.value.close()
    if (equipmentInfo) {//二维码中读取设备编码不为空
      showSuccessToast('扫码成功')
      emits('handleOK',JSON.parse(JSON.stringify(equipmentInfo)))
    } else {
      showFailToast("二维码信息错误，请检查二维码的来源。")
      emits('handleCancel')
    }
  }
</script>
<style scoped lang="scss">
	.left-top-fixed-qr{
	position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:50px;
  line-height: 50px;
  padding-left:20px;
	background-color: #fff;
  text-align: left;
  font-size:0.8rem;
	display: flex;
	align-items: center;
  cursor: pointer;
	z-index:2046;
}
</style>

调用组件
<plus-scan :showQrcodePage=“refData.showQrcodePage” @handleOK=“qrOK” @handleCancel=“qrCancel”>