caimei-applets-mcare/components/uni-search/cat-search.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view class="navbar-wrap" :style="{ height: navbarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
		<view
			class="navbar-text"
			:style="{
				top: navbarBtn.top + statusBarHeight + 'px;',
				height: navbarBtn.height + 'px;',
				fontSize: fontSizeSetting + 'px;'
			}"
			@click="this.$api.navigateTo(clickPath)"
		>
			<view
				class="gosearch-btn"
				:style="{
					paddingLeft: navbarBtn.height + 'px;',
					left: navbarBtn.height / 2 + 'px;',
					borderRadius: navbarBtn.height / 2 + 'px;',
					width: 375 - navbarBtn.width - 20 + 'px;',
					lineHeight: navbarBtn.height + 'px;'
				}"
			>
				<text
					class="iconfont icon-sousuo"
					:style="{
						width: navbarBtn.height + 'px;',
						height: navbarBtn.height + 'px;',
						lineHeight: navbarBtn.height + 'px;'
					}"
				></text>
				<view class="input">搜索商品/项目仪器</view>
			</view>
		</view>
		<view class="category-tab">
			<view class="category-tab-item" :class="categoryTabIndex == 1 ? 'active' : ''" @click="categoryTabClick(1)"
				>产品</view
			>
			<view class="category-tab-item" :class="categoryTabIndex == 2 ? 'active' : ''" @click="categoryTabClick(2)"
				>仪器</view
			>
		</view>
	</view>
</template>

<script>
var self
export default {
	name: 'headerNavbar',
	props: {
		navbarData: {
			// 由父页面传递的数据
			type: Object
		},
		systeminfo: {
			type: Object
		},
		headerBtnPosi: {
			type: Object
		},
		page: {
			type: Number
		},
		headerTitle: {
			type: String
		},
		type: {
			type: String
		}
	},
	data() {
		return {
			headerType: '',
			clickPath: '/pages/search/search',
			haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
			statusBarHeight: 0, // 状态栏高度
			navbarHeight: 0, // 顶部导航栏高度,
			navbarBtn: {
				// 胶囊位置信息
				height: 0,
				width: 0,
				top: 0,
				bottom: 0,
				right: 0
			},
			platform: '',
			fontSizeSetting: 0,
			categoryTabIndex: 1
		}
	},
	created() {
		this.headerType = this.type
		this.fontSizeSetting = this.systeminfo.fontSizeSetting
		let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
		let headerPosi = this.headerBtnPosi // 胶囊位置信息
		/**
		 * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
		 * 菜单按键宽度： 87
		 * 菜单按键高度： 32
		 * 菜单按键左边界坐标： 278
		 * 菜单按键上边界坐标： 26
		 * 菜单按键右边界坐标： 365
		 * 菜单按键下边界坐标： 58
		 */
		let btnPosi = {
			// 胶囊实际位置，坐标信息不是左上角原点
			height: headerPosi.height,
			width: headerPosi.width,
			// 胶囊top - 状态栏高度
			top: headerPosi.top - statusBarHeight,
			// 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
			bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
			// 屏幕宽度 - 胶囊right
			right: this.systeminfo.screenWidth - headerPosi.right
		}
		console.log(btnPosi)
		let haveBack
		if (getCurrentPages().length === 1) {
			// 当只有一个页面时
			haveBack = false
		} else {
			haveBack = true
		}
		;(this.haveBack = haveBack), // 获取是否是通过分享进入的小程序
			(this.statusBarHeight = statusBarHeight),
			(this.navbarHeight = headerPosi.bottom + btnPosi.bottom), // 原胶囊bottom + 现胶囊bottom
			(this.$parent.navbarHeight = this.navbarHeight)
		this.$parent.statusBarHeight = this.statusBarHeight
		// console.log(this.navbarHeight);
		this.navbarBtn = btnPosi
	},
	onLoad() {},
	methods: {
		_goBack: function() {
			uni.navigateBack({
				delta: this.page
			})
		},
		_goHome: function() {
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			})
		},
		categoryTabClick(index) {
			this.categoryTabIndex = index
			this.$emit('click', this.categoryTabIndex)
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100000;
	background-color: #ffffff;
	box-sizing: border-box;
	&.bg-color {
		animation: showColor 0.3s ease-in-out both;
	}
	&.no-color {
		animation: hideColor 0.3s ease-in-out both;
	}
}

.navbar-text {
	width: 100%;
	color: #000000;
	font-weight: 500;
	position: fixed;
}
.gosearch-btn {
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	font-size: 28rpx;
	color: #999999;
	position: relative;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	.icon-sousuo {
		height: 100%;
		text-align: center;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 34rpx;
		color: #999999;
		z-index: 10;
	}
	.input {
		height: 100%;
		float: left;
		font-size: $font-size-24;
		text-align: left;
	}
}
.category-tab {
	width: 100%;
	height: 76rpx;
	display: flex;
	border-bottom: 1px solid #eee;
	position: absolute;
	bottom: -76rpx;
	background-color: #ffffff;
	.category-tab-item {
		flex: 1;
		font-size: $font-size-30;
		line-height: 76rpx;
		text-align: center;
		color: #93979f;
		position: relative;
		&::before {
			content: '';
			width: 57rpx;
			height: 4rpx;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -28rpx;
		}
		&.active {
			color: #F3B574;
			&::before {
				background-color: #F3B574;
			}
		}
	}
}
</style>