talk_appAmin/pages/search/index.vue

<template>
	<view class="">
		<!-- <u-navbar leftText=" " title="搜索" :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
		</u-navbar> -->
		<view class="bgc"></view>
		<!-- 搜索栏 -->
		<view class="sousuoBox1 flex alignCenter justifyBetween">
			<view class="sousuoBox flex alignCenter justifyBetween">
				<view class="souBOx flex alignCenter justifyBetween" >
					<image src="../../static/images/icon/tu2-2.png" class="img3"></image>
					<!-- <view class="shuruText">在食堂捡到一张饭卡</view> -->
					<input v-model="keyword" @input="toContent" @confirm="onSearch" class="shuruText" :placeholder="placeholderText" type="text">
				</view>
				<image @click.stop="toScanCode" src="../../static/images/icon/tu2-3.png" class="img4"></image>
			</view>
			<view class="category-dropdown flex alignCenter">
			    <text class="text1 flex alignCenter" @click="onSearch">搜索</text>
			    <!-- <image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image> -->
			</view>
		</view>
		 <!-- 搜索历史 -->
		  <view class="history" v-if="!noHistortOpen">
		    <view class="history-top">
		      <view class="history-title">搜索历史</view>
		      <image src="../../static/images/icon/tu3-4.png" class="history-icon" @click="clearHistory"></image>
		    </view>
		    <view class="history-center">
		      <view v-for="(item, index) in historyList" :key="index" class="history-item">
		        <text @click="clickHistory(index)" class="history-item-text">{{ item }}</text>
		      </view>
		    </view>
		  </view>
		<!-- 无内容 -->
		<view v-else>
			<view class="noContent">
				<image src="../../static/images/icon/tu4-9.png" class="img6"></image>
				<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				placeholderText: '在食堂捡到一张饭卡',
				bgColor: 'rgba(170, 0, 0, 0)',
				noHistortOpen: false,
				historyList: ['钥匙丢了 111', '外卖丢了', 'U盘丢了', '我丢了', '丢']
			}
		},
		onLoad() {
			// 从缓存中读取历史记录
			var hisList = JSON.parse(uni.getStorageSync('kw'));
			if (hisList.length != 0) {
				this.historyList=JSON.parse(uni.getStorageSync('kw'))
			}
		},
		methods: {
			clickHistory(index) {
				console.log('触发')
				this.keyword = this.historyList[index]
			},
			toContent() {
				this.noHistortOpen = false
			},
			toScanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			onSearch() {
				console.log('搜索  ' + this.keyword)
				//把搜索的关键字保存到historyList中
				if (this.keyword == '') {
					console.log('空的')
					this.keyword = this.placeholderText;
				}
				this.saveHistory()
				if(this.keyword == '在食堂捡到一张饭卡') {
					this.noHistortOpen = true
				}
			},
			// 保存历史记录
			saveHistory(){
				console.log('保存历史')
				// if(this.historyList.indexOf(this.keyword)==-1){
					this.historyList.unshift(this.keyword)
					// 把用户输入的内容保存到历史记录当中
					uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
				// }
			},
			// 清空历史记录
			clearHistory(){
				this.historyList=[]
				uni.setStorageSync('kw','[]')
				// if(his.length==0){
				// 	this.his=!this.his
				// }
			}
		}
	}
</script>

<style>
	.bgc{
		width: 750rpx;
		height: 108rpx;
		background: #FAF9FA;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: -1;
	}
	.sousuoBox1{
		margin: 16rpx 32rpx;
		width: auto;
	}
	.sousuoBox{
		width: 580rpx;
		height: 60rpx;
		border: #B3D7FF solid 2rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		background: #ffffff80;
	}
	.souBOx{
		margin-left: 32rpx;
	}
	.img3{
		width: 36rpx;
		height: 36rpx;
	}
	.img4{
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}
	.category-dropdown {
		margin-left: 42rpx;
	}
	.text1{
		font-weight: 400;
		width: 62rpx;
		/* height: 32rpx; */
		font-size: 30rpx;
		text-align: left;
		color: #1B1B1B;
	}
	.img5{
		width: 26rpx;
		height: 26rpx;
	}
	.shuruText{
		font-weight: 400;
		font-size: 28rpx;
		text-align: left;
		margin-left: 18rpx;
		color: #333333;
		flex-grow: 1; /* 让输入框占据剩余空间 */
		width: 380rpx;
	}
.history {
  margin-top: 44rpx;
  padding: 0 32rpx;
}

.history-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.history-title {
  font-weight: 400;
  width: 140rpx;
  /* height: 36rpx; */
  /* line-height: 36rpx; */
  font-size: 34rpx;
  text-align: left;
  color: #1B1B1B;
}

.history-icon {
  width: 42rpx;
  height: 42rpx;
}

.history-center {

}

.history-item {
  display: inline-block; /* 将 history-item 设置为行内块元素 */
  margin: 10rpx 12rpx;
}

.history-item-text {
  font-weight: 400;
  /* width: 140rpx; */
  /* height: 58rpx; */
  /* line-height: 58rpx; */
  /* width: 180rpx; */
  font-size: 28rpx;
  text-align: left;
  color: #666666;
  border-radius: 30rpx; /* 调整圆角 */
  background: #f6f6f6;
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  padding: 14rpx 20rpx; /* 添加内边距 */
}

.img6{
		width: 326rpx;
		height: 280rpx;
	}
.noContent {
	margin-top: 150rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.noContentText{
	font-weight: 400;
	width: 490rpx; 
	height: 30rpx;
	font-size: 30rpx;
	text-align: center;
	color: #333333;
}
	
</style>