搜索优化

hdApp/src/components/module/app-search.vue

@@ -6,14 +6,15 @@
 			</div>
 			<div class="input-wrap">
 				<input
-					type="text" placeholder-style="color:#ccc"
+					type="text" 
+					:placeholder-style="`color:${placeholderColor}`"
 					ref="searchInput"
 					v-model="search"
 					:focus="focus"
 					@input="inputFn" @focus="inputEmptyFn"
 					:style="{ fontSize: fontSize + 'rpx' }"
 					:placeholder="placeholder"
-					placeholder-class="placeholder"
+					:placeholder-class="placeholderClass"
 					@confirm="searchFn"
 					confirm-type="search"
 				/>
@@ -93,6 +94,16 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		// placeholder样式类名
+		placeholderClass: {
+			type: String,
+			default: "placeholder"
+		},
+		// placeholder颜色
+		placeholderColor: {
+			type: String,
+			default: "red"
+		},
 	},
 	data() {
 		return {

hdApp/src/mixins/cgProduct.js

@@ -984,112 +984,162 @@ export default {
 				this.suitScrollPushList();
 			}
 		},
-		searchFn(limit=1) {
-			let list = this.globalItemList
-			if(this.$util.isEmpty(this.py)){
+		searchFn(limit = 1) {
+			const list = this.globalItemList;
+			
+			// 空搜索时重置
+			if (this.$util.isEmpty(this.py)) {
 				this.filterProductInfo = '';
 				this.classIndex = 0;
-				this.scroll_into_view = 'class_'+0;
+				this.scroll_into_view = 'class_' + 0;
 				this.scrollPushList();
+				return;
 			}
-			var reg = /^[0-9a-zA-Z]*$/g
-			let notChinese = reg.test(this.py) == true ? true : false
-			if(limit == 1){
-				//大于等于2个字符才开始搜索 shish 20210622
-				if(this.py.length <=1){
-					return
-				}
-				//红色粉色紫色绿色白色花材太多，搜索时会卡住，所以设置输入第三个字母时才搜索
-				if(this.py.toLocaleLowerCase().indexOf('fs') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.indexOf('粉色') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.toLocaleLowerCase().indexOf('hs') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.indexOf('红色') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.indexOf('黄色') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.toLocaleLowerCase().indexOf('zs') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.indexOf('紫色') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.toLocaleLowerCase().indexOf('ls') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.indexOf('绿色') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.toLocaleLowerCase().indexOf('bs') == 0 && this.py.length <= 2){
-					return
-				}
-				if(this.py.indexOf('白色') == 0 && this.py.length <= 2){
-					return
+
+			// 检查是否为非中文字符
+			const reg = /^[0-9a-zA-Z]*$/g;
+			const notChinese = reg.test(this.py);
+			
+			// 搜索长度限制检查
+			if (limit === 1) {
+				// 大于等于2个字符才开始搜索 shish 20210622
+				if (this.py.length <= 1) {
+					return;
 				}
-				if(this.py.toLocaleLowerCase().indexOf('cs') == 0 && this.py.length <= 2){
-					return
+				
+				// 颜色搜索优化：花材太多时需要更多字符才搜索
+				if (this._shouldSkipColorSearch(this.py)) {
+					return;
 				}
-				if(this.py.indexOf('橙色') == 0 && this.py.length <= 2){
-					return
+			}
+
+			// 预处理搜索关键词
+			const searchKey = notChinese ? this.py.toLocaleUpperCase() : this.py;
+			
+			// 优化已选择花材数据结构
+			const selectListMap = this._buildSelectListMap();
+			
+			// 优化搜索和过滤逻辑
+			const filterItemData = this._performSearch(list, searchKey, notChinese, selectListMap);
+			
+			// 设置搜索结果
+			this.filterProductInfo = this.$util.unique(filterItemData);
+			this.classIndex = 0;
+			this.scroll_into_view = 'class_' + 0;
+		},
+
+		/**
+		 * 检查是否应该跳过颜色搜索（颜色相关搜索需要更多字符）
+		 */
+		_shouldSkipColorSearch(searchText) {
+			const colorPatterns = [
+				{ py: 'fs', cn: '粉色' },
+				{ py: 'hs', cn: '红色' },
+				{ py: 'hs', cn: '黄色' },
+				{ py: 'zs', cn: '紫色' },
+				{ py: 'ls', cn: '绿色' },
+				{ py: 'bs', cn: '白色' },
+				{ py: 'cs', cn: '橙色' },
+				{ py: 'ys', cn: '银色' }
+			];
+			
+			const lowerSearchText = searchText.toLowerCase();
+			
+			return colorPatterns.some(pattern => {
+				// 检查拼音缩写
+				if (pattern.py && lowerSearchText.indexOf(pattern.py) === 0 && searchText.length <= 2) {
+					return true;
 				}
-				if(this.py.indexOf('银色') == 0 && this.py.length <= 2){
-					return
+				// 检查中文
+				if (searchText.indexOf(pattern.cn) === 0 && searchText.length <= 2) {
+					return true;
 				}
-			}
+				return false;
+			});
+		},
 
-			//将已选的花材按productId键名组合
-			let selectListData = []
-			if(!this.$util.isEmpty(this.selectList)){
-				this.selectList.forEach((i)=>{
-					selectListData[i.id] = i
-				})
+		/**
+		 * 构建已选择花材的Map结构，提高查找效率
+		 */
+		_buildSelectListMap() {
+			const selectListMap = new Map();
+			if (!this.$util.isEmpty(this.selectList)) {
+				this.selectList.forEach(item => {
+					selectListMap.set(item.id, item);
+				});
 			}
-			let filterItemData = [];
+			return selectListMap;
+		},
+
+		/**
+		 * 执行搜索和过滤
+		 */
+		_performSearch(list, searchKey, notChinese, selectListMap) {
+			const classMap = new Map(); // 使用Map优化分类查找
+			
 			list.forEach(currentItem => {
-				//组合已记忆已选择的花材
-				let currentPId = currentItem.id
-				let selectProduct = selectListData[currentPId] || []
-				if(!this.$util.isEmpty(selectProduct)){
-					currentItem.bigCount = selectProduct.bigCount || 0
-					currentItem.userPrice = selectProduct.userPrice || 0
-					currentItem.smallCount = selectProduct.smallCount || 0
-				}else{
-					currentItem.bigCount = 0
-					currentItem.userPrice = 0
-					currentItem.smallCount = 0
-				}
-				let has = false
-				if (notChinese){
-					let elePy = (currentItem.py && currentItem.py.toLocaleUpperCase()) || "";
-					has = elePy.indexOf(this.py.toLocaleUpperCase()) >= 0 ? true : false
-				}else{
-					has = currentItem.name && currentItem.name.indexOf(this.py) >= 0 ? true : false
-				}
-				if (has) {
-					if(this.$util.isEmpty(filterItemData)){
-						filterItemData = [{classId: currentItem.classId, className: currentItem.className,isActive:true,child:[currentItem]}]
-					}else{
-						filterItemData.forEach(res => {
-							if(res.classId==currentItem.classId){
-								res.child.push(currentItem)
-							}else{
-								filterItemData.push({classId: currentItem.classId, className: currentItem.className,isActive:true,child:[currentItem]})
-							}
-						})
-					}
+				// 合并已选择的花材信息
+				this._mergeSelectedItemData(currentItem, selectListMap);
+				
+				// 执行搜索匹配
+				const hasMatch = this._checkSearchMatch(currentItem, searchKey, notChinese);
+				
+				if (hasMatch) {
+					this._addToFilterResults(currentItem, classMap);
 				}
-			})
-			let searchList = this.$util.unique(filterItemData)
-			this.filterProductInfo = searchList;
-			this.classIndex = 0;
-			this.scroll_into_view = 'class_'+0;
+			});
+			
+			// 转换Map为数组
+			return Array.from(classMap.values());
+		},
+
+		/**
+		 * 合并已选择的花材数据
+		 */
+		_mergeSelectedItemData(currentItem, selectListMap) {
+			const selectProduct = selectListMap.get(currentItem.id);
+			
+			if (selectProduct) {
+				currentItem.bigCount = selectProduct.bigCount || 0;
+				currentItem.userPrice = selectProduct.userPrice || 0;
+				currentItem.smallCount = selectProduct.smallCount || 0;
+			} else {
+				currentItem.bigCount = 0;
+				currentItem.userPrice = 0;
+				currentItem.smallCount = 0;
+			}
+		},
+
+		/**
+		 * 检查搜索匹配
+		 */
+		_checkSearchMatch(currentItem, searchKey, notChinese) {
+			if (notChinese) {
+				const elePy = (currentItem.py && currentItem.py.toLocaleUpperCase()) || "";
+				return elePy.indexOf(searchKey) >= 0;
+			} else {
+				return currentItem.name && currentItem.name.indexOf(searchKey) >= 0;
+			}
+		},
+
+		/**
+		 * 添加到过滤结果
+		 */
+		_addToFilterResults(currentItem, classMap) {
+			const classId = currentItem.classId;
+			
+			if (classMap.has(classId)) {
+				// 分类已存在，添加到子项
+				classMap.get(classId).child.push(currentItem);
+			} else {
+				// 创建新分类
+				classMap.set(classId, {
+					classId: classId,
+					className: currentItem.className,
+					isActive: true,
+					child: [currentItem]
+				});
+			}
 		},
 		async initPxClassData() {
 			try {

hdApp/src/pagesPurchase/bookProduct.vue

@@ -22,7 +22,7 @@
 				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
 			</view>
 			<view class="search-bar">
-				<app-search-module v-model="py" placeholder="最少输二个字搜索" @input="goSearchFn" />
+				<app-search-module v-model="py" placeholder="最少输二到三字搜索" @input="goSearchFn" />
 			</view>
 			<view style="padding:0 0upx 0 20upx;" >
 				<button class="admin-button-com middle blue" @click="delMemory()">清除已选</button>

hdApp/src/pagesPurchase/ghsProduct.vue

@@ -23,7 +23,7 @@
 				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
 			</view>
 			<view class="search-bar">
-				<app-search-module v-model="py" placeholder="最少输二个字搜索" @input="goSearchFn" />
+				<app-search-module v-model="py" placeholder="最少输二到三字搜索" @input="goSearchFn" />
 			</view>
 			<view style="padding:0 0upx 0 20upx;" >
 				<button class="admin-button-com middle blue" v-if="ghsInfo.presell && ghsInfo.presell == 1" style="background-color:#09C567;border:1upx solid #09C567;" @click="aheadCg(ghsInfo)">预订花材</button>
@@ -1248,5 +1248,4 @@ export default {
 		}
 	}
 }
-
 </style>