You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.6 KiB
116 lines
2.6 KiB
<template> |
|
<view class="tab-bar"> |
|
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)"> |
|
<image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image> |
|
<view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "tabbar", |
|
props: { |
|
//从父级继承过来的属性 需要在父级中使用:pagePath='pagePath', |
|
pagePath: String, |
|
selected: { // 当前选中的tab index |
|
type: Number, |
|
default: 0 |
|
}, |
|
}, |
|
data() { |
|
return { |
|
isSupervisor: false, |
|
shenfen: '', |
|
color: "#333333", |
|
selectedColor: "#317aff", |
|
list: [] |
|
} |
|
}, |
|
created() { |
|
let roles = uni.getStorageSync("user").roles |
|
let isSupervisor = roles.find(item => { |
|
return item.name.indexOf('检查') != -1 |
|
}) |
|
isSupervisor ? this.isSupervisor = true : this.isSupervisor = false |
|
this.shenfen = uni.getStorageSync("user").organizationLevel |
|
}, |
|
|
|
mounted() { |
|
//救援站或者检查员 |
|
if (this.shenfen == 'squadron' || (this.shenfen == 'battalion' && this.isSupervisor)) { |
|
this.list = [{ |
|
"pagePath": "/pages/index/index", |
|
"iconPath": "/static/tab/43251.png", |
|
"selectedIconPath": "/static/tab/4325.png", |
|
"text": "工作任务" |
|
}, |
|
{ |
|
"pagePath": "/pages/task/taskapply", |
|
"iconPath": "/static/tab/43281.png", |
|
"selectedIconPath": "/static/tab/4328.png", |
|
"text": "申请" |
|
}, |
|
{ |
|
"pagePath": "/pages/task/taskreceive", |
|
"iconPath": "/static/tab/43281.png", |
|
"selectedIconPath": "/static/tab/4328.png", |
|
"text": "领取" |
|
}, |
|
{ |
|
"pagePath": "/pages/user/user", |
|
"iconPath": "/static/tab/user.png", |
|
"selectedIconPath": "/static/tab/user1.png", |
|
"text": "我的" |
|
} |
|
] |
|
} |
|
}, |
|
methods: { |
|
switchTab(item, index) { |
|
console.log("item", item) |
|
console.log("index", index) |
|
let url = item.pagePath; |
|
uni.switchTab({ |
|
url |
|
}) |
|
|
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.tab-bar { |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 999; |
|
height: 100rpx; |
|
background: white; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部 |
|
z-index: 999; |
|
.tab-bar-item { |
|
flex: 1; |
|
text-align: center; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
flex-direction: column; |
|
|
|
.tab_img { |
|
width: 37rpx; |
|
height: 41rpx; |
|
} |
|
|
|
.tab_text { |
|
font-size: 20rpx; |
|
margin-top: 9rpx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|