143 lines
3.2 KiB
Vue
143 lines
3.2 KiB
Vue
<template>
|
|
<!-- header -->
|
|
<view>
|
|
<view :style="{ height: homeHeaderPaddingTop + 'px', backgroundColor }"></view>
|
|
<view :class="{leftTitle: leftTitle}"
|
|
:style="{ backgroundColor, height: homeHeaderMenuHeight + 'px' }" class="navigationBar">
|
|
<template v-if="leftTitle">
|
|
<view :style="{ color: titleColor }" class="navigationBarTitle">
|
|
{{ title ? title : '' }}
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="navigationBarBack" @click="back">
|
|
<slot name="back">
|
|
<uni-icons :color="titleColor" size="24"
|
|
type="left"></uni-icons>
|
|
</slot>
|
|
</view>
|
|
<view :style="{ color: titleColor }" class="navigationBarTitle">
|
|
{{ title }}
|
|
</view>
|
|
<view v-if="showClear" @click="clearNoReadFun" class="navigationBarIcon" :style="{ color: titleColor }">
|
|
<image src="@/static/images/clear.png" mode="" class="clear-icon"></image>
|
|
</view>
|
|
<view v-if="addWares" @click="addNewWares" class="navigationBarIcon" style="position: absolute;right: 22px;font-size: 18px">
|
|
新增
|
|
</view>
|
|
</template>
|
|
<view class="navigationBarBackExtra">
|
|
<slot name="extra">
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/* 计算标题位置 */
|
|
import {getWXStatusHeight} from "@/utils/utils";
|
|
|
|
export default {
|
|
props: {
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#317DFA'
|
|
},
|
|
title: String,
|
|
titleColor: {
|
|
type: String,
|
|
default: '#fff'
|
|
},
|
|
leftTitle: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showClear: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
//新增配件
|
|
addWares:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
mounted() {
|
|
// #ifdef MP
|
|
const {
|
|
barHeight,
|
|
barTop,
|
|
menuButtonLeft
|
|
} = getWXStatusHeight()
|
|
console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
|
|
this.homeHeaderPaddingTop = barTop || 0
|
|
this.homeHeaderMenuHeight = barHeight
|
|
this.homeHeaderMenuLeft = menuButtonLeft - 6
|
|
// #endif
|
|
},
|
|
data() {
|
|
return {
|
|
// #ifdef MP
|
|
homeHeaderPaddingTop: 0,
|
|
homeHeaderMenuHeight: 0,
|
|
homeHeaderMenuLeft: 0,
|
|
// #endif
|
|
// #ifdef APP || H5
|
|
homeHeaderPaddingTop: 20,
|
|
homeHeaderMenuHeight: 50,
|
|
homeHeaderMenuLeft: 0
|
|
// #endif
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
clearNoReadFun(){
|
|
this.$emit('clearNoRead')
|
|
},
|
|
addNewWares(){
|
|
this.$emit('addNewWares')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.navigationBar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.leftTitle {
|
|
justify-content: start;
|
|
padding-left: 28rpx;
|
|
}
|
|
|
|
.navigationBarBack {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
}
|
|
|
|
.navigationBarBackExtra {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
}
|
|
|
|
.navigationBarTitle {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
.navigationBarIcon {
|
|
display: flex;
|
|
}
|
|
.clear-icon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|