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 {
		getTodoTaskPage
	} from '@/api/wt/index.js'
	export default {
		data() {
			return {
				workList: [{
						class: 'iconfont icon-bianji',
						title: '我的工单',
						link_url: '/pages/home/work/work',
						badge: 0
					},
					{
						class: 'iconfont icon-dangqiangaojing',
						title: '我的消息',
						link_url: '/pages/home/msg/msg',
						badge: 0
						// "num": 1
					},
					{
						class: 'iconfont icon-kuneipandian ',
						title: '我的待办',
						link_url: '/pages/home/wt/todo/todo',
						badge: 0,
						// num: 1
					},
					{
						class: 'iconfont icon-yizhihang_1',
						title: '我的已办',
						link_url: '/pages/home/wt/done/done'
						// badge:0
						// "num": 1
					}
				],
				information: 0,
				done: 0,
				backlog: 0,
				workOrderNum: 0
			}
		},
		created() {
			this.getCount()
		},
		methods: {
			toNav(url) {
				uni.navigateTo({
					url: url
				})
			},

			async getCount() {
				// Promise.all(
				//   [
				//     '/myMessage/getMyMessageMenuCount',
				//     '/myHandle/getMyHandleMenuCount',
				//     '/workOrder/getMyWorkOrderMenuCount'
				//   ].map(url => postJ(this.apiUrl + url, null, null, false))
				// ).then(result => {
				//   if (result) {
				//     this.workList[0].badge = result[2].data.menuCount
				//     this.workList[1].badge = result[0].data.menuCount
				//     this.workList[2].badge = result[1].data.waitHandleCount
				//     // this.workList[3].badge = result[1].data.doneCount
				//   }
				// })
				const res = await getTodoTaskPage({}, false)
				this.workList[2].badge = res.count
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 选项卡
	.nav {
		width: 94%;
		margin: 25rpx auto;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		font-size: $uni-font-size-base;
		color: $uni-text-regular-color;
		border-radius: 10rpx;

		.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: 0;
				left: 115rpx;
				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;
		}
	}
</style>