header.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <nav class="client-head">
  3. <div class="client-container head-layout">
  4. <div class="head-left">
  5. <a></a>
  6. <el-menu
  7. :default-active="activeIndex"
  8. class="el-menu-demo"
  9. :router="true"
  10. mode="horizontal"
  11. >
  12. <template v-for="(item,index) in headerArr">
  13. <el-submenu :index="`${item.keyPath}`" v-if="item.children && item.children.length > 0" popper-class="mta-menu-two">
  14. <template slot="title">{{item.content}}</template>
  15. <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
  16. :key="child.keyPath">{{child.content}}
  17. </el-menu-item>
  18. </el-submenu>
  19. <el-menu-item :index="`${item.keyPath}`" v-else>
  20. {{item.content}}
  21. </el-menu-item>
  22. </template>
  23. </el-menu>
  24. </div>
  25. <div class="head-right">
  26. <i></i><span>4000-522-130</span>
  27. </div>
  28. </div>
  29. </nav>
  30. </template>
  31. <script>
  32. import MtaUploadAlCloud
  33. from '@/components/management/Layout/UploadAlCloud/UploadAlCloud';
  34. import axios from 'axios';
  35. import { mapGetters } from 'vuex';
  36. import { setAuth, removeAuth } from '@/utils/auth';
  37. import { setUserIcon, checkUrlIsNotHttpUrl, getTrimData, } from '@/utils/common';
  38. import { initThemeColor } from '@/utils/theme';
  39. export default {
  40. name: 'mtaHeader',
  41. props: {
  42. activeNav: {
  43. type: String,
  44. require: true,
  45. default: '0',
  46. },
  47. },
  48. components: {
  49. },
  50. data() {
  51. return {
  52. activeIndex: this.activeNav,
  53. headerArr: [
  54. {
  55. content: '首页',
  56. keyPath: '/index',
  57. },
  58. /* {
  59. content: '考试平台',
  60. keyPath: '/c/kecheng/lists',
  61. children: [
  62. {
  63. content: 'xxxxxx',
  64. keyPath: '/c/kecheng/lists',
  65. },
  66. ],
  67. },*/
  68. {
  69. content: '考试平台',
  70. keyPath: '/c/examPlatform',
  71. children: [],
  72. },
  73. {
  74. content: '培训平台',
  75. keyPath: '/c/peixunPlatform',
  76. children: [],
  77. },
  78. {
  79. content: '课程开发',
  80. keyPath: '/c/courseDev',
  81. children: [],
  82. },
  83. {
  84. content: '新闻资讯',
  85. keyPath: '/c/newsInfor',
  86. children: [],
  87. },
  88. {
  89. content: '帮助中心',
  90. keyPath: '/c/helpCenter',
  91. children: [],
  92. }, {
  93. content: '关于我们',
  94. keyPath: '/c/aboutUs',
  95. children: [],
  96. },
  97. ],
  98. };
  99. },
  100. watch: {
  101. '$route.path': function (newVal, oldVal) {
  102. this.activeIndexSync();
  103. },
  104. },
  105. computed: {
  106. },
  107. methods:{
  108. // ************** 导航状态 ****************************
  109. activeIndexSync() {
  110. const path = this.$route.path;
  111. const idx = _.findIndex(this.headerArr, function (o) {
  112. return o.keyPath === path;
  113. });
  114. if (idx > -1) {
  115. this.activeIndex = this.headerArr[idx].keyPath;
  116. } else {
  117. for (const header of this.headerArr) {
  118. if (header.children) {
  119. const idx2 = _.findIndex(header.children, function (o) {
  120. return o.keyPath === path;
  121. });
  122. if (idx2 > -1) {
  123. this.activeIndex = header.keyPath;
  124. return;
  125. }
  126. }
  127. }
  128. }
  129. },
  130. checkArray() {
  131. /* if (JSON.parse(this.menuFlag) == 1) {
  132. for (let i = this.headerArr.length - 1; i >= 0; i--) {
  133. if (this.headerArr[i].content == '课程中心') {
  134. this.headerArr.splice(i, 1);
  135. }
  136. if (this.headerArr[i].keyPath === '/c/IndexPeixun') {
  137. this.headerArr.splice(i, 1);
  138. }
  139. if (this.headerArr[i].children && this.headerArr[i].children.length >= 2 && this.headerArr[i].children[1].content == '课程成绩') {
  140. this.headerArr[i].children.splice(1, 1);
  141. }
  142. if (this.headerArr[i].keyPath === '/c/resource/library') {
  143. this.headerArr.splice(i, 1);
  144. }
  145. if (this.headerArr[i].keyPath === '/c/QuestionAndAnswer/lists') {
  146. this.headerArr.splice(i, 1);
  147. }
  148. }
  149. } else {
  150. for (let i = this.headerArr.length - 1; i >= 0; i--) {
  151. if (this.headerArr[i].keyPath === '/c/Index') {
  152. this.headerArr.splice(i, 1);
  153. }
  154. }
  155. }*/
  156. this.activeIndexSync();
  157. },
  158. }
  159. ,
  160. created() {
  161. console.log(this.activeIndex);
  162. this.checkArray();
  163. initThemeColor();
  164. },
  165. };
  166. </script>