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')"
              :style="$route.path === '/about' ? 'color:red;' : ''">走进祥粤</a> -->
            <a v-if="item.name == '课程'" @click="go('/course-list')"
              :style="$route.path === '/course-list' ? 'color:red;' : ''">课程</a>
            <a v-if="item.name == '直播'" @click="go('/live-list')"
              :style="$route.path === '/live-list' ? 'color:red;' : ''">直播</a>
            <a v-if="item.name == '题库'" @click="go('/bank-list')"
              :style="$route.path === '/bank-list' ? 'color:red;' : ''">题库</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>
          <div @click.stop="" class="popover_style">
            {{ msgData.text }} <el-button style="float:right;" type="text">立即学习</el-button>
          </div>
        </a> -->
        
        <!-- <el-tooltip placement="bottom-end" v-model="msgShow" :hide-after="0" manual popper-class="tooltipStyle">
          <el-badge :is-dot="msgCount > 0 ? true : false" class="item" style="vertical-align: baseline">
            <el-button style="font-size: 20px; padding: 0px" icon="el-icon-message-solid" type="text"
              @click="go('/person-center/my-message')"></el-button>
          </el-badge>
          <div slot="content" class="dis_plays">
            <p style="max-width: 247px">{{ msgData.text }}</p>
            <div class="toolbth" @click="newGoToStudy">立即学习</div>
            <i style="font-size: 18px; cursor: pointer" class="el-icon-close" @click="clearMsg"></i>
          </div>
        </el-tooltip> -->
        <el-badge :is-dot="msgCount > 0 ? true : false" class="item" style="vertical-align: baseline">
          <el-button style="font-size: 20px; padding: 0px" icon="el-icon-message-solid" type="text"
            @click="go('/person-center/my-message')"></el-button>
        </el-badge>
        <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>

    <RebuildModal ref="rebuildModal" @rebuildSubmit="rebuildSubmit($event)"></RebuildModal>
  </header>
</template>

