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 { postJ } from '@/utils/api'
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/backlog/backlog',
          badge: 0
          // "num": 1
        },
        {
          class: 'iconfont icon-yizhihang_1',
          title: '我的已办',
          link_url: '/pages/home/havedone/havedone'
          // badge:0
          // "num": 1
        }
      ],
      information: 0,
      done: 0,
      backlog: 0,
      workOrderNum: 0
    }
  },
  created () {
    this.getCount()
  },
  methods: {
    toNav (url) {
      uni.navigateTo({
        url: url
      })
    },

    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
      //   }
      // })
    }
  }
}
</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>