init

components/tabbar/midell-box.vue

@@ -0,0 +1,157 @@
+<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>