解决 barcode 扫描时黑屏问题

换一种方式创建扫码控件并在控件创建好之前加入过度动画

<template>
 <div class="scan">
 <div id="bcid">
  <div style="height:40%"></div>
  <p class="tip" v-if="visiable">...载入中...</p>
 </div>
 <footer>
  <button @click="closeScan">返回</button>
  <button @click="scanImg">相册</button>
 </footer>
 </div>
</template>
<script >
let scan = null
 
export default {
  data() {
    return {
      codeUrl: '',
	  visiable:true
    }
  },
  mounted () {
    this.startRecognize()
    setTimeout(() => {
      this.startScan()
    }, 500)
  },
  methods: {
	init(data){
	    this.detailVisible=false;
	},
    // 创建扫描控件
    startRecognize () {
		let that = this
      if (!window.plus) return
      scan = new plus.barcode.Barcode('bcid')
      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
		that.$emit('dialogClose');
		that.$emit('receive');
        that.closeScan()
		that.visiable = false
      }
    },
			
	// 从系统相册选择文件
	scanImg() {
		window.plus.gallery.pick(
			(path) => {
				window.plus.barcode.scan(
					path,
					(type, result) => {
						this.result = result.replace(/\n/g, '');
						this.closeScan()
						this.$emit('dialogClose');
						this.$emit('receive');
						this.visiable = false
						console.log("弹窗扫描结果" + result+ this.visi)
					},
					() => {
						alert('QR Code not found');
					}
				)
			}
		), {
			filters: "images"
		}
	},
    // 开始扫描
    startScan () {
      if (!window.plus) return
      scan.start()
    },
    // 关闭扫描
    cancelScan () {
      if (!window.plus) return
      scan.cancel()
    },
    // 关闭条码识别控件
    closeScan () {
      if (!window.plus) return
      scan.close()
	  this.$emit('dialogClose');
	  console.log('已发送')
    }
  },
  destroyed () {
    this.cancelScan()
    this.closeScan()
  }
}
</script>
<style lang="scss">
 .scan {
	 margin-top: -390px;
	 height: 31rem;
  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
	height: 31rem;
    bottom:3rem;
    text-align: center;
    color: #fff;
    // background: #ccc;
	background: transparent;
  }
  footer {
    position: absolute;
	color: #fff;
    left: 0;
    bottom: 1rem;
    height: 2rem;
    line-height: 2rem;
    z-index: 9999;
	margin-left: 52px;
	button{
		border-radius: 20%;
		width: 55px;
		height: 35px;
		background-color: #42a5ff;
		border: none;
		margin-right: 6.125rem;
	}
  }
 }
</style>