im/pages/common/scan.vue

<template>
	<view class="scan_page" :style="{height:windowHeight+'px'}">
		<uni-nav-bar 
			left-icon="back"
			 @clickLeft="back"
			fixed 
			backgroundColor="#FFF" 
			statusBar
			>
		</uni-nav-bar>
		<barcode id='1' 
			class="barcode" 
			ref="barcode" 
			:autostart="true" 
			background="rgb(0,0,0)" 
			frameColor="#07c160" 
			scanbarColor="#07c160" 
			 :style="{height:windowHeight+'px'}"
			:filters="fil" 
			@marked="success" 
			@error="fail">
		</barcode>
		<view class="overlay">
			<button class="btn" @click="toStart">开始扫码识别</button>
			<button class="btn" @click="tocancel">取消扫码识别</button>
			<button class="btn" @click="toFlash">开启闪光灯</button>
			<button class="btn" @click="toscan">预览</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fil: [0, 2, 1,3,4,12],
				windowHeight:500,
			}
		},

		onLoad() {
			uni.scanCode({
				complete(res) {
					console.log(res)
				}
			})
		},
		created() {
			const info = uni.getSystemInfoSync();
			console.log(info);
			this.windowHeight = info.screenHeight;
		},
		methods: {
			success(e) {
				console.log("success1:" + JSON.stringify(e));
			},
			fail(e) {
				console.log("fail1:" + JSON.stringify(e));
			},
			toStart: function() {
				this.$refs.barcode.start({
					conserve: true,
					filename: '_doc/barcode/'
				});
			},
			tocancel:function(){
				this.$refs.barcode.cancel();
			},
			toFlash: function() {
				this.$refs.barcode.setFlash(true);
			},

			toscan: function() {
				console.log("scan:");
				const barcodeModule = uni.requireNativePlugin('barcodeScan');
				barcodeModule.scan("/static/barcode1.png"
				,(e)=>{
					console.log("scan_error:"+JSON.stringify(e));
				});
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scan_page{
		width: 750rpx;
		position: relative;
		.barcode {
			width: 750rpx;
			background-color: #808080;
		}
		
		.btn {
			top: 20rpx;
			width: 730rpx;
			margin-left: 10rpx;
			margin-top: 10rpx;
			background-color: #458B00;
			border-radius: 10rpx;
		}
		.overlay{
			background: rgba(0, 0, 0, 0.1);
			position: absolute;
			bottom: 100rpx;
			left: 0;
			right: 0;
			height: 200rpx;
		}
	}
</style>