caimei-applets-weisha/components/cm-module/home/cm-custom.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view class='navbar-wrap' :style="{height:(CustomBar+55)+'px',paddingTop:StatusBar+'px'}" @touchmove.stop.prevent="discard" @tap="hideBubble"> 		
	  	<view class="navbar-text" 
			  :style="{color:navbarData.textColor ? navbarData.textColor:'',lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;',paddingLeft:navbarData.textLeft ? '' : 12+'px'}" :class="platformClass">
	    	  {{navbarData.title ? navbarData.title : " "}}
	  	</view>
		<view class="search-input">
			<view class="search-tab">
				<view class="search-tab-btn"  @click="topBubble">
					<text>{{ tabValue }}</text>
					<text class="iconfont icon-xiangxiajiantou"></text>
				</view>
				<tui-bubble-popup :show="show" :mask="true" position="absolute" direction="top" @close="topBubble" width="140rpx"
				 left="10rpx" bottom="0rpx" translateY="100%" triangleRight="60rpx" triangleTop="-22rpx" :maskBgColor="maskBgColor">
					<view class="tui-menu-item" @tap="selectTabs(1)">产品</view>
					<view class="tui-menu-item" @tap="selectTabs(2)">供应商</view>
					<view class="tui-menu-item" @tap="selectTabs(3)">项目仪器</view>
				</tui-bubble-popup>
			</view>
			<view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<input class="input" type="text" v-model="SearchText" value="" placeholder="你想要的这里都有"/>
			</view>
			<view class="search-service">
				<!-- #ifdef MP-WEIXIN -->
				<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
					<text class="iconfont icon-liuyan"></text>
				</button>	
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	var self;
	import btSearch from '@/components/uni-search/bt-search.vue'
	export default{
		name:'headerNavbar',
		components:{
			btSearch,
		},
		props:{
		    navbarData: { // 由父页面传递的数据
				type: Object
		    },
			maskBgColor: {//遮罩背景色
				type: String,
				default: 'transparent'
			},
		},
		data() {
			return{
				show:false,
				clickPath:'/search/pages/search/search',
				SearchText:'',
				tabValue:'产品',
				CustomBar:this.CustomBar,// 顶部导航栏高度
				StatusBar: this.StatusBar,
				fontSizeSetting:this.fontSizeSetting,
				screenWidth:this.screenWidth,
				capsule:this.capsule,
				platformClass:this.platformClass,
			}
		},
		created() {
			if (getCurrentPages().length === 1) { // 当只有一个页面时
			      this.navbarData.haveBack = false;
			} else {
			      this.navbarData.haveBack = true;
			}
		},
		onLoad(){
			
		},
		methods:{
			handleContact(e){
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			topBubble() {
				this.show = !this.show;
			},
			selectTabs(index){
				this.show = false
				switch(index){
					case 1:
						this.tabValue='产品'
						break;
					case 2:
						this.tabValue='供应商'
						break;
					case 3:
						this.tabValue='项目仪器'
						break;
				}
			},
			hideBubble(){
				this.shwo = false
			},
			discard(){
				//丢弃
			},
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	.navbar-wrap {
		 position: fixed;
		 width: 100%;
		 top: 0;
		 z-index: 100000;
		 box-sizing: border-box;
		 background: url(https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCAF_anAADHlsIu3aE475.png);
		 background-size: cover;
		 border-bottom:none;
	}
	.navbar-text {
		width: 100%;
		font-size: 30rpx;
		color: #000000;
		font-weight: 500;
	}
	.navbar-text.center{
		text-align: center;
	}
	.navbar-text.left{
		text-align: left;
		padding-left: 45px;
	}
	.navbar-icon {
		 position: fixed;
		 display: flex;
		 box-sizing: border-box;
	}
	.navbar-icon .iconfont {
		 display: inline-block;
		 overflow: hidden;
		 font-size: 44rpx;
		 padding-right:40rpx;
		 margin-top: 1px;
	}
	.navbar-icon .icon-iconfonticonfontsousuo1 {
		color: #000000;
	}
	.navbar-icon view {
		 height: 18px;
		 border-left: 0.5px solid rgba(0,0,0, 0.3);
		 margin-top: 6px;
	}
	.navbar-loading {
		 background: #fff;
		 text-align: center;
	}
	.search-input{
		width: 100%;
		height: 70rpx;
		padding: 20rpx 0;
		.search-tab{
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #FFFFFF;
			font-size: $font-size-28;
			text-align: center;
			float: left;
			position: relative;
			.icon-xiangxiajiantou{
				margin-left: 10rpx;
			}
		}
		.gosearch-btn{
			width: 470rpx;
			height: 100%;
			float: left;
			border-radius: 40rpx;
			background: #F0F0F0;
			margin: 0 auto;
			padding:0 20rpx;
			font-size: 28rpx;
			line-height: 70rpx;
			padding-left: 70rpx;
			color: #8A8A8A;
			background: #FFFFFF;
			position: relative;
			box-sizing: border-box;
			.icon-iconfonticonfontsousuo1{
				width: 70rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 34rpx;
				color: #8A8A8A;
				z-index: 10;
			}
			.input{
				width: 400rpx;
				height: 100%;
				float: left;
			}
		}
		.search-service{
			width: 100rpx;
			height: 70rpx;
			line-height: 70rpx;
			float: right;
			text-align: center;
			color: #FFFFFF;
			.contact-btn{
				width: 100%;
				height: 70rpx;
				background-color: rgba(0,0,0,0);
				line-height: 70rpx;
				.icon-liuyan{
					font-size: 64rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>