134 lines
2.6 KiB
Vue
134 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<view class="tab-header">
|
||
|
|
<view class="left" >
|
||
|
|
<image v-show="isShowBack==''" @click="customNavigateBack" src="@/static/img/back.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<view class="center">
|
||
|
|
{{title}}
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="right" style="justify-content: flex-end;">
|
||
|
|
<!-- 手环归还-->
|
||
|
|
<view class="text-btn" v-show="back" @click="backBracelet">
|
||
|
|
<image src="@/static/img/getBack.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<!-- 设备筛选 -->
|
||
|
|
<view class="text-btn" v-show="filte" @click="filter">
|
||
|
|
<image src="@/static/img/filterIcon.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<!-- 设备新增 -->
|
||
|
|
<view class="text-btn" v-show="add" @click="addItme">
|
||
|
|
<image src="@/static/img/addIcon.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "tabHeader",
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
default: '',
|
||
|
|
require: true
|
||
|
|
},
|
||
|
|
isShowBack: {
|
||
|
|
default: '',
|
||
|
|
require: true
|
||
|
|
},
|
||
|
|
add: {
|
||
|
|
default: '',
|
||
|
|
require: true
|
||
|
|
},
|
||
|
|
filte: {
|
||
|
|
default: '',
|
||
|
|
require: true
|
||
|
|
},
|
||
|
|
back: {
|
||
|
|
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) // 返回到已存在的页面
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//筛选设备
|
||
|
|
filter() {
|
||
|
|
this.$emit('filter')
|
||
|
|
},
|
||
|
|
//新增设备
|
||
|
|
addItme() {
|
||
|
|
this.$emit('addItme')
|
||
|
|
},
|
||
|
|
//手环归还
|
||
|
|
backBracelet() {
|
||
|
|
this.$emit('backBracelet')
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.tab-header {
|
||
|
|
z-index: 9998;
|
||
|
|
position: fixed;
|
||
|
|
top: 4vh;
|
||
|
|
width: 100%;
|
||
|
|
height: 88upx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 32upx;
|
||
|
|
font-weight: 600;
|
||
|
|
// background-image: url('@/static/img/tabBg.png') !important;
|
||
|
|
// background-repeat: no-repeat;
|
||
|
|
// background-size: 100%;
|
||
|
|
|
||
|
|
.left,
|
||
|
|
.right {
|
||
|
|
margin: 0 20upx;
|
||
|
|
width: 20%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.text-btn {
|
||
|
|
padding-top: 10rpx;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #333333;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
text-align: center;
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 44upx;
|
||
|
|
height: 44upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|