main.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <html lang="cn">
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="description" content="">
  5. <meta name="author" content="陶士涵">
  6. <title>美天旺即时通讯工具集</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
  8. <link rel="stylesheet" href="/static/css/common.css">
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  12. <style>
  13. html,
  14. body {
  15. height: 100%;
  16. padding: 0;
  17. margin: 0;
  18. }
  19. body {
  20. overflow: hidden;
  21. background-color: #f5f5f5;
  22. }
  23. .el-aside{
  24. height: 100%;
  25. background: #fff;
  26. border: solid 1px #e6e6e6;
  27. }
  28. .el-aside .el-menu{
  29. border-right: none;
  30. }
  31. .mainLogo{
  32. font-size: 20px;
  33. font-weight: bold;
  34. }
  35. .mainMain{
  36. background: #fff;
  37. margin-left: 10px;
  38. margin-bottom: 60px;
  39. }
  40. .mainIframe{
  41. width: 100%;
  42. height: 100%;
  43. }
  44. .el-card__body{
  45. cursor: pointer;
  46. }
  47. </style>
  48. </head>
  49. <body class="text-center">
  50. <div id="app">
  51. <template>
  52. {{template "nav" }}
  53. <iframe class="mainIframe" v-bind:src="iframeUrl" frameborder="0"></iframe>
  54. </template>
  55. </div>
  56. </body>
  57. <script>
  58. new Vue({
  59. el: '#app',
  60. delimiters:["<{","}>"],
  61. data: {
  62. iframeUrl:"",
  63. mailTotal:0,
  64. adminAvator:"",
  65. adminRole:"",
  66. },
  67. methods: {
  68. openIframeUrl(url){
  69. this.iframeUrl=url;
  70. },
  71. //跳转
  72. openUrl(url){
  73. window.location.href=url;
  74. },
  75. GetQueryString(name){
  76. var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  77. var r = window.location.search.substr(1).match(reg);
  78. if(r!=null)return unescape(r[2]); return null;
  79. },
  80. checkAuth(){
  81. let _this=this;
  82. $.ajax({
  83. type:"post",
  84. url:"/check_auth",
  85. headers:{
  86. "token":localStorage.getItem("token")
  87. },
  88. success: function(data) {
  89. if (data.code != 200) {
  90. window.location.href="/login";
  91. } else {
  92. _this.adminAvator=data.result.avator;
  93. _this.adminRole=data.result.role_name;
  94. _this.iframeUrl = "/chat_main";
  95. }
  96. }
  97. });
  98. }
  99. },
  100. created: function () {
  101. this.checkAuth();
  102. }
  103. })
  104. </script>
  105. <script>
  106. new Vue({
  107. delimiters:["<{","}>"],
  108. data: {
  109. websock: null,
  110. },
  111. created() {
  112. //this.initWebSocket();
  113. },
  114. destroyed() {
  115. this.websock.close() //离开路由之后断开websocket连接
  116. },
  117. methods: {
  118. initWebSocket(){ //初始化weosocket
  119. const wsuri = "ws://127.0.0.1:8080/push_mail";
  120. this.websock = new WebSocket(wsuri);
  121. this.websock.onmessage = this.websocketonmessage;
  122. this.websock.onopen = this.websocketonopen;
  123. this.websock.onerror = this.websocketonerror;
  124. this.websock.onclose = this.websocketclose;
  125. },
  126. websocketonopen(){ //连接建立之后执行send方法发送数据
  127. // let actions = "ping";
  128. // let _this=this;
  129. // setInterval(function(){
  130. // _this.websocketsend(JSON.stringify(actions));
  131. // },10000);
  132. },
  133. websocketonerror(){//连接建立失败重连
  134. this.initWebSocket();
  135. },
  136. websocketonmessage(e){ //数据接收
  137. const redata = JSON.parse(e.data);
  138. if (redata.code==200){
  139. this.$notify({
  140. title: redata.result.folder_name,
  141. message: "新邮件:"+redata.result.new_num,
  142. type: 'success',
  143. duration: 0,
  144. });
  145. }
  146. },
  147. websocketsend(Data){//数据发送
  148. this.websock.send(Data);
  149. },
  150. websocketclose(e){ //关闭
  151. console.log('断开连接',e);
  152. },
  153. },
  154. });
  155. </script>
  156. </html>