vue app 拍照扫码

<template>
  <div class="scan">
    <div id="bcid">
      <p class="tip">...载入中...</p> -->
    </div>
    <!-- <footer>
      <button @click="startRecognize">1.创建控件</button>
      <button @click="startScan">2.开始扫描</button>
      <button @click="cancelScan">3.结束扫描</button>
      <button @click="closeScan">4.关闭控件</button>
    </footer> -->
  </div>
</template>
<script type="text/ecmascript-6">
let scan = null

export default {
  data() {
    return {
      codeUrl: ''
    }
  },
  mounted () {
    this.startRecognize()
    setTimeout(() => {
      this.startScan()
    }, 500)
  },
  methods: {
    // 创建扫描控件
    startRecognize () {
      let that = this
      if (!window.plus) return
      // scan = new plus.barcode.Barcode('bcid')
      scan = plus.barcode.create('bcid', [plus.barcode.QR], {
        top:'60px',
        left:'0px',
        width: '100%',
        height: '80%',
        position: 'static'
      });
      plus.webview.currentWebview().append(scan);
      // scan.onmarked = onmarked
      scan.onmarked = onmarked
      function 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
          default:
            type = '其它' + type
            break
        }
        result = result.replace(/\n/g, '')
        that.codeUrl = result
        // alert(result)
        that.$message.success("扫码成功");
        that.closeScan()
        setTimeout(() => {
          that.$parent.onScanClose(that.codeUrl);
        }, 500);
      }
    },
    // 开始扫描
    startScan () {
      if (!window.plus) return
      scan.start()
    },
    // 关闭扫描
    cancelScan () {
      if (!window.plus) return
      scan.cancel()
    },
    // 关闭条码识别控件
    closeScan () {
      if (!window.plus) return
      scan.close()
    },
    closeAll(){
      this.cancelScan()
      this.closeScan()
    }
  },
  destroyed () {
    console.log("子组件 destroyed");
    this.cancelScan()
    this.closeScan()
  }
}
</script>
<style lang="scss">
.scan {
  height: 100%;
  #bcid {
    width: 100%;
  }
  footer {
    position: absolute;
    left: 0;
    bottom: 1rem;
    height: 2rem;
    line-height: 2rem;
    z-index: 2;
  }
}
</style>