uniapp-hainan/components/lf-nav/lf-nav.vue

<template>
	<view>
		<view :style="{marginBottom: spreadOut ? headHeight + 'px' : '0px'}">
			<view :class="{head: true, 'border-b': boderBottom}" :style="{height: headHeight + 'px', background: bgColor}">
			 <block v-if="diy">
				 <view class="diy-head" :style="{'top': headHeight - 38 + 'px'}">
					 <slot></slot>
				 </view>
			 </block>
			 <block v-else>
				 <view class="head-nav" :style="{'top': headHeight - 40 + 'px'}" v-if="showIcon">
					<text class="lf-iconfont icon-daifukuan font-40size" @click="clickDropOut"></text>
					<text class="lf-iconfont icon-sousuo font-40size" @click="clickHome"></text>
				  </view>
				  <view class="title-box" :style="{'margin': headHeight - 36 + 'px auto 0'}" @click="goSearch()">
					<view v-if="search" class="search-father">
						<u-icon name="search" class="search-icon" style="color: #777;"></u-icon>
						<input class="search" placeholder-style="color: #777" placeholder="搜你想要的" confirm-type="search" v-model="value" @confirm="onSearch"/>
					</view>
					<text class="font-30size" :style="{color: titleColor}" v-else>{{ title }}</text>
				  </view>
			 </block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String, // 标题
				default: ''
			},
			showIcon: {
				type: Boolean, // 是否显示左侧操作菜单
				default: false
			},
			bgColor: {
				type: String, // head背景颜色
				default: '#f8f8f8'
			},
			titleColor: {
				type: String, // 标题字体颜色
				default: '#1d1d1d'
			},
			spreadOut: {
				type: Boolean, // 内容是否自动撑开，该组件悬浮了，原有的dom不再占用位置，如果需要占用值为true
				default: true
			},
			search: {
				type: Boolean, // 是否显示搜索输入框
				default: false
			},
			diy: {
				type: Boolean, // 自定义内容，开启后title，showIcon，search均都不生效
				default: false
			},
			backInquiry: {
				type: Boolean, // 点击返回按钮后是否弹出询问弹窗，showIcon为true时生效
				default: false
			},
			boderBottom: {
				type: Boolean, // 是否显示底部边框线
				default: false
			}
		},
		data() {
			return {
				headHeight: 66, // 头部导航高度
				value: ''
			};
		},
		created(){
			this.getSystemInfo();
		},
		methods: {
			goSearch() {
				console.log(1)
				uni.redirectTo({
					url: '/pages/search/search'
				})
			},
			// 获取手机高度
			getSystemInfo(){
				let result = uni.getSystemInfoSync();
				this.headHeight = result.statusBarHeight + 46;
				this.$emit('changeHeight', this.headHeight);
			},
			// 监听返回
			clickDropOut(event){
				if(this.backInquiry){
					uni.showModal({
						title: '温馨提示',
						content: '确定离开此页面吗？',
						success: result => {
							if(result.confirm){
								this.$back();
							}
						}
					})
				}else{
					this.$back();
				}
			},
			$back(){
				// #ifdef H5
				let pages = getCurrentPages();
				if(pages.length <= 1){
					uni.redirectTo({
						url: '/pages/index/index/index'
					})
					return;
				}
				// #endif
				uni.navigateBack();
			},
			// 监听回到首页
			clickHome(){
				uni.reLaunch({
					url: '/pages/index/index/index'
				})
			},
			// 搜索
			onSearch(event){
				this.$emit('search', event.detail.value);
			}
		}
	}
</script>

<style scoped lang="scss">
.search-father {
	display: flex;
	position: relative;
}
.font-40size{
	font-size: 40rpx;
}
.font-30size{
	font-size: 30rpx;
}
.border-b{
	border-bottom: 1rpx solid #e5e5e5;
}
.head{
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  transition: all .2;
}
.head .head-nav{
  position: absolute;
  left: 2vw;
  cursor: pointer;
  width: 130rpx;
  background-color: #FFFFFF;
  border: 1rpx solid #dcd3d5;
  border-radius: 30rpx;
  height: 60rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12rpx;
}
.head .head-nav::after{
	position: absolute;
	content: '';
	width: 2rpx;
	height: 40rpx;
	background-color: #f7f7f7;
	left: 50%;
	top: calc(50% - 20rpx);
}
.title-box{
	max-width: 49%;
	height: 50rpx;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.search{
	width: 344rpx;
	height: 50rpx;
	background-color: rgba(255,255,255,0.5);
	color: #777;
	border-radius: 30rpx;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	padding: 0 50rpx;
	font-size: 26rpx;
}

/deep/.input-placeholder{
	color: #777;
	font-size: 40rpx!important;
}

.search-icon {
	position: absolute;
	left: 24rpx;
	top: 12rpx;
}

.diy-head{
	position: absolute;
	left: 2vw;
	max-width: 70%;
	height: 50rpx;
	display: flex;
}
</style>