| | |
| | | <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> |
| | | <text class="tabbar-text" :class="{ active: currentIndex === index, shop: userType === 1 }">{{ item.text }}</text> |
| | | </view> |
| | | </view> |
| | | <view class="tabbar-placeholder" :style="{ height: '100px' }"></view> |
| | | <auth-login :show="showLogin" @close="showLogin = false"></auth-login> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | |
| | | export default { |
| | | name: 'CustomTabbar', |
| | | data() { |
| | | return { |
| | | safeAreaBottom: 0, |
| | | showLogin: false, |
| | | memberTabList: [ |
| | | { |
| | | text: '首页', |
| | |
| | | text: '首页', |
| | | pagePath: '/shop/pages/store-home/store-home', |
| | | iconPath: '/static/icon/nav_home@2x.png', |
| | | selectedIconPath: '/static/icon/nav_home_sel@2x.png' |
| | | selectedIconPath: '/static/shopTabbar/nav_home_sel@2x.png' |
| | | }, |
| | | { |
| | | text: '钱包', |
| | |
| | | text: '消息', |
| | | pagePath: '/shop/pages/message/message', |
| | | iconPath: '/static/icon/nav_xiaoxi@2x.png', |
| | | selectedIconPath: '/static/icon/nav_xiaoxi_sel@2x.png' |
| | | selectedIconPath: '/static/shopTabbar/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' |
| | | selectedIconPath: '/static/shopTabbar/nav_wode_sel@2x.png' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState(['userType']), |
| | | ...mapState(['userType', 'token']), |
| | | currentIndex() { |
| | | const pages = getCurrentPages() |
| | | const currentPage = pages[pages.length - 1] |
| | |
| | | this.safeAreaBottom = systemInfo.safeAreaInsets.bottom || 0 |
| | | }, |
| | | switchTab(item) { |
| | | if (item.pagePath === '/pages/itinerary/itinerary' && !this.token) { |
| | | this.showLogin = true |
| | | return |
| | | } |
| | | const currentPath = getCurrentPages()[getCurrentPages().length - 1].$page.fullPath |
| | | if (this.userType === 1) { |
| | | if (currentPath !== item.pagePath) { |
| | |
| | | } |
| | | } else { |
| | | if (currentPath !== item.pagePath) { |
| | | if(item.pagePath ==='/pages/itinerary/itinerary'){ |
| | | uni.setStorageSync("orderStatus",-1) |
| | | } |
| | | uni.switchTab({ |
| | | url: item.pagePath |
| | | }) |
| | |
| | | &.active { |
| | | color: #1ba8fa; |
| | | } |
| | | |
| | | &.shop.active { |
| | | color: #004096; |
| | | } |
| | | } |
| | | </style> |