saas_pc/src/components/header/index.vue

<template>
  <header class="header">
    <div class="container clearfix">
      <div class="logo logo--no" v-if="header.companyLogo">
        <img
          style="cursor: pointer; width: 162px; height: 33px"
          :src="$tools.splitImgHost(header.companyLogo)"
          alt=""
          @click="go('/')"
        />
      </div>
      <h1 class="logo" v-else @click="go('/')"></h1>
      <nav class="nav">
        <ul class="list">
          <li v-for="(item, index) in showNav(header.Nav)" :key="index">
            <a v-if="item.name == '首页'" @click="go('/index')">首页</a>
            <a v-if="item.name == '走进祥粤'" @click="go('/about')">走进祥粤</a>
            <a v-if="item.name == '课程'" @click="go('/course-list')">课程</a>
            <a v-if="item.name == '直播'" @click="go('/live-list')">直播</a>
            <a v-if="item.name == '题库'" @click="go('/bank-list')">题库</a>
          </li>
        </ul>
      </nav>

      <div class="userinfo" v-if="userInfo">
        <a class="msg" @click="go('/person-center/my-message')">
          <i class="pi" v-if="msgCount > 0"></i>
          <i class="el-icon-message-solid icon"></i>
        </a>
        <el-dropdown @command="handleCommand">
          <span
            class="el-dropdown-link"
            @click="go('/person-center/my-course')"
            style="margin-left: 10px; cursor: pointer"
          >
            <img
              style="width: 24px; vertical-align: middle"
              :src="
                userInfo
                  ? userInfo.avatar
                    ? $tools.splitImgHost(userInfo.avatar, true)
                    : '@/assets/qrcode.png'
                  : ''
              "
              alt=""
            />
            <span>{{ userInfo && userInfo.realname }}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">我的课程</el-dropdown-item>
            <el-dropdown-item command="2">我的题库</el-dropdown-item>
            <el-dropdown-item command="3">个人中心</el-dropdown-item>
            <el-dropdown-item command="4">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="userinfo" v-else>
        <div class="text-list" v-if="!userInfo">
          <a @click="go('/login', { state: 1 })">登录</a>
          <a @click="go('/login', { state: 2 })">注册</a>
        </div>
      </div>

      <div class="search">
        <div class="search__select">
          <select v-model="type">
            <option value="1">课程</option>
            <option value="2">题库</option>
            <option value="6">直播</option>
          </select>
        </div>
        <div class="search__input">
          <input type="text" v-model="searchKey" autocomplete="off" />
          <input
            type="password"
            autocomplete="new-password"
            style="display: none"
          />
        </div>
        <el-button type="primary" @click="search" class="search__btn"
          >搜索</el-button
        >
      </div>
    </div>
  </header>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      searchKey: "",
      type: "1",
      showBox: false,
      timer: null,
    };
  },
  computed: {
    ...mapGetters(["header", "userInfo", "msgCount"]),
    showNav: function () {
      return function (list) {
        var newList = [];
        if (list) {
          newList = list.filter((item) => {
            return item.status === 1;
          });
        }
        return newList;
      };
    },
  },
  mounted() {
    if (this.$tools.isLogin()) {
      this.getMsgCount();
    }
  },
  methods: {
    ...mapMutations(["getMsgCount"]),

    handleCommand(command) {
      switch (command) {
        case "1":
          this.go("/person-center/my-course");
          break;
        case "2":
          this.go("/person-center/my-bank");
          break;
        case "3":
          this.go("/person-center/my-info");
          break;
        case "4":
          this.$tools.exit();
          break;

        default:
          break;
      }
    },
    go(path, query) {
      this.$router.push({
        path,
        query,
      });
    },

    search() {
      if (!this.searchKey.trim()) {
        this.$message({
          type: "warning",
          duration: 2000,
          message: "请输入搜索内容",
        });

        return;
      }
      let type = this.type;
      let path = this.$route.path;

      if (path == "/bank-list") {
        //在题库列表页面直接传参
        if (type == "2") {
          this.$emit("search", this.searchKey);
        } else if (type == "6") {
          this.$router.push({
            path: "/live-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        } else {
          this.$router.push({
            path: "/course-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        }
      } else if (path == "/course-list") {
        //在课程列表页面直接传参
        if (type == "1") {
          this.$emit("search", this.searchKey);
        } else if (type == "6") {
          this.$router.push({
            path: "/live-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        } else {
          this.$router.push({
            path: "/bank-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        }
      } else if (path == "/live-list") {
        //在课程列表页面直接传参
        if (type == "6") {
          this.$emit("search", this.searchKey);
        } else if (type == "1") {
          this.$router.push({
            path: "/course-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        } else {
          this.$router.push({
            path: "/bank-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        }
      } else {
        //根据类型跳转题库或者列表页面
        console.log(type);
        if (type == "1") {
          this.$router.push({
            path: "/course-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        } else if (type == "6") {
          this.$router.push({
            path: "/live-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        } else {
          this.$router.push({
            path: "/bank-list",
            query: {
              searchKey: this.searchKey,
            },
          });
        }
      }
    },

    mouseover() {
      clearTimeout(this.timer);
      this.showBox = true;
    },

    mouseLeave() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.showBox = false;
      }, 500);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header {
  position: relative;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);

  .container {
    height: 80px;

    .logo {
      margin-top: 23px;
      float: left;
      cursor: pointer;
      width: 162px;
      height: 33px;
      background: url("~@/assets/logo.png") no-repeat center;

      &--no {
        background: none;
      }
    }

    .nav {
      float: left;
      margin-top: 30px;
      .list {
        margin-left: 146px;
        display: flex;

        li {
          margin: 0 20px;
          a {
            color: #333;
          }
          a:hover {
            color: #3f8dfd;
          }
        }
      }
    }

    .search {
      float: right;
      margin-top: 20px;
      width: 324px;
      background: #fafbfc;
      border: 1px solid #3f8dfd;
      border-radius: 8px;
      display: flex;
      overflow: hidden;

      &__select {
        width: 76px;
        border-right: 1px solid #fff;

        select {
          text-align: center;
          width: 100%;
          height: 100%;
          border: 0;
          outline: none;
        }
      }

      &__input {
        flex: 1;

        input {
          width: 100%;
          height: 100%;
        }
      }

      &__btn {
        padding: 0;
        text-align: center;
        width: 80px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-radius: 0;
      }
    }

    .userinfo {
      margin-top: 30px;
      float: right;
      white-space: nowrap;
      a {
        display: inline-block;
        margin-left: 20px;
        vertical-align: middle;

        &.msg {
          position: relative;
          margin-top: 2px;

          .icon {
            font-size: 20px;
            color: #3f8dfd;
          }
          .pi {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #ff3b30;
            border: 1px solid #ffffff;
            border-radius: 10px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }

        &.name {
          position: relative;
          z-index: 99;
          img {
            width: 24px;
            vertical-align: middle;
          }

          .modal-box {
            width: 162px;
            background: #ffffff;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            position: absolute;
            top: 55px;
            left: -40px;
            li {
              margin-left: 10px;
              border-bottom: 1px solid #eeeeee;
              height: 40px;
              line-height: 40px;
              cursor: pointer;
              padding-left: 5px;

              &:hover {
                background: #eeeeee;
                color: #3f8dfd;
              }

              &:nth-last-of-type(1) {
                border: 0;
              }
            }
          }
        }
      }
    }

    .text-list {
      margin-top: 30px;
      text-align: right;
      font-size: 0;

      a {
        display: inline-block;
        margin: 0;
        color: #3f8dfd;
        font-size: 14px;
        padding: 0 14px;

        &:nth-last-of-type(1) {
          padding-right: 0;
          border-left: 1px solid #3f8dfd;
        }
      }
    }
  }
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  height: 0;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
  height: 122px;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
</style>