158 lines
4.0 KiB
Vue
158 lines
4.0 KiB
Vue
<template>
|
|
<view class="tabbar_container">
|
|
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
|
|
<view
|
|
class="item-top"
|
|
:class="[
|
|
item.centerItem ? 'center-item-img ' : '',
|
|
item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
|
|
]"
|
|
>
|
|
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
|
|
</view>
|
|
<view class="badge" v-if="item.badge">{{ item.badge }}</view>
|
|
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
|
<text>{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, onMounted, computed } from 'vue';
|
|
import { useReadMsg } from '@/stores/useReadMsg';
|
|
const props = defineProps({
|
|
currentpage: {
|
|
type: Number,
|
|
required: true,
|
|
default: 0,
|
|
},
|
|
});
|
|
const readMsg = useReadMsg();
|
|
const currentItem = ref(0);
|
|
const tabbarList = computed(() => [
|
|
{
|
|
id: 0,
|
|
text: '首页',
|
|
path: '/pages/index/index',
|
|
iconPath: '../../static/tabbar/calendar.png',
|
|
selectedIconPath: '../../static/tabbar/calendared.png',
|
|
centerItem: false,
|
|
badge: readMsg.badges[0].count,
|
|
},
|
|
{
|
|
id: 1,
|
|
text: '招聘会',
|
|
path: '/pages/careerfair/careerfair',
|
|
iconPath: '../../static/tabbar/post.png',
|
|
selectedIconPath: '../../static/tabbar/posted.png',
|
|
centerItem: false,
|
|
badge: readMsg.badges[1].count,
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '',
|
|
path: '/pages/chat/chat',
|
|
iconPath: '../../static/tabbar/logo3.png',
|
|
selectedIconPath: '../../static/tabbar/logo3.png',
|
|
centerItem: true,
|
|
badge: readMsg.badges[2].count,
|
|
},
|
|
{
|
|
id: 3,
|
|
text: '消息',
|
|
path: '/pages/msglog/msglog',
|
|
iconPath: '../../static/tabbar/chat4.png',
|
|
selectedIconPath: '../../static/tabbar/chat4ed.png',
|
|
centerItem: false,
|
|
badge: readMsg.badges[3].count,
|
|
},
|
|
{
|
|
id: 4,
|
|
text: '我的',
|
|
path: '/pages/mine/mine',
|
|
iconPath: '../../static/tabbar/mine.png',
|
|
selectedIconPath: '../../static/tabbar/mined.png',
|
|
centerItem: false,
|
|
badge: readMsg.badges[4].count,
|
|
},
|
|
]);
|
|
|
|
onMounted(() => {
|
|
uni.hideTabBar();
|
|
currentItem.value = props.currentpage;
|
|
});
|
|
|
|
const changeItem = (item) => {
|
|
uni.switchTab({
|
|
url: item.path,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.badge {
|
|
position: absolute;
|
|
top: 4rpx;
|
|
right: 20rpx;
|
|
min-width: 30rpx;
|
|
height: 30rpx;
|
|
background-color: red;
|
|
color: #fff;
|
|
font-size: 18rpx;
|
|
border-radius: 15rpx;
|
|
text-align: center;
|
|
line-height: 30rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
.tabbar_container {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5rpx 0;
|
|
overflow: hidden;
|
|
// position: fixed;
|
|
// bottom: 0rpx;
|
|
// left: 0rpx;
|
|
// box-shadow: 0 0 5px #999;
|
|
// padding-bottom: env(safe-area-inset-bottom);
|
|
// z-index: 998;
|
|
.tabbar_item {
|
|
width: 33.33%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
color: #5e5f60;
|
|
.item-top {
|
|
width: 44.44rpx;
|
|
height: 44.44rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.item-bottom {
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
.center-item-img {
|
|
// position: absolute;
|
|
// top: 0rpx;
|
|
// left: 50%;
|
|
// transform: translate(-50%, 0);
|
|
width: 108rpx !important;
|
|
height: 98rpx !important;
|
|
}
|
|
.item-active {
|
|
color: #256bfa;
|
|
}
|
|
</style>
|