106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<template>
|
|
<!-- #ifndef MP-TOUTIAO -->
|
|
<view class="app-tab-bar">
|
|
<view class="tab-bar-item" @tap="switchTab('pages/index/index')">
|
|
<image class="tab-icon" :src="selected === 0 ? '/static/tab/home_active.png' : '/static/tab/home.png'" mode="aspectFit"></image>
|
|
<text class="tab-text" :class="{ active: selected === 0 }">首页</text>
|
|
</view>
|
|
|
|
<view class="tab-bar-item" @tap="switchTab('pages/shop/index')">
|
|
<image class="tab-icon" :src="selected === 1 ? '/static/tab/shop_active.png' : '/static/tab/shop.png'" mode="aspectFit"></image>
|
|
<text class="tab-text" :class="{ active: selected === 1 }">商城</text>
|
|
</view>
|
|
|
|
<view class="tab-bar-item" @tap="switchTab('pages/cabinet/index')">
|
|
<image class="tab-icon" :src="selected === 2 ? '/static/tab/box_active.png' : '/static/tab/box.png'" mode="aspectFit"></image>
|
|
<text class="tab-text" :class="{ active: selected === 2 }">盒柜</text>
|
|
</view>
|
|
|
|
<view class="tab-bar-item" @tap="switchTab('pages/mine/index')">
|
|
<image class="tab-icon" :src="selected === 3 ? '/static/tab/profile_active.png' : '/static/tab/profile.png'" mode="aspectFit"></image>
|
|
<text class="tab-text" :class="{ active: selected === 3 }">我的</text>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// #ifndef MP-TOUTIAO
|
|
data() {
|
|
return {
|
|
selected: 0 // 默认选中"首页"
|
|
}
|
|
},
|
|
mounted() {
|
|
this.updateSelected()
|
|
},
|
|
onShow() {
|
|
this.updateSelected()
|
|
},
|
|
methods: {
|
|
updateSelected() {
|
|
const pages = getCurrentPages()
|
|
if (pages.length > 0) {
|
|
const currentPage = pages[pages.length - 1]
|
|
const route = currentPage.route
|
|
|
|
if (route === 'pages/index/index') this.selected = 0
|
|
else if (route === 'pages/shop/index') this.selected = 1
|
|
else if (route === 'pages/cabinet/index') this.selected = 2
|
|
else if (route === 'pages/mine/index') this.selected = 3
|
|
}
|
|
},
|
|
switchTab(url) {
|
|
uni.switchTab({
|
|
url: '/' + url
|
|
})
|
|
}
|
|
}
|
|
// #endif
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* #ifndef MP-TOUTIAO */
|
|
.app-tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
z-index: 999;
|
|
}
|
|
|
|
.tab-bar-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.tab-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 22rpx;
|
|
color: #7A7E83;
|
|
|
|
&.active {
|
|
color: #007AFF;
|
|
}
|
|
}
|
|
/* #endif */
|
|
</style>
|