stx2.0/components/hs-scancode.nvue

<template>
	<view class="page" :style="{height: height+'px'}" v-if="onlyFromCamera">
		<barcode :style="{height: height+'px'}" id="hs-scan" class="barcode" ref="barcode" autostart
			frameColor="#0cff00" scanbarColor="#0cff00" background="#000000" :filters="fil" @marked="success"
			@error="error">
		</barcode>
		<view @click="back" class="back" hover-class="css-hover">
			<image :src="scan_img.back" style="width: 28px;height: 28px;"></image>
		</view>
		<text class="msg">{{msg}}</text>
		<view class="flash" :style="{bottom: (height/2 - 120)+'px'}" @click="toFlash()" hover-class="css-hover">
			<image class="flash-img" :src="flash_img" style="width: 30px;height: 30px;"></image>
			<text class="flash-text" :class="flash?'flash-on':''">{{flash?"轻触关闭":"轻触点亮"}}</text>
		</view>
	</view>

	<view class="page" :style="{height: height+'px'}" v-else>
		<barcode :style="{height: height+'px'}" id="hs-scan" class="barcode" ref="barcode" autostart
			frameColor="#0cff00" scanbarColor="#0cff00" background="#000000" :filters="fil" @marked="success"
			@error="error">
		</barcode>
		<view @click="back" class="back" hover-class="css-hover">
			<image :src="scan_img.back" style="width: 28px;height: 28px;"></image>
		</view>
		<text class="msg">{{msg}}</text>
		<view class="flash" :style="{bottom: (height/2 - 120)+'px'}" @click="toFlash()" hover-class="css-hover">
			<image class="flash-img" :src="flash_img" style="width: 30px;height: 30px;"></image>
			<text class="flash-text" :class="flash?'flash-on':''">{{flash?"轻触关闭":"轻触点亮"}}</text>
		</view>

		<view @click="toScan" class="album" hover-class="css-hover">
			<image :src="scan_img.album" style="height: 26px;width: 26px;"></image>
		</view>

	</view>
	</view>
</template>

