uniapp-ZHSQ/packages/shop/search/index.vue

<template>
	<view class="merchantList">
		<div class="searchBox">
			<div class="searchBox_left">
				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
				<u--input @focus="iptFocus" @blur="iptBlur" placeholder="搜索商品" border="surround" clearable></u--input>
				
				<!-- 测试用 -->
				<!-- <input type="text" v-model="searchQuery" placeholder="请输入搜索内容" @input="onSearch" @focus="showHistory = true" class="search-input" />
				<view v-if="results.length" class="search-results">
					<view class="result-item">
						{{item}}
					</view>
				</view> -->
				<!-- 测试用 -->
				
				
				
			</div>
			<div class="searchBox_right">
				<div class="cars">
					<u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png" mode="widthFix"></image>
				</div>
			</div>
		</div>
		<!-- 搜索联系 -->
		<div class="searchMore" v-if="isSearch">
			<div class="searchMoreItem">猪肉肠</div>
			<div class="searchMoreItem">猪肉肠</div>
			<div class="searchMoreItem">猪肉肠</div>
		</div>

		<!-- 搜索历史 -->
		<div class="his" v-if="isSearch">
			<div class="hisTit">搜索历史</div>
			<div class="HisList">
				<div class="HisItem">羊肉</div>
				<div class="HisItem">火锅底料</div>
				<div class="HisItem">蒜蓉辣酱</div>
				<div class="HisItem">蒜蓉辣酱</div>
				<div class="HisItem">蒜蓉辣酱</div>
				<div class="HisItem">蒜蓉辣酱</div>
			</div>
		</div>
		
		<!-- 测试用 -->
		<!-- <view v-if="showHistory && searchHistory.length > 0" class="history-list">
		  <view
			v-for="(item, index) in searchHistory"
			:key="index"
			class="history-item"
			@click="selectHistory(item)"
		  >
			{{ item }}
		  </view>
		</view> -->
		<!-- 测试用 -->
		
		
		<!-- 未搜索到 -->
		<div class="empty" v-if="false">
			<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
			对不起没有找到您想要的商品
		</div>

		<div class="searchList">
			<div class="searchSubTit">
				<div class="searchSubItem">综合</div>
				<div class="searchSubItem">
					价格
					<div class="iconBox">
					</div>
				</div>
			</div>

			<div class="searchItem">
				<div class="searchItem_left">
					<view class="tag tag-img">当日达</view>
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
				</div>
				<div class="searchItem_right">
					<div class="searchItem_right_tit"><div class="tag-name" v-if="">当日达</div><div>泰国金枕榴莲</div></div>
					<div class="searchItem_right_subTit">商品介绍商品介绍</div>
					<div class="searchItem_right_Money">
						<div class="Money_left">
							<div class="money_unit">￥</div>
							125.9
							<div class="Money_dw">/个</div>
						</div>
						<div class="Money_right">
							<u-number-box v-model="value">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="22" bold></u-icon>
								</view>
								<text slot="input" style="width: 80rpx;text-align: center;" class="input">{{ value
								}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="22" bold></u-icon>
								</view>
							</u-number-box>
						</div>
					</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
import {
	apiArr
} from '../../../api/doorToDoor';
import {
	picUrl,
	menuButtonInfo,
	request,
	NavgateTo
} from '../../../utils';
export default {
	data() {
		return {
			flag: false,
			value: 3,
			isSearch: false,
			
			
			// 测试用
			// searchQuery: '',
			// results: [],	// 搜索结果
			// showHistory: false,		// 是否显示历史记录
			// searchHistory: []	// 保存搜索历史
			// 测试用
		}
	},
	methods: {
		search() {
			
		},
		ipt1(e) {
			console.log(e);
		},
		iptFocus() {
			this.isSearch = true
		},
		iptBlur() {
			this.isSearch = false
		},
		
		
		// 测试用
		// 处理搜索
		// onSearch() {
		//   // 在这里根据searchQuery进行搜索，假设我们用一个假数据做演示
		//   const fakeData = ['苹果', '香蕉', '橙子', '葡萄', '草莓'];
		//   this.results = fakeData.filter(item => item.includes(this.searchQuery));
		//   if(this.searchQuery) {
		// 	  this.showHistory = true;
		//   } else {
		// 	  this.showHistory = false
		//   }
		// },
		
		// // 点击历史记录进行搜索
		// selectHistory(item) {
		// 	this.searchQuery = item;
		// 	this.onSearch();
		// 	this.showHistory = false;
		// },
		
		// // 保存搜索历史
		// saveSearchHistory() {
		// 	if(this.searchQuery && !this.searchHistory.includes(this.searchQuery)) {
		// 		this.searchHistory.unshift(this.searchQuery);	// 将新的搜索内容加到历史记录
		// 		if(this.searchHistory.length > 5) {
		// 			this.searchHistory.pop();	// 限制最多保存几条搜索历史
		// 		}
		// 	}
		// }
		
		// 测试用
		
		
	},
	
	// 测试用
	// watch: {
	// 	// 监听搜索框内容变化，保存历史
	// 	searchQuery(newQuery) {
	// 		if(newQuery !== '') {
	// 			this.saveSearchHistory();
	// 		}
	// 	}
	// },
	
	// 测试用
	
	onLoad(options) {

	},
	onReachBottom() {
		if (this.flag) {

		}
	},
}
</script>

<style>
@import url("./index.css");
</style>