109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
Vue
<template>
|
|
<view class="hz-header">
|
|
<view class="left">
|
|
<image @click="customNavigateBack" src="@/static/back.png" mode=""></image>
|
|
</view>
|
|
<view class="center">
|
|
{{title}}
|
|
</view>
|
|
<!-- authority 为权限 -->
|
|
<view class="right">
|
|
<image v-for="item in imageList" :key="index" :src="item" v-show="item.authority"></image>
|
|
<view class="text-btn" v-show="btnName" @click="optionTab">
|
|
{{btnName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "hzHeader",
|
|
props: {
|
|
title: {
|
|
default: '',
|
|
require: true
|
|
},
|
|
imageList: {
|
|
type: Array,
|
|
default: function() {
|
|
return []; // 返回一个空数组作为默认值
|
|
},
|
|
},
|
|
btnName: {
|
|
default: '',
|
|
require: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
customNavigateBack() {
|
|
// 自定义返回逻辑
|
|
const pages = getCurrentPages(); // 获取页面栈
|
|
const len = pages.length;
|
|
let backPage = ''; // 要返回的页面路径
|
|
for (let i = len - 2; i >= 0; i--) {
|
|
// 从倒数第二个页面开始遍历，找到第一个不是当前页面的页面
|
|
if (pages[i].route !== 'pages/A/A') {
|
|
backPage = pages[i].route;
|
|
break;
|
|
}
|
|
}
|
|
if (backPage) {
|
|
uni.navigateBack({
|
|
delta: len - 1 - pages.findIndex(page => page.route === backPage) // 返回到已存在的页面
|
|
});
|
|
}
|
|
},
|
|
optionTab() {
|
|
this.$emit('optionTab')
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.hz-header {
|
|
z-index: 9998;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 88upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32upx;
|
|
font-weight: 600;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-image: url('@/static/pageBack.png') !important;
|
|
|
|
.left,
|
|
.right {
|
|
margin: 0 20upx;
|
|
width: 15%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.text-btn {
|
|
font-size: 28upx;
|
|
color: #333333;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
width: 70%;
|
|
}
|
|
|
|
image {
|
|
width: 44upx;
|
|
height: 44upx;
|
|
}
|
|
}
|
|
</style> |