caimei-applets-caimei/components/cm-module/homeIndex/customer.vue

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view
        class="navbar-wrap"
        :class="isScroll ? opacityNav : ''"
        :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="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
                <view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
                <view class="search-text">{{ hotSearchText }}</view>
            </view>
			<view class="gosearch-kf">
				<!-- #ifdef MP-WEIXIN -->
				<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
				    <text class="iconfont icon-zixunrexian"></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
        },
        isScroll: {
            type: Boolean,
            default: () => false
        }
    },
    data() {
        return {
            clickPath: '/pages/search/search',
            hotSearchText: '搜索商品/项目仪器',
            CustomBar: this.CustomBar, // 顶部导航栏高度
            StatusBar: this.StatusBar,
            fontSizeSetting: this.fontSizeSetting,
            screenWidth: this.screenWidth,
            capsule: this.capsule,
            platformClass: this.platformClass,
            opacityNav: 'opacityNav', // 渐变颜色
        }
    },
    created() {
        if (getCurrentPages().length === 1) {
            // 当只有一个页面时
            this.navbarData.haveBack = false
        } else {
            this.navbarData.haveBack = true
        }
        console.log(this.isScroll)
    },
    onLoad() {},
    onPageScroll(e) {
    	console.log(e)
    },
    methods: {
        BackPage: function() {
            this.$emit('navigateBack')
        },
        _goSearchPath: function() {
            this.$emit('goSearchPath')
        },
        _goHome: function() {
            uni.switchTab({
                url: '/pages/tabBar/home/index'
            })
        },
		handleContact(e) {
		    console.log(e.detail.path)
		    console.log(e.detail.query)
		}
    },
    onShow() {}
}
</script>

<style lang="scss" scoped>
.navbar-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100000;
    box-sizing: border-box;
    background: #FF5B00;
    background-position-y: -50rpx;
    border-bottom: none;
}
.opacityNav {
    background: #FF5B00;
}
.navbar-text {
    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: 100rpx;
    padding: 20rpx 24rpx 10rpx 24rpx;
    box-sizing: border-box;
    .gosearch-btn {
        width: 632rpx;
        height: 100%;
        border-radius: 40rpx;
        background: #f0f0f0;
        font-size: 28rpx;
        line-height: 70rpx;
        color: #8a8a8a;
        background: #ffffff;
        position: relative;
        box-sizing: border-box;
        padding-left: 80rpx;
		float: left;
        .search-icon {
            width: 80rpx;
            height: 70rpx;
            position: absolute;
            left: 0;
            top: 2rpx;
            text-align: center;
            line-height: 70rpx;
            .icon-iconfonticonfontsousuo1 {
                margin: 0 6rpx;
                font-size: $font-size-34;
                color: #8a8a8a;
                z-index: 10;
            }
        }
        .search-text {
            font-size: $font-size-24;
            line-height: 70rpx;
            color: #8a8a8a;
        }
    }
	.gosearch-kf{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		float: left;
		line-height: 70rpx;
		text-align: center;
		.contact-btn {
		    width: 70rpx;
		    height: 70rpx;
		    background-color: rgba(0, 0, 0, 0);
		    line-height: 70rpx;
			text-align: center;
		    .iconfont {
		        font-size: $font-size-48;
		        color: #ffffff;
		    }
		}
	}
}
</style>