uni小程序自定义扫码界面

效果预览

项目场景：

uni小程序自带扫码界面不满足业务需求

---

问题描述

需要持续扫码，并可以选择相应的等级

相关demo：

<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="top" style="background-color: #000">
			<view :style="{ height: tops + 'px' }"></view>
			<view
				:style="{ height: height + 'px' }"
				class="content-title flex justify-between align-center"
			>
				<uni-icons
					type="left"
					size="30"
					@click="goBack"
					color="#fff"
				></uni-icons>
				<view
					style="
						color: #3d3d3d;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 700;
						font-size: 38rpx;
						line-height: 55rpx;
					"
				></view>
				<view style="width: 40rpx"></view>
			</view>
		</view>
		<view class="">
			<camera
				device-position="back"
				flash="off"
				mode="scanCode"
				@scancode="scancodeEventHandle"
				@error="error"
			>
				<view
					class="mark"
					v-show="isShowMark"
					:style="{ left: obj.l + 'px', top: obj.t + 'px' }"
				></view>
			</camera>
			<view class="level flex">
				<view class="" v-for="(item, index) in dataList" :key="index">
					<view class="item">
						<u-button
							color="#5aacf6"
							shape="circle"
							:text="item.name"
							:plain="activeIndex == index"
							:hairline="activeIndex !== index"
							@click="handelChoose(item, index)"
						></u-button>
					</view>
				</view>
			</view>
			<view class="btn" v-if="status == 'load'">
				<u-button
					color="#5aacf6"
					:hairline="false"
					text="开始扫描"
					@click="handelBegin"
				>