<script>
import RebuildModal from "@/components/rebuildModal";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "Header",
  components: {
    RebuildModal,
  },
  data() {
    return {
      searchKey: "",
      type: "1",
      showBox: false,
      timer: null,
      msgData: {},
      sysTime: 0,
      msgShow: false,
    };
  },
  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.$request.informUserselectLastUnStudyMsg().then((res) => {
      //   if (res.data && res.data.id) {
      //     let today = new Date(new Date().toLocaleDateString()).getTime();
      //     if (localStorage.getItem("msg")) {
      //       let ary = JSON.parse(localStorage.getItem("msg"));
      //       if (ary.updateTime === today) {
      //         this.msgShow = false;
      //         return;
      //       }
      //     }
      //     this.$nextTick(() => {
      //       this.msgData = res.data;
      //       this.msgShow = true;
      //     });
      //   } else {
      //     this.msgShow = false;
      //   }
      // });
      this.getMsgCount();
    }
  },
  methods: {
    ...mapMutations(["getMsgCount"]),
    rebuildSubmit(item) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1,
        },
      });
    },
    getGoodsData() {
      return new Promise((resolve, reject) => {
        this.$request.goodsDetail(this.msgData.goodsId).then((res) => {
          resolve(res.data);
        });
      });
    },
    /**
     * 关闭消息
     */
    clearMsg() {
      let ary = {
        userId: this.msgData.userId,
        msgId: this.msgData.id,
        updateTime: new Date(new Date().toLocaleDateString()).getTime(),
      };
      localStorage.setItem("msg", JSON.stringify(ary));
      this.msgShow = false;
    },
    /**
     * 前往学习
     */
    async newGoToStudy() {
      let item = await this.getGoodsData();
      if (item.goodsType == 1) {
        this.sysTime = this.$tools.timest();
        item.orderGoodsId = this.msgData.orderGoodsId;
        this.canJump(item).then((res) => {
          this.clearMsg();
          this.$router.push({
            path: `/my-course-detail/${item.goodsId}`,
            query: {
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
              courseId: res.rows[0].courseId || "",
            },
          });
        });

        // arsty = '立刻学习';

        //题库
      } else if (item.goodsType == 2) {
        this.clearMsg();
        this.$router.push({
          path: "/person-center/my-bank/bank-detail/" + item.goodsId,
          query: {
            orderGoodsId: item.orderGoodsId,
          },
        });
      }
    },
    canJump(item) {
      return new Promise((resolve) => {
        this.$request
          .orderInfo({
            orderGoodsId: item.orderGoodsId,
          })
          .then(async (res) => {
            let items = res.data;
            let currentTime = this.$tools.timest();
            if (items.interfaceAccountId > 0) {
              //学习账号已开通

              if (items.learnStatus == 1) {
                //跳转第三方h5

                const confirmText = [
                  "您的学习账号已经开通，请按照步骤操作，进行学习。",
                  "1.点击【跳转学习网址】按钮",
                  "2.打开学习网址后，选择【个人用户】进行登录",
                  "(1)账号：您个人的身份证号码",
                  "(2)密码：身份证号码，再加111111",
                ];
                const newDatas = [];
                const h = this.$createElement;
                for (const i in confirmText) {
                  newDatas.push(h("p", null, confirmText[i]));
                }
                this.$confirm(h("div", null, newDatas), "温馨提示", {
                  confirmButtonText: "跳转学习网址",
                  cancelButtonText: "关闭",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  distinguishCancelAndClose: false,
                  showClose: false,
                })
                  .then((_) => {
                    window.open("http://admin.zhujianpeixun.com/", "_blank");
                  })
                  .catch((_) => { });

                return;
              } else {
                this.$message({
                  type: "warning",
                  message:
                    "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
                });
                return;
              }
            }
            // //内部系统
            // if (items.interfacePushId > 0 && items.officialStatus != 1) {
            //   this.$message({
            //     type: "warning",
            //     message:
            //       "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
            //   });
            //   return;
            // }
            if (items.goodsType !== 6) {
              if (
                this.sysTime <= items.serviceStartTime ||
                this.sysTime >= items.serviceEndTime
              ) {
                this.$message({
                  type: "warning",
                  message: "不在学习服务期，不能进入学习",
                });
                return;
              }

              if (
                (items.classStartTime &&
                  this.sysTime <= items.classStartTime) ||
                (items.classEndTime && this.sysTime >= items.classEndTime)
              ) {
                this.$message({
                  type: "warning",
                  message: "不在班级有效期，不能进入学习",
                });
                return;
              }

              if (items.learningStatus == 2) {
                this.$message({
                  type: "warning",
                  message: "开放学习时间待定，不能进入学习",
                });
                return;
              }

              if (items.classStatus == 0) {
                this.$message({
                  type: "warning",
                  message: "尚未开班，不能进入学习",
                });
                return;
              }
              if (
                items.learningStatus == 3 &&
                this.sysTime < items.learningTimeStart
              ) {
                this.$message({
                  type: "warning",
                  message: "不在开放学习时间,不能进入学习",
                });
                return;
              }

              let rebuildStatus = await this.courseGoodsRebuildStatus(
                items.goodsId,
                items.gradeId
              );

              if (rebuildStatus == 0) {
                this.$refs.rebuildModal.showModal(items);
                return;
              }
            }
            // if (item.educationName == "继续教育") {
            this.$request
              .lockLockStatus({
                action: "jxjy",
              })
              .then((res) => {
                //有其他端在操作，不能学习
                this.$message({
                  type: "warning",
                  message: res.msg,
                });
              })
              .catch((err) => {
                //可以学习
                this.$request
                  .courseCourseList({
                    pageNum: 1,
                    pageSize: 1,
                    goodsId: items.goodsId,
                    gradeId: items.gradeId,
                  })
                  .then((res) => {
                    if (res.rows.length) {
                      resolve(res);
                    } else {
                      this.$message({
                        type: "warning",
                        message: "课程内暂无可以学习的科目",
                      });
                    }
                  });
              });

            // } else {
            //   this.$request
            //     .courseCourseList({
            //       pageNum: 1,
            //       pageSize: 1,
            //       goodsId: items.goodsId,
            //       gradeId: items.gradeId,
            //     })
            //     .then((res) => {
            //       if (res.rows.length) {
            //         resolve(res);
            //       } else {
            //         this.$message({
            //           type: "warning",
            //           message: "课程内暂无可以学习的科目",
            //         });
            //       }
            //     });
            // }
          });
      });
    },

    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    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) {
      if (path === this.$route.path) {
        this.$router.push({
          path: "refresh", //refresh路由地址和当前要刷新路由地址同级即可
        });
        return;
      }
      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 {    
          a {
            margin: 0 20px;
            color: #333;
          }

          a:hover {
            color: #3f8dfd;
          }
        }
      }
    }

    .search {
      float: right;
      margin-right: 12px;
      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;
          }

          .popover_style {
            position: absolute;
            top: 150%;
            left: -100px;
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #333;
            padding: 0px 6px;
            width: 300px;
            white-space: normal;
          }
        }

        &.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 {
      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;
}

.dis_plays {
  display: flex;
  align-items: center;
}

.toolbth {
  border-radius: 55px;
  background-color: #fff;
  color: #3f8dfd;
  font-size: 14px;
  padding: 5px 14px;
  margin-right: 16px;
  user-select: none;
  cursor: pointer;
}
</style>
<style lang="scss">
.tooltipStyle {
  background-color: #3f8dfd !important;
  color: #fff;
}

.tooltipStyle .popper__arrow {
  border-bottom-color: #3f8dfd !important;
}

.tooltipStyle .popper__arrow::after {
  border-bottom-color: #3f8dfd !important;
}
</style>