<template>
  <view class="page">
    <view class="title">掃碼結果</view>
	<view class="result_list">
	  <view v-for="item in list" :key="item" class="result_li">
		{{ item }}
	  </view>
	</view>
  </view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'

let webView = null // webview容器
let barcode = null // 掃碼框

const list = ref([]) // 掃碼結果 - 列表

// 掃碼成功回調
function onmarked(type, result) {
  // 【步驟4】將掃碼結果添加到 list 里
  list.value.push(result)

  // 【步驟5】1秒后再重新開啟掃碼
  setTimeout(() => {
	barcode.start()
  }, 1000)
}

// 創建窗口和掃碼控件
function createBarcode() {
  // 【步驟1】判斷有沒有創建過 webview 容器，如果沒有就執行創建操作
  if (!webView) {
    webView = plus.webview.open(
	  '',
	  'barCodeBox',
	  {
		top: '60px',
		width: '100%',
		height: '200px'
	  }
	)
  }

  // 【步驟2】判斷有沒有創建過 掃碼框，如果沒有就執行創建操作
  if(!barcode){
	barcode = plus.barcode.create(
	  'barcode',
	  [plus.barcode.QR], // 只掃二維碼
	  {
		top:'0px',
		left:'0px',
		width: '100%',
		height: '200px',
		position: 'static',
		scanbarColor: '#f1c01f',
		frameColor: '#c0ff01'
	  }
	)

	barcode.onmarked = onmarked // 掃碼結果回調函數

    // 【步驟3】將掃碼框添加到 webview 里
	plus.webview.getWebviewById('barCodeBox').append(barcode)
  }

  barcode.start() // 開始掃碼
}

// 在頁面加載時，延遲300毫秒執行創建掃碼框函數
onReady(() => {
  setTimeout(() => {
	createBarcode()
  }, 300)
})
</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>