vue webapp掃碼支付和從相冊中選擇圖片

直接上代碼：

<template>
  <div class="container">
    <div class="scan">
      <div id="bcid">
        <div style="height:40%"></div>
        <p class="tip">...載入中...</p>
      </div>
      <div class="footer">
        <span class="left" @click="scanPicture">從相冊選擇二維碼</span>
        <span class="right" @click="cancelScan">取消掃描</span>
      </div>
    </div>
  </div>
</template>

<script>
let scan = null;
document.addEventListener("plusready", function(){
  plus.key.addEventListener("backbutton",function(){
    scan.close();
    window.history.back();
  },false);
});
export default {
  data() {
    return {
      codeUrl: ""
    };
  },
  created: function() {
    let _this = this;
    // $emit子組件調用父組件的方法並傳遞數據
    this.$emit("header", false);
    this.$emit("footer", false);
    // _this.startRecognize();  //打開自動掃描
  },
  mounted: function() {
    const self = this;
    if (window.plus) {
      self.startRecognize();
    } else {
      document.addEventListener("plusready", function(){
        self.startRecognize();
        plus.key.addEventListener("backbutton",function(){
          self.close();
          window.history.back();
        });
      }, false);
    }
    document.addEventListener(
      "DOMContentLoaded",
      function() {
        // alert("DOMLoaded");
        self.domready = true;
        self.startRecognize();
      },
      false
    );
  },
  methods: {
    // 創建掃描控件
    startRecognize() {
      console.log("創建控件");
      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;
        }
        // alert(result);
        if(result != null || result !=''){
          // console.log("000",result);
          window.location.href = result; 
        }
        that.closeScan();
      }
      setTimeout(function() {
        that.startScan();
      }, 1000);
    },
    // 開始掃描
    startScan() {
      console.log("開始掃描");
      if (!window.plus) return;
      scan.start();
    },
    closeScan(){
      let that = this;
      console.log("關閉掃描");
      if (!window.plus) return;
      scan.cancel();
      scan.close();
    },
    // 關閉掃描
    cancelScan() {
      let that = this;
      console.log("關閉掃描");
      if (!window.plus) return;
      scan.cancel();
      scan.close();
      window.history.back();
    },
    // //選擇相冊中的二維碼並掃描
    scanPicture() {
      //選擇相冊中的二維碼並掃描
      let _this = this;
		if(!window.plus) return;
		    plus.gallery.pick( function(path){
//  		alert(path);
    		plus.barcode.scan( path, function (type,result) {
          // alert(result);
          result = result.replace("\"","").replace("\"","");
          // alert(result);
          if(result != null || result !=''){
            window.location.href = result; 
          }
          _this.closeScan();
			}, function (error) {
				( error.message );
			});
	    }, function ( e ) {
	    	alert("取消選擇圖片");
	    }, {filter:"image"} );

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

  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    text-align: center;
    color: #fff;
    background: #ccc;
    .tip {
      font-size: 1.6rem;
    }
  }
  .footer {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    span {
      display: inline-block;
      width: 50%;
      font-size: 1.6rem;
      text-align: center;
      height: 60px;
      line-height: 50px;
      color: #ffffff;
      &.left {
        background-color: #06c2e0;
      }
      &.right {
        background-color: #335edb;
      }
    }
  }
}
</style>

好像還需要引入個vue-awesome-mui，項目太緊，先做個記錄。