cordova+vue使用插件cordova-plugin-qrscanner自定義掃碼頁面

原文位址聲明：https://blog.csdn.net/qq_23179075/article/details/99627909

預覽效果：

cordova-plugin-qrscanner 的使用方式可以自己到github上閱讀文檔，這裡主要貼上

Vue

自定義頁面的代碼。

<template>
  <div>
    <div class="header">
      <x-header class="x-header" slot="header" :left-options="{backText:'傳回'}"
                :title="title">
      </x-header>
    </div>
    <div class="scroll-container scan-container">
      <div class="scan-none-1"></div>
      <div class="scan-box-container">
        <div class="scan-none-2"></div>
        <div class="scan-box">
          <div class="scan-box-area">
            <div class="top-left"></div>
            <div class="top-right"></div>
            <div class="bottom-left"></div>
            <div class="bottom-right"></div>
            <div class="light" @click="onLightTrigger">
              <i :class="['iconfont',light?'icon-shoudiantong-dakai':'icon-shoudiantong-guanbi']"></i>
              <span>輕觸 {{light?'關閉':'打開'}}</span>
            </div>
          </div>
        </div>
        <div class="scan-none-2"></div>
      </div>
      <div class="scan-none-1">
        放入框内，自動掃描
      </div>
    </div>
  </div>
</template>
           

<script>
  export default {
    name: "Scan",
    data() {
      return {
        light: false,
      }
    },
    beforeCreate() {
      //将網頁背景設定透明
      document.getElementById("app").style.backgroundColor = "transparent";
      document.querySelector('body').style.backgroundColor = "transparent";
    },
    beforeDestroy() {
      //恢複之前的背景
      document.getElementById("app").style.backgroundColor = "#f6f6f6";
      document.querySelector('body').style.backgroundColor = "#f6f6f6";
      try {
        QRScanner.hide(status => {
          console.log("[Scan.vue] 關閉掃描" + JSON.stringify(status));
        });
        QRScanner.destroy(function (status) {
          console.log("[Scan.vue] 銷毀掃碼" + JSON.stringify(status));
        });
      } catch (e) {
        console.log("[Scan.vue]" + JSON.stringify(e));
      }
    },
    mounted() {
      this.onScan();
    },
    methods: {
      /**
       * 掃碼
       */
      onScan() {
        try {
          QRScanner.show(status => {
            console.log("[Scan.vue onScan] 顯示掃描" + JSON.stringify(status));
          });
          QRScanner.scan((err, contents) => {
            if (err) {
              alert(JSON.stringify(e))
            }else {
              alert('掃描結果: ' + contents);
            }
          });
        } catch (e) {
          console.log("[Scan.vue：onScan] " + JSON.stringify(e))
        }
      },

      /**
       * 手電筒開關
       */
      onLightTrigger() {
        try {
          if (!this.light) {
            QRScanner.enableLight((err, status) => {
              err && console.log("[Scan.vue] 打開手電筒狀态錯誤：" + JSON.stringify(err));
              console.log("[Scan.vue] 打開手電筒狀态：" + JSON.stringify(status));
            });
          } else {
            QRScanner.disableLight((err, status) => {
              err && console.log("[Scan.vue] 關閉手電筒狀态錯誤：" + JSON.stringify(err));
              console.log("[Scan.vue] 關閉手電筒狀态：" + JSON.stringify(status));
            });
          }
        } catch (e) {
          console.log("[Scan.vue] " + JSON.stringify(e));
          return
        }
        this.light = !this.light
      },

    }
  }
</script>
           

<style scoped token string">"less">
  @header-height: 1.2rem;
  //可滾動内容區域
  .scroll-container {
    width: 100%;
    height: calc(100% - @header-height);
    padding-top: @header-height;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .scan-container {
    background: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;

    .scan-none-1 {
      flex: 1;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      padding-top: 0.32rem;
      color: rgba(255, 255, 255, 0.8);

      &:first-child {
        flex: 0.6;
      }
    }

    .scan-box-container {
      display: flex;

      .scan-none-2 {
        flex: 1;
        height: calc(6rem + 2px);
        background: rgba(0, 0, 0, 0.4);
      }

      .scan-box {
        width: 6rem;
        height: 6rem;
        border: 1px solid @primary;
        background: rgba(0, 0, 0, 0);

        .scan-box-area {
          width: 6rem;
          height: 6rem;
          position: relative;

          .light {
            width: 6rem;
            position: absolute;
            color: rgba(255, 255, 255, 0.8);
            .center;
            flex-direction: column;
            bottom: 0.32rem;

            i {
              font-size: 0.8rem;
              line-height: 0.8rem;
            }
          }

          .top-left {
            position: absolute;
            top: -3px;
            left: -3px;
            width: 1rem;
            height: 1rem;
            border-top: 6px solid @primary;
            border-left: 6px solid @primary;
          }

          .top-right {
            position: absolute;
            top: -3px;
            right: -3px;
            width: 1rem;
            height: 1rem;
            border-top: 6px solid @primary;
            border-right: 6px solid @primary;
          }

          .bottom-left {
            position: absolute;
            bottom: -3px;
            left: -3px;
            width: 1rem;
            height: 1rem;
            border-bottom: 6px solid @primary;
            border-left: 6px solid @primary;
          }

          .bottom-right {
            position: absolute;
            bottom: -3px;
            right: -3px;
            width: 1rem;
            height: 1rem;
            border-bottom: 6px solid @primary;
            border-right: 6px solid @primary;
          }
        }
      }
    }
  }
  /deep/ .vux-header-back {
    color: white !important;
  }
</style>
           

标題欄用的 VUX UI庫 中的 XHeader元件！