You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
384 lines
10 KiB
384 lines
10 KiB
<template>
|
|
<view class="tabbar-box">
|
|
<view class="bar-box" @click="clickBar(index)" v-for="(item,index) in tabList" :key="index" :class="item.shaking?'shaking':''">
|
|
<view class="red-dot" v-if="index == 0 && indexZhipaiCount > 0">
|
|
{{formatBadgeCount(indexZhipaiCount)}}
|
|
</view>
|
|
<view class="red-dot" v-if="index == 1 && indexWorkerCount > 0">
|
|
{{formatBadgeCount(indexWorkerCount)}}
|
|
</view>
|
|
<view class="red-dot" v-if="index == 4 && indexMyCount > 0">
|
|
{{formatBadgeCount(indexMyCount)}}
|
|
</view>
|
|
<view class="img-box" v-if="index != 2">
|
|
<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
|
|
</view>
|
|
<view class="big-img-box" v-if="index == 2">
|
|
<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
|
|
</view>
|
|
<view class="text-box" v-if="index != 2" :style="{color:item.isCheck?'#48D1CC':'#000'}">
|
|
{{item.tabName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList: [{
|
|
tabName: '首页',
|
|
tabIcon: '/static/images/tabbar/shouye1.png',
|
|
tabIconSelect: '/static/images/tabbar/shouye.png',
|
|
isCheck: true,
|
|
shaking:false
|
|
}, {
|
|
tabName: '配送',
|
|
tabIcon: '/static/images/tabbar/peisong1.png',
|
|
tabIconSelect: '/static/images/tabbar/peisong.png',
|
|
isCheck: false,
|
|
shaking:false
|
|
}, {
|
|
tabName: '发布',
|
|
tabIcon: '/static/images/tabbar/fabu222.png',
|
|
tabIconSelect: '/static/images/tabbar/shouye.png',
|
|
isCheck: false,
|
|
shaking:false
|
|
}, {
|
|
tabName: '鱼塘',
|
|
tabIcon: '/static/images/tabbar/xianyu1.png',
|
|
tabIconSelect: '/static/images/tabbar/xianyu.png',
|
|
isCheck: false,
|
|
shaking:false
|
|
}, {
|
|
tabName: '我的',
|
|
tabIcon: '/static/images/tabbar/wode1.png',
|
|
tabIconSelect: '/static/images/tabbar/wode.png',
|
|
isCheck: false,
|
|
shaking:false
|
|
}],
|
|
indexZhipaiCount:0,
|
|
indexWorkerCount:0,
|
|
indexMyCount:0,
|
|
countRefreshId:0
|
|
}
|
|
},
|
|
props: {
|
|
//页面的宽度
|
|
width: {
|
|
type: Number,
|
|
default: true
|
|
},
|
|
//选中tab的下标
|
|
currentIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
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
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
uni.$on('deliveryStatusCountsChange', this.setDeliveryStatusCounts)
|
|
this.setDeliveryStatusCounts(uni.getStorageSync('deliveryStatusCounts') || {})
|
|
},
|
|
beforeDestroy() {
|
|
uni.$off('deliveryStatusCountsChange', this.setDeliveryStatusCounts)
|
|
},
|
|
methods: {
|
|
hasLogin() {
|
|
const token = uni.getStorageSync('hiver_token')
|
|
return !!(token && typeof token === 'string' && token.trim() && token !== 'null' && token !== 'undefined')
|
|
},
|
|
goLogin(index) {
|
|
const redirectKey = 'login_redirect_' + Date.now()
|
|
uni.setStorageSync(redirectKey, '/pages/index/index?tabIndex=' + index)
|
|
uni.navigateTo({
|
|
url: '/package2/login/login?redirect=' + redirectKey
|
|
})
|
|
},
|
|
formatBadgeCount(count) {
|
|
const value = Number(count) || 0
|
|
return value > 99 ? '99+' : value
|
|
},
|
|
setDeliveryStatusCounts(counts) {
|
|
this.indexWorkerCount = (Number(counts.daiqu) || 0) + (Number(counts.daisong) || 0)
|
|
this.$forceUpdate()
|
|
},
|
|
//点击tab切换
|
|
clickBar(index) {
|
|
if (index !== 0 && !this.hasLogin()) {
|
|
this.goLogin(index)
|
|
return
|
|
}
|
|
|
|
for (let i = 0; i < this.tabList.length; i++) {
|
|
if (index == i) {
|
|
this.$emit('tab-index', i);
|
|
if(index == 2) return
|
|
if(index != 0){
|
|
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()
|
|
}
|
|
}
|
|
},
|
|
getWorkerCounts(){
|
|
const refreshId = ++this.countRefreshId
|
|
this.indexZhipaiCount = 0
|
|
this.indexWorkerCount = 0
|
|
this.indexMyCount = 0
|
|
let deliveryStatusCounts = {
|
|
daiqu: 0,
|
|
daisong: 0
|
|
}
|
|
let shopId = uni.getStorageSync('shopId')
|
|
let worker = uni.getStorageSync('worker')
|
|
let workerResult = {
|
|
zhipaiCount: 0,
|
|
workerTabCount: 0,
|
|
myCount: 0,
|
|
workerCounts: 0,
|
|
deliveryStatusCounts
|
|
}
|
|
let shopCounts = 0
|
|
let tasks = []
|
|
if(worker){
|
|
const area = uni.getStorageSync('area') ? JSON.parse(uni.getStorageSync('area')) : {}
|
|
tasks.push(this.tui.request("/mall/delivery/countOrderByStatus", "POST", {workerId:worker.workerId,regionId:area.id}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
let result = {
|
|
zhipaiCount: 0,
|
|
workerTabCount: 0,
|
|
myCount: 0,
|
|
workerCounts: 0,
|
|
deliveryStatusCounts: {
|
|
daiqu: 0,
|
|
daisong: 0
|
|
}
|
|
}
|
|
if(res.result != null){
|
|
for(let i = 0;i<res.result.length;i++){
|
|
const orderCount = Number(res.result[i].orderCount) || 0
|
|
if(res.result[i].status == 0){
|
|
result.zhipaiCount = orderCount
|
|
}else if(res.result[i].status == 1 || res.result[i].status == 2){
|
|
if (res.result[i].status == 1) {
|
|
result.deliveryStatusCounts.daiqu = orderCount
|
|
} else if (res.result[i].status == 2) {
|
|
result.deliveryStatusCounts.daisong = orderCount
|
|
}
|
|
result.workerTabCount += orderCount
|
|
}else{
|
|
result.myCount += orderCount
|
|
}
|
|
if(res.result[i].status == 3){
|
|
result.workerCounts = orderCount
|
|
}
|
|
}
|
|
}
|
|
workerResult = result
|
|
} else {
|
|
this.tui.toast(res.message);
|
|
}
|
|
uni.hideLoading();
|
|
}).catch((res) => {}));
|
|
}else{
|
|
uni.setStorageSync('workerCounts', 0)
|
|
uni.setStorageSync('deliveryStatusCounts', deliveryStatusCounts)
|
|
uni.$emit('deliveryStatusCountsChange', deliveryStatusCounts)
|
|
}
|
|
if(shopId){
|
|
tasks.push(this.tui.request("/mall/order/countByShop/"+shopId, "GET", {}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.shopData = res.result
|
|
let total = 0
|
|
const orderStatusCount = this.shopData.orderStatusCount || []
|
|
for(let i=0;i<orderStatusCount.length;i++){
|
|
if(orderStatusCount[i].counttype){
|
|
const count = Number(orderStatusCount[i].count) || 0
|
|
if(orderStatusCount[i].counttype == 'daisong'){
|
|
total += count
|
|
}else if(orderStatusCount[i].counttype == 'daiqu'){
|
|
total += count
|
|
}else if(orderStatusCount[i].counttype == 'daixiaofei'){
|
|
total += count
|
|
}else if(orderStatusCount[i].counttype == 'daichucan'){
|
|
total += count
|
|
}
|
|
}
|
|
}
|
|
const pendingBadReviewCount = Number(this.shopData.pendingBadReviewCount) || 0
|
|
const refundCount = Number(this.shopData.refundCount) || 0
|
|
const shopDeliveryPendingCount = Number(this.shopData.shopDeliveryPendingCount) || 0
|
|
const transferDeliveryPendingCount = Number(this.shopData.transferDeliveryPendingCount) || 0
|
|
total += pendingBadReviewCount
|
|
total += refundCount
|
|
total += shopDeliveryPendingCount
|
|
total += transferDeliveryPendingCount
|
|
shopCounts = total
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
uni.hideLoading()
|
|
}).catch((res) => {}))
|
|
}else{
|
|
uni.setStorageSync('shopCounts', 0)
|
|
}
|
|
return Promise.all(tasks).then(() => {
|
|
if (refreshId != this.countRefreshId) return
|
|
this.indexZhipaiCount = workerResult.zhipaiCount
|
|
this.indexWorkerCount = workerResult.workerTabCount
|
|
this.indexMyCount = workerResult.myCount + shopCounts
|
|
uni.setStorageSync('workerCounts', workerResult.workerCounts)
|
|
uni.setStorageSync('shopCounts', shopCounts)
|
|
uni.setStorageSync('deliveryStatusCounts', workerResult.deliveryStatusCounts)
|
|
uni.$emit('deliveryStatusCountsChange', workerResult.deliveryStatusCounts)
|
|
uni.$emit('myCenterCountsChange', {
|
|
workerCounts: workerResult.workerCounts,
|
|
shopCounts: shopCounts
|
|
})
|
|
this.$forceUpdate()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabbar-box {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 150rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
z-index: 998;
|
|
border-top: 1px solid #eee;
|
|
border-top-left-radius: 60rpx;
|
|
border-top-right-radius: 60rpx;
|
|
}
|
|
|
|
.bar-box {
|
|
height: 100%;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
.red-dot {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 24rpx;
|
|
z-index: 2;
|
|
min-width: 34rpx;
|
|
height: 34rpx;
|
|
padding: 0 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #ff8a1f 0%, #ff3f5f 100%);
|
|
border: 4rpx solid rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 8rpx 18rpx rgba(255, 63, 95, 0.34);
|
|
font-size: 20rpx;
|
|
font-weight: 900;
|
|
font-family: Arial, 'PingFang SC', sans-serif;
|
|
}
|
|
|
|
.img-box {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin: 20rpx auto 10rpx;
|
|
cursor: pointer;
|
|
display: block;
|
|
transition: all 0.3s;
|
|
transform-origin: center center;
|
|
user-select: none;
|
|
}
|
|
|
|
.img-box img{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background-size: 100%;
|
|
}
|
|
.big-img-box img{
|
|
width: 80%;
|
|
height: 90%;
|
|
background-size: 100%;
|
|
margin: -20rpx 0 0 10%;
|
|
}
|
|
|
|
@keyframes simple-scale-shake {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
10% {
|
|
transform: scale(1.5);
|
|
}
|
|
20% {
|
|
transform: scale(0.9);
|
|
}
|
|
30% {
|
|
transform: scale(1.15);
|
|
}
|
|
40% {
|
|
transform: scale(0.95);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
60% {
|
|
transform: scale(0.97);
|
|
}
|
|
70% {
|
|
transform: scale(1.05);
|
|
}
|
|
80% {
|
|
transform: scale(0.99);
|
|
}
|
|
90% {
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.shaking {
|
|
animation: simple-scale-shake 0.8s ease-out;
|
|
}
|
|
|
|
.text-box {
|
|
text-align: center;
|
|
font-size: 20rpx;
|
|
font-family: 'PingFang HK';
|
|
font-weight: bold;
|
|
}
|
|
.big-img-box{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|