请编写一个uniapp组件,用于识别条形码,且可以自定义扫描界面

好的，以下是一个简单的uniapp组件，可以实现扫描条形码并自定义扫描界面：

<template>
  <view>
    <view class="scan-preview">
      <camera 
        :device-position="cameraPosition"
        style="width: 100%; height: 100%;"
        :flash="flash"
        @load="onCameraLoad"
        @stop="onCameraStop"
        @error="onCameraError"
        @scanCode="onScanCode">
      </camera>
      <view class="scan-box" :style="scanBoxStyle"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraPosition: 'back',
      flash: 'off',
      scanBoxWidth: 200,
      scanBoxHeight: 200,
      scanBoxStyle: {},
    }
  },
  methods: {
    onCameraLoad() {
      uni.showLoading({
        title: '相机加载中...',
        mask: true
      })
      this.initScanBox()
    },
    onCameraStop() {
      uni.hideLoading()
    },
    onCameraError(e) {
      uni.showToast({
        title: '相机初始化失败',
        icon: 'none'
      })
      console.error(e)
    },
    onScanCode(e) {
      uni.showToast({
        title: `扫描结果: ${e.result}`,
        icon: 'none'
      })
    },
    initScanBox() {
      uni.createSelectorQuery().select('.scan-preview').boundingClientRect((rect) => {
        const centerLeft = (rect.width - this.scanBoxWidth) / 2
        const centerTop = (rect.height - this.scanBoxHeight) / 2
        this.scanBoxStyle = {
          width: `${this.scanBoxWidth}px`,
          height: `${this.scanBoxHeight}px`,
          left: `${centerLeft}px`,
          top: `${centerTop}px`
        }
      }).exec()
    }
  }
}
</script>

<style scoped>
.scan-preview {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scan-box {
  position: absolute;
  border: 1px solid #fff;
  box-sizing: border-box;
}
</style>

这个组件包含一个 `camera` 组件用于打开相机，一个 `view` 组件用于显示扫描框，以及一些方法用于初始化扫描框和处理扫描结果。你可以在这个组件的基础上自定义扫描界面，例如添加一个返回按钮和一个闪光灯开关。