caimei-applets-weisha/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;'}">
	    	<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" @click="this.$api.navigateTo(clickPath)">搜索商品/供应商/项目仪器</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:'/search/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: #E15616;
				&::before{
					background-color: #E15616;
				}
			}
		}
	}
</style>