zy-pda/components/seiminFooterNav/seiminFooterNav.vue

<template>
  <view class="seiminFooterNav">
    <view class="seiminFooterNav_item" :class="{otherStyle:menu.otherStyle,active:menu.otherStyle?false:menu.active}"
      v-for="menu in menus" :key="menu.link">
      <text class="pda seiminFooterNav_item_icon" :class="menu.icon"></text>
      <text class="seiminFooterNav_item_text">{{menu.name}}</text>
    </view>
  </view>
</template>

<script>
  import {
    getCurrentPagesSeimin
  } from '../../utils/index.js';
  export default {
    name: "seiminFooterNav",
    data() {
      return {
        // 当前路由地址
        curRoute: '',
        //底部菜单
        menus: [{
            name: '首页',
            link: '/pages/index/index',
            icon: 'pda-shouye2',
            otherStyle: false,
            active: false,
          },
          {
            name: '工单',
            link: '/pages/orders/orders',
            icon: 'pda-gongdan',
            otherStyle: false,
            active: false,
          },
          {
            name: '二维码',
            link: '/pages/qrcode/qrcode',
            icon: 'pda-ziyuan91',
            otherStyle: true,
            active: false,
          },
          {
            name: '患者',
            link: '/pages/patients/patients',
            icon: 'pda-wodehuanzhe',
            otherStyle: false,
            active: false,
          },
          {
            name: '我的',
            link: '/pages/personalCenter/personalCenter',
            icon: 'pda-shouye3',
            otherStyle: false,
            active: false,
          }
        ]
      };
    },
    methods: {
      // 高亮当前菜单
      activeCurrentMenu() {
        this.curRoute = `/${getCurrentPagesSeimin()}`;
        this.menus.forEach(v => v.active = v.link === this.curRoute);
      }
    },
    mounted() {
      this.activeCurrentMenu();
    },
  };
</script>

<style lang="scss" scoped>
  .seiminFooterNav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    z-index: 9;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 60rpx;
    @include flex(space-between, center);

    .seiminFooterNav_item {
      color: #DDE1E5;
      @include flex(center, center, column);

      &.otherStyle {
        width: 120rpx;
        height: 120rpx;
        background: linear-gradient(180deg, #74C271 0%, #39B199 100%);
        border-radius: 50%;
        position: relative;
        top: -10rpx;
        color: #fff;
      }

      &.active {
        color: $defaultColor;
      }

      .seiminFooterNav_item_icon {
        font-size: 50rpx;
      }

      .seiminFooterNav_item_text {
        font-size: 28rpx;
      }
    }
  }
</style>