<script>
	const _image = {
		flash_off: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABSElEQVRoge2UMS9DYRRAP20MdOhuEIOIFbXZGAw2xMpiM0vslf6Cpt1MJBabxSLEJuEPiMEiFsSKY3mSG9K+vtfvvit1T3K39+49p2kbguM4/wugBqwrzCJQ0pZfRZe6dsCacsC+akASMQMsKcwC2l8hxxpgA7hWnEPtgJ3Yv9of3BQZcAWcRZpni4CpiHsvPaDHQwMVsBJpZwW4KypgGfhMjr0CtT73DQOn4kM5juXa7eimiHgBZnPuKQMnQv4CGInt2+n4rjj8BEzn2NEUO26BqoZrN4GGEHgAJjK8uyfevQfGFFU7SgwBLfrjEZgsXF5ElICjnPJvwLyZvIiYE1LnQDtlvv8A2tbuIYRfAVs9PP+ePNsswi8VD7DGA6zxAGs8wBoPsMYDrPEAawYt4ADYTpmPvxyQBQ+IAjCaRGSdcWt3xwkhfAHeC7+Yzq/O8QAAAABJRU5ErkJggg==',
		flash_on: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABi0lEQVRoge2WPyhFYRiHT0n5k4GyuINRWe5gYrqJQiyKzYRJsir/VgMx3JgMjOyGmyxSVqOSwU0pumVg4zHc9+bonO9c5/rOfTu376lv+r2d9/fU+erzPIej/gBTQB5oqTK3BbwBuYiZduAcWLJeNGLpLWX2qsxdydxaxMyhzNzYb2peOi1Lv4DxiLmKwLohn/V9ZzS5xuHLj2X5E9BlmDEKAD3Ai+QHyTcOFugEHqXApmHmTPL5kGxVsgegI/nGIQA54BoYMuTdwCTQFJL1AkfAQPJNGxFgGHgGShbOqYbAMvYoOoEaBBYtCtxrCLRSvgcjFk5f3QVEYhCYsXDatATGLPw+BZXyPonCP8p/AlltgawUqYUT1fIV+HnYxeEdyGh39zzP84CMFIrDtnbvXwA7McqXMDzB1QAmYghcavcN4AS0MQhcAPsEL3gqBF6BZsk20ihw58sWnEDSNKJA0ZetpFEAYBeYA4ppFTDhBKzjBLRxAto4AW2cgDZOQBugH/j4o0Beu6/DIXwDQ+8GvfIPRuwAAAAASUVORK5CYII=',
		back: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADjElEQVRoge2aW08TQRiGh4QYwg0iSv0fEKAChaRNKychIVj1Qv+UGqOXGhJCDEoiaEwTwqWmGg+pRq64IB5impa0C9vT40W30G6325nulgXDm+xNd3fmfWa+mZ2Zr0Kc6z8V0AH0GleH135sBVwF7gHPgK9AmnqljXtPgbuAz2vTHcAs8BooAjmgYGHcrILxbBHYBGZOvIcM4z8MMzKm7WAKwHdg+iSM9wPrRqUlB8bNKlHukRfA5XaZDwB/Ad1F42bpwB9g1G3z88jHuFMVDJA5N827HTLNVDLqnHVqfpxyy3ulHHCtVfM+yjFf9BCgSHlMXGkFYIP2DlhZHQLrquav423Lm1UEQrLmO4BvnD6AL8h8sYEbKEyXOzs7bG1tUSrJT1L5fJ5YLMbu7q4qxIwMwFskWz+RSNDV1YUQgmg0Sj6fb/qOpmmEw2GEEPT09LC3tycLUAA2mpn3yZoHWF5eRghxdC0tLdlCaJpGKBSqeScWi8lWV4FovNQA7qAw82SzWQYGBqQgrMwHg0GpXquSDty0A3gCKJWYTqfx+/01xqampjg8PDx6Zn9/n9HR0Zpn5ubm0HXlWToHPLID+KxaIkAmkyEQCFhCuGi+oo92AJlWS00mkwwODtYYXVxcJBgM1oVNNptttRqA/UbmLzgpFco9MTExUWPYxZavVqcVwCU3Sm4E4aJ5gN62AVgNaiEEkUiEg4MDN6qABgCOQ6iR+TZA1IeQ00FsFTqRSIShoaGa3+bn552GkvUgNgA+tVKiVcsvLCyQy+XIZDJMTk7W3AuHw0564oMdwGMUd2DJZLLua1wxX1EjCE3TVM3ngId2AFEUlhK6rjf8gJmVSqUYHh6uAy0WlVbtOWDRDqAPhaX0yspKjaHp6WlL83YQ29vbKgB54GJDAAPiDZIr0ng8Tmdnp5T5aoiRkRGEEHR3d6vsCQrAK1vzBoDShiYej7O2tqa0qtQ0jdXVVRKJhPQ7KGxozvaW0oAY52QPspqpBIxJma+CeM7pOFbRgRUl8wZAH/Abb0OpAPzEau0jCTFGee71IpxKlFvf35L5Koize7hrgqikhdqtIm4er1dBBCgftCovYBSkAb9wO8FRBdEPvMR5bsysSu+u0a4UkwnE7SRfgpNI8pkgKmnWTY7TrDLriTzH6aoNvEizWsD4gNvAA+A9kLIwngLeAfeBW3id6G4mztJfDc7lQP8ALX0r5IbFIHwAAAAASUVORK5CYII=',
		album: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACgklEQVRoge3YO2gUURiG4WgUMeINQ7xgFZDYiIWilSBesbQTxSKFNipi4Q0URIkgWEhsLAUbsUiTwl6xSCFGIWorIghRRLyLyWMxZ/G4zk5ms7szK+wHpznzH/733ZnZOTNdXZ100kknbRv0YR8GcbTgMRh6980GvB+jmFZ+piUs/XnhN2GyXObUTGLTTPDL8DZadBc7MSA5K0WOgdD7bsTzFsuyBC5Exefruu5aGJyNuC5kFT4NRc8wt0DGzGBuxDaeVfg5FA1XzS/GTXwKx59ge6vBqxhuhN5fsooquRrNdeORfzONvYXQJxyXo97pV0cNgf0p8JU8/h8ErmQITKG73QVOZghMFgHfqMBKvKshcKntBcL8Hryvgr+H+YXQdzUoEI6txjHJQ6Wwf5+of2MCZadtBDAPt/AKJ+pY1zYC56rupW0515UvgDX+bEcqGcOcHGvbQuC29BzKsbZcAWxV+w3vNXoKFcAqOZ8DmIOHNeArOV2YAK5Hv9zaHAIHZoCHD+htuQC2VTUenQF+ib9fU7Nyq6UCkkthLKXxvozGQznh4Rc2tFLgYI3GL6TcD1iHH3UIwP2WCKBHcs3XyqmUNSN1wlfyz16rGQLVT9DqfMSqqH7PLOHhOeY1TQC9kn+JmTKCBZKd68sGBGCwmQLDdTT+LrkZG80bLKpX4FsouBHNDeBnE4Bmk4sRx80w9zUVPhRNhKKxaO5MKehJ7kQcj8PcRJbAtWjx4TC3EDuwq+CxE0sDw5GIayhLoM+fd98pyZahH8tLGusDw1RgmsSKmgJBYje+pp/RUvNd3s+Zkq3veMnAcR5gcy74KpEtOC75ElHGGMTGusE76aSTTgrLbyY65XbJ3W1oAAAAAElFTkSuQmCC',
	};
	const SCAN_MAPS = {
		[0]: "QR_CODE",
		[1]: "EAN_13",
		[2]: "EAN_8",
		[3]: "AZTEC",
		[4]: "DATA_MATRIX",
		[5]: "UPC_A",
		[6]: "UPC_E",
		[7]: "CODABAR",
		[8]: "CODE_39",
		[9]: "CODE_93",
		[10]: "CODE_128",
		[11]: "CODE_25",
		[13]: "PDF_417",
		[14]: "RSS_14",
		[15]: "RSSEXPANDED"
	};
	export default {
		data: {
			evalName: "hs-scancode", //扫码回调监听事件
			flash: false, //手电筒
			vibrate: true, //震动
			sound: "none", //声音 none default
			fil: [0, 1, 2], //条码类型
			msg: "扫码", //提示文本
			height: 600, //高度
			isDark: null, //状态栏前景色 黑色
			fullScreen: false, //是否全屏
			onlyFromCamera: false, //从相册获取
		},
		computed: {
			scan_img() {
				return _image
			},
			flash_img() {
				return this.flash ? _image.flash_on : _image.flash_off;
			},
		},
		onLoad(p) {
			//参数
			if (p.evalName) this.evalName = p.evalName;
			if (p.flash) this.flash = p.flash == 'true';
			if (p.vibrate) this.vibrate = p.vibrate == 'true';
			if (p.sound) this.sound = p.sound;
			if (p.msg) this.msg = p.msg;
			if (p.fil) this.fil = p.fil.split(',').map(x => parseInt(x));
			if (p.fullScreen) this.fullScreen = p.fullScreen == 'true';
			if (p.onlyFromCamera) this.onlyFromCamera = p.onlyFromCamera == 'true';
			this.setFullOrStatus(true);
			uni.getSystemInfo({
				success: res => this.height = res.windowHeight
			});
			setTimeout(() => {
				this.toStart();
				this.webviewInit();

			}, 100);
		},
		onUnload() {
			this.setFullOrStatus(false);
			this.toFlash(false);
			uni.$off(this.evalName);
		},
		onBackPress(e) {
			if (e.from === 'backbutton') this.back(0);
			else this.setFullOrStatus(false);
		},
		methods: {
			webviewInit() {
				var pages = getCurrentPages();
				var currentWebview = pages[pages.length - 1].$getAppWebview();
				//ios 左滑关闭
				currentWebview.addEventListener('popGesture', e => {
					const type = e.type,
						result = e.result;
					if (type === 'start') {
						this.setFullOrStatus(false);
						this.toFlash(false);
						this.toCancel();
					} else if (type === 'end' && result) {
						this.back(0)
					} else if (type === 'end' && !result) {
						this.setFullOrStatus(true);
						this.toStart();
					}
				});
			},
			success(e) {
				uni.$emit(this.evalName, [null, {
					"hsScanCode": true,
					"result": e.detail.message,
					"scanType": SCAN_MAPS[e.detail.code],
					"charSet": "utf8",
					"path": e.detail.file || "",
					"errMsg": "scanCode:ok"
				}]);
			},
			error(e, cancel) {
				uni.$emit(this.evalName, [{
					"hsScanCode": true,
					"errMsg": cancel === true ? "scanCode:fail cancel" : "scanCode:fail"
				}, null]);
				if (!cancel) this.toStart();
			},
			toStart: function() {
				this.$refs.barcode && this.$refs.barcode.start({
					conserve: false,
					vibrate: this.vibrate,
					sound: this.sound,
				});
			},
			toCancel: function() {
				this.$refs.barcode.cancel();
			},
			toFlash: function(t) {
				this.flash = t == null ? !this.flash : t;
				this.$refs.barcode.setFlash(this.flash);
			},
			toScan: async function() {
				this.toCancel();
				const [e, res] = await uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album']
				});
				if (res && res.tempFilePaths.length > 0) {
					const barcodeModule = uni.requireNativePlugin('barcodeScan');
					barcodeModule.scan(res.tempFilePaths[0], e => {
						if (e.detail.type === "success") {
							this.success(e);
						} else {
							this.error(e);
						}
						this.toStart();
					});
				} else {
					this.toStart();
				}
			},
			back(t) {
				const p = {
					delta: 1
				}
				this.setFullOrStatus(false);
				this.toCancel();
				this.toFlash(false);
				if (t !== 0) uni.navigateBack(p);
			},
			setFullOrStatus(t) {
				if (this.isDark == null) this.isDark = this.getStatusBarStyle() !== 'light';
				this.isDark && plus.navigator.setStatusBarStyle(t ? "light" : "dark");
				this.fullScreen && plus.navigator.setFullscreen(t)
			},
			getStatusBarStyle() {
				let style = plus.navigator.getStatusBarStyle()
				if (style === 'UIStatusBarStyleBlackTranslucent' || style === 'UIStatusBarStyleBlackOpaque' || style ===
					'null') {
					style = 'light'
				} else if (style === 'UIStatusBarStyleDefault') {
					style = 'dark'
				}
				return style
			}
		}
	}
</script>
<style scoped>
	.page {
		top: 0;
		position: fixed;
		width: 750rpx;
		justify-content: center;
		align-items: center;
		background-color: #000000;
	}

	.back {
		position: fixed;
		left: 5px;
		top: 20px;
		border-radius: 50;
		padding: 15px;
	}

	.msg {
		position: fixed;
		top: 90px;
		width: 750rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 16px;
	}

	.css-hover {
		opacity: .4;
	}

	.barcode {
		width: 750rpx;
		height: 100%;
		background-color: #000000;
	}

	.flash {
		position: absolute;
		bottom: 500rpx;
		justify-content: center;
		align-items: center;
		padding: 8px;
	}

	.flash-text {
		margin-top: 3px;
		color: #bfbfbf;
		font-size: 12px;
	}

	.flash-on {
		color: #FFFFFF;
	}

	.album {
		position: fixed;
		bottom: 60px;
		right: 30px;
		height: 42px;
		width: 42px;
		padding: 16px;
		background-color: rgba(157, 157, 157, .3);
		border-radius: 50;
		justify-content: center;
		align-items: center;
	}
</style>