| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="description" content="">
- <meta name="author" content="wen studio">
- <title>美天旺即时通讯工具集</title>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
- <link rel="stylesheet" href="/static/css/common.css">
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
- <style>
- html,
- body {
- height: 100%;
- padding: 0;
- margin: 0;
- }
- body {
- overflow: hidden;
- background-color: #f5f5f5;
- }
- .el-aside{
- height: 100%;
- background: #fff;
- border: solid 1px #e6e6e6;
- }
- .el-aside .el-menu{
- border-right: none;
- }
- .mainLogo{
- font-size: 20px;
- font-weight: bold;
- }
- .mainMain{
- background: #fff;
- margin-left: 10px;
- margin-bottom: 60px;
- }
- .mainIframe{
- width: 100%;
- height: 100%;
- }
- .el-card__body{
- cursor: pointer;
- }
- </style>
- </head>
- <body class="text-center">
- <div id="app">
- <template>
- {{template "nav" }}
- <iframe class="mainIframe" v-bind:src="iframeUrl" frameborder="0"></iframe>
- </template>
- </div>
- </body>
- <script>
- new Vue({
- el: '#app',
- delimiters:["<{","}>"],
- data: {
- iframeUrl:"",
- mailTotal:0,
- adminAvator:"",
- adminRole:"",
- },
- methods: {
- openIframeUrl(url){
- this.iframeUrl=url;
- },
- //跳转
- openUrl(url){
- window.location.href=url;
- },
- GetQueryString(name){
- var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
- var r = window.location.search.substr(1).match(reg);
- if(r!=null)return unescape(r[2]); return null;
- },
- checkAuth(){
- let _this=this;
- $.ajax({
- type:"post",
- url:"/check_auth",
- headers:{
- "token":localStorage.getItem("token")
- },
- success: function(data) {
- if (data.code != 200) {
- window.location.href="/login";
- } else {
- _this.adminAvator=data.result.avator;
- _this.adminRole=data.result.role_name;
- _this.iframeUrl = "/chat_main";
- }
- }
- });
- }
- },
- created: function () {
- this.checkAuth();
- }
- })
- </script>
- <script>
- new Vue({
- delimiters:["<{","}>"],
- data: {
- websock: null,
- },
- created() {
- //this.initWebSocket();
- },
- destroyed() {
- this.websock.close() //离开路由之后断开websocket连接
- },
- methods: {
- initWebSocket(){ //初始化weosocket
- const wsuri = "ws://127.0.0.1:8080/push_mail";
- this.websock = new WebSocket(wsuri);
- this.websock.onmessage = this.websocketonmessage;
- this.websock.onopen = this.websocketonopen;
- this.websock.onerror = this.websocketonerror;
- this.websock.onclose = this.websocketclose;
- },
- websocketonopen(){ //连接建立之后执行send方法发送数据
- // let actions = "ping";
- // let _this=this;
- // setInterval(function(){
- // _this.websocketsend(JSON.stringify(actions));
- // },10000);
- },
- websocketonerror(){//连接建立失败重连
- this.initWebSocket();
- },
- websocketonmessage(e){ //数据接收
- const redata = JSON.parse(e.data);
- if (redata.code==200){
- this.$notify({
- title: redata.result.folder_name,
- message: "新邮件:"+redata.result.new_num,
- type: 'success',
- duration: 0,
- });
- }
- },
- websocketsend(Data){//数据发送
- this.websock.send(Data);
- },
- websocketclose(e){ //关闭
- console.log('断开连接',e);
- },
- },
- });
- </script>
- </html>
|