bigDataStudent/src/views/layout/components/Header.vue

<template>
  <div class="header" ref="headerMenu">
    
    <el-dialog title="绑定邮箱" center width="450px" :visible.sync="bindEmailData.dialogShow">
      <bindEmail
        :rowsData="rowsData"
        @update-showEmailSuccess="updateShowEmailSuccess"
      ></bindEmail>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog
      title="修改密码"
      center
      class="page_dialog"
      width="450px"
      :append-to-body="true"
      :visible.sync="editPassWordData.dialogShow"
    >
      <div  class="dialog_center padding_20">
        <el-form :model="editPassWordData" label-width="120px" :rules="editPassWordDataRules" ref="editPassWordData">
          <el-form-item label="原始密码： " prop="passWord">
            <el-input v-model="editPassWordData.passWord" show-password/>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassWord">
            <el-input v-model="editPassWordData.newPassWord" show-password/>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmNewPassWord">
            <el-input v-model="editPassWordData.confirmNewPassWord" show-password/>
          </el-form-item>
        </el-form>
        
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button @click="editPassWordData.dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="confirmPassWord">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 绑定邮箱 -->
    <el-dialog
      title="绑定邮箱"
      width="480px"
      :append-to-body="true"
      :visible.sync="editBindEmail.dialogShow"
    >
      <div v-if="userEmail" ref="emailInfo">
        <div>
          <p style="color: #000; font-size: 16px; padding: 16px 65px">
            已绑定邮箱
          </p>
          <div
            style="
              border: 1px solid #e4e7ed;
              border-radius: 6px;
              padding: 16px 20px;
              width: 389px;
              margin-left: 0px;
            "
          >
            <div style="display: inline-block">
              <p style="color: #303133; font-size: 18px">
                {{ userEmail }}
              </p>
            </div>
            <div style="display: inline-block; margin-left: 85px">
              <el-button type="primary" plain @click="setClearEmail"
                >解除绑定</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="!userEmail">
        <div
          style="
            border-radius: 6px;
            padding: 16px 20px;
            width: 389px;
            text-align: center;
            margin-left: 0px;
          "
        >
          <p style="color: #606266; font-size: 18px; margin-bottom: 10px">
            暂未绑定邮箱
          </p>
          <el-button type="primary" @click="setEmail">立即绑定</el-button>
        </div>
      </div>
      <p style="color: #909399; font-size: 12px; margin-top: 66px">
        *每个账号仅允许绑定一个邮箱号，每个邮箱号仅支持绑定一个账号
      </p>
    </el-dialog>
    <div class="headerBox">
      <div class="logo">
        <img alt="" :src="schoolLogo" class="header_icon" v-if="schoolLogo"/>
        <img src="@/assets/head_icon.svg" alt="" class="header_icon" v-else/>
        <div class="top_title_blod">大数据精准教学诊断平台</div>
        <img class="version_icon" src="@/assets/version.webp" alt="">
      </div>
      <div class="headerMenu">
        <div class="menuList">
          <el-menu
            :default-active="activeMenuName"
            class="el-menu-wrap"
            mode="horizontal"
            :router="true"
            @select="menuSelect"
            background-color="#2E64FA"
            text-color="#fff"
            active-text-color="#fff"
          >
            <el-menu-item
              :index="item.externalLink"
              v-for="(item, index) in menuList"
              :class="{report:item.versions}"
              :key="index"
              >
              <span class="menuName">{{ item.menuName }}</span>
              <!-- <div class="versions" v-if="item.versions"><span>V</span><span>{{ item.versions }}</span></div> -->
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="user_info">
        <el-dropdown
          @command="UserCommand"
          placement="top-start"
         trigger="click"
        >
          <span class="user_name">
            {{ studentName }}<i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="bindUserEmail">绑定邮箱</el-dropdown-item> -->
            <el-dropdown-item command="setPassWord">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import bindEmail from "@/views/userInfo/components/userSetting/bindEmail.vue";
