@ -1,15 +1,16 @@
< template > < template >
< el -container > < el -container >
< el -aside width = "80px" class = "navi-bar" > < el -aside width = "80px" class = "navi-bar" >
< div class = "user-head-image" > < div class = "user-head-image" >
< head -image :url ="$store.state.userStore.userInfo.headImageThumb" :size ="60" < head -image :url ="$store.state.userStore.userInfo.headImageThumb" :size ="60" @click.native ="showSettingDialog=true" >
@ click . native = "showSettingDialog=true" > < / h e a d - i m a g e > < / h e a d - i m a g e >
< / div > < / div >
< el -menu background -color = " # 333333 " text -color = " # ddd " style = "margin-top: 30px;" > < el -menu background -color = " # 333333 " text -color = " # ddd " style = "margin-top: 30px;" >
< el -menu -item title = "聊天" > < el -menu -item title = "聊天" >
< router -link v -bind :to ="'/home/chat'" > < router -link v -bind :to ="'/home/chat'" >
< span class = "el-icon-chat-dot-round" > < / span > < span class = "el-icon-chat-dot-round" > < / span >
< div v-show ="unreadCount>0" class="unread-text" > {{ unreadCount }} < / div >
< / r o u t e r - l i n k > < / r o u t e r - l i n k >
< / e l - m e n u - i t e m > < / e l - m e n u - i t e m >
< el -menu -item title = "好友" > < el -menu -item title = "好友" >
@ -35,14 +36,8 @@
< router -view > < / r o u t e r - v i e w > < router -view > < / r o u t e r - v i e w >
< / e l - m a i n > < / e l - m a i n >
< setting :visible ="showSettingDialog" @close ="closeSetting()" > < / setting > < setting :visible ="showSettingDialog" @close ="closeSetting()" > < / setting >
< user -info v -show = " uiStore.userInfo.show " < user -info v-show ="uiStore.userInfo.show" :pos="uiStore.userInfo.pos" :user="uiStore.userInfo.user" @close="$store.commit('closeUserInfoBox')" > < / user -info >
: pos = "uiStore.userInfo.pos" < full -image :visible ="uiStore.fullImage.show" :url ="uiStore.fullImage.url" @close ="$store.commit('closeFullImageBox')" > < / full -image >
: user = "uiStore.userInfo.user"
@ close = "$store.commit('closeUserInfoBox')" > < / u s e r - i n f o >
< full -image :visible ="uiStore.fullImage.show"
: url = "uiStore.fullImage.url"
@ close = "$store.commit('closeFullImageBox')"
> < / f u l l - i m a g e >
< / e l - c o n t a i n e r > < / e l - c o n t a i n e r >
< / template > < / template >
@ -51,7 +46,7 @@
import Setting from '../components/setting/Setting.vue' ; import Setting from '../components/setting/Setting.vue' ;
import UserInfo from '../components/common/UserInfo.vue' ; import UserInfo from '../components/common/UserInfo.vue' ;
import FullImage from '../components/common/FullImage.vue' ; import FullImage from '../components/common/FullImage.vue' ;
export default { export default {
components : { components : {
HeadImage , HeadImage ,
@ -173,9 +168,26 @@
this . showSettingDialog = false ; this . showSettingDialog = false ;
} }
} , } ,
computed : { computed : {
uiStore ( ) { uiStore ( ) {
return this . $store . state . uiStore ; return this . $store . state . uiStore ;
} ,
unreadCount ( ) {
let unreadCount = 0 ;
let chats = this . $store . state . chatStore . chats ;
chats . forEach ( ( chat ) => {
unreadCount += chat . unreadCount
} ) ;
return unreadCount ;
}
} ,
watch : {
unreadCount : {
handler ( newCount , oldCount ) {
let tip = newCount > 0 ? ` ${ newCount } 条未读 ` : "" ;
this . $elm . setTitleTip ( tip ) ;
} ,
immediate : true
} }
} , } ,
mounted ( ) { mounted ( ) {
@ -209,12 +221,14 @@
flex : 1 ; flex : 1 ;
. el - menu - item { . el - menu - item {
margin - top : 20 px ; margin : 25 px 0 ;
. router - link - exact - active span { . router - link - exact - active span {
color : white ! important ; color : white ! important ;
} }
span { span {
font - size : 24 px ! important ; font - size : 24 px ! important ;
color : # aaaaaa ; color : # aaaaaa ;
@ -223,6 +237,21 @@
color : white ! important ; color : white ! important ;
} }
} }
. unread - text {
position : absolute ;
line - height : 20 px ;
background - color : # f56c6c ;
left : 36 px ;
top : 7 px ;
color : white ;
border - radius : 30 px ;
padding : 0 5 px ;
font - size : 10 px ;
text - align : center ;
white - space : nowrap ;
border : 1 px solid # f1e5e5 ;
}
} }
} }
xie.bx
3 years ago