null/pages/mang/search.vue

<template>
	<view class="page">
		<view class="p-bar flex-row">
		  <view class="align-center justify-between bar">
			<view class="align-center">
			  <image
				src="/static/mang-sear.png"
				class="image_5"
			  />
			  <input type="text" placeholder="请输入商品名称" class="inpt" v-model="keyword" @confirm="search">
			</view>
			<image
			  src="/static/mang-quxiao.png"
			  class="image_6"
			  v-if="hasKeyword"
			  @tap='clearKW'
			/>
		  </view>
		  <text class="text_3" @tap="search">搜索</text>
		</view>
		<view class="p-history" v-if="!hasKeyword && search_lishi.length>0">
			<view class="title">
				历史搜索
			</view>
			<view class="item-wrap align-center">
				<view class="item" v-for="(item,i) in search_lishi" :key="i" @tap="tapKeyword(item)">
					{{item}}
				</view>	
			</view>
		</view>
		
		<singleList ref="listRef" url="goods.list" :sendData="reqData" @reqEnd="searchEnd" v-else>
			<template v-slot:items="{list}">
				<view class="p-content">
					<proItem :info="item" v-for="(item,i) in list" :key="i" />
					<empty v-if="sRes && sRes==='empty'"/>
				</view>
			</template>
		</singleList>
	</view>
</template>

<script>
	import proItem from './components/pro-item.vue'
	export default {
		components: {
			proItem,
		},
		data() {
			return {
				keyword:'',
				search_lishi:[],
				reqData:{},
				sRes:'',
			};
		},
		computed:{
			hasKeyword(){
				if(this.keyword){
					return true;
				}
				return false;
			}
		},
		onShow(){  //这里一进来就查询之前留下的搜索内容  别忘了退出登录的时候删掉
			// console.log(uni.getStorageSync('history'))
			this.search_lishi = uni.getStorageSync('history') || [] //存放历史记录的数组
		},
		onReachBottom() {
			this.$refs.listRef.getList();
		},
		methods:{
			search(){
				if(this.hasKeyword){
					this.add_history(this.keyword)
				}
				this.$nextTick(()=>{
					this.reqData = {keyword:this.keyword}
				})
			},
			tapKeyword(item){
				this.keyword = item;
				this.search();
			},
			clearKW(){
				this.keyword = '';
			},
			//添加新的历史记录 当有搜索新的历史记录时就会进入这个方法
			add_history(e){  
				//存在，flag1==0
				try{
					let flag1= this.search_lishi.findIndex(item => item=== e) //判断数组里面有没有重复查询过的内容
					if(flag1 != -1){  //有重复内容
						// if(flag1 != 0){ //如果删除0会出错
							this.search_lishi.splice(flag1,1) //删除重复重新添加一个
							this.search_lishi.unshift(e)  //添加一个内容
						// }
					}else{
			            if(this.search_lishi.length >= 16){
							this.search_lishi.splice(15,1)  //删除最后一个新添加一个
							this.search_lishi.unshift(e)  //添加一个内容
						}else{
							this.search_lishi.unshift(e)  //添加一个内容
						}
					}
					uni.setStorageSync('history', this.search_lishi);//保存用户搜索历史
					this.search_lishi = uni.getStorageSync('history') //存放历史记录的数组
				}catch(e){
					this.search_lishi.push(e)  //添加一个内容
					//TODO handle the exception
				}
			},
		    searchEnd({loadingType,pageOneRes}){
		    	if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
		    		this.sRes='empty';
		    	}else{
		    		this.sRes=loadingType;
		    	}
		    },
		},
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.page{
	padding: 30rpx;
}
.p-bar{
	.bar {
	  flex: 1 1 auto;
	  border-radius: 32rpx;
	  height: 64rpx;
	  border: solid 2rpx #92b99c;
	  padding: 0 20rpx;
	}
	.image_5 {
	  flex-shrink: 0;
	  width: 31rpx;
	  height: 31rpx;
	}
	.inpt {
	  margin-left: 17rpx;
	  height: 60rpx;
	  line-height: 60rpx;
	  color: #333;
	  font-size: 28rpx;
	  font-family: PingFang;
	  letter-spacing: 1.12rpx;
	}
	.image_6 {
	  margin-bottom: 3rpx;
	  width: 28rpx;
	  height: 28rpx;
	}
	.text_3 {
	  margin-left: 28rpx;
	  margin-right: 4rpx;
	  align-self: center;
	  color: #92b99c;
	  font-size: 28rpx;
	  font-family: PingFang;
	  line-height: 27rpx;
	  letter-spacing: 1.12rpx;
	}
}
.p-history{
	padding-top: 10rpx;
	.title{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.item-wrap{
		flex-wrap: wrap;
	}
	.item{
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 20rpx;
		background: #ECEFED;
		border-radius: 27px;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
}
.p-content{
	padding-top: 40rpx;
	.item-wrap{
		  padding: 24rpx 14rpx 24rpx 24rpx;
		  background-color: #ffffff;
		  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
		  border-radius: 20rpx;
		  margin-bottom: 24rpx;
		.image_7 {
		  width: 200rpx;
		  height: 200rpx;
		}
		.group_8 {
		  margin-left: 18rpx;
		  margin-bottom: 3rpx;
		}
		.text_4 {
		  color: #333333;
		  font-size: 30rpx;
		  font-family: PingFang;
		  max-width: 400rpx;
		}
		.image_8 {
		  margin-top: 14rpx;
		  width: 28rpx;
		  height: 28rpx;
		  margin-right: 4rpx;
		}
		.text_5 {
		  margin-left: 3rpx;
		  margin-top: 18rpx;
		  color: #999999;
		  font-size: 24rpx;
		  font-family: PingFang;
		}
		.group_10 {
		  margin-top: 57rpx;
		  padding: 0 3rpx;
		}
		.group_11 {
		  line-height: 28rpx;
		  height: 29rpx;
		}
		.text_6 {
		  color: #ff3e3e;
		  font-size: 24rpx;
		  font-family: PingFang;
		}
		.text_7 {
		  color: #ff3e3e;
		  font-size: 36rpx;
		  font-family: PingFang;
		}
		.text_8 {
		  margin-left: 10rpx;
		  margin-top: 9rpx;
		  color: #999999;
		  font-size: 24rpx;
		  font-family: PingFang;
		  text-decoration: line-through;
		}
		.text_9 {
		  align-self: center;
		  color: #999999;
		  font-size: 24rpx;
		  font-family: PingFang;
		}
	}
}
</style>