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.
133 lines
2.9 KiB
133 lines
2.9 KiB
<template> |
|
<view :class="setClass"> |
|
<view class="tabber" v-if="isTab"> |
|
<view |
|
:class="{ tab: true, isActive: tab.code == selected }" |
|
v-for="(tab, index) in tabbers" |
|
:key="index" |
|
@click="changeTab(tab)" |
|
> |
|
<u--image |
|
:src="selected == tab.code ? tab.selectIcon : tab.icon" |
|
width="42" |
|
height="42" |
|
v-if="tab.type == 'middle'" |
|
></u--image> |
|
<u--image |
|
:src="selected == tab.code ? tab.selectIcon : tab.icon" |
|
width="24" |
|
height="24" |
|
v-else |
|
></u--image> |
|
<view :class="[tab.code == selected ? 'isActive' : 'name']"> |
|
{{ tab.name }} |
|
</view> |
|
</view> |
|
</view> |
|
<view :style="{ height: isFit ? '68rpx' : '24rpx' }"></view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
selected: Number, |
|
isTab: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
tabbers: [ |
|
{ |
|
name: '首页', |
|
path: '/pages/index', |
|
icon: '/static/images/tabbers/home.png', |
|
selectIcon: '/static/images/tabbers/home-select.png', |
|
code: 0 |
|
}, |
|
{ |
|
name: '执法', |
|
path: '/pages/task', |
|
icon: '/static/images/tabbers/task.png', |
|
selectIcon: '/static/images/tabbers/task-select.png', |
|
code: 1 |
|
}, |
|
{ |
|
name: '', |
|
path: '/pages/chat', |
|
icon: '/static/images/tabbers/chat.png', |
|
selectIcon: '/static/images/tabbers/chat-select.png', |
|
type: 'middle', |
|
code: 2 |
|
}, |
|
{ |
|
name: '企业', |
|
path: '/pages/enterprise', |
|
icon: '/static/images/tabbers/position.png', |
|
selectIcon: '/static/images/tabbers/position-select.png', |
|
code: 3 |
|
}, |
|
{ |
|
name: '我的', |
|
path: '/pages/owner', |
|
icon: '/static/images/tabbers/user.png', |
|
selectIcon: '/static/images/tabbers/user-select.png', |
|
code: 4 |
|
} |
|
] |
|
} |
|
}, |
|
computed: { |
|
setClass() { |
|
return this.$props.isTab ? 'cs-tabber-container' : 'noTab' |
|
}, |
|
isFit() { |
|
return uni.getStorageSync('SYSTEM').includes('iOS') |
|
} |
|
}, |
|
methods: { |
|
changeTab(tab) { |
|
uni.switchTab({ |
|
url: tab.path, |
|
success: () => { |
|
this.isActive = tab.code |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.cs-tabber-container { |
|
background-color: #fff; |
|
} |
|
.noTab { |
|
} |
|
.tabber { |
|
display: flex; |
|
flex-flow: row nowrap; |
|
align-items: center; |
|
justify-content: space-around; |
|
border-top: 2rpx solid #f1f1f4; |
|
padding: 24rpx 48rpx 0px 48rpx; |
|
.tab { |
|
display: flex; |
|
flex-flow: column nowrap; |
|
justify-content: center; |
|
align-items: center; |
|
transition: 0.2s all; |
|
gap: 4rpx; |
|
} |
|
.isActive { |
|
color: #22c55e; |
|
font-weight: 500; |
|
} |
|
.name { |
|
color: #99a1b7; |
|
font-weight: 400; |
|
} |
|
} |
|
</style>
|
|
|