|
|
@@ -0,0 +1,135 @@ |
|
|
|
<template> |
|
|
|
<view class="tab"> |
|
|
|
<view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)"> |
|
|
|
<img class="tab_img" :src="selectedPath == item.pagePath ? item.selectedIconPath : item.iconPath"></img> |
|
|
|
<view class="tab_text" :style="{color: selectedPath == item.pagePath ? selectedColor : color}">{{item.text}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name:'tabBar', |
|
|
|
props: { |
|
|
|
selectedPath: { // 当前选中的tab index |
|
|
|
default: '/pages/home' |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
color: "#8c8c8c", |
|
|
|
selectedColor: "#3398DC", |
|
|
|
list: [], |
|
|
|
// currentIndex:0, |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
"$store.state.loginUser":{ |
|
|
|
handler:function(newVal,oldVal){ |
|
|
|
this.setList(newVal.Description) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// let index = this.list.findIndex(e=>e.pagePath==this.selectedPath) |
|
|
|
// this.currentIndex = index; |
|
|
|
let userInfo = this.GET_GLOBAL("loginUser"); |
|
|
|
if(!userInfo)return |
|
|
|
this.setList(userInfo.Description) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
setList(role){ |
|
|
|
if (role=="学生") { |
|
|
|
this.list = [ |
|
|
|
{ |
|
|
|
"index":0, |
|
|
|
"pagePath": "/pages/home", |
|
|
|
"iconPath": "static/img-bar/tab-home.png", |
|
|
|
"selectedIconPath": "static/img-bar/tab-home-active.png", |
|
|
|
"text": "首页" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"index":3, |
|
|
|
"pagePath": "/pages/my", |
|
|
|
"iconPath": "static/img-bar/tab-my.png", |
|
|
|
"selectedIconPath": "static/img-bar/tab-my-active.png", |
|
|
|
"text": "我的" |
|
|
|
} |
|
|
|
] |
|
|
|
}else{ |
|
|
|
this.list = [ |
|
|
|
{ |
|
|
|
"index":0, |
|
|
|
"pagePath": "/pages/home", |
|
|
|
"iconPath": "static/img-bar/tab-home.png", |
|
|
|
"selectedIconPath": "static/img-bar/tab-home-active.png", |
|
|
|
"text": "首页" |
|
|
|
}, |
|
|
|
// { |
|
|
|
// "index":1, |
|
|
|
// "pagePath": "/pages/msg", |
|
|
|
// "iconPath": "static/img-bar/tab-msg.png", |
|
|
|
// "selectedIconPath": "static/img-bar/tab-msg-active.png", |
|
|
|
// "text": "消息" |
|
|
|
// }, |
|
|
|
{ |
|
|
|
"index":2, |
|
|
|
"pagePath": "/pages/contact", |
|
|
|
"iconPath": "static/img-bar/tab-contact.png", |
|
|
|
"selectedIconPath": "static/img-bar/tab-contact-active.png", |
|
|
|
"text": "通讯录" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"index":3, |
|
|
|
"pagePath": "/pages/my", |
|
|
|
"iconPath": "static/img-bar/tab-my.png", |
|
|
|
"selectedIconPath": "static/img-bar/tab-my-active.png", |
|
|
|
"text": "我的" |
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
switchTab(item, index) { |
|
|
|
// this.currentIndex = item.index; |
|
|
|
let url = item.pagePath; |
|
|
|
uni.switchTab({ |
|
|
|
url: url |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.tab { |
|
|
|
background: rgb(245, 245, 245); |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
height: 100rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部 |
|
|
|
border-top: 2rpx solid #CDCDCD; |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
.tab_img { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
} |
|
|
|
.tab_text { |
|
|
|
font-size: 20rpx; |
|
|
|
margin-top: 6rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |