94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
|
<view class="bottom-tab-bar">
|
|
<view class="tab-item" v-for="(tab, index) in bottomBarList" :key="index" @click="handleTabClick(tab, index)">
|
|
<image class="tab-icon" :src="activeTab === index ? tab.hl_img : tab.img"></image>
|
|
<text class="tab-text" :style="{ color: activeTab === index ? tab.hl_color : tab.color }">{{ tab.title }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
activeTab: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
bottomBarList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getBottomBar();
|
|
},
|
|
methods: {
|
|
getBottomBar() {
|
|
uni.request({
|
|
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
|
success: (res) => {
|
|
if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
|
|
// 过滤并排序：剔除“发现”，仅保留首页、榜单、分类
|
|
const allowedTitles = ['首页', '榜单', '分类'];
|
|
this.bottomBarList = res.data.data.bottom_bar
|
|
.filter(item => allowedTitles.includes(item.title))
|
|
.sort((a, b) => b.sort - a.sort);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleTabClick(tab, index) {
|
|
if (this.activeTab === index) return;
|
|
|
|
let url = '';
|
|
if (tab.title === '首页') url = '/pages/index/index';
|
|
else if (tab.title === '榜单') url = '/pages/rank/rank';
|
|
else if (tab.title === '分类') url = '/pages/classify/classify';
|
|
|
|
if (url) {
|
|
uni.redirectTo({
|
|
url: url
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bottom-tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100rpx;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
z-index: 999;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.tab-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 20rpx;
|
|
}
|
|
</style>
|