sfms3.0-uniapp/mycomponents/scan/winComScan.vue

<!--扫描组件-->
<template>
	<!-- <page-meta root-font-size="18px"></page-meta> -->
	<view>
		<view class="pop_tab">
			<view class="tab_info">
				<view class="conbox">
					<textarea v-model="scanMsg" trim="all" maxlength="1000" style="margin-left: 5px;width: 90%;"
						:focus="boxfocus" :placeholder="placeholderValue" @focus="getfocus" @blur="losefocus"
						@input="handelScanMsg" :cursor="cursorIndex"></textarea>
				</view>

				<view class="uni-flex uni-row space-between u-col-center">
					<!-- <view class="paizhao" @click="scanQRCode()" v-if="true">
						<image src="/static/icons/icons_camera.svg" alt="" />
					</view> -->

					<view class="uni-flex">
						<button class="clean_scan_btn" @click="clearScanValue()">清空</button>
						<button class="scan_btn" @click="clickScanMsg()">扫描</button>
					</view>
				</view>
			</view>

			<view style="width: 100%;">
				<view style="width: 100%;" v-if="scanList.length>0&&isShowHistory">
					<view class="uni-flex uni-row space-between u-col-center">
						<view class="" style="padding: 10rpx;">
							历史记录
						</view>
						<view class="" style="padding-right: 10rpx;">
							<u-icon :name="expendIcon" size="35rpx" @click="expands()"></u-icon>
						</view>
					</view>
					<u-line class='line_color' style='padding-top: 10rpx;padding-bottom: 20rpx;'></u-line>
					<scroll-view scroll-y="true" class="scroll-view" v-if="expand&&scanList.length>0"
						style="height: 70px;">
						<view class="uni-flex u-col" v-for="(item,index) in scanList">
							<view style="width: 100%;max-height: 100px;">
								<view class="uni-flex u-row space-between u-col-center" @click="showItem(item)">
									<view class="text_ellipsis" style="padding: 15rpx;">
										{{item}}
									</view>
									<view class="">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
								<u-line class='line_color'></u-line>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<com-message ref="comMessage"></com-message>
	</view>
</template>
<script module="input" lang="renderjs">
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import {
		getLabelInfo
	} from '@/common/label.js';

	export default {
		name: "winComScan",
		emits: ["getResult"],
		components: {
			comMessage
		},
		props: {
			placeholder: {
				type: String,
				default: '请扫描标签'
			},
			clearResult: {
				type: Boolean,
				default: true
			},
			boxFocus: {
				type: Boolean,
				default: true
			},
			isShowHistory: {
				type: Boolean,
				default: true
			},
			headerType: {
				type: String,
				default: 'HPQ' //HLB   HMQ   HCQ HPQ
			}
		},
		data() {
			return {
				// scanMsg: "HPQ;V1.0;ICE115F11161AG;PP20230427000027;B20230427002;Q100",
				scanMsg: "",
				boxfocus: true,
				placeholderValue: '',
				scanResult: {},
				scanList: [],
				expand: true,
				expendIcon: 'arrow-down',
				cursorIndex: 0
			}
		},
		mounted() {
			if (document.querySelector('textarea') != null) {
				document.querySelector('textarea').setAttribute('inputmode', 'none')
			}
			// if (this.$el.querySelector('textarea') != null) {
			// 	this.$el.querySelector('textarea').setAttribute('inputmode', 'none')
			// }
		},
		watch: {
			placeholder() {
				this.placeholderValue = '请扫描' + this.placeholder;
			}
		},
		created() {
			this.placeholderValue = '请扫描' + this.placeholder;
		},
		methods: {
			getValue() {
				return this.scanMsg
			},
			setValue(val) {
				this.scanMsg = val
			},
			clearScanValue() {
				this.scanMsg = ''
				this.getfocus();
			},
			clickScanMsg() {
				this.scanMsg = this.scanMsg + "\n";
				this.handelScanMsg();
			},
			handelScanMsg() {
				//点击了回车
				uni.showLoading({
					title: '解析中...',
					mask: true
				})
				let that = this;
				let index = that.scanMsg.indexOf('\n');
				if (index > 0) {
					// that.scanMsg = 'HPQ;V1.0;ICE115F11161AG;PP20230427000027;B20230427002;Q50';
					setTimeout(() => {
						that.losefocus();
						let content = uni.$u.trim(that.scanMsg)
						if (content == "") {
							that.getfocus();
							return;
						}

						if (that.isShowHistory) {
							that.scanList.unshift(content);
						}

						getLabelInfo(content, this.headerType, callback => {
							uni.hideLoading();
							let scanResult = callback;
							if (scanResult.success) {
								that.clear();
								// that.getfocus();//不能自动获取焦点
								that.$emit("getResult", scanResult);
							} else {
								that.clear();
								this.$refs.comMessage.showErrorMessage(scanResult.message, res => {
									if (res) {
										that.getfocus();
									}
								})
							}
						});
					}, 500);
				}
			},
			getfocus() {
				let that = this;
				that.boxfocus = true;
				this.$nextTick(r => {
					that.boxfocus = true;
				});
			},
			losefocus() {
				let that = this;
				that.boxfocus = false;
				this.$nextTick(r => {
					that.boxfocus = false;
				});
			},
			clear() {
				this.cursorIndex = 0;
				this.scanMsg = ''
			},
			iconClick(type) {
				this.$emit("clearResult", this.scanMsgk);
			},
			expands() {
				this.expand = !this.expand;
				this.expendIcon = this.expand == true ? "arrow-down" : "arrow-up"
			},
			scanClick() {
				this.handelScanMsg();
			},
			cancelClick() {
				this.clear();
				this.getfocus();
			},
			showItem(item) {
				this.$refs.comMessage.showMessage(item, res => {
					if (res) {
						// this.$refs.modal.cancelClose();
					}
				})
			},

			scanQRCode() {
				let that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						that.scanMsg = res.result;
						that.$emit("getResult", res.result);
						console.log('扫描二维码成功,结果:' + res.result);
					},
					fail: (res) => {
						that.showItem('扫描出现错误:' + res.result);
						console.log('扫描出现错误:' + res.result);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">

</style>