第一张是安卓 第二张是苹果的

代码如下
<template>
<div class="scan" v-if="barcodeBoo">
<div id="bcid">
<div id="bcidBar" style="height:80%"></div>
<p class="tip">...载入中...</p>
</div>
<van-button class="flashButton" type="info" @click="setFlash">轻触照亮</van-button>
<van-button class="closeButton" type="info" @click="closeScan">关闭扫码</van-button>
</div>
</template>

<script>
/**

• h5+ 扫码功能实现
  */
  let scan = null
  export default {
  name: 'Scan',
  data() {
  return {
  fromRouter: '', // 进入扫码页面的上一个路由
  barcodeBoo: false,
  key: '',
  flash: false,
  barStyle: {
  top: '0',
  left: '0',
  width: '100%',
  height: '80%',
  scanbarColor: '#1DA7FF',
  position: 'fixed',
  frameColor: '#1DA7FF'
  }
  }
  },
  mounted() {},

  beforeDestroy() {
  this.closeScan()
  },

  methods: {
  setFlash() {
  this.flash = !this.flash
  if (scan) {
  scan.setFlash(this.flash)
  }
  },
  createRecognize(key) {
  const temp = this
  temp.key = key
  temp.barcodeBoo = true
  setTimeout(() => {
  temp.startRecognize()
  }, 1000)
  },
  // 创建扫描控件
  // "vue-h5-plus": "^1.2.0",
  / eslint-enable /
  startRecognize() {
  const temp = this
  if (!window.plus) return
  // eslint-disable-next-line
  plus.navigator.setFullscreen(true); //全屏
  // temp.createView()
  // eslint-disable-next-line
  scan = new plus.barcode.Barcode('bcidBar',[plus.barcode.QR],temp.barStyle)
  scan.onmarked = onmarked
  // eslint-disable-next-line
  plus.webview.currentWebview().append(scan)
  scan.setFlash(temp.flash)
  temp.startScan()
  function onmarked(type, result, file) {
  switch (type) {
  // eslint-disable-next-line
  case plus.barcode.QR:
  type = 'QR'
  break
  // eslint-disable-next-line
  case plus.barcode.EAN13:
  type = 'EAN13'
  break
  // eslint-disable-next-line
  case plus.barcode.EAN8:
  type = 'EAN8'
  break
  default:
  type = '其它' + type
  break
  }
  result = result.replace(/\n/g, '')
  }
  },
  // 开始扫描
  startScan() {
  if (!window.plus) return
  scan.start()
  },
  // 关闭扫描
  cancelScan() {
  if (!window.plus) return
  this.barcodeBoo = false
  scan.cancel()
  },
  // 关闭条码识别控件
  closeScan() {
  if (!window.plus) return
  // eslint-disable-next-line
  plus.navigator.setFullscreen(false); //全屏
  this.barcodeBoo = false
  if(scan){
  scan.close()
  }
  this.$emit('close', 'close', true)
  },
  }
  }
  </script>

<style scoped lang="scss">
.scan {
height: 100%;

bcid {

width: 100%;  
position: absolute;  
left: 0;  
right: 0;  
top: 0;  
bottom: 0;  
text-align: center;  
color: #fff;  
background: #ccc;  
z-index: 9999;  
pointer-events: none;  

}
}
.flashButton {
z-index: 9999;
position: fixed;
top: 90%;
left: 20%;
}
.closeButton {
z-index: 9999;
position: fixed;
top: 90%;
right: 20%;
}
</style>