zy-pda/components/seiminFooterNav/seiminFooterNav.vue

<!--
 * @Author: 廖明明
 * @Date: 2022-04-11 17:58:25
 * @LastEditors: 廖明明
 * @LastEditTime: 2022-04-12 13:56:55
 * @Description: 底部菜单
-->
<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" @click="goto(menu)">
      <text class="pda seiminFooterNav_item_icon" :class="menu.icon"></text>
      <text class="seiminFooterNav_item_text">{{ menu.name }}</text>
    </view>
    <seiminModel ref="seiminModel"></seiminModel>
  </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/orderList/orderList",
            icon: "pda-gongdan",
            otherStyle: false,
            active: false,
          },
          {
            name: "二维码",
            link: "/pages/qrcode/qrcode",
            icon: "pda-ziyuan91",
            otherStyle: true,
            active: false,
          },
          {
            name: "患者",
            link: "/pages/patientList/patientList",
            icon: "pda-wodehuanzhe",
            otherStyle: false,
            active: false,
          },
          {
            name: "我的",
            link: "/pages/personalCenter/personalCenter",
            icon: "pda-shouye3",
            otherStyle: false,
            active: false,
          },
        ],
      };
    },
    methods: {
      /**
       * @description: 路由跳转或展示动态二维码
       * @param {object} menu 菜单
       * @author: 廖明明
       */
      goto(menu) {
        if (menu.name === "二维码") {
          this.$refs.seiminModel.show({
            title: '科室二维码',
            skin: 'qrcode',
            btns: [{
              name: "知道了",
              textColor: "#49B856",
            }, ]
          });
        } else {
          if (this.curRoute === menu.link) {
            uni.redirectTo({
              url: menu.link,
            });
          } else {
            uni.navigateTo({
              url: menu.link,
            });
          }
        }
      },
      // 高亮当前菜单
      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;
    padding: 0 60rpx;
    @include border(top, rgba(0, 0, 0, 0.1));
    @include flex(space-between, center);

    .seiminFooterNav_item {
      color: #333;
      font-weight: bold;
      @include flex(center, center, column);

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

      &.active {
        color: $defaultColor;
      }

      .seiminFooterNav_item_icon {
        font-size: 50rpx;
      }

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