扫码限制

components/LinkScan2.vue

@@ -0,0 +1,182 @@
+<template>
+	<view class="scan_wraper">
+		<view class="zd-row">
+			<view class="zd-col-24 zd-row jcflexstart" @tap="focusState=true">
+				<view v-show="(scanList.length && scanList.length <= 3)" class="scaned_font">{{scanjointxt}}</view>
+				<input
+				type="text" 
+				class="search_input"
+				confirm-type="go"
+				v-model="value"
+				:focus="focusState"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				@confirm="handleSend">
+			</view>
+			<uni-icons v-show="scanList.length" class="mgr20" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
+			<uni-icons type="scan" size="22" :color="focusState ? '#D7592F' : '#666'" @tap="focusState=true"></uni-icons>
+		</view>
+		<view v-show="scanList.length > 0 && show" class="scan_list_select">
+		<!-- <view class="scan_list_select"> -->
+			<view class="pop_arrow"></view>
+			<view class="zd-row" v-for="(e, i) in scanList" :key="i">
+				<view class="scan_list_item">{{e}}</view>
+				<uni-icons type="clear" size="20" color="#666" class="saveBtn" @tap="toDelItem(i)"></uni-icons>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				focusState: false,
+				scanList: [],
+				value: '',
+				scanjointxt: '',
+				maxlength: Number,
+				show: false
+			};
+		},
+		methods: {
+			handleFocus () {
+				this.focusState = true
+				this.show = true
+			},
+			toBlur () {
+				this.focusState = false
+				if (this.scanList.length < 3) {
+					if (this.value) {
+						this.scanList.push(this.value)
+						this.scanjointxt = this.scanList.join() + ','
+						this.value = ''
+						this.$emit('getScanlist', this.scanList)
+					}
+					// this.show = false
+				} else {
+					this.value = ''
+					this.scanList.slice(0,3)
+					this.scanjointxt = this.scanList.join() + ','
+					this.$emit('getScanlist', this.scanList)
+					// this.show = false
+				}
+			},
+			handleBlur () {
+				console.log(0)
+				if (document.activeElement === document.getElementsByClassName('saveBtn')) {
+					console.log(111);
+					this.show = true
+                    return;
+				} else {
+					console.log(222)
+					this.toBlur()
+					this.show = false
+				}
+				// this.toBlur()
+				// setTimeout(() => {
+				// 	if (document.activeElement !== saveBtn) {
+				// 		// 执行验证
+				// 		this.toBlur()
+				// 		this.show = false
+				// 	}
+				// }, 0);
+				// this.focusState = false
+				// if (this.scanList.length < 3) {
+				// 	if (this.value) {
+				// 		this.scanList.push(this.value)
+				// 		this.scanjointxt = this.scanList.join() + ','
+				// 		this.value = ''
+				// 		this.$emit('getScanlist', this.scanList)
+				// 	}
+				// 	this.show = false
+				// } else {
+				// 	this.value = ''
+				// 	this.scanList.slice(0,3)
+				// 	this.scanjointxt = this.scanList.join() + ','
+				// 	this.$emit('getScanlist', this.scanList)
+				// 	this.show = false
+				// }
+			},
+			toDel () {
+				this.value = ''
+				this.scanList = []
+				// setTimeout(()=> {
+				// 	this.focusState = true
+				// }, 100)
+			},
+			toDelItem (i) {
+				// debugger
+				// this.scanList.splice(i, 1)
+				this.scanList = this.scanList.filter((_, index) => index !== i);
+				this.scanjointxt = this.scanList.join() + ','
+				this.$emit('getScanlist', this.scanList)
+				setTimeout(()=> {
+					this.focusState = true
+					// this.show = false
+				}, 100)
+			},
+			handleSend (e) {
+				if (this.value) {
+					this.scanList.push(this.value)
+					this.value = ''
+				}
+				setTimeout(()=> {
+					this.focusState = true
+				}, 100)
+				if (this.scanList.length > 2) {
+					this.scanList.splice(0,3)
+				}
+				this.$emit('getScanlist', this.scanList)
+			}
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+@import '../common/style/mixin.styl';
+.scan_wraper
+	position relative
+	_wh(100%, 80rpx)
+	border: 1px solid #dcdfe6;
+	background-color: #fff;
+	border-radius: 10rpx;
+	padding: 0 10rpx
+.search_input
+	width 50%
+	height 80rpx;
+	_font(28rpx, 80rpx, #606266,,)
+	border: 0;
+	background-color: transparent;
+.scaned_font
+	max-width 50%
+	_font(26rpx, 60rpx, #606266,,)
+	white-space nowrap
+	text-overflow ellipsis
+	overflow hidden
+	margin-right 6rpx
+.scan_list_select
+	position absolute
+	top calc(100% + 12px)
+	left 0
+	z-index 3
+	width 100%
+	background-color: #FFFFFF;
+	border: 1px solid #EBEEF5;
+	border-radius: 6px;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+	padding: 8rpx 10rpx
+.pop_arrow
+	position absolute
+	top: -12px
+	left: 10%
+	border: 6px solid #EBEEF5;
+	width: 0;
+	height: 0;
+	border-top-color: transparent;
+	border-left-color: transparent;
+	border-right-color: transparent;
+.scan_list_select
+	_font(26rpx, 80rpx, #606266,,)
+</style>

pages/SecondPhase/kmxk/EmptyBoxIntoStore.vue

@@ -17,7 +17,7 @@
 						<span class="filter_label">{{$t('filter.box-code')}}</span>
 					</view>
 					<view class="filter_input_wraper">
-						<link-scan ref="scanChild" @getScanlist="getScanlist"/>
+						<link-scan ref="scanChild" :maxlength="3" @getScanlist="getScanlist"/>
 					</view>
 				</view>
 			</view>
@@ -32,7 +32,7 @@
 <script>
 	import NavBar from '@/components/NavBar.vue'
 	import SearchBox from '@/components/SearchBox.vue'
-	import LinkScan from '@/components/LinkScan.vue'
+	import LinkScan from '@/components/LinkScan2.vue'
 	import { confirmAction } from '@/utils/utils.js'
 	import {boxIn} from '@/utils/getData4.js'
 	export default {

pages/SecondPhase/kmxk/PointSave.vue

@@ -38,7 +38,7 @@
 <script>
 	import NavBar from '@/components/NavBar.vue'
 	import SearchBox from '@/components/SearchBox.vue'
-	import LinkScan from '@/components/LinkScan.vue'
+	import LinkScan from '@/components/LinkScan2.vue'
 	import { confirmAction } from '@/utils/utils.js'
 	import {getBoxSpecInfo} from '@/utils/getData4.js'
 	import {updatePoint} from '@/utils/getData4.js'