524 lines
13 KiB
Vue
524 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="common-header" :style="{ height: headerHeight + 'px' }">
|
|||
|
|
<!-- 状态栏占位 -->
|
|||
|
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
|||
|
|
|
|||
|
|
<!-- 自定义导航栏 -->
|
|||
|
|
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
|||
|
|
<!-- 左侧返回按钮 -->
|
|||
|
|
<view class="nav-left" @click="handleBack">
|
|||
|
|
<uni-icons :type="leftIcon" size="20" :color="textColor" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 标题区域 - 调整到胶囊位置 -->
|
|||
|
|
<view class="nav-title" :style="titleStyle">
|
|||
|
|
<text class="title-text" :style="{ color: textColor }">{{ title }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 右侧按钮区域 - 调整到胶囊左侧 -->
|
|||
|
|
<view class="nav-right" :style="rightButtonStyle" v-if="$slots.right">
|
|||
|
|
<slot name="right"></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 自定义渐变背景 -->
|
|||
|
|
<view class="header-bg" :style="{ background: gradientBg }"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'CommonHeader',
|
|||
|
|
props: {
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
leftIcon: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'back'
|
|||
|
|
},
|
|||
|
|
backgroundColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'transparent'
|
|||
|
|
},
|
|||
|
|
textColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#000'
|
|||
|
|
},
|
|||
|
|
theme: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'primary'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
navBarHeight: 44,
|
|||
|
|
menuButtonInfo: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
headerHeight() {
|
|||
|
|
return this.statusBarHeight + this.navBarHeight
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
gradientBg() {
|
|||
|
|
const themes = {
|
|||
|
|
primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|||
|
|
success: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
|||
|
|
warning: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
|||
|
|
error: 'linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%)',
|
|||
|
|
activity: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
|
|||
|
|
rebate: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
|
|||
|
|
newproduct: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)',
|
|||
|
|
distiller: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
|
|||
|
|
order: 'linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%)',
|
|||
|
|
shipping: 'linear-gradient(135deg, #e0c3fc 0%, #9bb5ff 100%)',
|
|||
|
|
common: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|||
|
|
}
|
|||
|
|
return themes[this.theme] || themes.primary
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
titleStyle() {
|
|||
|
|
if (!this.menuButtonInfo) return {}
|
|||
|
|
|
|||
|
|
// 计算标题位置，使其与胶囊垂直居中对齐
|
|||
|
|
const titleTop = (this.menuButtonInfo.top - this.statusBarHeight) + 'px'
|
|||
|
|
const titleHeight = this.menuButtonInfo.height + 'px'
|
|||
|
|
const titleRight = (this.menuButtonInfo.left - 20) + 'px' // 胶囊左侧留20px间距
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
top: titleTop,
|
|||
|
|
height: titleHeight,
|
|||
|
|
right: titleRight
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
rightButtonStyle() {
|
|||
|
|
if (!this.menuButtonInfo) return {}
|
|||
|
|
|
|||
|
|
// 右侧按钮定位到胶囊左侧
|
|||
|
|
const buttonTop = (this.menuButtonInfo.top - this.statusBarHeight) + 'px'
|
|||
|
|
const buttonHeight = this.menuButtonInfo.height + 'px'
|
|||
|
|
const buttonRight = (this.menuButtonInfo.left - 10) + 'px' // 胶囊左侧留10px间距
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
top: buttonTop,
|
|||
|
|
height: buttonHeight,
|
|||
|
|
right: buttonRight
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
this.initHeaderInfo()
|
|||
|
|
this.setHeaderHeightCssVar()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updated() {
|
|||
|
|
this.setHeaderHeightCssVar()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
initHeaderInfo() {
|
|||
|
|
// 获取系统信息
|
|||
|
|
const systemInfo = uni.getSystemInfoSync()
|
|||
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
|||
|
|
|
|||
|
|
// 获取胶囊按钮信息
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
try {
|
|||
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|||
|
|
// 根据胶囊按钮调整导航栏高度，确保合适的显示
|
|||
|
|
if (this.menuButtonInfo) {
|
|||
|
|
const topGap = this.menuButtonInfo.top - this.statusBarHeight
|
|||
|
|
const bottomGap = topGap
|
|||
|
|
this.navBarHeight = topGap + this.menuButtonInfo.height + bottomGap
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('获取胶囊按钮信息失败:', e)
|
|||
|
|
this.navBarHeight = 44
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
// App端适配
|
|||
|
|
this.navBarHeight = 44
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
// H5端适配
|
|||
|
|
this.navBarHeight = 44
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef MP-WEIXIN || APP-PLUS || H5
|
|||
|
|
// 其他平台使用默认值
|
|||
|
|
this.navBarHeight = 44
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 确保最小高度
|
|||
|
|
if (this.navBarHeight < 44) {
|
|||
|
|
this.navBarHeight = 44
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleBack() {
|
|||
|
|
this.$emit('back')
|
|||
|
|
uni.navigateBack({
|
|||
|
|
fail: () => {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/work/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 设置CSS变量，供其他组件使用
|
|||
|
|
setHeaderHeightCssVar() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const headerHeight = this.headerHeight
|
|||
|
|
// #ifdef H5
|
|||
|
|
document.documentElement.style.setProperty('--header-height', headerHeight + 'px')
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 为小程序和App动态设置头部间距
|
|||
|
|
this.updatePagePadding(headerHeight)
|
|||
|
|
|
|||
|
|
// 向父组件发送头部高度信息
|
|||
|
|
this.$emit('header-info', {
|
|||
|
|
headerHeight: headerHeight,
|
|||
|
|
statusBarHeight: this.statusBarHeight,
|
|||
|
|
navBarHeight: this.navBarHeight
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 动态更新页面内容的padding-top
|
|||
|
|
updatePagePadding(headerHeight) {
|
|||
|
|
// #ifdef H5
|
|||
|
|
try {
|
|||
|
|
const cssSelectors = [
|
|||
|
|
'.page-content',
|
|||
|
|
'.activity-content',
|
|||
|
|
'.rebate-content',
|
|||
|
|
'.newproduct-content',
|
|||
|
|
'.distiller-content',
|
|||
|
|
'.order-content',
|
|||
|
|
'.shipping-content',
|
|||
|
|
'.activity-container',
|
|||
|
|
'.rebate-container',
|
|||
|
|
'.newproduct-container',
|
|||
|
|
'.distiller-container',
|
|||
|
|
'.order-container',
|
|||
|
|
'.shipping-container',
|
|||
|
|
'.add-content',
|
|||
|
|
'.edit-content',
|
|||
|
|
'.detail-content',
|
|||
|
|
'.batch-content',
|
|||
|
|
'.transfer-content',
|
|||
|
|
'.history-content',
|
|||
|
|
'.logistics-content',
|
|||
|
|
'.destroy-container .page-content'
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 创建动态样式
|
|||
|
|
const dynamicStyle = cssSelectors.map(selector => {
|
|||
|
|
return `${selector} { padding-top: ${headerHeight}px !important; }`
|
|||
|
|
}).join('\n')
|
|||
|
|
|
|||
|
|
// 添加或更新style标签
|
|||
|
|
let styleElement = document.getElementById('common-header-dynamic-style')
|
|||
|
|
if (!styleElement) {
|
|||
|
|
styleElement = document.createElement('style')
|
|||
|
|
styleElement.id = 'common-header-dynamic-style'
|
|||
|
|
document.head.appendChild(styleElement)
|
|||
|
|
}
|
|||
|
|
styleElement.textContent = dynamicStyle
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('更新页面间距失败:', e)
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|||
|
|
// 小程序和App中通过事件通知父页面更新样式
|
|||
|
|
uni.$emit('header-height-updated', {
|
|||
|
|
headerHeight: headerHeight,
|
|||
|
|
statusBarHeight: this.statusBarHeight,
|
|||
|
|
navBarHeight: this.navBarHeight
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 设置全局数据供其他组件使用
|
|||
|
|
try {
|
|||
|
|
const app = getApp()
|
|||
|
|
if (app) {
|
|||
|
|
app.globalData = app.globalData || {}
|
|||
|
|
app.globalData.headerHeight = headerHeight
|
|||
|
|
app.globalData.statusBarHeight = this.statusBarHeight
|
|||
|
|
app.globalData.navBarHeight = this.navBarHeight
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('设置全局头部高度失败:', e)
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.common-header {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
.header-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-bar {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-title {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
left: 120rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
.title-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-align: center;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
max-width: 400rpx;
|
|||
|
|
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-right {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
// 右侧按钮样式美化
|
|||
|
|
::v-deep .uni-icons {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255, 255, 255, 0.15);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适配不同主题的文字颜色
|
|||
|
|
.common-header.dark {
|
|||
|
|
.nav-left,
|
|||
|
|
.nav-right ::v-deep .uni-icons {
|
|||
|
|
background: rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适配不同设备
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
.common-header {
|
|||
|
|
.nav-left,
|
|||
|
|
.nav-right ::v-deep .uni-icons {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
/* #ifdef MP-WEIXIN */
|
|||
|
|
.common-header {
|
|||
|
|
.nav-title {
|
|||
|
|
// 小程序中的标题位置微调
|
|||
|
|
.title-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- 全局样式，为其他页面提供头部间距 -->
|
|||
|
|
<style lang="scss">
|
|||
|
|
// 为页面内容提供合适的顶部间距
|
|||
|
|
.page-content,
|
|||
|
|
.activity-content,
|
|||
|
|
.rebate-content,
|
|||
|
|
.newproduct-content,
|
|||
|
|
.distiller-content,
|
|||
|
|
.order-content,
|
|||
|
|
.shipping-content {
|
|||
|
|
padding-top: var(--header-height, 88px);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 为使用CommonHeader的页面容器提供头部间距
|
|||
|
|
.activity-container,
|
|||
|
|
.rebate-container,
|
|||
|
|
.newproduct-container,
|
|||
|
|
.distiller-container,
|
|||
|
|
.order-container,
|
|||
|
|
.shipping-container {
|
|||
|
|
padding-top: var(--header-height, 88px);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加和编辑页面的内容区域
|
|||
|
|
.add-content,
|
|||
|
|
.edit-content,
|
|||
|
|
.detail-content,
|
|||
|
|
.batch-content,
|
|||
|
|
.transfer-content,
|
|||
|
|
.history-content,
|
|||
|
|
.logistics-content {
|
|||
|
|
padding-top: var(--header-height, 88px);
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
min-height: calc(100vh - var(--header-height, 88px));
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 销毁酒类页面特殊处理
|
|||
|
|
.destroy-container .page-content {
|
|||
|
|
padding-top: var(--header-height, 88px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在小程序中的特殊处理 - 使用计算的实际高度
|
|||
|
|
/* #ifdef MP-WEIXIN */
|
|||
|
|
.page-content,
|
|||
|
|
.activity-content,
|
|||
|
|
.rebate-content,
|
|||
|
|
.newproduct-content,
|
|||
|
|
.distiller-content,
|
|||
|
|
.order-content,
|
|||
|
|
.shipping-content,
|
|||
|
|
.activity-container,
|
|||
|
|
.rebate-container,
|
|||
|
|
.newproduct-container,
|
|||
|
|
.distiller-container,
|
|||
|
|
.order-container,
|
|||
|
|
.shipping-container {
|
|||
|
|
padding-top: 96px; // 状态栏(44px) + 导航栏(52px) 的常见值
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-content,
|
|||
|
|
.edit-content,
|
|||
|
|
.detail-content,
|
|||
|
|
.batch-content,
|
|||
|
|
.transfer-content,
|
|||
|
|
.history-content,
|
|||
|
|
.logistics-content {
|
|||
|
|
padding-top: 96px; // 状态栏(44px) + 导航栏(52px) 的常见值
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.destroy-container .page-content {
|
|||
|
|
padding-top: 96px; // 状态栏(44px) + 导航栏(52px) 的常见值
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
// 在App中的特殊处理
|
|||
|
|
/* #ifdef APP-PLUS */
|
|||
|
|
.page-content,
|
|||
|
|
.activity-content,
|
|||
|
|
.rebate-content,
|
|||
|
|
.newproduct-content,
|
|||
|
|
.distiller-content,
|
|||
|
|
.order-content,
|
|||
|
|
.shipping-content,
|
|||
|
|
.activity-container,
|
|||
|
|
.rebate-container,
|
|||
|
|
.newproduct-container,
|
|||
|
|
.distiller-container,
|
|||
|
|
.order-container,
|
|||
|
|
.shipping-container {
|
|||
|
|
padding-top: calc(44px + var(--status-bar-height, 20px));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-content,
|
|||
|
|
.edit-content,
|
|||
|
|
.detail-content,
|
|||
|
|
.batch-content,
|
|||
|
|
.transfer-content,
|
|||
|
|
.history-content,
|
|||
|
|
.logistics-content {
|
|||
|
|
padding-top: calc(44px + var(--status-bar-height, 20px));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.destroy-container .page-content {
|
|||
|
|
padding-top: calc(44px + var(--status-bar-height, 20px));
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
</style>
|