uniapp-qxk/components/lf-header.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-fanhui font-43size" @click="clickDropOut"></text>
					<text class="lf-iconfont icon-shouye font-30size" @click="clickHome"></text>
				  </view>
				  <view class="title-box" :style="{'margin': headHeight - 36 + 'px auto 0'}">
					<!-- <input class="search" placeholder="搜你想要的" confirm-type="search" v-model="value" @confirm="onSearch" v-if="search" /> -->
					<view class="search" v-if="search">
						<u-search placeholder="搜你想要的" bg-color="#F4F8F8" 
							:height="50" :show-action="false" 
							:disabled="true" 
							@click="searchClick">
						</u-search>
					</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
			},
			backDiy: {
				type: Boolean, // 点击返回按钮后是否执行自定义方法，优先级低于backInquiry
				default: false
			},
			backCallback: {
				type: Function // 返回执行的自定义方法
			},
			boderBottom: {
				type: Boolean, // 是否显示底部边框线
				default: false
			}
		},
		data() {
			return {
				headHeight: 66, // 头部导航高度
				value: ''
			};
		},
		created(){
			this.getSystemInfo();
		},
		methods: {
			// 获取手机高度
			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{
					if(this.backDiy){
						this.$emit('backCallback');
					}else{
						this.$back();
					}
				}
			},
			$back(){
				let pages = getCurrentPages();
				if(pages.length <= 1){
					uni.redirectTo({
						url: '/pages/index/index/index'
					})
					return;
				}
				uni.navigateBack();
			},
			// 监听回到首页
			clickHome(){
				uni.reLaunch({
					url: '/pages/index/index/index'
				})
			},
			// 搜索
			onSearch(event){
				this.$emit('search', event.detail.value);
			},
			searchClick(){
				this.$url('/pages/shop/search');
			}
		}
	}
</script>

 <style lang="scss" scoped>
.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 .2s;
}
.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>text{
	display: inline-block;
	width: 50%;
	height: 100%;
	line-height: 57rpx;
}
.head .head-nav>text:nth-child(1){
	padding-left: 12rpx;
}
.head .head-nav>text:nth-child(2){
	text-align: right;
	padding-right: 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: 228rpx;
	height: 50rpx;
	margin: 0 auto;
	text-align: left;
	font-size: 24rpx;
	/* background-color: #f0f0f0;
	color: #9a9a9a;
	border-radius: 30rpx;
	box-sizing: border-box;
	padding: 0 20rpx; */
}

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