From 020f332163bc331aa5d376da4b4657e7cc5f1cf5 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Mon, 13 May 2024 14:13:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E6=9C=A8=E7=AE=B1=E5=85=A5=E5=BA=93?=
 =?UTF-8?q?=E8=BF=9E=E7=BB=AD=E6=89=AB=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/style/reset.css                |   3 +
 components/LinkScan.vue               | 127 ++++++++++++++++++++++++++
 pages/SecondPhase/EmptyBoxInStore.vue |  10 +-
 3 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 components/LinkScan.vue

diff --git a/common/style/reset.css b/common/style/reset.css
index 9a0f5c0..bb27253 100644
--- a/common/style/reset.css
+++ b/common/style/reset.css
@@ -133,4 +133,7 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
 }
 .mgb10 {
 	margin-bottom: 10rpx;
+}
+.mgr10 {
+	margin-right: 10rpx;
 }
\ No newline at end of file
diff --git a/components/LinkScan.vue b/components/LinkScan.vue
new file mode 100644
index 0000000..ffa39a8
--- /dev/null
+++ b/components/LinkScan.vue
@@ -0,0 +1,127 @@
+<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" class="scaned_font">{{scanList.join()+','}}</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="mgr10" type="clear" size="22" 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="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" @tap="toDelItem(i)"></uni-icons>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				focusState: false,
+				scanList: [],
+				value: '',
+				show: false
+			};
+		},
+		methods: {
+			handleFocus () {
+				this.focusState = true
+				this.show = true
+			},
+			handleBlur () {
+				this.focusState = false
+				if (this.value) {
+					this.scanList.push(this.value)
+					this.value = ''
+					this.$emit('getScanlist', this.scanList)
+				}
+				this.show = false
+			},
+			toDel () {
+				this.value = ''
+				this.scanList = []
+				// setTimeout(()=> {
+				// 	this.focusState = true
+				// }, 100)
+			},
+			toDelItem (i) {
+				this.scanList.splice(i, 1)
+				this.$emit('getScanlist', this.scanList)
+				setTimeout(()=> {
+					this.focusState = true
+				}, 100)
+			},
+			handleSend (e) {
+				if (this.value) {
+					this.scanList.push(this.value)
+					this.value = ''
+				}
+				setTimeout(()=> {
+					this.focusState = true
+				}, 100)
+				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>
diff --git a/pages/SecondPhase/EmptyBoxInStore.vue b/pages/SecondPhase/EmptyBoxInStore.vue
index a5cee8e..9b6429a 100644
--- a/pages/SecondPhase/EmptyBoxInStore.vue
+++ b/pages/SecondPhase/EmptyBoxInStore.vue
@@ -16,7 +16,7 @@
 						<span class="filter_label">木箱号</span>
 					</view>
 					<view class="filter_input_wraper">
-						<search-box v-model="val2" />
+						<link-scan ref="scanChild" @getScanlist="getScanlist"/>
 					</view>
 				</view>
 				<view class="filter_item">
@@ -45,11 +45,13 @@
 <script>
 	import NavBar from '@/components/NavBar.vue'
 	import SearchBox from '@/components/SearchBox.vue'
+	import LinkScan from '@/components/LinkScan.vue'
 	import {twoPdaBoxIn} from '@/utils/getData3.js'
 	export default {
 		components: {
 			NavBar,
-			SearchBox
+			SearchBox,
+			LinkScan
 		},
 		data() {
 			return {
@@ -62,6 +64,9 @@
 			};
 		},
 		methods: {
+			getScanlist (e) {
+				this.val2 = e.join()
+			},
 			selectChange (e) {
 				this.index = e
 			},
@@ -87,6 +92,7 @@
 				this.val2 = ''
 				this.val3 = ''
 				this.index = ''
+				this.$refs.scanChild.toDel()
 			}
 		}
 	}