xie.bx
3 years ago
31 changed files with 2178 additions and 0 deletions
@ -0,0 +1,26 @@ |
|||||
|
.DS_Store |
||||
|
node_modules |
||||
|
/dist |
||||
|
|
||||
|
|
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
pnpm-debug.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
|
|
||||
|
# |
||||
|
package-lock.json |
||||
@ -0,0 +1,24 @@ |
|||||
|
# web |
||||
|
|
||||
|
## Project setup |
||||
|
``` |
||||
|
npm install |
||||
|
``` |
||||
|
|
||||
|
### Compiles and hot-reloads for development |
||||
|
``` |
||||
|
npm run serve |
||||
|
``` |
||||
|
|
||||
|
### Compiles and minifies for production |
||||
|
``` |
||||
|
npm run build |
||||
|
``` |
||||
|
|
||||
|
### Lints and fixes files |
||||
|
``` |
||||
|
npm run lint |
||||
|
``` |
||||
|
|
||||
|
### Customize configuration |
||||
|
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/cli-plugin-babel/preset' |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
{ |
||||
|
"name": "web", |
||||
|
"version": "0.1.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"axios": "^1.1.3", |
||||
|
"core-js": "^3.6.5", |
||||
|
"element-ui": "^2.15.10", |
||||
|
"sass": "^1.47.0", |
||||
|
"sass-loader": "^7.3.1", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-axios": "^3.5.0", |
||||
|
"vue-router": "^3.3.3", |
||||
|
"vuex": "^3.6.2", |
||||
|
"vuex-persist": "^3.1.3" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "~4.5.12", |
||||
|
"@vue/cli-plugin-eslint": "~4.5.12", |
||||
|
"@vue/cli-service": "~4.5.12", |
||||
|
"babel-eslint": "^10.1.0", |
||||
|
"eslint": "^6.7.2", |
||||
|
"eslint-plugin-vue": "^6.2.2", |
||||
|
"vue-template-compiler": "^2.6.11" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"parser": "babel-eslint" |
||||
|
}, |
||||
|
"rules": { |
||||
|
"no-mixed-spaces-and-tabs": 0, |
||||
|
"generator-star-spacing": "off", |
||||
|
"no-tabs": "off", |
||||
|
"no-unused-vars": "off", |
||||
|
"no-unused-labels": "off", |
||||
|
"no-console": "off", |
||||
|
"vue/no-unused-components": "off", |
||||
|
"no-irregular-whitespace": "off", |
||||
|
"no-debugger": "off" |
||||
|
} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not dead" |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,30 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
components: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
@import './assets/style/global.css'; |
||||
|
|
||||
|
#app { |
||||
|
font-family: 'Avenir', Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
text-align: center; |
||||
|
color: #2c3e50; |
||||
|
position: absolute; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,154 @@ |
|||||
|
var websock = null; |
||||
|
let rec; //断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
|
||||
|
let isConnect = false; //连接标识 避免重复连接
|
||||
|
let isCompleteConnect = false; //完全连接标识（接收到心跳）
|
||||
|
let wsurl = ""; |
||||
|
let $store = null; |
||||
|
let messageCallBack = null; |
||||
|
let openCallBack = null; |
||||
|
|
||||
|
|
||||
|
let createWebSocket = (url, store) => { |
||||
|
$store = store; |
||||
|
wsurl = url; |
||||
|
initWebSocket(); |
||||
|
}; |
||||
|
|
||||
|
let initWebSocket = () => { |
||||
|
try { |
||||
|
console.log("初始化WebSocket"); |
||||
|
isCompleteConnect = false; |
||||
|
websock = new WebSocket(wsurl); |
||||
|
websock.onmessage = function(e) { |
||||
|
let msg = JSON.parse(decodeUnicode(e.data)) |
||||
|
if (msg.cmd == 0) { |
||||
|
if(!isCompleteConnect){ |
||||
|
// 第一次上传心跳成功才算连接完成
|
||||
|
isCompleteConnect = true; |
||||
|
openCallBack && openCallBack(); |
||||
|
} |
||||
|
heartCheck.reset(); |
||||
|
} else { |
||||
|
// 其他消息转发出去
|
||||
|
messageCallBack && messageCallBack(JSON.parse(e.data)) |
||||
|
} |
||||
|
} |
||||
|
websock.onclose = function(e) { |
||||
|
console.log('WebSocket连接关闭') |
||||
|
isConnect = false; //断开后修改标识
|
||||
|
reConnect(); |
||||
|
} |
||||
|
websock.onopen = function() { |
||||
|
console.log("WebSocket连接成功"); |
||||
|
isConnect = true; |
||||
|
heartCheck.start() |
||||
|
} |
||||
|
|
||||
|
// 连接发生错误的回调方法
|
||||
|
websock.onerror = function() { |
||||
|
console.log('WebSocket连接发生错误') |
||||
|
isConnect = false; //连接断开修改标识
|
||||
|
reConnect(); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.log("尝试创建连接失败"); |
||||
|
reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
|
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
//定义重连函数
|
||||
|
let reConnect = () => { |
||||
|
console.log("尝试重新连接"); |
||||
|
if (isConnect) return; //如果已经连上就不在重连了
|
||||
|
rec && clearTimeout(rec); |
||||
|
rec = setTimeout(function() { // 延迟5秒重连 避免过多次过频繁请求重连
|
||||
|
initWebSocket(wsurl); |
||||
|
}, 5000); |
||||
|
}; |
||||
|
//设置关闭连接
|
||||
|
let closeWebSocket = () => { |
||||
|
websock.close(); |
||||
|
}; |
||||
|
//心跳设置
|
||||
|
var heartCheck = { |
||||
|
timeout: 5000, //每段时间发送一次心跳包 这里设置为20s
|
||||
|
timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
|
||||
|
start: function() { |
||||
|
if(isConnect){ |
||||
|
console.log('发送WebSocket心跳') |
||||
|
let heartBeat = { |
||||
|
cmd: 0, |
||||
|
data: { |
||||
|
userId: $store.state.userStore.userInfo.id |
||||
|
} |
||||
|
}; |
||||
|
websock.send(JSON.stringify(heartBeat)) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
reset: function(){ |
||||
|
clearTimeout(this.timeoutObj); |
||||
|
this.timeoutObj = setTimeout(function() { |
||||
|
heartCheck.start(); |
||||
|
}, this.timeout); |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 实际调用的方法
|
||||
|
function sendMessage(agentData) { |
||||
|
// console.log(globalCallback)
|
||||
|
if (websock.readyState === websock.OPEN) { |
||||
|
// 若是ws开启状态
|
||||
|
websock.send(JSON.stringify(agentData)) |
||||
|
} else if (websock.readyState === websock.CONNECTING) { |
||||
|
// 若是 正在开启状态，则等待1s后重新调用
|
||||
|
setTimeout(function() { |
||||
|
sendMessage(agentData) |
||||
|
}, 1000) |
||||
|
} else { |
||||
|
// 若未开启 ，则等待1s后重新调用
|
||||
|
setTimeout(function() { |
||||
|
sendMessage(agentData) |
||||
|
}, 1000) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function onmessage(callback) { |
||||
|
messageCallBack = callback; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function onopen(callback) { |
||||
|
openCallBack = callback; |
||||
|
if (isCompleteConnect) { |
||||
|
openCallBack(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function decodeUnicode(str) { |
||||
|
str = str.replace(/\\/g, "%"); |
||||
|
//转换中文
|
||||
|
str = unescape(str); |
||||
|
//将其他受影响的转换回原来
|
||||
|
str = str.replace(/%/g, "\\"); |
||||
|
//对网址的链接进行处理
|
||||
|
str = str.replace(/\\/g, ""); |
||||
|
return str; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 将方法暴露出去
|
||||
|
export { |
||||
|
createWebSocket, |
||||
|
closeWebSocket, |
||||
|
sendMessage, |
||||
|
onmessage, |
||||
|
onopen |
||||
|
} |
||||
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,41 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
|
||||
|
html { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
section { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
height: 1px; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb { |
||||
|
/*滚动条里面小方块*/ |
||||
|
border-radius: 2px; |
||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
||||
|
background: #535353; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-track { |
||||
|
/*滚动条里面轨道*/ |
||||
|
-webkit-box-shadow: inset 0 0 5px transparent; |
||||
|
border-radius: 2px; |
||||
|
background: #ededed; |
||||
|
} |
||||
|
|
||||
|
/*# sourceMappingURL=v-im.cssss.map */ |
||||
@ -0,0 +1,15 @@ |
|||||
|
import globalVariable from './globalInfo'; |
||||
|
|
||||
|
function appendToken(url){ |
||||
|
console.log(url); |
||||
|
if(url.indexOf('?')==-1){ |
||||
|
url+="?" |
||||
|
} |
||||
|
url += `access_token=${globalVariable.token}`; |
||||
|
return url; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export default{ |
||||
|
appendToken |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
const token = ''; |
||||
|
|
||||
|
export default { |
||||
|
token |
||||
|
} |
||||
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<el-dialog title="添加好友" :visible.sync="dialogVisible" width="500px" :before-close="onClose"> |
||||
|
<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()"> |
||||
|
<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button> |
||||
|
</el-input> |
||||
|
<el-scrollbar style="height:600px"> |
||||
|
<div v-for="(userInfo) in users" :key="userInfo.id"> |
||||
|
<div class="item"> |
||||
|
<div class="avatar"> |
||||
|
<head-image :url="userInfo.headImage"></head-image> |
||||
|
</div> |
||||
|
<div class="add-friend-text"> |
||||
|
<div>{{userInfo.nickName}}</div> |
||||
|
<div :class="userInfo.online ? 'online-status online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div> |
||||
|
</div> |
||||
|
<el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriends(userInfo)">添加</el-button> |
||||
|
<el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HeadImage from './HeadImage.vue' |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: "addFriends", |
||||
|
components:{HeadImage}, |
||||
|
data() { |
||||
|
return { |
||||
|
users: [], |
||||
|
searchText: "" |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
dialogVisible: { |
||||
|
type: Boolean |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onClose() { |
||||
|
this.$emit("close"); |
||||
|
}, |
||||
|
onSearch() { |
||||
|
this.$http({ |
||||
|
url: "/api/user/findByNickName", |
||||
|
method: "get", |
||||
|
params: { |
||||
|
nickName: this.searchText |
||||
|
} |
||||
|
}).then((data) => { |
||||
|
this.users = data; |
||||
|
}) |
||||
|
}, |
||||
|
onAddFriends(userInfo){ |
||||
|
this.$http({ |
||||
|
url: "/api/friends/add", |
||||
|
method: "post", |
||||
|
params: { |
||||
|
friendId: userInfo.id |
||||
|
} |
||||
|
}).then((data) => { |
||||
|
this.$store.commit("") |
||||
|
this.$message.success("添加成功，对方已成为您的好友"); |
||||
|
let friendsInfo = { |
||||
|
friendId:userInfo.id, |
||||
|
friendNickName: userInfo.nickName, |
||||
|
friendHeadImage: userInfo.headImage, |
||||
|
online: userInfo.online |
||||
|
} |
||||
|
this.$store.commit("addFriends",friendsInfo); |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
isFriend(userId){ |
||||
|
let friendList = this.$store.state.friendsStore.friendsList; |
||||
|
let friend = friendList.find((f)=> f.friendId==userId); |
||||
|
return friend != undefined; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.onSearch(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.item { |
||||
|
height: 80px; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
padding-left: 15px; |
||||
|
align-items: center; |
||||
|
padding-right: 25px; |
||||
|
|
||||
|
.add-friend-text { |
||||
|
margin-left: 15px; |
||||
|
line-height: 80px; |
||||
|
flex: 3; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
height: 100%; |
||||
|
flex-shrink: 0; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.online-status{ |
||||
|
font-size: 12px; |
||||
|
font-weight: 600; |
||||
|
&.online{ |
||||
|
color: #5fb878; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,164 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<div class="item" :class="active ? 'active' : ''"> |
||||
|
<div class="left"> |
||||
|
<head-image :url="chat.headImage" :size="40"> |
||||
|
|
||||
|
</head-image> |
||||
|
<div v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</div> |
||||
|
</div> |
||||
|
<div class="mid"> |
||||
|
<div>{{ chat.showName}}</div> |
||||
|
<div class="msg-text">{{chat.lastContent}}</div> |
||||
|
</div> |
||||
|
<div class="right "> |
||||
|
<div @click.stop="onClickClose()"><i class="el-icon-close close" style="border: none; font-size: 20px;color: black;" title="关闭"></i></div> |
||||
|
|
||||
|
<div class="msg-time"> |
||||
|
<chat-time :time="chat.lastSendTime"></chat-time> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ChatTime from "./ChatTime.vue"; |
||||
|
import HeadImage from './HeadImage.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: "chatItem", |
||||
|
components: { |
||||
|
ChatTime, |
||||
|
HeadImage |
||||
|
}, |
||||
|
data() { |
||||
|
return {} |
||||
|
}, |
||||
|
props: { |
||||
|
chat: { |
||||
|
type: Object |
||||
|
}, |
||||
|
active: { |
||||
|
type: Boolean |
||||
|
}, |
||||
|
index: { |
||||
|
type: Number |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onClickClose(){ |
||||
|
this.$emit("del"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scode lang="scss"> |
||||
|
.item { |
||||
|
height: 65px; |
||||
|
display: flex; |
||||
|
margin-bottom: 1px; |
||||
|
position: relative; |
||||
|
padding-left: 15px; |
||||
|
align-items: center; |
||||
|
padding-right: 5px; |
||||
|
background-color: #eeeeee; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #dddddd; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background-color: #cccccc; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&:hover { |
||||
|
.close { |
||||
|
display: block !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
width: 45px; |
||||
|
height: 45px; |
||||
|
|
||||
|
.unread-text { |
||||
|
position: absolute; |
||||
|
background-color: #f56c6c; |
||||
|
right: -8px; |
||||
|
top: -8px; |
||||
|
color: white; |
||||
|
border-radius: 30px; |
||||
|
padding: 0 5px; |
||||
|
font-size: 10px; |
||||
|
text-align: center; |
||||
|
white-space: nowrap; |
||||
|
border: 1px solid #f1e5e5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.mid { |
||||
|
margin-left: 15px; |
||||
|
flex: 3; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
flex-shrink: 0; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&>div { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.msg-text { |
||||
|
font-size: 14px; |
||||
|
color: #888888; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-end; |
||||
|
height: 100%; |
||||
|
flex-shrink: 0; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&>div { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.close { |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
right: 0; |
||||
|
top: 1rem; |
||||
|
cursor: pointer; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.msg-time { |
||||
|
font-size: 14px; |
||||
|
color: #888888; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
background-color: #eeeeee; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<span>{{formatDate}}</span> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "chatTime", |
||||
|
data() { |
||||
|
return {} |
||||
|
}, |
||||
|
props: { |
||||
|
time: { |
||||
|
type: Number |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
formatDate(){ |
||||
|
console.log(this.time); |
||||
|
let time = new Date(this.time); |
||||
|
let strtime = ""; |
||||
|
let curTime = new Date(); |
||||
|
let dayDiff =curTime.getDate() - time.getDate() ; |
||||
|
if (time.getDate() === new Date().getDate()) { |
||||
|
strtime = time.getHours() < 9 ? "0" + time.getHours() : time.getHours(); |
||||
|
strtime += ":" |
||||
|
strtime += time.getMinutes() < 9 ? "0" + time.getMinutes() : time.getMinutes(); |
||||
|
} else if (dayDiff === 1) { |
||||
|
strtime = "昨天"; |
||||
|
} else if (dayDiff < 7) { |
||||
|
strtime = `${dayDiff}天前`; |
||||
|
} else { |
||||
|
strtime = time.getMonth()+1+"月"+time.getDate()+"日"; |
||||
|
} |
||||
|
|
||||
|
console.log(strtime); |
||||
|
return strtime; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,114 @@ |
|||||
|
<template> |
||||
|
<div class="item" :class="active ? 'active' : ''"> |
||||
|
<div class="avatar"> |
||||
|
<head-image :src="friendsInfo.friendHeadImage" :size="40"> </head-image> |
||||
|
</div> |
||||
|
<div class="text"> |
||||
|
<div>{{ friendsInfo.friendNickName}}</div> |
||||
|
<div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</div> |
||||
|
</div> |
||||
|
<div class="close" @click.stop="$emit('del',friendsInfo,index)"> |
||||
|
<i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HeadImage from './HeadImage.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: "frinedsItem", |
||||
|
components: {HeadImage}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
friendsInfo: { |
||||
|
type: Object |
||||
|
}, |
||||
|
active:{ |
||||
|
type: Boolean |
||||
|
}, |
||||
|
index:{ |
||||
|
type: Number |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
online(){ |
||||
|
return this.$store.state.friendsStore.friendsList[this.index].online; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scope lang="scss"> |
||||
|
.item { |
||||
|
height: 65px; |
||||
|
display: flex; |
||||
|
margin-bottom: 1px; |
||||
|
position: relative; |
||||
|
padding-left: 15px; |
||||
|
align-items: center; |
||||
|
padding-right: 5px; |
||||
|
background-color: #eeeeee; |
||||
|
&:hover { |
||||
|
background-color: #dddddd; |
||||
|
} |
||||
|
|
||||
|
&.active{ |
||||
|
background-color: #cccccc; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.close { |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
right: 10px; |
||||
|
top: 1.825rem; |
||||
|
cursor: pointer; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.close { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 45px; |
||||
|
height: 45px; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
margin-left: 15px; |
||||
|
flex: 3; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
height: 100%; |
||||
|
flex-shrink: 0; |
||||
|
overflow: hidden; |
||||
|
&>div { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.online-status{ |
||||
|
font-size: 12px; |
||||
|
font-weight: 600; |
||||
|
&.online{ |
||||
|
color: #5fb878; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
background-color: #eeeeee; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<template> |
||||
|
<div class='img-box'> |
||||
|
<img src="../assets/default_head.png" style="width: 100%;height: 100%;cursor: pointer;" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "headImage", |
||||
|
data() { |
||||
|
return {} |
||||
|
}, |
||||
|
props: { |
||||
|
size: { |
||||
|
type: Number, |
||||
|
default: 50 |
||||
|
}, |
||||
|
url:{ |
||||
|
type: String, |
||||
|
default: '../assets/default_head.png' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.img-box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: inline-block; |
||||
|
border-radius: 3px; |
||||
|
background-color: #c0c4cc; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,33 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App' |
||||
|
import router from './router' // 自动扫描index.js
|
||||
|
import axios from 'axios' |
||||
|
import VueAxios from 'vue-axios' |
||||
|
import ElementUI from 'element-ui'; |
||||
|
import 'element-ui/lib/theme-chalk/index.css'; |
||||
|
import httpRequest from './utils/httpRequest'; |
||||
|
|
||||
|
import globalApi from './common/globalApi'; |
||||
|
import globalInfo from './common/globalInfo'; |
||||
|
import * as socketApi from './api/wssocket' ; |
||||
|
import store from './store'; |
||||
|
|
||||
|
console.log(store); |
||||
|
Vue.use(ElementUI); |
||||
|
|
||||
|
// 挂载全局
|
||||
|
|
||||
|
Vue.prototype.$wsApi = socketApi; |
||||
|
Vue.prototype.$http = httpRequest // http请求方法
|
||||
|
Vue.prototype.globalApi = globalApi; // 注册全局方法
|
||||
|
Vue.prototype.globalInfo = globalInfo; // 注册全局变量
|
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
new Vue({ |
||||
|
el: '#app', |
||||
|
// 配置路由
|
||||
|
router, |
||||
|
store, |
||||
|
render: h=>h(App) |
||||
|
}) |
||||
@ -0,0 +1,44 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueRouter from 'vue-router' |
||||
|
import Login from '../view/Login' |
||||
|
import Register from '../view/Register' |
||||
|
import Home from '../view/Home' |
||||
|
// 安装路由
|
||||
|
Vue.use(VueRouter); |
||||
|
|
||||
|
// 配置导出路由
|
||||
|
export default new VueRouter({ |
||||
|
routes: [{ |
||||
|
path: "/", |
||||
|
redirect: "/login" |
||||
|
}, |
||||
|
{ |
||||
|
name: "Login", |
||||
|
path: '/login', |
||||
|
component: Login |
||||
|
}, |
||||
|
{ |
||||
|
name: "Register", |
||||
|
path: '/register', |
||||
|
component: Register |
||||
|
}, |
||||
|
{ |
||||
|
name: "Home", |
||||
|
path: '/home', |
||||
|
component: Home, |
||||
|
children:[ |
||||
|
{ |
||||
|
name: "Chat", |
||||
|
path: "/home/chat", |
||||
|
component: () => import("../view/Chat"), |
||||
|
}, |
||||
|
{ |
||||
|
name: "Friends", |
||||
|
path: "/home/friends", |
||||
|
component: () => import("../view/Friends"), |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,78 @@ |
|||||
|
import httpRequest from '../utils/httpRequest.js' |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
|
||||
|
state: { |
||||
|
activeIndex: -1, |
||||
|
chats: [] |
||||
|
}, |
||||
|
|
||||
|
mutations: { |
||||
|
openChat(state,chatInfo){ |
||||
|
let chat = null; |
||||
|
for(let i in state.chats){ |
||||
|
if(state.chats[i].targetId === chatInfo.targetId){ |
||||
|
|
||||
|
chat = state.chats[i]; |
||||
|
// 放置头部
|
||||
|
state.chats.splice(i,1); |
||||
|
state.chats.unshift(chat); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
// 创建会话
|
||||
|
if (chat == null) { |
||||
|
chat = { |
||||
|
targetId: chatInfo.targetId, |
||||
|
type: chatInfo.type, |
||||
|
showName: chatInfo.showName, |
||||
|
headImage: chatInfo.headImage, |
||||
|
lastContent: "", |
||||
|
lastSendTime: new Date().getTime(), |
||||
|
unreadCount: 0, |
||||
|
messages: [], |
||||
|
}; |
||||
|
state.chats.unshift(chat); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
activeChat(state,idx){ |
||||
|
state.activeIndex = idx; |
||||
|
state.chats[idx].unreadCount=0; |
||||
|
}, |
||||
|
removeChat(state,idx){ |
||||
|
state.chats.splice(idx, 1); |
||||
|
if(state.activeIndex >= state.chats.length){ |
||||
|
state.activeIndex = state.chats.length-1; |
||||
|
} |
||||
|
}, |
||||
|
insertMessage(state, msgInfo) { |
||||
|
let targetId = msgInfo.selfSend?msgInfo.recvUserId:msgInfo.sendUserId; |
||||
|
let chat = state.chats.find((chat)=>chat.targetId==targetId); |
||||
|
|
||||
|
chat.lastContent = msgInfo.content; |
||||
|
chat.lastSendTime = msgInfo.sendTime; |
||||
|
chat.messages.push(msgInfo); |
||||
|
// 如果不是当前会话，未读加1
|
||||
|
if(state.activeIndex == -1 || state.chats[state.activeIndex].targetId != targetId){ |
||||
|
chat.unreadCount++; |
||||
|
} |
||||
|
}, |
||||
|
setChatUserInfo(state, userInfo){ |
||||
|
for(let i in state.chats){ |
||||
|
if(state.chats[i].targetId == userInfo.id){ |
||||
|
state.chats[i].headImage = userInfo.headImage; |
||||
|
state.chats[i].showName = userInfo.nickName; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
resetChatStore(state){ |
||||
|
console.log("清空store") |
||||
|
state.activeIndex = -1; |
||||
|
state.chats = []; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,88 @@ |
|||||
|
import httpRequest from '../utils/httpRequest.js' |
||||
|
|
||||
|
export default { |
||||
|
|
||||
|
state: { |
||||
|
friendsList: [], |
||||
|
activeIndex: -1, |
||||
|
activeUserInfo: {}, |
||||
|
timer: null |
||||
|
}, |
||||
|
mutations: { |
||||
|
initFriendsStore(state, userInfo) { |
||||
|
httpRequest({ |
||||
|
url: '/api/friends/list', |
||||
|
method: 'get' |
||||
|
}).then((friendsList) => { |
||||
|
this.commit("setFriendsList",friendsList); |
||||
|
this.commit("refreshOnlineStatus"); |
||||
|
}) |
||||
|
}, |
||||
|
setActiveUserInfo(state, userInfo){ |
||||
|
state.activeUserInfo = userInfo; |
||||
|
}, |
||||
|
setFriendsList(state, friendsList) { |
||||
|
state.friendsList = friendsList; |
||||
|
}, |
||||
|
activeFriends(state, index) { |
||||
|
state.activeIndex = index; |
||||
|
httpRequest({ |
||||
|
url: `/api/user/find/${state.friendsList[index].friendId}`, |
||||
|
method: 'get' |
||||
|
}).then((userInfo) => { |
||||
|
this.commit("setActiveUserInfo",userInfo); |
||||
|
}) |
||||
|
}, |
||||
|
removeFriends(state, index) { |
||||
|
state.friendsList.splice(index, 1); |
||||
|
}, |
||||
|
addFriends(state, friendsInfo) { |
||||
|
state.friendsList.push(friendsInfo); |
||||
|
}, |
||||
|
refreshOnlineStatus(state){ |
||||
|
let userIds = []; |
||||
|
state.friendsList.forEach((f)=>{userIds.push(f.friendId)}); |
||||
|
httpRequest({ |
||||
|
url: '/api/user/online', |
||||
|
method: 'get', |
||||
|
params: {userIds: userIds.join(',')} |
||||
|
}).then((onlineIds) => { |
||||
|
this.commit("setOnlineStatus",onlineIds); |
||||
|
}) |
||||
|
|
||||
|
// 30s后重新拉取
|
||||
|
clearTimeout(state.timer); |
||||
|
state.timer = setTimeout(()=>{ |
||||
|
this.commit("refreshOnlineStatus"); |
||||
|
},30000) |
||||
|
}, |
||||
|
setOnlineStatus(state,onlineIds){ |
||||
|
state.friendsList.forEach((f)=>{ |
||||
|
let onlineFriend = onlineIds.find((id)=> f.friendId==id); |
||||
|
f.online = onlineFriend != undefined; |
||||
|
console.log(f.friendNickName+":"+f.online); |
||||
|
}); |
||||
|
|
||||
|
let activeFriend = state.friendsList[state.activeIndex]; |
||||
|
state.friendsList.sort((f1,f2)=>{ |
||||
|
if(f1.online&&!f2.online){ |
||||
|
return -1; |
||||
|
} |
||||
|
if(f2.online&&!f1.online){ |
||||
|
return 1; |
||||
|
} |
||||
|
return 0; |
||||
|
}); |
||||
|
|
||||
|
// 重新排序后，activeIndex指向的好友可能会变化，需要重新指定
|
||||
|
if(state.activeIndex >=0){ |
||||
|
state.friendsList.forEach((f,i)=>{ |
||||
|
if(f.friendId == activeFriend.friendId){ |
||||
|
state.activeIndex = i; |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
import Vue from 'vue'; |
||||
|
import Vuex from 'vuex'; |
||||
|
import chatStore from './chatStore.js'; |
||||
|
import friendsStore from './friendsStore.js'; |
||||
|
import userStore from './userStore.js'; |
||||
|
import VuexPersistence from 'vuex-persist' |
||||
|
|
||||
|
|
||||
|
const vuexLocal = new VuexPersistence({ |
||||
|
storage: window.localStorage, |
||||
|
modules: ["userStore","chatStore"] |
||||
|
}) |
||||
|
|
||||
|
Vue.use(Vuex) |
||||
|
|
||||
|
export default new Vuex.Store({ |
||||
|
modules: {chatStore,friendsStore,userStore}, |
||||
|
state: { |
||||
|
userInfo: {} |
||||
|
}, |
||||
|
plugins: [vuexLocal.plugin], |
||||
|
mutations: { |
||||
|
initStore(state){ |
||||
|
|
||||
|
this.commit("initFriendsStore"); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
strict: process.env.NODE_ENV !== 'production' |
||||
|
}) |
||||
@ -0,0 +1,18 @@ |
|||||
|
export default { |
||||
|
|
||||
|
state: { |
||||
|
userInfo: {} |
||||
|
}, |
||||
|
|
||||
|
mutations: { |
||||
|
setUserInfo(state, userInfo) { |
||||
|
// 切换用户后，清理缓存
|
||||
|
if(userInfo.id != state.userInfo.id){ |
||||
|
console.log("用户切换") |
||||
|
this.commit("resetChatStore"); |
||||
|
} |
||||
|
state.userInfo = userInfo; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,90 @@ |
|||||
|
import axios from 'axios' |
||||
|
import router from '@/router' |
||||
|
import qs from 'qs' |
||||
|
import merge from 'lodash/merge' |
||||
|
import { |
||||
|
Message |
||||
|
} from 'element-ui' |
||||
|
|
||||
|
const http = axios.create({ |
||||
|
timeout: 1000 * 30, |
||||
|
withCredentials: true, |
||||
|
headers: { |
||||
|
'Content-Type': 'application/json; charset=utf-8' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
/** |
||||
|
* 请求拦截 |
||||
|
*/ |
||||
|
http.interceptors.request.use(config => { |
||||
|
// todo 请求头带上token
|
||||
|
return config |
||||
|
}, error => { |
||||
|
return Promise.reject(error) |
||||
|
}) |
||||
|
|
||||
|
/** |
||||
|
* 响应拦截 |
||||
|
*/ |
||||
|
http.interceptors.response.use(response => { |
||||
|
if (response.data.code == 200) { |
||||
|
return response.data.data; |
||||
|
} else { |
||||
|
Message({ |
||||
|
message: response.data.message, |
||||
|
type: 'error', |
||||
|
duration: 1500, |
||||
|
customClass: 'element-error-message-zindex' |
||||
|
}) |
||||
|
|
||||
|
if (response.data.code == 401) { |
||||
|
router.replace("/login"); |
||||
|
} |
||||
|
return Promise.reject(response.data) |
||||
|
} |
||||
|
}, error => { |
||||
|
switch (error.response.status) { |
||||
|
case 400: |
||||
|
Message({ |
||||
|
message: error.response.data, |
||||
|
type: 'error', |
||||
|
duration: 1500, |
||||
|
customClass: 'element-error-message-zindex' |
||||
|
}) |
||||
|
break |
||||
|
case 401: |
||||
|
router.replace("/login"); |
||||
|
break |
||||
|
case 405: |
||||
|
Message({ |
||||
|
message: 'http请求方式有误', |
||||
|
type: 'error', |
||||
|
duration: 1500, |
||||
|
customClass: 'element-error-message-zindex' |
||||
|
}) |
||||
|
break |
||||
|
case 404: |
||||
|
case 500: |
||||
|
Message({ |
||||
|
message: '服务器出了点小差，请稍后再试', |
||||
|
type: 'error', |
||||
|
duration: 1500, |
||||
|
customClass: 'element-error-message-zindex' |
||||
|
}) |
||||
|
break |
||||
|
case 501: |
||||
|
Message({ |
||||
|
message: '服务器不支持当前请求所需要的某个功能', |
||||
|
type: 'error', |
||||
|
duration: 1500, |
||||
|
customClass: 'element-error-message-zindex' |
||||
|
}) |
||||
|
break |
||||
|
} |
||||
|
|
||||
|
return Promise.reject(error) |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
export default http |
||||
@ -0,0 +1,321 @@ |
|||||
|
<template> |
||||
|
<el-container> |
||||
|
<el-aside width="250px" class="l-chat-box"> |
||||
|
<el-header height="60px"> |
||||
|
<el-row> |
||||
|
<el-input width="200px" placeholder="搜索" v-model="searchText"> |
||||
|
<el-button slot="append" icon="el-icon-search"></el-button> |
||||
|
</el-input> |
||||
|
</el-row> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<div v-for="(chat,index) in $store.state.chatStore.chats" :key="chat.targetId"> |
||||
|
<chat-item :chat="chat" :index="index" @click.native="onClickItem(index)" @del="onDelItem(chat,index)" |
||||
|
:active="index === $store.state.chatStore.activeIndex"></chat-item> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
</el-aside> |
||||
|
<el-container class="r-chat-box"> |
||||
|
<el-header height="60px"> |
||||
|
{{titleName}} |
||||
|
</el-header> |
||||
|
<el-main class="im-chat-main" id="chatScrollBox"> |
||||
|
<div class="im-chat-box"> |
||||
|
<ul> |
||||
|
<li v-for="item in messages" :key="item.id" |
||||
|
:class="{ 'im-chat-mine': item.sendUserId == $store.state.userStore.userInfo.id }"> |
||||
|
<div class="head-image"> |
||||
|
<head-image :url="headImage" ></head-image> |
||||
|
</div> |
||||
|
<div class="im-msg-content"> |
||||
|
<div class="im-msg-top"> |
||||
|
<span>{{showName(item)}}</span> |
||||
|
<chat-time :time="item.sendTime"></chat-time> |
||||
|
</div> |
||||
|
<div class="im-msg-bottom"> |
||||
|
<span class="im-msg-text">{{item.content}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
</div> |
||||
|
</el-main> |
||||
|
<el-footer height="150px" class="im-chat-footer"> |
||||
|
<textarea v-model="messageContent" ref="sendBox" class="textarea" @keyup.enter="onSendMessage()"></textarea> |
||||
|
<div class="im-chat-send"> |
||||
|
<el-button type="primary" @click="onSendMessage()">发送</el-button> |
||||
|
</div> |
||||
|
</el-footer> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ChatItem from "../components/ChatItem.vue"; |
||||
|
import ChatTime from "../components/ChatTime.vue"; |
||||
|
import HeadImage from "../components/HeadImage.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "chat", |
||||
|
components: { |
||||
|
ChatItem, |
||||
|
ChatTime, |
||||
|
HeadImage |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
searchText: "", |
||||
|
messageContent: "" |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onClickItem(index) { |
||||
|
this.$store.commit("activeChat", index); |
||||
|
}, |
||||
|
onSendMessage() { |
||||
|
let msgInfo = { |
||||
|
recvUserId: this.$store.state.chatStore.chats[this.$store.state.chatStore.activeIndex].targetId, |
||||
|
content: this.messageContent, |
||||
|
type: 0 |
||||
|
} |
||||
|
this.$http({ |
||||
|
url: '/api/message/single/send', |
||||
|
method: 'post', |
||||
|
data: msgInfo |
||||
|
}).then((data) => { |
||||
|
this.$message.success("发送成功"); |
||||
|
this.messageContent = ""; |
||||
|
msgInfo.sendTime = new Date().getTime(); |
||||
|
msgInfo.sendUserId = this.$store.state.userStore.userInfo.id; |
||||
|
msgInfo.selfSend = true; |
||||
|
this.$store.commit("insertMessage", msgInfo); |
||||
|
console.log(this.$refs.sendBox) |
||||
|
// 保持输入框焦点 |
||||
|
this.$refs.sendBox.focus(); |
||||
|
// 滚动到底部 |
||||
|
this.$nextTick(() => { |
||||
|
const div = document.getElementById("chatScrollBox"); |
||||
|
div.scrollTop = div.scrollHeight; |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
onDelItem(chat,index){ |
||||
|
this.$store.commit("removeChat",index); |
||||
|
}, |
||||
|
showName(item) { |
||||
|
if (item.sendUserId == this.$store.state.userStore.userInfo.id) { |
||||
|
return this.$store.state.userStore.userInfo.nickName; |
||||
|
} else { |
||||
|
let index = this.$store.state.chatStore.activeIndex; |
||||
|
let chats = this.$store.state.chatStore.chats |
||||
|
return chats[index].showName; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
messages() { |
||||
|
let index = this.$store.state.chatStore.activeIndex; |
||||
|
let chats = this.$store.state.chatStore.chats |
||||
|
if (index >= 0 && chats.length > 0) { |
||||
|
return chats[index].messages; |
||||
|
} |
||||
|
return []; |
||||
|
}, |
||||
|
titleName(){ |
||||
|
let index = this.$store.state.chatStore.activeIndex; |
||||
|
let chats = this.$store.state.chatStore.chats |
||||
|
if(index>=0 && chats.length > 0){ |
||||
|
let chats = this.$store.state.chatStore.chats; |
||||
|
return chats[index].showName; |
||||
|
} |
||||
|
return ""; |
||||
|
}, |
||||
|
headImage(){ |
||||
|
let index = this.$store.state.chatStore.activeIndex; |
||||
|
let chats = this.$store.state.chatStore.chats |
||||
|
if(index>=0 && chats.length > 0){ |
||||
|
let chats = this.$store.state.chatStore.chats; |
||||
|
return chats[index].headImage; |
||||
|
} |
||||
|
return ""; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.el-container { |
||||
|
|
||||
|
.l-chat-box { |
||||
|
border: #dddddd solid 1px; |
||||
|
background: #eeeeee; |
||||
|
width: 3rem; |
||||
|
.el-header { |
||||
|
padding: 5px; |
||||
|
background-color: white; |
||||
|
line-height: 50px; |
||||
|
} |
||||
|
|
||||
|
.el-main { |
||||
|
padding: 0 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.r-chat-box { |
||||
|
background: white; |
||||
|
border: #dddddd solid 1px; |
||||
|
.el-header { |
||||
|
padding: 5px; |
||||
|
background-color: white; |
||||
|
line-height: 50px; |
||||
|
} |
||||
|
|
||||
|
.im-chat-main { |
||||
|
padding: 0; |
||||
|
border: #dddddd solid 1px; |
||||
|
.im-chat-box { |
||||
|
ul { |
||||
|
padding: 10px; |
||||
|
|
||||
|
li { |
||||
|
position: relative; |
||||
|
font-size: 0; |
||||
|
margin-bottom: 10px; |
||||
|
padding-left: 60px; |
||||
|
min-height: 68px; |
||||
|
|
||||
|
|
||||
|
.head-image { |
||||
|
position: absolute; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.im-msg-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.im-msg-top { |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
|
||||
|
span { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-msg-bottom { |
||||
|
text-align: left; |
||||
|
|
||||
|
.im-msg-text { |
||||
|
position: relative; |
||||
|
line-height: 22px; |
||||
|
margin-top: 10px; |
||||
|
padding: 10px; |
||||
|
background-color: #eeeeee; |
||||
|
border-radius: 3px; |
||||
|
color: #333; |
||||
|
display: inline-block; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: -10px; |
||||
|
top: 13px; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid dashed dashed; |
||||
|
border-color: #eeeeee transparent transparent; |
||||
|
overflow: hidden; |
||||
|
border-width: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-chat-mine { |
||||
|
text-align: right; |
||||
|
padding-left: 0; |
||||
|
padding-right: 60px; |
||||
|
|
||||
|
.head-image { |
||||
|
left: auto; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.im-msg-content { |
||||
|
|
||||
|
.im-msg-top { |
||||
|
flex-direction: row-reverse; |
||||
|
|
||||
|
span { |
||||
|
margin-left: 12px; |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-msg-bottom { |
||||
|
text-align: right; |
||||
|
|
||||
|
.im-msg-text { |
||||
|
margin-left: 10px; |
||||
|
background-color: #5fb878; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:after { |
||||
|
left: auto; |
||||
|
right: -10px; |
||||
|
border-top-color: #5fb878; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.message-info { |
||||
|
right: 60px !important; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.im-chat-footer { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 0; |
||||
|
|
||||
|
textarea { |
||||
|
box-sizing: border-box; |
||||
|
padding: 5px; |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
resize: none; |
||||
|
background-color: #f8f8f8 !important; |
||||
|
outline-color: rgba(83, 160, 231, 0.61); |
||||
|
} |
||||
|
|
||||
|
.im-chat-send { |
||||
|
text-align: right; |
||||
|
padding: 7px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
<el-container> |
||||
|
<el-aside width="250px" class="l-friend-box"> |
||||
|
<el-header height="60px"> |
||||
|
<el-row> |
||||
|
<el-col :span="19"> |
||||
|
<el-input width="200px" placeholder="搜索好友" v-model="searchText"> |
||||
|
<el-button slot="append" icon="el-icon-search"></el-button> |
||||
|
</el-input> |
||||
|
</el-col> |
||||
|
<el-col :span="1"></el-col> |
||||
|
<el-col :span="3"> |
||||
|
<el-button plain icon="el-icon-plus" style="border: none; font-size: 20px;color: black;" |
||||
|
title="添加好友" @click="onShowAddFriends"></el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<add-friends :dialogVisible="showAddFriend" @close="onCloseAddFriends" @add="onAddFriend()"> |
||||
|
</add-friends> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<div v-for="(friendsInfo,index) in $store.state.friendsStore.friendsList" :key="friendsInfo.id"> |
||||
|
<friends-item v-show="friendsInfo.friendNickName.startsWith(searchText)" :friendsInfo="friendsInfo" |
||||
|
:index="index" :active="index === $store.state.friendsStore.activeIndex" |
||||
|
@del="onDelItem(friendsInfo,index)" @click.native="onClickItem(friendsInfo,index)"> |
||||
|
</friends-item> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
</el-aside> |
||||
|
<el-container class="r-friend-box"> |
||||
|
<div v-show="$store.state.friendsStore.activeIndex>=0"> |
||||
|
<div class="user-detail"> |
||||
|
<div class="detail-head-image"> |
||||
|
<head-image :url="$store.state.friendsStore.activeUserInfo.headImage" ></head-image> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<el-descriptions title="好友信息" class="description" :column="1"> |
||||
|
<el-descriptions-item label="用户名">{{ $store.state.friendsStore.activeUserInfo.userName }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="昵称">{{ $store.state.friendsStore.activeUserInfo.nickName }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="备注">好基友</el-descriptions-item> |
||||
|
<el-descriptions-item label="签名">世界这么大，我想去看看</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-group"> |
||||
|
<el-button class="send-btn" @click="onSend()">发消息</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import FriendsItem from "../components/FriendsItem.vue"; |
||||
|
import AddFriends from "../components/AddFriends.vue"; |
||||
|
import HeadImage from "../components/HeadImage.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "friends", |
||||
|
components: { |
||||
|
FriendsItem, |
||||
|
AddFriends, |
||||
|
HeadImage |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
searchText: "", |
||||
|
showAddFriend: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onShowAddFriends() { |
||||
|
this.showAddFriend = true; |
||||
|
}, |
||||
|
onCloseAddFriends() { |
||||
|
this.showAddFriend = false; |
||||
|
}, |
||||
|
onClickItem(friendsInfo, index) { |
||||
|
this.$store.commit("activeFriends", index); |
||||
|
}, |
||||
|
onDelItem(friendsInfo, index) { |
||||
|
this.$http({ |
||||
|
url: '/api/friends/delete', |
||||
|
method: 'delete', |
||||
|
params: { |
||||
|
friendId: friendsInfo.friendId |
||||
|
} |
||||
|
}).then((data) => { |
||||
|
this.$message.success("删除好友成功"); |
||||
|
this.$store.commit("removeFriends", index); |
||||
|
}) |
||||
|
}, |
||||
|
onSend() { |
||||
|
let userInfo = this.$store.state.friendsStore.activeUserInfo |
||||
|
let chatInfo = { |
||||
|
type: 'single', |
||||
|
targetId: userInfo.id, |
||||
|
showName: userInfo.nickName, |
||||
|
headImage: userInfo.headImage, |
||||
|
}; |
||||
|
this.$store.commit("openChat", chatInfo); |
||||
|
this.$store.commit("activeChat", 0); |
||||
|
this.$router.push("/home/chat"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.el-container { |
||||
|
.l-friend-box { |
||||
|
border: #dddddd solid 1px; |
||||
|
background: #eeeeee; |
||||
|
|
||||
|
.el-header { |
||||
|
padding: 5px; |
||||
|
background-color: white; |
||||
|
line-height: 50px; |
||||
|
} |
||||
|
|
||||
|
.el-main { |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.r-friend-box { |
||||
|
.user-detail { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
padding: 50px 10px 10px 50px; |
||||
|
text-align: center; |
||||
|
justify-content: space-around; |
||||
|
|
||||
|
.detail-head-image { |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
width: 400px; |
||||
|
height: 200px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.description { |
||||
|
padding: 20px 20px 0px 20px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-group { |
||||
|
text-align: left !important; |
||||
|
padding-left: 100px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,155 @@ |
|||||
|
<template> |
||||
|
<el-container> |
||||
|
<el-aside width="80px" class="navi-bar"> |
||||
|
<div class="user-head-image" @click="onClickHeadImage"> |
||||
|
<head-image :src="$store.state.userStore.userInfo.headImage" > </head-image> |
||||
|
</div> |
||||
|
|
||||
|
<el-menu background-color="#333333" text-color="#ddd" style="margin-top: 30px;" > |
||||
|
<el-menu-item title="聊天"> |
||||
|
<router-link v-bind:to="'/home/chat'"> |
||||
|
<span class="el-icon-chat-dot-round"></span> |
||||
|
</router-link> |
||||
|
</el-menu-item > |
||||
|
<el-menu-item title="好友" > |
||||
|
<router-link v-bind:to="'/home/friends'"> |
||||
|
<span class="el-icon-user"></span> |
||||
|
</router-link> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item title="设置" index="/group"> |
||||
|
<span class="el-icon-setting"></span> |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
<div class="exit-box" @click="onExit()" title="退出"> |
||||
|
<span class="el-icon-circle-close"></span> |
||||
|
</div> |
||||
|
</el-aside> |
||||
|
<el-main class="content-box"> |
||||
|
<router-view></router-view> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HeadImage from '../components/HeadImage.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components:{HeadImage}, |
||||
|
methods: { |
||||
|
init(userInfo){ |
||||
|
this.$store.commit("setUserInfo", userInfo); |
||||
|
this.$store.commit("initStore"); |
||||
|
console.log("socket"); |
||||
|
this.$wsApi.createWebSocket("ws://localhost:8878/im",this.$store); |
||||
|
this.$wsApi.onopen(()=>{ |
||||
|
this.pullUnreadMessage(); |
||||
|
}); |
||||
|
this.$wsApi.onmessage((e)=>{ |
||||
|
console.log(e); |
||||
|
if(e.cmd==1){ |
||||
|
// 插入私聊消息 |
||||
|
this.handleSingleMessage(e.data); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
pullUnreadMessage(){ |
||||
|
this.$http({ |
||||
|
url: "/api/message/single/pullUnreadMessage", |
||||
|
method: 'post' |
||||
|
}) |
||||
|
}, |
||||
|
handleSingleMessage(msg){ |
||||
|
// 插入私聊消息 |
||||
|
let f = this.$store.state.friendsStore.friendsList.find((f)=>f.friendId==msg.sendUserId); |
||||
|
let chatInfo = { |
||||
|
type: 'single', |
||||
|
targetId: f.friendId, |
||||
|
showName: f.friendNickName, |
||||
|
headImage: f.friendHeadImage |
||||
|
}; |
||||
|
// 打开会话 |
||||
|
this.$store.commit("openChat",chatInfo); |
||||
|
// 插入消息 |
||||
|
this.$store.commit("insertMessage",msg); |
||||
|
}, |
||||
|
onExit(){ |
||||
|
this.$http({ |
||||
|
url: "/api/logout", |
||||
|
method: 'get' |
||||
|
}).then(()=>{ |
||||
|
this.$router.push("/login"); |
||||
|
}) |
||||
|
}, |
||||
|
onClickHeadImage(){ |
||||
|
this.$message.success(JSON.stringify(this.$store.state.userStore.userInfo)); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$http({ |
||||
|
url: "/api/user/self", |
||||
|
methods: 'get' |
||||
|
}).then((userInfo) => { |
||||
|
this.init(userInfo); |
||||
|
}) |
||||
|
}, |
||||
|
unmounted(){ |
||||
|
this.$wsApi.closeWebSocket(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.navi-bar { |
||||
|
background: #333333; |
||||
|
padding: 10px; |
||||
|
padding-top: 50px; |
||||
|
|
||||
|
.user-head-image{ |
||||
|
position: relative; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.el-menu { |
||||
|
border: none; |
||||
|
flex: 1; |
||||
|
.el-menu-item { |
||||
|
margin-top: 20px; |
||||
|
.router-link-exact-active span{ |
||||
|
color: white !important; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 24px !important; |
||||
|
color: #aaaaaa; |
||||
|
|
||||
|
&:hover{ |
||||
|
color: white !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.exit-box { |
||||
|
position: absolute; |
||||
|
width: 60px; |
||||
|
bottom: 40px; |
||||
|
color: #aaaaaa; |
||||
|
font-size: 24px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
&:hover{ |
||||
|
color: white !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content-box { |
||||
|
padding: 0; |
||||
|
background-color: #E9EEF3; |
||||
|
color: #333; |
||||
|
text-align: center; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,130 @@ |
|||||
|
<template> |
||||
|
<div class="login-view"> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px" class="web-ruleForm"> |
||||
|
<div class="login-brand">欢迎登陆fly-chat</div> |
||||
|
<el-form-item label="用户名" prop="username"> |
||||
|
<el-input type="username" v-model="loginForm.username" autocomplete="off"></el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="密码" prop="password"> |
||||
|
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="submitForm('loginForm')">登陆</el-button> |
||||
|
<el-button @click="resetForm('loginForm')">清空</el-button> |
||||
|
</el-form-item> |
||||
|
<div class="register"> |
||||
|
<router-link to="/register">没有账号,前往注册</router-link> |
||||
|
</div> |
||||
|
|
||||
|
</el-form> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "login", |
||||
|
data() { |
||||
|
var checkUsername = (rule, value, callback) => { |
||||
|
console.log("checkUsername"); |
||||
|
if (!value) { |
||||
|
return callback(new Error('请输入用户名')); |
||||
|
} |
||||
|
callback(); |
||||
|
}; |
||||
|
var checkPassword = (rule, value, callback) => { |
||||
|
console.log("checkPassword"); |
||||
|
if (value === '') { |
||||
|
callback(new Error('请输入密码')); |
||||
|
} |
||||
|
callback(); |
||||
|
|
||||
|
}; |
||||
|
return { |
||||
|
loginForm: { |
||||
|
username: '', |
||||
|
password: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
username: [{ |
||||
|
validator: checkUsername, |
||||
|
trigger: 'blur' |
||||
|
}], |
||||
|
password: [{ |
||||
|
validator: checkPassword, |
||||
|
trigger: 'blur' |
||||
|
}] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm(formName) { |
||||
|
this.$refs[formName].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.$http({ |
||||
|
url: "/api/login", |
||||
|
method: 'post', |
||||
|
params: this.loginForm |
||||
|
}) |
||||
|
.then((data) => { |
||||
|
this.$message.success("登陆成功"); |
||||
|
this.$router.push("/home/chat"); |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
resetForm(formName) { |
||||
|
this.$refs[formName].resetFields(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.login-view { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: linear-gradient(#65807a, #182e3c); |
||||
|
background-size: cover; |
||||
|
|
||||
|
|
||||
|
.web-ruleForm { |
||||
|
height: 340px; |
||||
|
padding: 20px; |
||||
|
margin-top: 150px ; |
||||
|
background: rgba(255,255,255,.75); |
||||
|
box-shadow: 0px 0px 1px #ccc; |
||||
|
border-radius: 5px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
|
||||
|
.login-brand { |
||||
|
line-height: 50px; |
||||
|
margin: 30px 0 40px 0; |
||||
|
font-size: 22px; |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 2px; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
.register { |
||||
|
display: flex; |
||||
|
flex-direction: row-reverse; |
||||
|
line-height: 40px; |
||||
|
text-align: left; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<el-container class="register-view"> |
||||
|
<div> |
||||
|
|
||||
|
<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="web-ruleForm"> |
||||
|
<div class="register-brand">欢迎注册成为FLY CHAT用户</div> |
||||
|
<el-form-item label="用户名" prop="userName"> |
||||
|
<el-input type="userName" v-model="registerForm.userName" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="昵称" prop="nickName"> |
||||
|
<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="密码" prop="password"> |
||||
|
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="确认密码" prop="confirmPassword"> |
||||
|
<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="submitForm('registerForm')">注册</el-button> |
||||
|
<el-button @click="resetForm('registerForm')">清空</el-button> |
||||
|
</el-form-item> |
||||
|
<div class="to-login"> |
||||
|
<router-link to="/login">已有账号,前往登录</router-link> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "login", |
||||
|
data() { |
||||
|
var checkUserName = (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
return callback(new Error('请输入用户名')); |
||||
|
} |
||||
|
callback(); |
||||
|
}; |
||||
|
var checkNickName = (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
return callback(new Error('请输入昵称')); |
||||
|
} |
||||
|
callback(); |
||||
|
}; |
||||
|
var checkPassword = (rule, value, callback) => { |
||||
|
if (value === '') { |
||||
|
return callback(new Error('请输入密码')); |
||||
|
} |
||||
|
callback(); |
||||
|
}; |
||||
|
|
||||
|
var checkConfirmPassword = (rule, value, callback) => { |
||||
|
console.log("checkConfirmPassword"); |
||||
|
if (value === '') { |
||||
|
return callback(new Error('请输入密码')); |
||||
|
} |
||||
|
if (value != this.registerForm.password) { |
||||
|
return callback(new Error('两次密码输入不一致')); |
||||
|
} |
||||
|
callback(); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
return { |
||||
|
registerForm: { |
||||
|
userName: '', |
||||
|
nickName: '', |
||||
|
password: '', |
||||
|
confirmPassword: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
userName: [{ |
||||
|
validator: checkUserName, |
||||
|
trigger: 'blur' |
||||
|
}], |
||||
|
nickName: [{ |
||||
|
validator: checkNickName, |
||||
|
trigger: 'blur' |
||||
|
}], |
||||
|
password: [{ |
||||
|
validator: checkPassword, |
||||
|
trigger: 'blur' |
||||
|
}], |
||||
|
confirmPassword: [{ |
||||
|
validator: checkConfirmPassword, |
||||
|
trigger: 'blur' |
||||
|
}] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm(formName) { |
||||
|
this.$refs[formName].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.$http({ |
||||
|
url: "/api/register", |
||||
|
method: 'post', |
||||
|
data: this.registerForm |
||||
|
}) |
||||
|
.then((data) => { |
||||
|
this.$message.success("注册成功!"); |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
resetForm(formName) { |
||||
|
this.$refs[formName].resetFields(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.register-view { |
||||
|
position: fixed; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #466368; |
||||
|
background: linear-gradient(#65807a, #182e3c); |
||||
|
background-size: cover; |
||||
|
-webkit-user-select: none; |
||||
|
background-size: cover; |
||||
|
|
||||
|
|
||||
|
.web-ruleForm { |
||||
|
width: 500px; |
||||
|
height: 430px; |
||||
|
padding: 20px; |
||||
|
margin-top: 100px ; |
||||
|
background: rgba(255,255,255,.75); |
||||
|
box-shadow: 0px 0px 1px #ccc; |
||||
|
border-radius: 3px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.register-brand { |
||||
|
line-height: 50px; |
||||
|
margin: 20px 0 30px 0; |
||||
|
font-size: 22px; |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 2px; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
.to-login { |
||||
|
display: flex; |
||||
|
flex-direction: row-reverse; |
||||
|
line-height: 40px; |
||||
|
text-align: left; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,16 @@ |
|||||
|
module.exports = { |
||||
|
|
||||
|
devServer: { |
||||
|
proxy: { |
||||
|
'/api': { |
||||
|
target: 'http://127.0.0.1:8888', |
||||
|
changeOrigin: true, |
||||
|
ws: false, |
||||
|
pathRewrite: { |
||||
|
'^/api': '' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue