<template>
|
<view class="tabbar-wrapper">
|
<view class="custom-tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
|
<view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item)">
|
<image class="tabbar-icon" :src="currentIndex === index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
|
<text class="tabbar-text" :class="{ active: currentIndex === index }">{{ item.text }}</text>
|
</view>
|
</view>
|
<view class="tabbar-placeholder" :style="{ height: '100px' }"></view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
name: 'CustomTabbar',
|
data() {
|
return {
|
safeAreaBottom: 0,
|
memberTabList: [
|
{
|
text: '首页',
|
pagePath: '/pages/index/index',
|
iconPath: '/static/icon/nav_home@2x.png',
|
selectedIconPath: '/static/icon/nav_home_sel@2x.png'
|
},
|
{
|
text: '行程',
|
pagePath: '/pages/itinerary/itinerary',
|
iconPath: '/static/icon/nav_xingcheng@2x.png',
|
selectedIconPath: '/static/icon/nav_xingcheng_sel@2x.png'
|
},
|
{
|
text: '消息',
|
pagePath: '/pages/message/message',
|
iconPath: '/static/icon/nav_xiaoxi@2x.png',
|
selectedIconPath: '/static/icon/nav_xiaoxi_sel@2x.png'
|
},
|
{
|
text: '我的',
|
pagePath: '/pages/mine/mine',
|
iconPath: '/static/icon/nav_wode@2x.png',
|
selectedIconPath: '/static/icon/nav_wode_sel@2x.png'
|
}
|
],
|
shopTabList: [
|
{
|
text: '首页',
|
pagePath: '/shop/pages/store-home/store-home',
|
iconPath: '/static/icon/nav_home@2x.png',
|
selectedIconPath: '/static/icon/nav_home_sel@2x.png'
|
},
|
{
|
text: '钱包',
|
pagePath: '/shop/pages/wallet/wallet',
|
iconPath: '/static/icon/nav_qianbao@2x.png',
|
selectedIconPath: '/static/icon/nav_qianbao_sel@2x.png'
|
},
|
{
|
text: '消息',
|
pagePath: '/shop/pages/message/message',
|
iconPath: '/static/icon/nav_xiaoxi@2x.png',
|
selectedIconPath: '/static/icon/nav_xiaoxi_sel@2x.png'
|
},
|
{
|
text: '我的',
|
pagePath: '/shop/pages/mine/mine',
|
iconPath: '/static/icon/nav_wode@2x.png',
|
selectedIconPath: '/static/icon/nav_wode_sel@2x.png'
|
}
|
]
|
}
|
},
|
computed: {
|
...mapState(['userType']),
|
currentIndex() {
|
const pages = getCurrentPages()
|
const currentPage = pages[pages.length - 1]
|
const currentPath = '/' + currentPage.route
|
const list = this.tabList
|
const index = list.findIndex(item => item.pagePath === currentPath)
|
return index > -1 ? index : 0
|
},
|
tabList() {
|
if (this.userType === 1) {
|
return this.shopTabList
|
}
|
return this.memberTabList
|
}
|
},
|
created() {
|
this.getSafeAreaBottom()
|
},
|
methods: {
|
getSafeAreaBottom() {
|
const systemInfo = uni.getSystemInfoSync()
|
this.safeAreaBottom = systemInfo.safeAreaInsets.bottom || 0
|
},
|
switchTab(item) {
|
const currentPath = getCurrentPages()[getCurrentPages().length - 1].$page.fullPath
|
if (this.userType === 1) {
|
if (currentPath !== item.pagePath) {
|
uni.redirectTo({
|
url: item.pagePath
|
})
|
}
|
} else {
|
if (currentPath !== item.pagePath) {
|
if(item.pagePath ==='/pages/itinerary/itinerary'){
|
uni.setStorageSync("orderStatus",-1)
|
}
|
uni.switchTab({
|
url: item.pagePath
|
})
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tabbar-wrapper {
|
width: 100%;
|
}
|
|
.tabbar-placeholder {
|
width: 100%;
|
}
|
|
.custom-tabbar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 100rpx;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
z-index: 999;
|
}
|
|
.tabbar-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.tabbar-icon {
|
width: 48rpx;
|
height: 48rpx;
|
}
|
|
.tabbar-text {
|
font-size: 22rpx;
|
color: #999999;
|
margin-top: 4rpx;
|
|
&.active {
|
color: #1ba8fa;
|
}
|
}
|
</style>
|
