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

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view>
		<view
			class="navbar-wrap"
			:class="isScroll ? opacityNav : ''"
			:style="{
				height: CustomBar + 88 + '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 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" @click="NavToDetailPage(navs)">
						{{ 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"
			: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)"
						: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,

        }
    },
    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) {
			//跳转
			this.$api.FlooryNavigateTo(item)
		},
		showDropScreenShow(){
			this.dropScreenShow = 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: 90rpx;
	padding: 20rpx 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-color: #ff5b00;
			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 10rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: $font-size-26;
			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-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: #666666;
		border-radius: 28rpx;
		&.active {
			background: #ffffff;
			border-color: #ff5b00;
			color: #ff5b00;
		}
	}
}
</style>