realty/virgo.wzfrontend/yui_wx/pages/search/search.vue

<template>
	<view class="search-container">
		<navbar>
			<view class="nav">
				<view class="nav-back" @click="$navigateBack()">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
				<input type="text" class="nav-search" placeholder="请输入房源名称或项目名称" v-model="searchValue" focus
					confirm-type="search" @confirm="search"
					:style="'height:' + boundingClientRect.height + 'px;border-radius:' + boundingClientRect.height + 'px;line-height:'+(boundingClientRect.height-2)+'px'" />
				<view class="wx-operation"
					:style="'width:' + boundingClientRect.width + 'px;height:'+ boundingClientRect.height+'px;'">
				</view>
			</view>
		</navbar>
		<view class="search-tag" :style="'margin-top: '+getNavBarHeight()+'rpx;'">
			<view class="tag-title">标签列表</view>
			<view class="tag-list">
				<view class="tag-item">
					标签1
				</view>
				<view class="tag-item">
					标签2
				</view>
				<view class="tag-item">
					标签3
				</view>
			</view>
			<view class="tag-title">历史搜索</view>
			<view class="tag-list">
				<view class="tag-item">
					维绿大厦
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/common/navbar.vue";
	export default {
		data() {
			return {
				boundingClientRect: {},
				searchValue: ''
			}
		},
		onShow() {
			this.boundingClientRect = wx.getMenuButtonBoundingClientRect();
		},
		methods: {
			// 获取状态栏高度
			geStatusBarHeight() {
				return uni.getSystemInfoSync()['statusBarHeight']
			},
			// 获取导航栏高度
			getNavBarHeight() {
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
					'statusBarHeight']) * 2 + 2
				// #endif
				// #ifdef APP-PLUS || H5
				let navbarHeight = 44
				// #endif
				return (navbarHeight + this.geStatusBarHeight() + 15) * 2;
			},
			search() {
				this.$navigateTo('/pages/searchlist/searchlist?searchValue=' + this.searchValue);
			}
		},
		components: {
			navbar
		}
	}
</script>

<style lang="scss">
	.search-container {
		.nav {
			height: 100%;
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;

			.nav-back {
				padding-left: 10rpx;
			}

			.nav-search {
				flex: 1;
				width: 0;
				border: 1px solid $uni-border-1;
				line-height: 1;
				padding-left: 30rpx;
				margin: 0 20rpx;
				box-sizing: border-box;
				margin-bottom: 4rpx;
				font-weight: 200;
				height: 64rpx;
				border-radius: 64rpx;
				line-height: 60rpx;
			}

			.wx-operation {
				margin-right: 8px;
				margin-bottom: 4rpx;
			}
		}

		.search-tag {
			background: #fff;
			padding: 30rpx 0 0 30rpx;

			.tag-title {
				font-size: 24rpx;
				font-weight: bold;
				color: $uni-base-color;
				margin-bottom: 20rpx;
			}

			.tag-list {
				display: flex;
				flex-wrap: wrap;
			}

			.tag-item {
				background: $uni-background-color;
				padding: 10rpx 20rpx;
				color: $uni-base-color;
				font-weight: 300;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>