Header.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522
  1. <template>
  2. <!-- 顶部登录导航 -->
  3. <div class="LoginNav1">
  4. <div class="logo" v-if="configInfor">
  5. <img
  6. v-if="configInfor.logo_image_url"
  7. :src="configInfor.logo_image_url"
  8. alt=""
  9. class="logo-image"
  10. @click="handleSelect"
  11. />
  12. <span class="logo-img" v-else>logo</span>
  13. <ul class="logo-projectlist">
  14. <li
  15. v-for="(itemI, indexI) in projectList"
  16. :key="indexI"
  17. :class="indexI == LoginNavIndex ? 'active' : ''"
  18. @click="handleCommand(indexI)"
  19. >
  20. {{ itemI.name }}
  21. </li>
  22. </ul>
  23. </div>
  24. <div class="userName">
  25. <template>
  26. <el-dropdown
  27. style="margin-right: 16px; cursor: pointer"
  28. trigger="click"
  29. @command="changeLang"
  30. >
  31. <span class="el-dropdown-link" style="color: #000000">
  32. {{ lang }}
  33. <i class="el-icon-arrow-down el-icon--right"></i>
  34. </span>
  35. <el-dropdown-menu slot="dropdown" style="width: 200px">
  36. <el-dropdown-item
  37. v-for="item in language_list"
  38. :key="item.language_type"
  39. :command="item"
  40. >{{ item.language_name }}</el-dropdown-item
  41. >
  42. </el-dropdown-menu>
  43. </el-dropdown>
  44. </template>
  45. <div v-if="!userMessage" class="selectLoginOrRegistration">
  46. <span @click="cutLoginReg"> <!-- 登录 -->{{ $t("Key9") }} </span>
  47. </div>
  48. <!-- 用户头像和用户名 -->
  49. <div class="user" v-else>
  50. <img
  51. @click="userShow = !userShow"
  52. class="headPhoto"
  53. :src="
  54. userMessage.image_url
  55. ? userMessage.image_url
  56. : require('../assets/login/Group3214.png')
  57. "
  58. alt=""
  59. />
  60. <span @click="userShow = !userShow">{{ userMessage.user_real_name }}</span>
  61. <div class="userShow" v-show="userShow">
  62. <p @click="gotoPersonalcenter">
  63. <img src="../assets/login/project7.png" alt="" />
  64. <!-- 个人中心 -->{{ $t("Key8") }}
  65. </p>
  66. <p @click="QuitLogin">
  67. <img src="../assets/login/Frame77.png" alt="" />
  68. <!-- 退出登录 -->{{ $t("Key39") }}
  69. </p>
  70. </div>
  71. </div>
  72. <!-- 消息 铃铛图片 -->
  73. <div class="message">
  74. <img @click="gotoPersonalcenter" src="../assets/login/Vector.png" alt="" />
  75. <span class="redDot" v-if="is_exist == 'true'"></span>
  76. </div>
  77. </div>
  78. </div>
  79. </template>
  80. <script>
  81. import { mapGetters } from "vuex";
  82. import { getToken, removeToken } from "@/utils/auth";
  83. import Cookies from "js-cookie";
  84. import {
  85. getContent,
  86. getStaticContent,
  87. getLearnWebContent,
  88. getContentFile,
  89. } from "@/api/api";
  90. import { setI18nLang } from "@/utils/i18n";
  91. import { getConfig } from "@/utils/auth";
  92. import { saveSession, getSession, removeSession } from "@/utils/role";
  93. export default {
  94. name: "LayoutHeader",
  95. props: [],
  96. data() {
  97. return {
  98. activeIndex: "2", // 主导航索引
  99. LoginNavIndex: 0, //下拉框导航索引
  100. projectName: "教研中心",
  101. projectList: [],
  102. is_exist: "false",
  103. teacherProList: [
  104. //普通教师
  105. {
  106. id: 0,
  107. name: "教学中心",
  108. img: "project1",
  109. },
  110. {
  111. id: 2,
  112. name: "教培中心",
  113. img: "project3",
  114. },
  115. {
  116. id: 3,
  117. name: "教研中心",
  118. img: "project4",
  119. },
  120. {
  121. id: 5,
  122. name: "学习中心",
  123. img: "project6",
  124. },
  125. {
  126. id: 4,
  127. name: "考试中心",
  128. img: "project5",
  129. },
  130. {
  131. id: 6,
  132. name: "个人中心",
  133. img: "project7",
  134. },
  135. ],
  136. stuProList: [
  137. {
  138. id: 0,
  139. name: "教学中心",
  140. img: "project1",
  141. },
  142. {
  143. id: 5,
  144. name: "学习中心",
  145. img: "project6",
  146. },
  147. {
  148. id: 6,
  149. name: "个人中心",
  150. img: "project7",
  151. },
  152. ],
  153. userMessage: null,
  154. userShow: false,
  155. language_list: [],
  156. lang: "",
  157. headTimer: null,
  158. configInfor: null,
  159. };
  160. },
  161. watch: {},
  162. computed: {
  163. ...mapGetters(["language_type"]),
  164. },
  165. methods: {
  166. // 前往个人中心
  167. gotoPersonalcenter() {
  168. if (!this.userMessage) {
  169. this.$message.warning("请先登录");
  170. return;
  171. }
  172. let MethodName = "login_control-CreateAccessCode";
  173. let acsCode = "";
  174. // getContent(MethodName, UserCode, UserType, SessionID).then((res) => {
  175. // acsCode = res.access_code;
  176. location.href = `/GCLS-Personal/#/EnterSys`;
  177. // });
  178. },
  179. // 切换导航
  180. handleSelect(key, keyPath) {
  181. window.location.href = "/";
  182. },
  183. // 切换项目
  184. handleCommand(command) {
  185. let _this = this;
  186. _this.LoginNavIndex = command;
  187. if (!_this.userMessage) {
  188. this.$message.warning("请先登录");
  189. this.projectName = this.$t("Key5"); //"教研中心";
  190. window.location.href = "/";
  191. return;
  192. }
  193. _this.projectName = _this.projectList[command].name;
  194. let relative_path = _this.projectList[command].relative_path;
  195. location.href = relative_path;
  196. },
  197. // 切换登录的注册
  198. cutLoginReg() {
  199. window.location.href = "/";
  200. },
  201. QuitLogin() {
  202. window.location.href = "/";
  203. removeSession("SysList");
  204. removeToken();
  205. Cookies.remove("JSESSIONID");
  206. this.userShow = false;
  207. this.userMessage = null;
  208. },
  209. getLangList() {
  210. let MethodName = "language_manager-GetLanguageList";
  211. let data = {};
  212. getStaticContent(MethodName, data).then((res) => {
  213. this.language_list = res.language_list;
  214. for (let i = 0; i < this.language_list.length; i++) {
  215. let item = this.language_list[i];
  216. if (item.language_type == this.language_type) {
  217. this.lang = item.language_name;
  218. break;
  219. }
  220. }
  221. });
  222. },
  223. async changeLang(command) {
  224. console.log(command);
  225. this.lang = command.language_name;
  226. let lang_type = command.language_type;
  227. await setI18nLang(lang_type);
  228. this.$router.go(0);
  229. },
  230. getNotReadMessage() {
  231. let MethodName = "message-message_manager-IsExistMyMessage_NotRead";
  232. let data = {};
  233. getLearnWebContent(MethodName, data).then((res) => {
  234. this.is_exist = res.is_exist;
  235. });
  236. },
  237. // async _getConfig() {
  238. // this.configInfor = await getConfigInfor();
  239. // },
  240. getChildSysList() {
  241. let _this = this;
  242. let MethodName = "login_control-GetChildSysList_CanEnter_PC";
  243. getContentFile(MethodName, {})
  244. .then((res) => {
  245. if (res.child_sys_list && res.child_sys_list.length > 0) {
  246. let invok_module = this.$route.query.invok_module;
  247. _this.projectList = res.child_sys_list;
  248. for (let i = 0; i < _this.projectList.length; i++) {
  249. let item = _this.projectList[i];
  250. if (invok_module) {
  251. if (invok_module == item.key) {
  252. _this.LoginNavIndex = i;
  253. _this.projectName = item.name;
  254. }
  255. } else {
  256. let key = "GCLS-TC";
  257. if (key == item.key) {
  258. _this.LoginNavIndex = i;
  259. _this.projectName = item.name;
  260. }
  261. }
  262. }
  263. }
  264. })
  265. .catch((err) => {
  266. console.log(err);
  267. });
  268. },
  269. },
  270. created() {
  271. let _this = this;
  272. _this.getChildSysList();
  273. },
  274. mounted() {
  275. let _this = this;
  276. let user = getToken();
  277. if (user) {
  278. _this.userMessage = JSON.parse(user);
  279. }
  280. let config = getConfig();
  281. if (config) {
  282. _this.configInfor = JSON.parse(config);
  283. }
  284. _this.getLangList();
  285. _this.getNotReadMessage();
  286. _this.headTimer = setInterval(() => {
  287. _this.getNotReadMessage();
  288. }, 120000);
  289. },
  290. beforeDestroy() {
  291. if (this.headTimer) {
  292. //如果定时器还在运行 或者直接关闭,不用判断
  293. clearInterval(this.headTimer); //关闭
  294. }
  295. },
  296. };
  297. </script>
  298. <style lang="scss" scoped>
  299. .LoginNav1 {
  300. // height: 74px;
  301. height: 64px;
  302. position: relative;
  303. display: flex;
  304. align-items: center;
  305. justify-content: space-between;
  306. box-sizing: border-box;
  307. padding: 0px 24px;
  308. z-index: 999;
  309. // background: #ffffff;
  310. // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  311. font-family: "sourceR";
  312. .el-dropdown-link {
  313. img {
  314. width: 8px;
  315. height: 4px;
  316. vertical-align: middle;
  317. }
  318. }
  319. .logo {
  320. > img {
  321. // width: 188px;
  322. height: 48px;
  323. cursor: pointer;
  324. }
  325. &-img {
  326. font-style: normal;
  327. font-weight: 600;
  328. font-size: 30px;
  329. font-variant: small-caps;
  330. color: #000000;
  331. // color: #fff;
  332. margin-right: 29px;
  333. line-height: 64px;
  334. }
  335. display: flex;
  336. align-items: center;
  337. .logo-projectlist {
  338. display: flex;
  339. padding: 0 24px;
  340. height: 64px;
  341. list-style: none;
  342. li {
  343. padding: 0 12px;
  344. color: rgba(0, 0, 0, 0.45);
  345. font-size: 16px;
  346. line-height: 64px;
  347. font-weight: 500;
  348. cursor: pointer;
  349. &:hover {
  350. background: #f6f6f6;
  351. }
  352. &.active {
  353. color: #ff9900;
  354. background: #ffefd6;
  355. }
  356. }
  357. }
  358. }
  359. .userName {
  360. display: flex;
  361. justify-content: flex-end;
  362. align-items: center;
  363. .seek {
  364. margin-right: 100px;
  365. position: relative;
  366. img {
  367. left: 10px;
  368. top: 11px;
  369. position: absolute;
  370. }
  371. }
  372. .flag {
  373. position: relative;
  374. top: 5px;
  375. }
  376. .headPhoto {
  377. width: 50px;
  378. height: 50px;
  379. // background: url("../assets/teacherTrain/image 4.png") no-repeat 100% 100%;
  380. // background-size: 100%;
  381. border-radius: 50%;
  382. // margin-right: 10px;
  383. }
  384. .message {
  385. height: 100%;
  386. position: relative;
  387. display: flex;
  388. justify-content: center;
  389. align-items: center;
  390. margin-left: 23px;
  391. img {
  392. width: 24px;
  393. cursor: pointer;
  394. }
  395. .redDot {
  396. position: absolute;
  397. top: 2px;
  398. right: 2px;
  399. width: 6px;
  400. height: 6px;
  401. display: inline-block;
  402. background: red;
  403. border-radius: 50%;
  404. }
  405. }
  406. .selectLoginOrRegistration {
  407. display: flex;
  408. height: 32px;
  409. border: 1px solid #ffffff;
  410. box-sizing: border-box;
  411. border-radius: 4px;
  412. justify-content: space-evenly;
  413. align-items: center;
  414. padding: 0 16px;
  415. > span {
  416. cursor: pointer;
  417. font-size: 16px;
  418. color: #000000;
  419. }
  420. }
  421. .user {
  422. display: flex;
  423. align-items: center;
  424. cursor: pointer;
  425. position: relative;
  426. color: #000000;
  427. > img {
  428. width: 34px;
  429. height: 34px;
  430. }
  431. > span {
  432. font-size: 16px;
  433. padding-left: 10px;
  434. }
  435. .userShow {
  436. position: absolute;
  437. width: 156px;
  438. height: 96px;
  439. background: #ffffff;
  440. box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  441. border-radius: 8px;
  442. bottom: -100px;
  443. left: -5px;
  444. color: #000000;
  445. img {
  446. width: 24px;
  447. height: 24px;
  448. margin-right: 10px;
  449. }
  450. p {
  451. font-size: 16px;
  452. height: 40px;
  453. display: flex;
  454. align-items: center;
  455. padding-left: 20px;
  456. margin: 0;
  457. margin-top: 5px;
  458. }
  459. > p:hover {
  460. background: #f2f2f2;
  461. }
  462. }
  463. }
  464. }
  465. }
  466. </style>
  467. <style lang="scss">
  468. .LoginNav1 {
  469. .el-dropdown-menu__item {
  470. line-height: 40px;
  471. display: flex;
  472. justify-content: center;
  473. align-items: center;
  474. > span {
  475. font-family: "sourceR";
  476. font-size: 16px;
  477. }
  478. }
  479. .el-menu--horizontal > .el-menu-item {
  480. height: 64px;
  481. line-height: 64px;
  482. }
  483. .el-dropdown {
  484. display: block;
  485. > span {
  486. font-family: "sourceR";
  487. font-size: 16px;
  488. }
  489. }
  490. .el-menu-item.is-active i {
  491. color: white;
  492. }
  493. }
  494. .projectList {
  495. &.el-dropdown-menu__item {
  496. line-height: 40px;
  497. display: flex;
  498. align-items: center;
  499. color: #000000;
  500. > img {
  501. top: 0;
  502. }
  503. > span {
  504. line-height: 40px;
  505. font-family: "sourceR";
  506. }
  507. }
  508. &:hover {
  509. background: #ff9900 !important;
  510. // background: rgba(255, 153, 0, 0.1) !important;
  511. color: #000 !important;
  512. // color: #fff;
  513. }
  514. &.menuActive {
  515. background: #ff9900;
  516. }
  517. }
  518. </style>