|
|
@@ -0,0 +1,220 @@
|
|
|
+<template name="headerNavbar">
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <view class='navbar-wrap' :style="{height:(CustomBar+55)+'px',paddingTop:StatusBar+'px'}">
|
|
|
+ <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="false" position="absolute" direction="top" @close="topBubble" width="140rpx"
|
|
|
+ left="10rpx" bottom="0rpx" translateY="100%" triangleRight="60rpx" triangleTop="-22rpx">
|
|
|
+ <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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ show:false,
|
|
|
+ clickPath:'/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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: 476rpx;
|
|
|
+ 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>
|
