标签：Vue return barcode scan Barcode break 二维码 plus type

<template>
  <div class="scan">
    <div id="bcid"></div>
    <div class="back-arrow" @click="clickIndexLeft">
      <van-icon name="arrow-left" color="#fff" />
    </div>
  </div>
</template>

<script>
let scan = null;
export default {
  data() {
    return {
    };
  },
  async mounted() {
    await this.startRecognize();
    await this.startScan();
  },
  methods: {
    //创建扫描控件
    startRecognize() {
      if (!window.plus) return;
      //filter 扫描类型
      var filter = [
        plus.barcode.CODE128, // CODE128: Code128条形码，数值为10
        plus.barcode.EAN13, // EAN13: EAN条形码标准版，数值为1
        plus.barcode.EAN8, // EAN8: ENA条形码简版，数值为2
        plus.barcode.QR, // QR: QR二维码，数值为0
      ];
      // 提示plus方法要进行真机测试
      scan = new plus.barcode.Barcode("bcid", filter, {
        top: `0px`,
        left: '0px',
        height: `100%`,
        width: '100%',
        position: 'absolute',
        background: '#00ff33',
        frameColor: '#00ff33',
        scanbarColor: '#00ff33',
      });
      scan.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;
          case plus.barcode.CODE128:
            type = "EAN8";
            break;
          default:
            type = "其它" + type;
            break;
        }
        this.clickIndexLeft(`${type}===${result}`)
      }
    },
    // 开始扫描
    startScan() {
      if (!window.plus) return
      scan.start();
    },
    // 关闭控件
    closeScan() {
      if (!window.plus) return;
      scan.close();
    },
    // 关闭扫描
    cancelScan() {
      if (!window.plus) return;
      scan.cancel();
    },
    // 返回上一页
    clickIndexLeft(result) {
      this.cancelScan();
      this.closeScan();
      this.$route.params.result = result
      this.$router.back()
    }
  },
  destroyed() {
    this.cancelScan();
    this.closeScan();
  }
};
</script>

<style lang="scss">
.scan {
  width: 100%;
  height: 100vh;
  .back-arrow {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}
#bcid {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
}
</style>

标签：Vue,return,barcode,scan,Barcode,break,二维码,plus,type
来源： https://www.cnblogs.com/memphis-f/p/15543139.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。