114

components/SearchBox_back.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="search_wraper">
+		<input 
+		type="text" 
+		class="filter_input pdr120" 
+		confirm-type="go"
+		:value="value"
+		:focus="focusState"
+		@focus="handleFocus"
+		@blur="handleBlur"
+		@input="handleInput"
+		@confirm="handleConfirm">
+		<view class="zd-row buttons_wraper">
+			<uni-icons v-show="value !== '' && value !== null && value !== undefined" class="pdr10" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
+			<uni-icons type="scan" size="22" :color="focusState ? '#ff6a00' : '#4e6ef2'" @tap="focusState=true"></uni-icons>
+		</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				focusState: false,
+				inputTimestamps: [],   // 记录每次输入的时间戳
+				autoTimer: null,       // 自动提交定时器
+				lastEmittedValue: ''   // 上一次触发 handleChange 的值，用于去重
+			};
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		props: {
+			value: String
+		},
+		methods: {
+			handleFocus () {
+				this.focusState = true;
+			},
+			handleBlur (e) {
+				this.$emit('input', e.target.value);
+				this.focusState = false;
+			},
+			handleInput(e) {
+				const newValue = e.detail.value;
+				// 更新 v-model
+				this.$emit('input', newValue);
+				
+				// 记录当前输入时间戳
+				const now = Date.now();
+				this.inputTimestamps.push(now);
+				// 只保留最近10次记录，避免数组过长
+				if (this.inputTimestamps.length > 10) this.inputTimestamps.shift();
+				
+				// 清除之前的自动提交定时器
+				if (this.autoTimer) clearTimeout(this.autoTimer);
+				
+				// 启动新定时器，等待输入稳定后判断
+				this.autoTimer = setTimeout(() => {
+					this.checkAutoSubmit(newValue);
+				}, 150);
+			},
+			checkAutoSubmit(currentValue) {
+				if (!currentValue) return;
+				if (currentValue === this.lastEmittedValue) return;
+				
+				const timestamps = this.inputTimestamps;
+				if (timestamps.length < 2) {
+					// 只有一次输入，认为是手动输入，不自动提交
+					return;
+				}
+				// 计算最近两次输入的最大间隔
+				let maxInterval = 0;
+				for (let i = 1; i < timestamps.length; i++) {
+					const interval = timestamps[i] - timestamps[i-1];
+					if (interval > maxInterval) maxInterval = interval;
+				}
+				// 如果最大间隔小于80ms，认为是扫码快速输入，自动提交
+				if (maxInterval < 80) {
+					this.emitChange(currentValue);
+				}
+				// 否则认为手动输入，不自动提交，等待回车
+			},
+			handleConfirm(e) {
+				const newValue = e.detail.value;
+				// 清除自动提交定时器，防止重复
+				if (this.autoTimer) clearTimeout(this.autoTimer);
+				this.$emit('input', newValue);
+				this.emitChange(newValue);
+			},
+			emitChange(val) {
+				if (!val) return;
+				if (val === this.lastEmittedValue) return;
+				this.lastEmittedValue = val;
+				this.$emit('handleChange', val);
+				// 提交后清空时间戳记录，避免影响下一次输入
+				this.inputTimestamps = [];
+			},
+			toDel() {
+				// 清空时清除定时器，重置状态
+				if (this.autoTimer) clearTimeout(this.autoTimer);
+				this.$emit('input', '');
+				this.lastEmittedValue = '';
+				this.inputTimestamps = [];
+			}
+		}
+	}
+</script>
+
+<style lang="stylus">
+@import '../common/style/mixin.styl';
+.search_wraper
+	position relative
+	_wh(100%, 80rpx)
+.pdr120
+	padding-right: 120rpx;
+.buttons_wraper
+	position absolute
+	top 0
+	right 10rpx
+	_wh(auto, 80rpx)
+.pdr10
+	padding-right 10rpx
+</style>