import { encrypt } from "@/utils/jsencrypt";
import { removeToken } from "@/utils/auth";
export default {
  computed: {
    ...mapGetters(["userInfo"]),
    // 用户名
    studentName() {
      return this.userInfo.userName;
    },
    // 用户邮箱
    userEmail() {
      return this.userInfo.userEmail;
    },

    schoolLogo() {
      return this.$store.state.user.schoolLogo || "";
    }
  },
  components: {
    bindEmail,
  },
  data() {
    return {
      activeMenuName: "/userInfo/personInfo",
      editPassWordData: {
        dialogShow: false,
        confirmNewPassWord: "",
        newPassWord: "",
        passWord: "",
      },
      editPassWordDataRules: {
        newPassWord: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        confirmNewPassWord: [
          { required: true, message: "请输入确认新密码", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
      },
      editBindEmail: {
        dialogShow: false,
        email: "",
      },
      bindEmailData: {
        dialogShow: false,
      },
      rowsData: {},
      menuList: [],


    };
  },
  created() {

    this.activeMenu();

    //学生端默认 个人中心 和分析报告两个菜单
    this.menuList = [
      // {
      //   menuName: "分析报告",
      //   externalLink: "/studentAnalysisReport/list",
      //   versions:'8.0'
      // },
      {
        menuName: "分析报告",
        externalLink: "/jointStudentAnalysisReport/list",
        // versions:'8.1'
      },
      {
        menuName: "个人中心",
        externalLink: "/userInfo",
        versions:''
      },
    ];
    
  },
  methods: {

    updateShowEmailSuccess(show) {
      this.$refs.headerMenu.style.zIndex = 600;
      this.bindEmailData.dialogShow = show;
    },
    setClearEmail() {
      this.$confirm(`确认要解绑邮箱?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = { ids: [this.userInfo.id] };
          this.$api.school
            .batchUnBindUserEmail(param)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "解绑成功！",
                  type: "success",
                  offset:100
                });
                this.editBindEmail.dialogShow = false;
                location.reload();
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          //取消
        });
    },
    setEmail() {
      this.rowsData = this.userInfo;
      this.editBindEmail.dialogShow = false;
      this.$refs.headerMenu.style.zIndex = 8888;
      setTimeout(() => {
        this.bindEmailData.dialogShow = true;
      }, 500);
    },
    activeMenu() {
      const path = this.$route.path;
      sessionStorage.setItem('student_currentPath', path);//当前页面路由
      // 按优先级匹配
      if (path === '/studentAnalysisReport/list') {
        sessionStorage.setItem('schoolType', 1);//单校
        this.activeMenuName = '/studentAnalysisReport/list';
      } else if(path == '/jointStudentAnalysisReport/list'){
        sessionStorage.setItem('schoolType', 2);//联校
        this.activeMenuName = '/jointStudentAnalysisReport/list';
      } else if (path === '/userInfo' || path.startsWith('/userInfo/')) {
        this.activeMenuName = '/userInfo';
      } else {
        // 默认选中分析报告
        const schoolType = sessionStorage.getItem('schoolType');
        if(schoolType == 1){//单校
          this.activeMenuName = '/studentAnalysisReport/list';
        }else if(schoolType == 2){
          this.activeMenuName = '/jointStudentAnalysisReport/list';
        }
      }
    },
    menuSelect(key, keyPath) {
      // let pathMenu = ["/examMarking","/userInfo","/analysisReportList/list","/knowTopic"];
      // // let toPathMenu = ["/userInfo/personInfo"]
      // if(key == "/userInfo"){
      //   key = "/userInfo"
      // }
      // this.activeMenuName = key;
    },
    UserCommand(command) {
      if (command == "logout") {
        this.logout();
      } else if (command == "setPassWord") {
        this.OpenUpdatePassWord();
      } else if (command == "bindUserEmail") {
        this.setBindEmail();
      }
    },
    logout() {
      this.$store.dispatch("user/logout");//暂不调用退出接口，直接跳转到登录页面
      // window.location.href = `${process.env.VUE_APP_BASE}`;
      // 跳出 iframe，跳转到顶级窗口
      // window.top.location.href = `${process.env.VUE_APP_BASE}`;
      sessionStorage.clear();
      removeToken();
      window.parent.location.href = `${process.env.VUE_APP_BASE}`;
    },

    //打开修改密码弹窗
    OpenUpdatePassWord() 
    {
      this.editPassWordData.dialogShow = true;
    },
    setBindEmail() {
      this.editBindEmail.dialogShow = true;
    },
    confirmPassWord() {
      this.$refs.editPassWordData.validate((valid) => {
        if (valid) {
          let { newPassWord, passWord, confirmNewPassWord } =
            this.editPassWordData;
          if (newPassWord != confirmNewPassWord) {
            this.$message({
              message: "两次输入密码不一致",
              type: "warning",
              offset:100
            });
            return;
          }

          let param = {
            newPassword: encrypt(newPassWord.trim()),
            oldPassword: encrypt(passWord),
            // confirmNewPassword: encrypt(confirmNewPassWord),
          };
          this.$api.user
            .changeMinePassword(param)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  offset:100
                });
                this.editPassWordData = {
                  dialogShow: false,
                  confirmNewPassWord: "",
                  newPassWord: "",
                  passWord: "",
                };
              }
              else
              {
                this.$message({
                  message: "修改失败!"+res.msg,
                  type: "error",
                  offset:100   
                });
              }
            })
            .catch(() => {
              this.$message({
                message: "修改失败",
                type: "error",
                offset:100
              });
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 64px;
  font-size: 22px;
  color: #fff;
  box-sizing: border-box;
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  // background-color: #2365ae;
  background-color: #2e64fa;
}
.headerBox {
  // margin: 0 auto;
  box-sizing: border-box;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .logo {
    min-width: 430px;
    width: auto;
    display: inline-flex;
    align-items: center;
    margin-right: 60px;
    div.top_title_blod {
      font-size: 26px;
      font-weight: 500;
      color: #fff;
      text-align: center;
      vertical-align: middle;
      margin: 0 10px;
    }
    p.top_subTitle {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 2px;
    }
    img.header_icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    img.project_title {
      width: 207px;
      height: 27px;
    }
    img.version_icon {
      width: 75px;
    }
  }
  .headerMenu {
    flex: 1;
    // margin-left:100px;
    // width:816px;
    display: flex;
  }
  .el-menu-wrap {
    height: 64px;
    li {
      font-size: 18px;
      border-bottom: 0;
      padding: 0 20px;
      line-height: 64px;
      height: 60px;
      position: relative;
      &.report{
        padding: 0 60px 0 20px;
      }
      &.is-active {
        font-weight: bold;
        background-color: rgba(0, 0, 0, 0.2) !important;
      }
      .versions{
        position: absolute;
        right: 24px;
        top:8px;
        width: 34px;
        height: 18px;
        border-radius: 25px;
        border: 1px solid #FFFFFF;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        span{
          display: inline-flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          line-height: normal;
          transform: scale(0.9);
          &:first-child{
            font-size: 12px;
            margin-right: 2px;
            line-height: 12px;
          }
          &:nth-child(2){
            font-size: 12px;
          }
        }
      }
    }
  }
  .userName {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    cursor: pointer;
    .userIconSty {
      margin-left: 6px;
      font-size: 20px;
    }
  }
}

.user_info
{
  width: auto;
  // background-color: red;
  // margin-right: -10px;
  line-height: 30px;
  .user_name
  {
    font-size: 15px;
    color:#fff;
    cursor: pointer;

    i
    {
      margin-left: 10px;
    }
  }
}
.el-dropdown-menu {
  left: auto !important; /* 取消默认左对齐 */
  right: 30px !important; /* 右对齐 */
}
:deep() .el-menu.el-menu--horizontal {
  border-bottom: 0px;
}
button.el-button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.edit_pass_word {
  padding: 20px;
  .dialog_footer {
    padding: 0 !important;
    width: calc(100% - 40px);
    margin: auto;
    height: 64px;
    display: flex;
    justify-content: space-between;

    .footer_left {
      width: auto;
      height: 64px;
    }

    .footer_right {
      width: auto;
      height: 64px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>