guosen-ldt-client/pages/consume/search/search.vue

<template>
	<view class="bg-white" style="min-height: 100vh;">
		<view class="cu-bar bg-white  ">
			<view class="search-form round">
				<text class="cuIcon-search" />
				<input tyle="font-size: 34rpx;" v-model="searchKey" :adjust-position="false" type="text"
					placeholder="请输入搜索内容" confirm-type="search" />
				<text class="cuIcon-roundclose" style="font-size: 34rpx;color: #6c6c6c;" v-if="searchClose"
					@click="clear" />
			</view>
			<view class="action" @click="bindsearch">
				<view class="cu-btn round sm" style="background-color: #f0b363;padding: 28rpx 36rpx;">
					搜 索
				</view>
			</view>
		</view>
		<view v-if="searchKey.length<=0||datalist==null">
			<view class="search">
				<view class="top">
					<text class="left">历史搜索</text>
					<view class="center" v-if="!$isEmpty(oldKeywordList)">
						<text @click="delOldKeywordList" class="cuIcon-delete text-gray"
							style="font-size: 34rpx;"></text>
					</view>
				</view>
				<view class="list">
					<view class="cu-tag "
						@click="searchKey=item"
						style="background-color: #f3f3f4;color: #6c6c6c;padding: 16rpx 26rpx;border-radius: 4rpx;margin-bottom: 16rpx;"
						v-for="(item,index) in oldKeywordList" :key="index">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="" v-else>
			<search-list  :list="datalist"></search-list>
		</view>
	</view>
</template>

<script>
	import searchList from "./comps/search-list.vue"
	export default {
		components:{
			searchList
		},
		data() {
			return {
				searchKey: '',
				oldKeywordList: [],
				datalist: null
			}
		},
		onLoad() {
			this.loadOldKeyword();
		},
		computed: {
			searchClose: {
				get() {
					if (this.$isEmpty(this.searchKey)) {
						return false
					} else {
						return true
					}
				}
			}
		},
		methods: {
			clear(){
				this.searchKey= ''
				this.datalist=null
			},
			delOldKeywordList() {
				this.oldKeywordList = [];
				uni.removeStorage({
					key: 'OldKeys'
				});
			},
			bindsearch() {
				if (this.$isEmpty(this.searchKey)) {
					return
				}
				//搜索todo
				this.fetchList()
				this.saveKeyword()
			},
			//加载历史搜索,自动读取本地Storage
			loadOldKeyword() {
				uni.getStorage({
					key: 'OldKeys',
					success: res => {
						var OldKeys = JSON.parse(res.data);
						this.oldKeywordList = OldKeys;
					}
				});
			},
			//保存关键字到历史记录
			saveKeyword() {
				let keyword = this.searchKey
				uni.getStorage({
					key: 'OldKeys',
					success: res => {
						//获取历史搜索词
						var OldKeys = JSON.parse(res.data);
						var findIndex = OldKeys.indexOf(keyword);
						if (findIndex == -1) {
							//如果历史搜索词里没有该输入的搜索词，就添加进数组头
							OldKeys.unshift(keyword);
						} else {
							//如果有，就删除该搜索词并插进数组头
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(keyword);
						}
						//最多10个纪录，如果超过十条记录，就弹出最后一个元素
						OldKeys.length > 10 && OldKeys.pop();
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					},
					fail: e => {
						var OldKeys = [keyword];
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					}
				});
			},
			fetchList(){
				let params={
					name:this.searchKey
				}
				this.$api.shop.list(params).then(res=>{
					this.datalist=res.data.records
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.search {
		padding: 20rpx;
		margin: 0rpx 20rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				font-size: 28rpx;
				font-weight: 800;
			}
		}

		.list {
			padding-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
		}
	}
</style>