暂存

<template>
  <!-- 顶部的信息 -->
  <div>
    <div class="userinfo">
      <header id="newheader">
        <img src="../assets/image/slogo.png" alt="" class="slogo" />
      </header>
      <div class="menu">
        <div v-for="(item, index) in menuList" :key="index">
          <span
            @click="goMenu(item, index)"
            :class="index == selected ? 'selected' : 'noselected'"
            >{{ item }}</span
          >
        </div>
        <div class="language" @click="changeLanguage()">
          {{ $t("language.name") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      userInfo: "",
      menuList: [],
      selected: 0,
    };
  },
  created() {},
  mounted() {
    let localuserStorage = window.localStorage;
    this.userInfo = JSON.parse(localuserStorage.getItem("userStorage"));
    // console.log(localuserStorage.getItem("selectedlocal"));

    this.selected =
      localuserStorage.getItem("selectedlocal") == null
        ? 0
        : localuserStorage.getItem("selectedlocal");
    // '6': '管理员',
    // '7': '答题员',
    // '10': '审核员',
    // '11': '超级管理员',
    // console.log(this.$i18n.locale);
    if (this.$i18n.locale == "zh") {
      this.funZh();
    } else {
      this.funEn();
    }
  },
  methods: {
    funZh() {
      if (this.userInfo.role_id == 7) {
        this.menuList = ["问答管理", "排班管理", "个人中心"];
      } else if (this.userInfo.role_id == 10) {
        this.menuList = ["问答管理", "个人中心"];
      } else if (this.userInfo.role_id == 11 || this.userInfo.role_id == 6) {
        this.menuList = [
          "问答管理",
          "管理员",
          "答题员管理",
          "排班管理",
          "个人中心",
        ];
      }
    },
    funEn() {
      if (this.userInfo.role_id == 7) {
        this.menuList = ["Q&As", "Shift Schedule", "Profile"];
      } else if (this.userInfo.role_id == 10) {
        this.menuList = ["Q&As", "Profile"];
      } else if (this.userInfo.role_id == 11 || this.userInfo.role_id == 6) {
        this.menuList = [
          "Q&As",
          "Admin Users",
          "Tutors",
          "Shift Schedule",
          "Profile",
        ];
      }
    },
    changeLanguage() {
      this.$i18n.locale == "zh"
        ? (this.$i18n.locale = "en")
        : (this.$i18n.locale = "zh"); //设置中英文模式
      localStorage.setItem("languageSet", this.$i18n.locale); //将用户设置存储到localStorage以便用户下次打开时使用此设置
      // console.log(this.$i18n.locale)
      if (this.$i18n.locale == "zh") {
        this.funZh();
      } else {
        this.funEn();
      }

      this.$emit("listenToChildEvent", this.$i18n.locale);
    },
    goMenu(item, index) {
      console.log(item);

      this.selected = index;
      let localuserStorage = window.localStorage;
      localuserStorage.setItem("selectedlocal", index);
      switch (item) {
        case "管理员":
          this.$router.push("rolelist");
          break;
        case "Admin Users":
          this.$router.push("rolelist");
          break;
        case "答题员管理":
          this.$router.push("answeruserlist");
          break;
        case "Tutors":
          this.$router.push("answeruserlist");
          break;
        case "问答管理":
          if (this.userInfo.role_id == 7) {
            this.$router.push("answerlist");
          } else if (this.userInfo.role_id == 10) {
            this.$router.push("auditorlist");
          } else if (this.userInfo.role_id == 11) {
            this.$router.push("operatinglist");
          }
          break;
        case "Q&As":
          if (this.userInfo.role_id == 7) {
            this.$router.push("answerlist");
          } else if (this.userInfo.role_id == 10) {
            this.$router.push("auditorlist");
          } else if (this.userInfo.role_id == 11) {
            this.$router.push("operatinglist");
          }
          break;
        case "排班管理":
          if (this.userInfo.role_id == 7) {
            this.$router.push("answertime");
          } else if (this.userInfo.role_id == 11) {
            this.$router.push("operatingtime");
          }
          break;
        case "Shift Schedule":
          if (this.userInfo.role_id == 7) {
            this.$router.push("answertime");
          } else if (this.userInfo.role_id == 11) {
            this.$router.push("operatingtime");
          }
          break;
        case "个人中心":
          if (this.userInfo.role_id == 7) {
            this.$router.push("answeruser");
          } else if (this.userInfo.role_id == 10) {
            this.$router.push("auditoruser");
          } else if (this.userInfo.role_id == 11) {
            this.$router.push("auditoruser");
          }
          break;
        case "Profile":
          if (this.userInfo.role_id == 7) {
            this.$router.push("answeruser");
          } else if (this.userInfo.role_id == 10) {
            this.$router.push("auditoruser");
          } else if (this.userInfo.role_id == 11) {
            this.$router.push("auditoruser");
          }
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.userinfo {
  z-index: 9999;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 59px;
  opacity: 1;
  background: #f5f7f8;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
  .slogo {
    width: 144px;
    height: 28px;
    margin-left: 66px;
  }
  .menu {
    font-size: 18px;
    margin-right: 66px;
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
      cursor: pointer;
      font-weight: 700;
      padding: 10px 20px;
    }
  }
}

.noselected {
}
.selected {
  color: #fff;
  background: rgba(117, 207, 36, 1);
}
.language {
  margin-left: 20px;
}
</style>
 
<top @listenToChildEvent="showMsgFromChild" />
   showMsgFromChild(data) {
      if (data == "zh") {
        this.funZh();
      } else {
        this.funEn();
      }
    },
posted @ 2021-06-21 16:12  小小小小小前端  阅读(48)  评论(0)  编辑  收藏  举报