JiangxiMiniProgram/pages/indexEntry/findShcool/searchShcool/searchShcool.vue

<template>
	<view class="pageBg ">
		<view class="pad">
			<!-- 搜索框 -->
			<view class="searchBg">
				<view class="flex">
					<view class="searchIcon">
						<image src="@/static/images/index/searchIconHui.png" mode=""></image>
					</view>
					<view class="inputBox">
						<u--input placeholder="搜索驾校、教练…" border="none" clearable v-model="keywords" :color="'#333'"
							placeholderClass="placeholderClass"></u--input>
					</view>
					<view class="searchBtn">搜索</view>
				</view>
			</view>
			<!-- 历史搜索 -->
			<view class="" v-if="!keywords">
				<view class="historyRecord">
					<view class="h2_row">
						<view class="h2">历史搜索</view>
						<view class="deleteIcon">
							<image src="@/static/images/index/deleteIcon.png" mode=""></image>
						</view>
					</view>
					<view class="tag_row">
						<view class="tag" v-for="(item,index) in tagArr" :key="index">{{item}}</view>
					</view>
				</view>
				<view class="tabs">
					<view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">优选驾校</view>
					<view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">优选教练</view>
				</view>
				<view class="ul">
					<view class="li">
						<view class="num">1</view>
						<view class="con">
							<schoolItme v-show="currentTab==1"/>
							<coachItem  v-show="currentTab==2"/>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 真正搜索内容 -->
			<view class="" v-else>
				<view class="tabs">
					<view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">驾校(2)</view>
					<view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">教练(30)</view>
				</view>
				<schoolItme v-show="currentTab==1"/>
				<coachItem  v-show="currentTab==2"/>
			</view>
			
		</view>
	</view>
</template>

<script>
	import schoolItme from '../comp/schoolItem.vue'
	import coachItem from '../shcoolDetail/comp/tab3.vue'
	export default {
		props: ['placeholder'],
		components: { schoolItme, coachItem },
		data() {
			return {
				keywords: '',
				tagArr: ['翔力驾校','王一宝', '大乔'],
				currentTab: 1,
			}
		},
		methods: {
			changeTab(num) {
				this.currentTab = num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pad {
		padding-top: 10rpx;
	}
	.searchBg {
		background: #fff;
		width: 100%;
		height: 72rpx;
		border-radius: 16rpx;
		line-height: 72rpx;
		margin-top: 10rpx;
		.flex {
			height: 100%;
	
			.searchIcon {
				width: 40rpx;
				height: 40rpx;
				margin: 0 28rpx;
			}
	
			.inputBox {
				flex: 1;
				color: #fff;
				font-size: 28rpx;
			}
		}
		.searchBtn {
			width: 120rpx;
			font-size: 28rpx;
			color: $themC;
			text-align: center;
			position: relative;
			&::before {
				content: '';
				width: 2rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
				top: 50%;
				background: #E8E9EC;
				transform: translateY(-50%);
			}
		}
	}
	.placeholderClass {
		color: #ADADAD !important;
	}
	.h2_row {
		display: flex;
		justify-content: space-between;
		line-height: 116rpx;
		.h2 {
			font-size: 28rpx;
			font-weight: 600;
		}
	}
	.tag_row {
		display: flex;
		flex-wrap: wrap;
		.tag {
			padding: 8rpx 16rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			min-width: 112rpx;
			text-align: center;
			color: #686B73;
			margin: 0 40rpx 20rpx 0;
		}
	}
	.tabs {
		display: flex;
		padding: 30rpx 0 50rpx 0;
		margin-left: 20rpx;
		.tab {
			font-size: 28rpx;
			color: #333;
			margin-right: 68rpx;
			&.active {
				color: $themC;
				position: relative;
				font-weight: 600;
				&::before {
					position: absolute;
					content: '';
					background: $themC;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 112rpx;
					height: 4rpx;
				}
			}
		}
	}
	.li {
		display: flex;
		align-items: center;
		.num {
			width: 56rpx;
			height: 36rpx;
			border-radius: 4rpx;
			text-align: center;
			background: #ADADAD;
			font-size: 28rpx;
			color: #fff;
			margin-right: 28rpx;
			&:nth-child(1) {
				background: #FF6B6D;
			}
			&:nth-child(2) {
				background: #F18840;
			}
			&:nth-child(3) {
				background: #FFB83E;
			}
		}
		.con {
			flex: 1;
			width: 0;
		}
	}
</style>