|
|
|
@ -1,25 +1,25 @@ |
|
|
|
<template> |
|
|
|
<view class="tabbar-box"> |
|
|
|
<view class="bar-box" @click="clickBar(index)" v-for="(item,index) in tabList" :key="index" hover-class="none"> |
|
|
|
<view class="red-dot" v-if="index == 0 && indexZhipaiCount > 0"> |
|
|
|
<view class="bar-box" @click="clickBar(index)" v-for="(item,index) in displayTabs" :key="item.pageIndex" hover-class="none"> |
|
|
|
<view class="red-dot" v-if="item.pageIndex == 0 && indexZhipaiCount > 0"> |
|
|
|
{{formatBadgeCount(indexZhipaiCount)}} |
|
|
|
</view> |
|
|
|
<view class="red-dot" v-if="index == 1 && indexWorkerCount > 0"> |
|
|
|
<view class="red-dot" v-if="item.pageIndex == 1 && indexWorkerCount > 0"> |
|
|
|
{{formatBadgeCount(indexWorkerCount)}} |
|
|
|
</view> |
|
|
|
<view class="red-dot" v-if="index == 2 && indexCampusCount > 0"> |
|
|
|
<view class="red-dot" v-if="item.pageIndex == 2 && indexCampusCount > 0"> |
|
|
|
{{formatBadgeCount(indexCampusCount)}} |
|
|
|
</view> |
|
|
|
<view class="red-dot" v-if="index == 3 && indexFishCount > 0"> |
|
|
|
<view class="red-dot" v-if="item.pageIndex == 3 && indexFishCount > 0"> |
|
|
|
{{formatBadgeCount(indexFishCount)}} |
|
|
|
</view> |
|
|
|
<view class="red-dot" v-if="index == 4 && indexMyCount > 0"> |
|
|
|
<view class="red-dot" v-if="item.pageIndex == 4 && indexMyCount > 0"> |
|
|
|
{{formatBadgeCount(indexMyCount)}} |
|
|
|
</view> |
|
|
|
<view class="img-box" v-if="index != 2" :class="item.shaking?'shaking':''"> |
|
|
|
<view class="img-box" v-if="item.pageIndex != 2" :class="item.shaking?'shaking':''"> |
|
|
|
<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" /> |
|
|
|
</view> |
|
|
|
<view class="img-box uni-tab-icon" v-if="index == 2" :class="item.shaking?'shaking':''"> |
|
|
|
<view class="img-box uni-tab-icon" v-if="item.pageIndex == 2" :class="item.shaking?'shaking':''"> |
|
|
|
<uni-icons type="pyq" size="25" :color="item.isCheck?'#48D1CC':'#30363d'"></uni-icons> |
|
|
|
</view> |
|
|
|
<view class="text-box" :style="{color:item.isCheck?'#48D1CC':'#000'}"> |
|
|
|
@ -35,30 +35,36 @@ |
|
|
|
return { |
|
|
|
tabList: [{ |
|
|
|
tabName: '首页', |
|
|
|
pageIndex: 0, |
|
|
|
tabIcon: '/static/images/tabbar/shouye1.png', |
|
|
|
tabIconSelect: '/static/images/tabbar/shouye.png', |
|
|
|
isCheck: true, |
|
|
|
shaking:false |
|
|
|
}, { |
|
|
|
tabName: '配送', |
|
|
|
pageIndex: 1, |
|
|
|
hideInSocial: true, |
|
|
|
tabIcon: '/static/images/tabbar/peisong1.png', |
|
|
|
tabIconSelect: '/static/images/tabbar/peisong.png', |
|
|
|
isCheck: false, |
|
|
|
shaking:false |
|
|
|
}, { |
|
|
|
tabName: '校园圈', |
|
|
|
pageIndex: 2, |
|
|
|
tabIcon: '/static/images/tabbar/xiaoyuan.png', |
|
|
|
tabIconSelect: '', |
|
|
|
isCheck: false, |
|
|
|
shaking:false |
|
|
|
}, { |
|
|
|
tabName: '鱼塘', |
|
|
|
pageIndex: 3, |
|
|
|
tabIcon: '/static/images/tabbar/xianyu1.png', |
|
|
|
tabIconSelect: '/static/images/tabbar/xianyu.png', |
|
|
|
isCheck: false, |
|
|
|
shaking:false |
|
|
|
}, { |
|
|
|
tabName: '我的', |
|
|
|
pageIndex: 4, |
|
|
|
tabIcon: '/static/images/tabbar/wode1.png', |
|
|
|
tabIconSelect: '/static/images/tabbar/wode.png', |
|
|
|
isCheck: false, |
|
|
|
@ -81,22 +87,36 @@ |
|
|
|
type: Number, |
|
|
|
default: true |
|
|
|
}, |
|
|
|
//选中tab的下标 |
|
|
|
//选中tab的下标（页面逻辑下标） |
|
|
|
currentIndex: { |
|
|
|
type: Number, |
|
|
|
default: 0 |
|
|
|
}, |
|
|
|
socialMode: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
displayTabs() { |
|
|
|
if (!this.socialMode) return this.tabList |
|
|
|
return this.tabList |
|
|
|
.filter((item) => !item.hideInSocial) |
|
|
|
.map((item) => { |
|
|
|
if (item.pageIndex === 2) { |
|
|
|
return Object.assign({}, item, { tabName: '同城圈' }) |
|
|
|
} |
|
|
|
return item |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
//监听currentIndex变化 |
|
|
|
currentIndex(newVal) { |
|
|
|
for (let i = 0; i < this.tabList.length; i++) { |
|
|
|
if (newVal == i) { |
|
|
|
this.tabList[i].isCheck = true |
|
|
|
} else { |
|
|
|
this.tabList[i].isCheck = false |
|
|
|
} |
|
|
|
} |
|
|
|
this.syncTabCheck(newVal) |
|
|
|
}, |
|
|
|
socialMode() { |
|
|
|
this.syncTabCheck(this.currentIndex) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -104,6 +124,7 @@ |
|
|
|
uni.$on('fishUnreadChange', this.setFishUnreadCounts) |
|
|
|
uni.$on('campusUnreadChange', this.setCampusUnreadCounts) |
|
|
|
this.setDeliveryStatusCounts(uni.getStorageSync('deliveryStatusCounts') || {}) |
|
|
|
this.syncTabCheck(this.currentIndex) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
uni.$off('deliveryStatusCountsChange', this.setDeliveryStatusCounts) |
|
|
|
@ -111,6 +132,11 @@ |
|
|
|
uni.$off('campusUnreadChange', this.setCampusUnreadCounts) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
syncTabCheck(pageIndex) { |
|
|
|
for (let i = 0; i < this.tabList.length; i++) { |
|
|
|
this.tabList[i].isCheck = this.tabList[i].pageIndex == pageIndex |
|
|
|
} |
|
|
|
}, |
|
|
|
hasLogin() { |
|
|
|
const token = uni.getStorageSync('hiver_token') |
|
|
|
return !!(token && typeof token === 'string' && token.trim() && token !== 'null' && token !== 'undefined') |
|
|
|
@ -149,25 +175,19 @@ |
|
|
|
} |
|
|
|
this.getWorkerCounts() |
|
|
|
}, |
|
|
|
//点击tab切换 |
|
|
|
//点击tab切换：发射页面逻辑下标 |
|
|
|
clickBar(index) { |
|
|
|
for (let i = 0; i < this.tabList.length; i++) { |
|
|
|
if (index == i) { |
|
|
|
this.$emit('tab-index', i); |
|
|
|
this.getWorkerCounts() |
|
|
|
this.tabList[i].isCheck = true |
|
|
|
if (this.tabList[i].shaking) return |
|
|
|
|
|
|
|
this.tabList[i].shaking = true |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.tabList[i].shaking = false |
|
|
|
}, 500) |
|
|
|
} else { |
|
|
|
this.tabList[i].isCheck = false |
|
|
|
this.$forceUpdate() |
|
|
|
} |
|
|
|
} |
|
|
|
const item = this.displayTabs[index] |
|
|
|
if (!item) return |
|
|
|
const pageIndex = item.pageIndex |
|
|
|
this.$emit('tab-index', pageIndex); |
|
|
|
this.getWorkerCounts() |
|
|
|
this.syncTabCheck(pageIndex) |
|
|
|
if (item.shaking) return |
|
|
|
item.shaking = true |
|
|
|
setTimeout(() => { |
|
|
|
item.shaking = false |
|
|
|
}, 500) |
|
|
|
}, |
|
|
|
getWorkerCounts(){ |
|
|
|
const now = Date.now() |
|
|
|
|
wangfukang
1 week ago