flat: 修复bug

This commit is contained in:
史典卓
2025-07-21 14:49:45 +08:00
parent ec2dc5f659
commit ea04387b58
17 changed files with 171 additions and 108 deletions

View File

@@ -10,6 +10,7 @@
>
<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>
@@ -17,77 +18,94 @@
</view>
</template>
<script>
export default {
data() {
return {
currentItem: 0,
tabbarList: [
{
id: 0,
text: '首页',
path: '/pages/index/index',
iconPath: '../../static/tabbar/calendar.png',
selectedIconPath: '../../static/tabbar/calendared.png',
centerItem: false,
},
{
id: 1,
text: '招聘会',
path: '/pages/careerfair/careerfair',
iconPath: '../../static/tabbar/post.png',
selectedIconPath: '../../static/tabbar/posted.png',
centerItem: false,
},
{
id: 2,
text: '',
path: '/pages/chat/chat',
iconPath: '../../static/tabbar/logo3.png',
selectedIconPath: '../../static/tabbar/logo3.png',
centerItem: true,
},
{
id: 3,
text: '消息',
path: '/pages/msglog/msglog',
iconPath: '../../static/tabbar/chat4.png',
selectedIconPath: '../../static/tabbar/chat4ed.png',
centerItem: false,
},
{
id: 4,
text: '我的',
path: '/pages/mine/mine',
iconPath: '../../static/tabbar/mine.png',
selectedIconPath: '../../static/tabbar/mined.png',
centerItem: false,
},
],
};
<script setup>
import { ref, defineProps, onMounted, computed } from 'vue';
import { useReadMsg } from '@/stores/useReadMsg';
const props = defineProps({
currentpage: {
type: Number,
required: true,
default: 0,
},
props: {
currentpage: {
type: Number,
required: true,
default: 0,
},
});
const readMsg = useReadMsg();
const currentItem = ref(0);
console.log(readMsg);
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,
},
mounted() {
this.currentItem = this.currentpage;
uni.hideTabBar();
{
id: 1,
text: '招聘会',
path: '/pages/careerfair/careerfair',
iconPath: '../../static/tabbar/post.png',
selectedIconPath: '../../static/tabbar/posted.png',
centerItem: false,
badge: readMsg.badges[1].count,
},
methods: {
changeItem(item) {
uni.switchTab({
url: item.path,
});
},
{
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%;