<template>
  <view class="page">
    <view class="title">扫码结果</view>
    <view class="result_list">
      <view v-for="(item, index) in list" :key="index" class="result_li">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webView: null,
      barcode: null,
      list: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.createBarcode();
    }, 10000);
  },
  methods: {
    // 扫码成功回调
    onmarked(type, result) {
      // 【步骤4】将扫码结果添加到 list 里
      console.log(result);
      this.list.push(result);

      // 【步骤5】1秒后再重新开启扫码
      setTimeout(() => {
        this.barcode.start();
      }, 1000);
    },
    // 创建窗口和扫码控件
    createBarcode() {
      // 【步骤1】判断有没有创建过 webview 容器，如果没有就执行创建操作
      if (!this.webView) {
        this.webView = plus.webview.open('', 'barCodeBox', {
          top: '60px',
          width: '100%',
          height: '400px'
        });
      }

      // 【步骤2】判断有没有创建过 扫码框，如果没有就执行创建操作
      if (!this.barcode) {
        this.barcode = plus.barcode.create(
          'barcode',
          [
            plus.barcode.QR,
            plus.barcode.EAN13,
            plus.barcode.EAN8,
            plus.barcode.AZTEC,
            plus.barcode.DATAMATRIX,
            plus.barcode.UPCA,
            plus.barcode.UPCE,
            plus.barcode.CODABAR,
            plus.barcode.CODE39,
            plus.barcode.CODE93,
            plus.barcode.CODE128,
            plus.barcode.ITF,
            plus.barcode.PDF417
          ], // 只扫二维码
          {
            top: '0px',
            left: '0px',
            width: '100%',
            height: '400px',
            position: 'static',
            scanbarColor: '#f1c01f',
            frameColor: '#c0ff01'
          }
        );

        this.barcode.onmarked = this.onmarked; // 扫码结果回调函数

        // 【步骤3】将扫码框添加到 webview 里
        plus.webview.getWebviewById('barCodeBox').append(this.barcode);
      }

      this.barcode.start(); // 开始扫码
    }
  }
};
</script>

<style>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 200px 20rpx 0;
}

.title {
  font-size: 50rpx;
  color: #333;
}

.result_list {
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 20rpx;
}

.result_li {
  box-sizing: border-box;
  margin-bottom: 20rpx;
  padding: 10rpx 20rpx;
  border: 1px solid #7298c8;
  border-radius: 10rpx;
  font-size: 40rpx;
}
</style>
