aiot-app/pages/home/components/navigation.vue

<template>
	<view class="nav">
		<view class="nav-item" v-for="(item, index) in workList" @click="toNav(item.link_url)">
			<span :class="item.class"></span>
			<i class="badge" v-if="item.badge">{{ item.badge }}</i>
			<label>{{ item.title }}</label>
		</view>
	</view>
</template>

<script>
	import {
		getTodoList,
		getUnreadNotifyMessageCountAPI
	} from '@/api/wt/index.js'
	export default {
		props: {
			workOrder: {
				default: {}
			}
		},
		data() {
			return {
				workList: [{
						class: 'iconfont icon-bianji',
						title: '工单待办',
						link_url: '/pages/home/myTicket/myTicket?orderType=1',
						badge: 0
					},
					{
						class: 'iconfont icon-bianji',
						title: '工单已办',
						link_url: '/pages/home/myTicket/myTicket?orderType=2',
						badge: 0
					},
					{
						class: 'iconfont icon-dangqiangaojing',
						title: '我的消息',
						link_url: '/pages/home/wt/message/message',
						badge: 0
						// "num": 1
					},
					{
						class: 'iconfont icon-kuneipandian',
						title: '流程待办',
						link_url: '/pages/home/wt/todo/todo',
						badge: 0
						// "num": 1
					},
					{
						class: 'iconfont icon-kuneipandian',
						title: '流程已办',
						link_url: '/pages/home/wt/done/done'
						// badge: 0
						// badge:0
						// "num": 1
					}
				],
				information: 0,
				done: 0,
				backlog: 0,
				workOrderNum: 0
			}
		},
		watch: {
			workOrder: {
				handler(newV, oldV) {
					this.workList[0].badge = newV.total
				},
				deep: true
			}
		},
		created() {
			this.getCount()
			// this.$nextTick(()=>{
			// 	this.workList[0].badge = String(this.workOrder.total)
			// })
		},
		methods: {
			toNav(url) {
				uni.navigateTo({
					url: url
				})
			},

			async getCount() {
				// const res = await getTodoList({}, false)
				// this.workList[0].badge = res.count
				const messageCount = await getUnreadNotifyMessageCountAPI()
				this.workList[2].badge = Number(messageCount)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 选项卡
	.nav {
		display: flex;
		width: 100%;
		padding: 32rpx 0;
		margin-bottom: 24rpx;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		font-size: $uni-font-size-sm;
		color: $uni-text-color;
		border-radius: 16rpx;

		.nav-item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 5rpx;
			align-items: center;
			flex: 1;

			span {
				padding: 18rpx;
				color: #ffffff;
				margin-bottom: 14rpx;
				border-radius: 50%;
			}

			.badge {
				position: absolute;
				top: -8rpx;
				left: 100rpx;
				font-size: 24rpx;
				padding: 0rpx 10rpx;
				border-radius: 38rpx;
				background-color: #ff4949;
				color: #fff;
				font-style: normal;
			}
		}

		.nav-item:nth-child(1) span {
			background-color: $uni-color-success;
		}

		.nav-item:nth-child(2) span {
			background-color: $uni-color-warning;
		}

		.nav-item:nth-child(3) span {
			background-color: $uni-color-primary;
		}

		.nav-item:nth-child(4) span {
			background-color: $uni-color-error;
		}

		.nav-item:nth-child(5) span {
			background-color: $uni-color-success;
		}
	}
</style>