yijianbao_user_uniapp/pages_index/search.vue

<template>
	<view class="content">
		<view class="top-cont"  >
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="inner">
				<image class="back" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/icon_back_b.png" mode="heightFix" @click="back()"></image>
				<view class="screen-box">
					<image class="search" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/icon_search.png" mode=""></image>
					<input type="text" v-model="searchKey" placeholder="搜索医生/疾病/知识"  @confirm="toSearchList(searchKey)" placeholder-style="font-size:26rpx;color:#DADADA;">
					<text class="text" @click="toSearchList">搜索</text>
				</view>
			</view>
		</view>
		<view class="cont-inner">
			<!-- 搜索历史 -->
			<view class="search-info">
				<view class="title-box">
					<view class="title">搜索历史</view>
					<view class="btn" @click="clearHistory()">清除搜索历史</view>
				</view>
				<view class="search-list">
					<view @click="goSearchList(item)" v-for="(item,index) in searchHistory" :key="index" class="item ellipsis">
						<text class="text">{{ item }}</text>
					</view>
					<!-- <view class="item ellipsis">
						<text class="text">名字很长很长很长很长很长很长很长很长</text>
					</view> -->
				</view>
			</view>
			 
		</view>
	</view>
</template>

<script>
	import {getConfigByKey} from '@/api/common'
	export default {
		data() {
			return {
				searchHistory:[],
				searchKey:"",
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				
			}
		},
		onLoad() {
			this.searchHistory=this.$getHisSearch();
		},
		methods: {
			clearHistory() {
				this.$clearHisSearch();
				this.searchHistory=this.$getHisSearch();
			},
			 
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			goSearchList(key){
				uni.navigateTo({
					url: '/pages_doctor/doctorList?keyword='+key
				})
			},
			toSearchList() {
				if(this.searchKey!=""){
					this.$addHisSearch(this.searchKey);
				}
				uni.navigateTo({
					url: '/pages_doctor/doctorList?keyword='+this.searchKey
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		.top-cont{
			background-color: #f6f6f6;
			.inner{
				height: 88upx;
				display: flex;
				align-items: center;
				padding-right: 240upx;
				padding-left: 30upx;
				.back{
					width: 34upx;
					height: 34upx;
					margin-right: 24upx;
				}
				.screen-box{
					flex: 1;
					height: 60upx;
					border-radius: 30upx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20upx;
					.search{
						width: 30upx;
						height: 30upx;
						margin-right: 12upx;
					}
					input{
						flex: 1;
						font-size: 26upx;
						color: #000;
					}
					.text{
						font-size: 26upx;
						color: #000;
						margin-left: 12upx;
					}
				}
			}
		}
		.cont-inner{
			flex: 1;
			background-color: #fff;
			border-radius: 20upx 20upx 0 0;
			padding: 0 25upx;
			.search-info{
				padding-top: 20upx;
				.title-box{
					padding: 20upx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 28upx;
						color: #000;
						font-weight: bold;
					}
					.btn{
						font-size: 24upx;
						color: #575757;
					}
				}
				.search-list{
					display: flex;
					flex-wrap: wrap;
					.item{
						max-width: 250upx;
						height: 54upx;
						line-height: 54upx;
						padding: 0 20upx;
						border-radius: 27upx;
						margin: 0 20upx 15upx 0;
						background-color: #f4f4f4;
						display: flex;
						align-items: center;
						font-size: 22upx;
						&.hot{
							background-color: #fef0f0;
						}
						.img{
							width: 26upx;
							height: 26upx;
							margin-right: 10upx;
						}
						.text{
							font-size: 22upx;
							color: #363636;
						}
					}
				}
			}
		}
	}

</style>