You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
go-fly/static/html/main.html

161 lines
4.7 KiB

<html lang="cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="陶士涵">
<title>GO-FLY即时通讯工具集</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.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-container{
margin-top:10px;
height: 100%;
}
.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,
},
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.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>