Skip to content

Commit 29663d0

Browse files
flydoingflydoing
committed
login/chatGroup
1 parent 973dba1 commit 29663d0

File tree

5 files changed

+211
-85
lines changed

5 files changed

+211
-85
lines changed

‎client/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
56
<title>client</title>
67
</head>
78
<body>

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
1515
},
1616
"dependencies": {
17+
"socket.io": "^2.0.3",
1718
"vue": "^2.4.2",
1819
"vue-router": "^2.7.0"
1920
},

‎client/src/components/page/chatGroup.vue‎

Lines changed: 126 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,32 @@
33
<div class="chat-top">
44
<img class="top-head" src="http://img01.rastargame.com/p_upload/2017/0605/1496634201481713.png"/>
55
<span class="top-name">超短群</span>
6-
<a class="top-group" href="javascript:;">群成员(28/50)</a>
6+
<a class="top-group" href="javascript:;" @click="changeShowGroup">群成员(28/50)</a>
7+
<div class="group" v-show="showGroup">
8+
<a class="group-one group-one-on" href="javascript:;" v-for="n in 3">
9+
<img class="one-head" src="http://img01.rastargame.com/p_upload/2017/0605/1496634201481713.png"/>
10+
<span class="one-status">[在线]</span>
11+
<span class="one-name">秦始皇</span>
12+
</a>
13+
<a class="group-one" href="javascript:;" v-for="n in 10">
14+
<img class="one-head" src="http://img01.rastargame.com/p_upload/2017/0605/1496634201481713.png"/>
15+
<span class="one-status">[离线]</span>
16+
<span class="one-name">秦始皇秦始皇秦始皇秦始皇秦始皇</span>
17+
</a>
18+
</div>
719
</div>
8-
<div class="chat-log">
20+
<div class="chat-log" @click="changeShowGroupFalse">
921
<li class="mes-li mes-li-left">
1022
<div class="li-head"><img src="http://img01.rastargame.com/p_upload/2017/0605/1496634201481713.png"/></div>
1123
<div class="li-box">
12-
<p class="box-name">郭锦财<span class="time">20170903</span> </p>
24+
<p class="box-name">汉武帝<span class="time">20170903</span> </p>
1325
<p class="box-mes">聊天测试看看</p>
1426
</div>
1527
</li>
1628
<li class="mes-li mes-li-right">
1729
<div class="li-head"><img src="http://img01.rastargame.com/p_upload/2017/0605/1496634201481713.png"/></div>
1830
<div class="li-box">
19-
<p class="box-name">郭锦财<span class="time">20170903</span> </p>
31+
<p class="box-name">康熙<span class="time">20170903</span> </p>
2032
<p class="box-mes">聊天测试看看</p>
2133
</div>
2234
</li>
@@ -26,85 +38,87 @@
2638
<li class="mes-li mes-li-center">
2739
<p class="li-text">上线/下线了</p>
2840
</li>
29-
<p>chat-logtop</p>
30-
<p>chat-log</p>
31-
<p>chat-log</p>
32-
<p>chat-log</p>
33-
<p>chat-log</p>
34-
<p>chat-log</p>
35-
<p>chat-log</p>
36-
<p>chat-log</p>
37-
<p>chat-log</p>
38-
<p>chat-log</p>
39-
<p>chat-log</p>
40-
<p>chat-log</p>
41-
<p>chat-log</p>
42-
<p>chat-log</p>
43-
<p>chat-log</p>
44-
<p>chat-log</p>
45-
<p>chat-log</p>
46-
<p>chat-log</p>
47-
<p>chat-log</p>
48-
<p>chat-log</p>
49-
<p>chat-log</p>
50-
<p>chat-log</p>
51-
<p>chat-log</p>
52-
<p>chat-log</p>
53-
<p>chat-log</p>
54-
<p>chat-log</p>
55-
<p>chat-log</p>
56-
<p>chat-log</p>
57-
<p>chat-log</p>
58-
<p>chat-log</p>
59-
<p>chat-log</p>
60-
<p>chat-log</p>
61-
<p>chat-log</p>
62-
<p>chat-log</p>
63-
<p>chat-log</p>
64-
<p>chat-log</p>
65-
<p>chat-log</p>
66-
<p>chat-log</p>
67-
<p>chat-log</p>
68-
<p>chat-log</p>
69-
<p>chat-log</p>
70-
<p>chat-log</p>
71-
<p>chat-log</p>
72-
<p>chat-log</p>
73-
<p>chat-log</p>
74-
<p>chat-log</p>
75-
<p>chat-logend</p>
41+
<li class="mes-li mes-li-right" v-for="n in 6">
42+
<div class="li-head"><img src="http://img01.rastargame.com/p_upload/2017/0605/1496634201481713.png"/></div>
43+
<div class="li-box">
44+
<p class="box-name">康熙<span class="time">20170903</span> </p>
45+
<p class="box-mes">聊天测试看看</p>
46+
</div>
47+
</li>
7648
</div>
77-
<div class="chat-edit">
78-
<textarea class="edit-text" placeholder="请输入..."></textarea>
49+
<div class="chat-edit" @click="changeShowGroupFalse">
50+
<textarea class="edit-text" placeholder="请输入..." ref="r_editText" v-model="editText" @keyup.13="sendEnTer"></textarea>
7951
<div class="edit-btn">
80-
<a href="javascript:;" class="btn-a">发送</a>
81-
<a href="javascript:;" class="btn-a">发送</a>
52+
<a href="javascript:;" class="btn-a" @click="sendEnTer">发送</a>
53+
<!--<a href="javascript:;" class="btn-a">退出</a>-->
8254
</div>
8355
</div>
84-
<div class="chat-group"></div>
8556
</div>
8657
</template>
8758

8859
<script>
8960
import './../../public/css/base.scss'
61+
// import io from 'socket.io-client'
62+
import Vue from 'vue'
63+
import VueRouter from 'vue-router'
64+
Vue.use(VueRouter)
65+
const router = new VueRouter()
9066
export default {
9167
data () {
9268
return {
93-
showLogin: true,
94-
registerName: '',
95-
registerTime: null,
96-
date: new Date()
69+
showGroup: false,
70+
editText: '',
71+
account: '',
72+
socket: null
9773
}
9874
},
75+
created () {
76+
// 判断是否登录
77+
let CHATaccount = JSON.parse(window.localStorage.getItem('CHAT-account'))
78+
if (CHATaccount) {
79+
this.account = CHATaccount.account
80+
} else {
81+
router.push({ path: 'login' })
82+
}
83+
// console.log(io)
84+
// this.socket = io.connect('http://localhost:8081')
85+
},
86+
mounted () {
87+
this.$refs.r_editText.focus()
88+
89+
let oldTime = 1504509461000
90+
let old = new Date(oldTime)
91+
console.log('old: new Date(1504509461000): ' + old)
92+
console.log('Date.parse(new Date(1504509461000)): ' + Date.parse(old))
93+
console.log(old.getHours())
94+
let test = Date.parse(new Date()) // Date.parse(datestring) 是一个静态函数，可以直接调用
95+
console.log(test) // 返回一个整数,表示日期距1970年1月1日午夜之间的毫秒数(时间戳)
96+
},
9997
methods: {
100-
changeShow () {
101-
this.showLogin = !this.showLogin
102-
console.log(this.showLogin)
98+
changeShowGroup () {
99+
this.showGroup = !this.showGroup
100+
},
101+
changeShowGroupFalse () {
102+
this.showGroup = false
103103
},
104-
addUserName () {
105-
this.registerName = this.registerName.replace(/\s+/g, '')
106-
if (this.registerName.length > 0) {
107-
console.log(this.registerName)
104+
sendEnTer () {
105+
this.editText = this.editText.replace(/\s+/g, '')
106+
if (this.editText.length > 0) {
107+
// 发送消息
108+
let chat = {
109+
account: 15011760730,
110+
nickName: '野然',
111+
chatTime: Date.parse(new Date()),
112+
chatMes: this.editText,
113+
chatToId: 401
114+
}
115+
console.log(chat)
116+
// 发送成功之后
117+
this.editText = ''
118+
this.$refs.r_editText.focus()
119+
} else {
120+
this.editText = ''
121+
this.$refs.r_editText.focus()
108122
}
109123
}
110124
}
@@ -126,7 +140,7 @@
126140
line-height: 40px;
127141
width: 100%;
128142
max-width: 750px;
129-
border-bottom: 1px solid #b8b8bb;
143+
border-bottom: 1px solid #d8d8d8;
130144
background: #ffffff;
131145
.top-head,.top-name,.top-group{
132146
float: left;
@@ -139,6 +153,49 @@
139153
.top-group{
140154
float: right;
141155
}
156+
.group{
157+
position: absolute;
158+
top: 50px;
159+
right: 0;
160+
padding: 10px 0;
161+
max-height: 350px;
162+
overflow: auto;
163+
border: 1px solid #d8d8d8;
164+
/*background: rgba(0,0,0,0.6);*/
165+
background: #ffffff;
166+
.group-one{
167+
display: block;
168+
min-width: 200px;
169+
padding: 3px 10px;
170+
overflow: hidden;
171+
.one-head,.one-status,.one-name{
172+
float: left;
173+
height: 25px;
174+
line-height: 25px;
175+
font-size: 14px;
176+
color: #575758;
177+
}
178+
.one-head{
179+
width: 25px;
180+
height: 25px;
181+
border-radius: 25px;
182+
}
183+
.one-status{
184+
margin: 0 5px;
185+
}
186+
.one-name{
187+
max-width: 110px;
188+
overflow: hidden;
189+
white-space: nowrap;
190+
text-overflow: ellipsis;
191+
}
192+
}
193+
.group-one-on{
194+
.one-status,.one-name{
195+
color: #01aefb;
196+
}
197+
}
198+
}
142199
}
143200
.chat-log{
144201
padding: 40px 0 100px;
@@ -229,7 +286,7 @@
229286
width: 100%;
230287
max-width: 750px;
231288
height: 100px;
232-
border-top: 1px solid #b8b8bb;
289+
border-top: 1px solid #d8d8d8;
233290
background: #ffffff;
234291
.edit-text{
235292
box-sizing: border-box;

0 commit comments

Comments
 (0)