<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;
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 {
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();
}
},