Skip to content

Commit 2fb69c2

Browse files
microzzmicrozz
committed
增加消息中心
1 parent 20740d4 commit 2fb69c2

File tree

4 files changed

+166
-4
lines changed

4 files changed

+166
-4
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</transition>
1717

1818
<transition name="show">
19-
<Msg v-if="false"></Msg>
19+
<Msg v-if="isShowMsg"></Msg>
2020
</transition>
2121

2222

‎src/components/AsideMenu/AsideMenu.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
<div class="infos block">
1616

17-
<div class="msg block">
17+
<div @click="showMsg" class="msg block">
1818
<i class="icon-msg"></i>我的消息
1919
</div>
2020

@@ -60,6 +60,10 @@ export default {
6060
showInfo() {
6161
this.$store.commit('showInfo', true);
6262
this.$router.push('/')
63+
},
64+
showMsg() {
65+
this.$store.commit('showMsg', true);
66+
this.$router.push('/')
6367
}
6468
}
6569
}

‎src/components/Msg/Msg.vue‎

Lines changed: 157 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,85 @@
11
<template lang="html">
22
<div class="msg">
33
<div class="msg-header">
4-
<i @click="showInfo" class="icon-back"></i>消息中心
4+
<i @click="hideMsg" class="icon-back"></i>消息中心
55
</div>
6+
7+
<div class="msg-content">
8+
<div class="msg-read">
9+
<div :class="{selected: isOnRead}" @click.stop.prevent="changeTab(true)" class="has-no">
10+
未读消息:0
11+
</div>
12+
<div :class="{selected: !isOnRead}" @click.stop.prevent="changeTab(false)" class="has">
13+
已读消息:2
14+
</div>
15+
</div>
16+
17+
18+
</div>
19+
20+
<div class="msg-list">
21+
22+
<div v-for="item of (isOnRead ? msg.hasnot_read_messages : msg.has_read_messages)" class="msg-item">
23+
<div class="msg-body">
24+
<div class="msg-name">
25+
{{ item.author.loginname }} 的回复：
26+
</div>
27+
<div v-html="item.reply.content" class="msg-msg">
28+
29+
</div>
30+
<div @click="view">
31+
<router-link :to="{name: 'article', params: {id: item.topic.id}}"">
32+
33+
<div class="msg-from">
34+
来自：{{ item.topic.title }}
35+
</div>
36+
</router-link>
37+
</div>
38+
39+
</div>
40+
41+
42+
</div>
43+
44+
</div>
45+
646
</div>
747
</template>
848
949
<script>
1050
export default {
11-
name: 'msg'
51+
name: 'msg',
52+
data() {
53+
return {
54+
msg: {},
55+
isOnRead: true
56+
}
57+
},
58+
computed: {
59+
ak() {
60+
return this.$store.state.ak;
61+
}
62+
},
63+
created() {
64+
this.axios.get(`https://cnodejs.org/api/v1/messages?accesstoken=${this.ak}`)
65+
.then(result => result.data.data)
66+
.then(msg => this.msg = msg)
67+
},
68+
methods: {
69+
hideMsg() {
70+
this.$store.commit('showMsg', false);
71+
},
72+
changeTab(flag) {
73+
this.isOnRead = flag;
74+
console.log('this.isOnRead', this.isOnRead);
75+
},
76+
view() {
77+
78+
this.$store.commit('showMsg', false);
79+
// this.$router.push('/')
80+
81+
}
82+
}
1283
}
1384
</script>
1485
@@ -28,6 +99,7 @@ export default {
2899
background-color: white;
29100
30101
.msg-header {
102+
31103
display: flex;
32104
justify-content: center;
33105
align-items: center;
@@ -36,6 +108,7 @@ export default {
36108
color: white;
37109
font-size: 1.4rem;
38110
background-color: #2196f3;
111+
border-bottom: 1px solid rgba(255, 255, 255, .2);
39112
i.icon-back {
40113
position: absolute;
41114
left: 10px;
@@ -46,5 +119,87 @@ export default {
46119
background-size: contain;
47120
}
48121
}
122+
123+
.msg-content {
124+
display: flex;
125+
justify-content: center;
126+
// align-items: center;
127+
width: 100%;
128+
height: 40px;
129+
.msg-read {
130+
display: flex;
131+
justify-content: center;
132+
width: 100%;
133+
height: 40px;
134+
background-color: #2196f3;
135+
color: rgba(255, 255, 255, .5);
136+
font-size: 1.2rem;
137+
.has-no {
138+
flex: 1;
139+
display: flex;
140+
justify-content: center;
141+
align-items: center;
142+
border-right: 1px solid rgba(255, 255, 255, .2);
143+
144+
}
145+
.has {
146+
flex: 1;
147+
display: flex;
148+
justify-content: center;
149+
align-items: center;
150+
}
151+
.selected {
152+
border-bottom: 2px solid #ff4081;
153+
color: white;
154+
}
155+
}
156+
157+
}
158+
159+
.msg-list {
160+
flex: 1;
161+
width: 100%;
162+
.msg-item {
163+
display: flex;
164+
align-items: center;
165+
width: 100%;
166+
padding: 10px;
167+
168+
.msg-avatar {
169+
width: 50px;
170+
height: 50px;
171+
margin-right: 10px;
172+
173+
img {
174+
width: 30px;
175+
height: 30px;
176+
vertical-align: bottom;
177+
border-radius: 4px;
178+
}
179+
}
180+
181+
.msg-body {
182+
flex: 1;
183+
.msg-name {
184+
font-size: 1.3rem;
185+
}
186+
.msg-from {
187+
color: gray;
188+
font-size: 80%;
189+
}
190+
}
191+
}
192+
193+
@media screen and (min-width: 760px) {
194+
.msg-item {
195+
width: 60%;
196+
margin: auto;
197+
}
198+
}
199+
200+
.msg-item + .msg-item {
201+
border-top: 1px solid rgba(0, 0, 0, .1);
202+
}
203+
}
49204
}
50205
</style>

‎src/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ const store = new Vuex.Store({
5050
showInfo(state, flag) {
5151
state.isShowInfo = flag;
5252
},
53+
showMsg(state, flag) {
54+
state.isShowMsg = flag;
55+
},
5356
updateUserInfo(state, userInfo) {
5457
state.userInfo = userInfo;
5558
},

0 commit comments

Comments
 (0)