uniapp 自定义扫描页面

Uniapp 的扫描页面可以通过 uni.scanCode API 调用系统原生的扫码功能，但如果要自定义扫描页面的样式，需要借助第三方插件。以下是一些常用的插件以及使用方法：

1. uni.scan：uni.scan 插件可以实现自定义扫描页面，支持 iOS 和 Android。使用方法如下：

- 安装插件：npm install uni.scan
- 在页面中引入插件：import scan from 'uni.scan'
- 调用扫描功能：

scan({
  success(res) {
    console.log(res)
  },
  fail(err) {
    console.log(err)
  }
})

2. uni-qrcode：uni-qrcode 插件也可以实现自定义扫描页面，支持 iOS 和 Android。使用方法如下：

- 安装插件：npm install uni-qrcode
- 在页面中引入插件：import qrcode from '@/components/uni-qrcode/uni-qrcode.vue'
- 在页面中添加组件：

<template>
  <view>
    <qrcode
      :show="showQrcode"
      @success="onScanSuccess"
      @fail="onScanFail"
    />
  </view>
</template>

- 在页面中调用扫描功能：

onScan() {
  this.showQrcode = true
},
onScanSuccess(res) {
  console.log(res)
  this.showQrcode = false
},
onScanFail(err) {
  console.log(err)
  this.showQrcode = false
}

以上是两种常用的自定义扫描页面的插件，当然还有其他的插件可以实现类似的功能。需要根据自己的需求选择适合的插件。