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">
			</view>
			<image
			  src="/static/mang-quxiao.png"
			  class="image_6"
			  v-if="hasKeyword"
			/>
		  </view>
		  <!-- <text class="text_3" v-if="hasKeyword">取消</text> -->
		  <text class="text_3" @tap="search">搜索</text>
		</view>
		<!-- v-if="!hasKeyword" -->
		<view class="p-history" v-if="true && 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">
					{{item}}
				</view>	
			</view>
		</view>
		<view class="p-content" v-else-if="false">
			<view class="item-wrap flex-row justify-between" v-for="(item,i) in 3" :key="i">
				  <view class="flex-row">
				    <image
				      src="/static/temp/pro.png"
				      class="image_7"
					  mode="aspectFill"
				    />
				    <view class="flex-col group_8">
				      <view class="flex-col items-start">
				        <text class="text_4 clamp">幸福西饼Rice盲盒</text>
						<view class="stars align-center">
							 <image
							  src="/static/mang_star.png"
							  class="image_8"
							  v-for="(item,idx) in 3"
							  :key="idx"
							/>	
						</view>
				        <text class="text_5">随机搭配</text>
				      </view>
				      <view class="flex-row group_10">
				        <view class="group_11">
				          <text class="text_6">￥</text>
				          <text class="text_7">18.8</text>
				        </view>
				        <text class="text_8">￥24~33</text>
				      </view>
				    </view>
				  </view>
				  <text class="text_9">1.5km</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				search_lishi:[],
			};
		},
		computed:{
			hasKeyword(){
				if(this.keyword){
					return true;
				}
				return false;
			}
		},
		onShow(){  //这里一进来就查询之前留下的搜索内容  别忘了退出登录的时候删掉
			// console.log(uni.getStorageSync('history'))
			this.search_lishi = uni.getStorageSync('history') || [] //存放历史记录的数组
		},
		methods:{
			search(){
				if(this.hasKeyword){
					this.add_history(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
				}
			},
		},
	}
</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>