school_uni/components/tab-bar/tab-bar.vue

<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">
				{{indexZhipaiCount}}
			</view>
			<view class="red-dot" v-if="index == 1 && indexWorkerCount > 0">
				{{indexWorkerCount}}
			</view>
			<view class="red-dot" v-if="index == 4 && indexMyCount > 0">
				{{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
			}
		},
		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
					}
				}
			}
		},
		methods: {
			//点击tab切换
			clickBar(index) {
				
				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(){
				if(!uni.getStorageSync('worker')){
					return;
				}
				this.indexZhipaiCount = 0
				this.indexWorkerCount = 0
				this.indexMyCount = 0
				let that = this
				this.tui.request("/mall/delivery/countOrderByStatus", "POST", {workerId:uni.getStorageSync('worker').workerId}, false, true).then((res) => {
					if (res.code == 200) {
						if(res.result != null){
							for(let i = 0;i<res.result.length;i++){
								if(res.result[i].status == 0){
									this.indexZhipaiCount = Number(res.result[i].orderCount)
								}else if(res.result[i].status == 1 || res.result[i].status == 2){
									this.indexWorkerCount += Number(res.result[i].orderCount)
								}else{
									this.indexMyCount = Number(res.result[i].orderCount)
								}
							}
						}
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			}
		}
	}
</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: 999;
		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{
		width: 15px;
		height: 15px;
		border-radius: 15px;
		line-height: 15px;
		text-align: center;
		color: #fff;
		position: absolute;
		top: 5px;
		right: 10px;
		background: red;
		font-size: 10px;
	}

	.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>