header.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <div>
  3. <div class="header1">
  4. <div class="header2">
  5. <div class="language">
  6. <span class="active">
  7. <span style="margin-left: 30px;" class="cursor" @click="locale('zh')">{{ $t('common.CN')}}</span>
  8. <span style="margin: 0 14px; display: inline-block; width: 2px; height: 14px; background: #F9F9F9"></span>
  9. <span style="margin-left: 9px;" class="cursor" @click="locale('en')">EN</span>
  10. </span>
  11. <span class="active" style="float: right;">
  12. <span
  13. style="margin-right: 9px;"
  14. @click="toView(2,'Register','')"
  15. v-if="i==1"
  16. >{{ $t('common.register')}}</span>
  17. <span
  18. style="margin-right: 9px;"
  19. @click="toView(2,'login','')"
  20. v-if="i==1"
  21. >{{ $t('common.login')}}</span>
  22. <!-- <span style="margin-right: 9px;" v-if="i==2 || i==3">
  23. {{ $t('common.OngoingProject')}}(
  24. <span style="color: #ff0000;">0</span>)
  25. </span> -->
  26. <el-dropdown trigger="click" @command="handleCommand">
  27. <span style="margin-right: 9px; cursor:pointer;color: #ccc;" v-if="i==2 || i==3">
  28. {{ $t('common.Usercenter')}}
  29. <i class="el-icon-arrow-down"></i>
  30. <el-dropdown-menu slot="dropdown">
  31. <el-dropdown-item
  32. v-for="(item,index) in options"
  33. :command="item"
  34. >{{$t(item.label)}}</el-dropdown-item>
  35. </el-dropdown-menu>
  36. </span>
  37. </el-dropdown>
  38. <span @click="toView(0,'SystemMessage','/SystemMessage')" style="margin-right: 9px;" v-if="i==2 || i==3">
  39. {{ $t('common.MessageNotification')}}(
  40. <span style="color: #ff0000;">{{systemMessageNum}}</span>)
  41. </span>
  42. <!-- <span style="margin-right: 9px;" v-if="i==2 || i==3">
  43. {{ $t('common.MyAttention')}}(
  44. <span style="color: #ff0000;">0</span>)
  45. </span> -->
  46. <!-- <span style="margin-right: 9px;" v-if="i==2 || i==3">{{ $t('common.MyCollection')}}</span> -->
  47. <!-- <span style="margin-right: 9px;" @click="toView(2,'customerService')">{{ $t('common.CustomerService')}}</span> -->
  48. <span
  49. style="margin-right: 9px;"
  50. @click="toView(2,'helpCenter')"
  51. >{{ $t('common.HelpCenter')}}</span>
  52. </span>
  53. </div>
  54. <div class="logo">
  55. <img
  56. :src="$i18n.locale=='zh'?require('@/assets/img/home/LOGO.png'):require('@/assets/img/home/GlobalEnergyInter.png')"
  57. alt
  58. :style="$i18n.locale=='zh'?'width: 836px;':'width:640px;transform:translateY(1px)'"
  59. />
  60. </div>
  61. <!-- <div class="title">
  62. GEIDCP 全球能源互联网发展合作平台
  63. </div>-->
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. import Bus from "@/api/bus"; //注意引入
  70. import {selectPushMsgNum} from '@/api/userCenter'
  71. // import Cookies from 'js-cookie'; //引入cookie操作依赖
  72. export default {
  73. name: 'Headers',
  74. data () {
  75. return {
  76. i:'1',
  77. systemMessageNum:0,
  78. options: [{
  79. value: 'userCenterView',
  80. label: 'common.Usercenter',
  81. json:''
  82. }, {
  83. value: 'information',
  84. label: 'common.BasicInformation',
  85. json:'information'
  86. }, {
  87. value: 'authentication',
  88. label: 'common.RealAuthentication',
  89. json:'/authentication'
  90. }, {
  91. value: 'securitySetting',
  92. label: 'common.SecuritySettings',
  93. json:'/securitySetting'
  94. }, {
  95. value: 'loginOut',
  96. label: 'common.Logout',
  97. json:''
  98. }],
  99. }
  100. },
  101. mounted() {
  102. this.getInitData();
  103. this.getMessageNum();
  104. },
  105. methods: {
  106. getMessageNum(){
  107. if(this.i !=1){
  108. let readStatus='unread'
  109. selectPushMsgNum(readStatus).then(res=>{
  110. if(res.data.page.totalCount>0){
  111. this.systemMessageNum = res.data.page.totalCount;
  112. }else{
  113. this.systemMessageNum = 0;
  114. }
  115. })
  116. }
  117. },
  118. getInitData() {
  119. let locale = window.localStorage.getItem("locale");
  120. if (!locale) {
  121. window.localStorage.setItem("locale", "en");
  122. }
  123. document.title = this.$t('common.GEIDcpTitleSeptember');
  124. this.$i18n.locale = locale;
  125. console.log(
  126. window.localStorage.getItem("locale"),
  127. window.localStorage.getItem("userLogin")
  128. );
  129. //if (window.localStorage.getItem('userLogin')) {
  130. if (this.$Cookies.get("token") && this.$i18n.locale == "zh") {
  131. return (this.i = 2);
  132. } else if (
  133. this.$i18n.locale == "en" && this.$Cookies.get("token")
  134. ) {
  135. return (this.i = 3);
  136. } else {
  137. return (this.i = 1);
  138. }
  139. },
  140. locale(lang) {
  141. this.$i18n.locale = lang;
  142. let locale = window.localStorage.getItem("locale");
  143. if (locale) {
  144. window.localStorage.setItem("locale", lang);
  145. } else {
  146. window.localStorage["locale"] = lang;
  147. }
  148. },
  149. getInitData(){
  150. let locale=window.localStorage.getItem('locale');
  151. let langdefaultLanguage = navigator.language||navigator.userLanguage;//常规浏览器语言和IE浏览器
  152. langdefaultLanguage = langdefaultLanguage.substr(0, 2);//截取lang前2位字符
  153. if(langdefaultLanguage !== 'zh'){
  154. langdefaultLanguage = 'en';
  155. }
  156. if(!locale){
  157. window.localStorage.setItem('locale',langdefaultLanguage)
  158. }
  159. this.$i18n.locale = locale
  160. console.log(window.localStorage.getItem('locale'),window.localStorage.getItem('userLogin'))
  161. //if (window.localStorage.getItem('userLogin')) {
  162. if (this.$Cookies.get('token') && this.$i18n.locale=='zh') {
  163. return this.i=2
  164. }else if(this.$i18n.locale=='en'&& this.$Cookies.get('token')){
  165. return this.i=3
  166. }else {
  167. return this.i=1
  168. }
  169. },
  170. locale(lang){
  171. this.$i18n.locale = lang
  172. let locale=window.localStorage.getItem('locale')
  173. if(locale){
  174. window.localStorage.setItem('locale',lang)
  175. }else {
  176. window.localStorage['locale'] = lang;
  177. }
  178. console.log(window.localStorage.getItem('locale'))
  179. },
  180. handleCommand(command){
  181. if(command.value=='loginOut'){
  182. this.loginOut()
  183. }else {
  184. this.toView(0,command.value,command.json)
  185. }
  186. },
  187. // 退出登录
  188. loginOut(){
  189. this.$confirm(this.$t('common.Thisoperationwilllogout')+'?', this.$t('common.Tips'), {
  190. confirmButtonText: this.$t('common.OK'),
  191. cancelButtonText: this.$t('common.cancel'),
  192. type: 'warning'
  193. }).then(() => {
  194. // 退出的逻辑代码
  195. this.$store
  196. .dispatch("user/LOGOUT")
  197. .then(() => {
  198. // location.href = "/";
  199. this.$router.push({
  200. path: "/login",
  201. });
  202. })
  203. .catch((error) => {
  204. location.href = "/";
  205. });
  206. // this.toView(2,'login','')// 返回登录
  207. // window.localStorage.removeItem('token')
  208. window.sessionStorage.removeItem("token");
  209. // Cookies.remove('login');
  210. this.getInitData();
  211. })
  212. .catch(() => {
  213. this.$message({
  214. type: "info",
  215. message: this.$t('common.Cancelled'),
  216. });
  217. });
  218. },
  219. toView(num, router, json) {
  220. this.$router.push({ name: router, query: { key: json } });
  221. // this.$store.state.router=router
  222. this.$store.commit("modify", router);
  223. // this.$router.push({name:'userCenterView'})
  224. // this.$store.state.router=router
  225. // this.$store.commit('modify', router)
  226. window.localStorage.setItem("router", router);
  227. if (num == 1) {
  228. let i = {
  229. label: "用户中心",
  230. value: "userCenterView",
  231. };
  232. if (window.sessionStorage.getItem("token")) {
  233. return (this.i = 2);
  234. } else if (this.$i18n.locale == "en") {
  235. return (this.i = 3);
  236. } else {
  237. return (this.i = 1);
  238. }
  239. this.$nextTick(() => {
  240. Bus.$emit("title", i);
  241. });
  242. // this.BusChange(i)
  243. }
  244. }
  245. },
  246. };
  247. </script>
  248. <!-- Add "scoped" attribute to limit CSS to this component only -->
  249. <style scoped>
  250. body {
  251. margin: 0;
  252. padding: 0;
  253. }
  254. .header1 {
  255. width: 100%;
  256. height: 120px;
  257. margin: auto;
  258. background: #2c558a;
  259. /* border-bottom: 2px solid #c2c2c2; */
  260. }
  261. .header2 {
  262. width: 1200px;
  263. height: 120px;
  264. margin: auto;
  265. position: relative;
  266. border-bottom: 1px solid #fff;
  267. background: url("../assets/img/home/banner.png") no-repeat;
  268. }
  269. .language {
  270. line-height: 12px;
  271. color: #F9F9F9;
  272. font-weight: 400;
  273. font-size: 16px;
  274. padding-top: 15px;
  275. }
  276. .logo {
  277. position: absolute;
  278. top: 50px;
  279. left: 80px;
  280. width: 260px;
  281. height: 55px;
  282. /* background-image: url(@/assets/logo.png); */
  283. }
  284. .title {
  285. position: absolute;
  286. top: 60px;
  287. left: 450px;
  288. font-size: 30px;
  289. font-weight: 700;
  290. color: #fff;
  291. }
  292. .active span:hover {
  293. color: #ff0000;
  294. cursor: pointer;
  295. }
  296. .el-dropdown {
  297. color:#F9F9F9;
  298. font-size: 16px;
  299. }
  300. </style>