Homestay_manage_app/packageShang/pages/home/search/search.vue

<template>
	<view class="use-page">

		<!-- 搜索内容区 -->
		<view class="search-area pos-r w-full padding-lr dflex-b">
			<view class="h-full flex1 dflex-c">
				<view class="icon-search pos-a">
					<text class="iconfont iconsousuo-01"></text>
				</view>
				<input type="text" class="pos-a padding-left padding-tb-xs border-radius-lg box-sizing-b" maxlength="20"
					placeholder="请输入关键字" @input="shuru" v-model="keyword" />
			</view>

			<view class="bg-base-sou border-radius-big padding-tb-xs padding-lr margin-left" @click="search">搜索</view>
		</view>
		<view class="gap"></view>

		<!-- 搜索历史区 -->
		<view class="padding-lr w-full padding-top-lg" v-if="historyDatas">
			<view class="dflex-b">
				<view class="dflex">
					<text>搜索历史</text>
				</view>
				<view class="iconfont iconfont iconlajitong-01 dflex-c ft-dark padding-sm" @click="clear"></view>
			</view>
			<view class="dflex dflex-wrap-w">
				<view
					class="item margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-xs padding-lr"
					v-for="(item,index) in historyDatas" :key="index" @click="search('history', item)">
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<!-- 热门搜索区 -->
		<view class="padding-lr w-full padding-top-lg" v-if="hotDatas">
			<view class="padding-bottom-sm dflex-b">
				<view class="dflex">
					<text>热门搜索</text>
				</view>
			</view>
			<view class="dflex dflex-wrap-w">
				<view
					class="item margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-xs padding-lr"
					v-for="(item, index) in hotDatas" :key="index" @click="search('hot', item)">
					<text>{{item.keyword}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchlist,
		searchhot,
		searchclear
	} from '../../../utils/api_goods.js'
	const _history = 'usemall-search-history'
	const _hot = 'usemall-search-hot'
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['islogin'])
		},
		data() {
			return {
				// 搜索关键字
				keyword: '',

				// 历史搜索
				historyDatas: [],
				// 热门搜索
				hotDatas: [],
			};
		},
		onShow() {
			// 初始化
			this.keyword = '';

			// 加载数据
			this.loadData();
		},
		methods: {
			loadData() {
				let _self=this
				//搜索历史列表
				let history = uni.getStorageSync('historyKeyword');
				console.log(history,'history')
				if (history) {
				  _self.historyDatas = history.split(',');
				}
				console.log(_self.historyDatas,'_self.historyDatas')
				// searchlist().then((res) => {
				// 	if(res.success){
				// 		_self.historyDatas = res.data.list
				// 	}else{
				// 		_self.$message.warning('没有符合条件的数据！')
				// 	}
				// })
				//热门搜索列表
				searchhot().then((res) => {
					if(res.success){
						_self.hotDatas = res.data.list
					}else{
						_self.$message.warning('没有符合条件的数据！')
					}
				})
			},
			//判断条数和去重
			removeRepeat: function (value) {
			  for (let i = 0; i < this.historyDatas.length; i++) {
				if (value === this.historyDatas[i]) {
				  this.historyDatas.splice(i, 1);
				}
			  }
			  if (this.historyDatas.length < 10) {
				this.historyDatas.unshift(value);
			  } else {
				this.historyDatas.pop();
				this.historyDatas.unshift(value);
			  }
			},


			shuru(event){
				this.keyword=event.detail.value
				console.log(this.keyword,'res')
			},
			// 搜索
			search(type, item) {
				switch (type) {
					case 'history':
						this.removeRepeat(item);
						uni.setStorageSync('historyKeyword', this.historyDatas.toString());
						this.$api.togoodslist({
							keyword: item,
							userId:userId,
							searchCnt:searchCnt,
							createBy:createBy,
							createTime:createTime,
						});
						break;
					case 'hot':
						this.keyword=item.keyword
						for( var i=0;i<this.historyDatas.length;i++){
							if(item.keyword=this.historyDatas[i].keyword){
								var id=this.historyDatas[i].id
								var userId=this.historyDatas[i].userId
								var searchCnt=parseInt(this.historyDatas[i].searchCnt)+1
								var createBy=this.historyDatas[i].createBy
								var createTime=this.historyDatas[i].createTime
							}
						}
						this.$api.togoodslist({
							keyword: item.keyword,
							userId:userId,
							searchCnt:searchCnt,
							createBy:createBy,
							createTime:createTime,
						});
						break;
					default:
						this.removeRepeat(this.keyword);
						uni.setStorageSync('historyKeyword', this.historyDatas.toString());
						this.$api.togoodslist({
							keyword: this.keyword,
							searchCnt:1,
						});
						break;
				}
			},
			// 清空搜索历史
			clear() {

				let _this = this;
				var ids=[]
				_this.historyDatas.forEach(data => {
					ids.push(data.id)
				})

				uni.showModal({
					title: '提示',
					content: '清空搜索历史',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('historyKeyword') //删除缓存
							_this.historyDatas=[]
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');
	.search-area {
		height: 120rpx;

		input {
			width: 560rpx;
			padding-left: 100rpx;
			height: 64rpx;
			line-height: 64rpx;
			background-color: #f5f5f5;
			padding-top: 10px;
		}

		.icon-search {
			top: 50%;
			left: 40rpx;
			transform: translate(0, -50%);
			z-index: 1;

			text {
				color: #c0c0c0;
			}
		}
	}
</style>