uniapp 扫码页面 scanCode.nvue

代码

<div class="box">
	<barcode
		id="1"
		class="barcode"
		autostart="true"
		ref="barcode"
		background="rgb(0,0,0)"
		frameColor="#69E206"
		scanbarColor="#69E206"
		:filters="fil"
		@marked="success1"
		@error="fail1"
	></barcode>
	<text class="text">将二维码/条码放入框内，即可自动扫描</text>
	<button type="primary" class="repair_btn" @click="torepair">手动选择</button>
</div>

下面是JS操作

export default {
	data: {
		fil: [0, 2, 1]
	},
	onShow() {
		//显示该页面时打开扫描功能
		this.$refs.barcode &&
			this.$refs.barcode.start({
				conserve: true,
				filename: '_doc/barcode/'
			});
	},
	methods: {
		//扫描返回结果
		success1(e) {
			var that = this;
			console.log('success1:' + JSON.stringify(e));
			console.log(e);
			var list = JSON.parse(e.detail.message);
			console.log(list);
			if (判断条件) {
				uni.navigateTo({
					url: '页面路径'
				});
			} else {
				uni.showModal({
					title: '提醒',
					content: '请扫描正确的二维码',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.toStart();
						} else if (res.cancel) {
							console.log('用户点击取消');
							that.tocancel();
						}
					}
				});
			}
		},
		fail1(e) {
			console.log('fail1:' + JSON.stringify(e));
		},
		//打开扫描
		toStart: function() {
			this.$refs.barcode.start({
				conserve: true,
				filename: '_doc/barcode/'
			});
		},
		//关闭扫描，返回上一页
		tocancel: function() {
			this.$refs.barcode.cancel();
			uni.navigateBack({});
		},
		//手动选择--关闭扫描
		torepair() {
			this.$refs.barcode.cancel();
		}
	}
};

页面样式

.box {
	flex: 1;
	background-color: rgb(0, 0, 0);
	padding-top: 200rpx;
}
.text {
	font-size: 34rpx;
	color: #ffffff;
	text-align: center;
}
.barcode {
	width: 750rpx;
	height: 700rpx;
	background-color: rgb(0, 0, 0);
}
.repair_btn {
	width: 300rpx;
	height: 80rpx;
	border-radius: 20rpx;
	margin: 100rpx 225rpx;
}