CBB3/components/ui-header/index.vue

<template>
	<view :class="divClass">
		<view class="ph">
			<view v-if="isBack" class="ph-img" @tap="backClick()">
				<image v-if="backIcon == 'back'" mode="widthFix" src="./img/back_brown.png"></image>
				<image v-if="backIcon == 'white'" mode="widthFix" src="./img/while_brown.png"></image>
			</view>  
			<view class="ph-title" :style="titleStyle">{{title}}</view>
			<view class="ph-right fx-r fx-bc" v-if="isRenwu" @click="intoTaskListClick()">
				<image src="./img/liebiao.png"></image>
				<view class="phr-name">任务列表</view>
			</view>
			
			<view class="ph-right fx-r fx-bc" v-if="isSearch" @click="intoSearchClick()">
				<image src="/static/img/search_black.png"></image>
				<view class="phr-name"></view>
			</view>
			
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: mapState(['user']),
		name: 'index',
		props: {
			title: {
				type: String,
				default: "辣物"
			},
			backIcon: {
				type: String,
				default: "back"
			},
			divClass: {
				type: String,
				default: "page-header"
			},
			titleStyle: {
				type: String,
				default: ""
			},
			isBack: {
				type: Boolean,
				default: false
			},
			isRenwu: {
				type: Boolean,
				default: false
			},
			isSearch:{
				type: Boolean,  
				default: false
			}
		},
		data() {
			return {

			}
		},

		mounted() {  

		},
		methods: {
			backClick() {  
				uni.navigateBack({
					delta: 1,
				})
			},
			intoTaskListClick() {
				this.$emit('onTask',{});
			},
			intoSearchClick:function(){
				this.$emit('onSearch',{});
			}
			
		}
	};
</script>

<style>
	.page-header {
		background: #fff;
		z-index: 999999;
		position: fixed;
		left: 0;
		right: 0;
		box-sizing: border-box;
	}

	.ph {
		padding: 44px 15px 0px;
		height: 46px;
		display: flex;
		align-items: center;
	}

	.ph-img {
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		position: absolute;
		z-index: 99;
	}

	.ph-img image {
		width: 10px;
		height: 10px;
	}

	.ph-title {
		width: calc(100% - 44px);
		height: 46px;
		line-height: 46px;
		text-align: center;
		color: #3F3E3E;
		font-size: 18px;
		font-weight: 600;
		position: absolute;
	}

	.ph-right {
		margin-left: auto;
		position: absolute;
		right: 15px;
		text-align: center;
		color: #333;
	}

	.ph-right image {
		width: 14px;
		height: 14px;
	}

	.phr-name {
		color: #3F3E3E;
		font-size: 14px;
		margin-left: 4px;
	}
</style>