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

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view>
        <view class="navbar-wrap" :class="isScroll ? opacityNav : ''" :style="{
				height: CustomBar + 72 + 'px',
				paddingTop: StatusBar + 'px'
			}">
            <view class="navbar-text" :style="{
					color: navbarData.textColor ? navbarData.textColor : '',
					lineHeight: CustomBar - ( StatusBar + 4 ) + '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 class="search-btn">搜索</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 class="swiper-banner-nav">
                <scroll-view class="scroll-view_H" scroll-x="true">
                    <view class="tui-goods__item active">首页</view>
                    <view class="tui-goods__item" v-for="(navs, index) in navBarsList"
                        :key="index"
                        @click="NavToDetailPage(navs,index)">
                        {{ navs.name }}
                    </view>
                </scroll-view>
                <view class="swiper-nav-icon" @click="showDropScreenShow">
                    <text class="iconfont"
                        :class="dropScreenShow ? 'icon-xiangshangjiantou':'icon-xiangxiajiantou'"></text>
                </view>
            </view>
        </view>
        <!--顶部下拉筛选弹层 属性-->
        <tui-top-dropdown backgroundColor="#FFFFFF" :show="dropScreenShow" :height="310" :paddingbtm="10"
            :translatey="dropScreenH" @close="btnCloseDrop">
            <scroll-view class="tui-scroll-box" scroll-y :scroll-top="scrollTop">
                <view class="tui-seizeaseat-24">
                    <view class="tui-drop-item tui-icon-middle">全部分类</view>
                    <view class="tui-drop-item tui-icon-middle active">首页</view>
                    <view class="tui-drop-item tui-icon-middle" v-for="(item, index) in navBarsList" :key="index"
                        @tap.stop="NavToDetailPage(item,index)" :data-index="index">
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view>
        </tui-top-dropdown>
    </view>
</template>

<script>
    var self
    import btSearch from '@/components/uni-search/bt-search.vue'
    export default {
        name: 'headerNavbar',
        components: {
            btSearch
        },
        props: {
            navbarData: {
                // 由父页面传递的数据
                type: Object
            },
            navBarsList: {
                type: Array
            },
            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', // 渐变颜色
                height: 64, //header高度
                scrollTop: 0,
                dropScreenH: this.CustomBar + 78, //下拉筛选框距顶部距离
                dropScreenShow: false,
                animationData: {}

            }
        },
        created() {
            if (getCurrentPages().length === 1) {
                // 当只有一个页面时
                this.navbarData.haveBack = false
            } else {
                this.navbarData.haveBack = true
            }
            let obj = {}
            // #ifdef MP-WEIXIN
            obj = wx.getMenuButtonBoundingClientRect()
            // #endif
            uni.getSystemInfo({
                success: res => {
                    this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
                    //略小，避免误差带来的影响
                    this.dropScreenH = (this.height * 750) / res.windowWidth + 148
                }
            })
            console.log('dropScreenH', this.dropScreenH)
        },
        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'
                })
            },
            NavToDetailPage(item, index) { //跳转
                if (index === 3) {
                    let linkPath = 'https://static.caimei365.com/app/caimei-activity-h5/html/2023/activity_02.html'
                    this.$api.navigateTo(`/pages/h5/activity/activity?link=${linkPath}&linkId=382`)
                } else {
                    /**
                     * 页面跳转
                     **/
                    this.$api.FlooryNavigateTo(item)
                }
            },
            showDropScreenShow() {
                this.dropScreenShow = !this.dropScreenShow
                if (this.dropScreenShow) {
                    // 禁止页面滚动  
                    uni.setScrollEnabled(false)
                } else {
                    // 禁止页面滚动
                    uni.setScrollEnabled(true)
                }
            },
            btnCloseDrop() {
                this.dropScreenShow = false
            },
            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: 9999;
        box-sizing: border-box;
        background: #ffffff url(https://static.caimei365.com/app/img/bg/home_cumres_bg@2x.png);
        background-size: cover;
        border-bottom: none;
    }

    .opacityNav {}

    .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: 70rpx;
        padding: 0 24rpx 0rpx 24rpx;
        box-sizing: border-box;

        .gosearch-btn {
            width: 632rpx;
            height: 100%;
            padding: 5rpx;
            border-radius: 40rpx;
            background: #f0f0f0;
            color: #8a8a8a;
            background: #ffffff;
            position: relative;
            box-sizing: border-box;
            padding-left: 80rpx;
            border: 1px solid #ff5b00;
            float: left;

            .search-icon {
                width: 80rpx;
                height: 56rpx;
                position: absolute;
                left: 0;
                top: 9rpx;
                text-align: center;
                line-height: 56rpx;

                .icon-iconfonticonfontsousuo1 {
                    margin: 0 6rpx;
                    font-size: $font-size-40;
                    color: #8a8a8a;
                    z-index: 10;
                }
            }

            .search-text {
                font-size: $font-size-24;
                line-height: 56rpx;
                color: #8a8a8a;
                float: left;
            }

            .search-btn {
                width: 120rpx;
                height: 58rpx;
                border-radius: 30rpx;
                background: $btn-confirm;
                line-height: 58rpx;
                text-align: center;
                font-size: $font-size-28;
                color: #ffffff;
                float: right;
            }
        }

        .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: #ff5b00;
                }
            }
        }
    }

    .swiper-banner-nav {
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        padding: 15rpx 76rpx 15rpx 24rpx;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;

        .swiper-nav-icon {
            width: 76rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;

            .iconfont {
                font-size: $font-size-28;
                color: #666666;
            }
        }

        .scroll-view_H {
            white-space: nowrap;
            width: 100%;

            .tui-goods__item {
                display: inline-block;
                margin: 0 20rpx;
                height: 50rpx;
                line-height: 50rpx;
                font-size: $font-size-24;
                color: #333333;
                text-align: center;

                &.active {
                    color: #ff5b00;
                    font-weight: bold;
                    position: relative;

                    &::before {
                        content: '';
                        width: 20rpx;
                        height: 4rpx;
                        border-radius: 2rpx;
                        background: #ff5b00;
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        margin-left: -10rpx;
                    }
                }
            }
        }
    }

    .tui-scroll-box {
        height: 280rpx;
        overflow: hidden;
    }

    .tui-seizeaseat-24 {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 24rpx;

        .tui-drop-item {
            padding: 0 20rpx;
            height: 56rpx;
            float: left;
            line-height: 56rpx;
            background: #f5f5f5;
            font-size: 24rpx;
            margin: 12rpx 8rpx;
            text-align: center;
            border: 1px solid #f5f5f5;
            color: #333333;
            border-radius: 28rpx;

            &.active {
                background: #ffffff;
                border-color: #ff5b00;
                color: #ff5b00;
            }
        }
    }
</style>