You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

281 lines
7.6 KiB

<!--扫描组件-->
<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>
<comMessage ref="comMessage"></comMessage>
</view>
</template>
<script module="input" lang="renderjs" setup>
import {
getLabelInfo
} from '../../common/label.js';
import {
ref,
reactive,
nextTick,
defineProps
} from "vue";
import { defineComponent } from 'vue';
const scanMsg = ref("")
const boxfocus= ref(true)
const placeholderValue=ref("")
const scanResult= reactive({})
const scanList=ref([])
const expand=ref(true)
const expendIcon = ref('arrow-down')
const cursorIndex= ref(0)
const props = defineProps({
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
}
})
// export default {
// name: "winComScan",
// emits: ["getResult"],
// components: {
// },
// 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();
// // this.$refs.comMessage.showErrorMessage("扫描内容为空,请重新扫描", res => {
// // if (res) {
// // that.scanMsg=""
// // 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>