标题显示未读消息

3 years ago · 4bac142912
4 changed files with 59 additions and 22 deletions
--- a/im-ui/.env.production
+++ b/im-ui/.env.production
@ -1,6 +1,8 @@
 ENV = 'production'

+# app名称
+VUE_APP_NAME = "盒子IM"
 # 接口地址
 VUE_APP_BASE_API  = 'https://8.134.92.70:443/api'
-
+# ws地址
 VUE_APP_WS_URL = 'wss://8.134.92.70:81/im'
--- a/im-ui/public/index.html
+++ b/im-ui/public/index.html
@ -5,13 +5,9 @@
    <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>
+    <title>盒子IM</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>
--- a/im-ui/src/api/element.js
+++ b/im-ui/src/api/element.js
@ -14,7 +14,17 @@ let fixLeft = (e) => {
 	return offset
 }

+let setTitleTip = (tip) => {
+	let title = process.env.VUE_APP_NAME;
+	if(tip){
+		title = `(${tip})${title}`;
+	}
+	document.title =title;
+	
+}
+
 export default{
 	fixTop,
-	fixLeft
+	fixLeft,
+	setTitleTip
 }
--- a/im-ui/src/view/Home.vue
+++ b/im-ui/src/view/Home.vue
@ -1,15 +1,16 @@
 <template>
-	<el-container >
+	<el-container>
 		<el-aside width="80px" class="navi-bar">
 			<div class="user-head-image">
-				<head-image :url="$store.state.userStore.userInfo.headImageThumb" :size="60"
-				 @click.native="showSettingDialog=true"> </head-image>
+				<head-image :url="$store.state.userStore.userInfo.headImageThumb" :size="60" @click.native="showSettingDialog=true">
+				</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>
+						<div v-show="unreadCount>0" class="unread-text">{{unreadCount}}</div>
 					</router-link>
 				</el-menu-item>
 				<el-menu-item title="好友">
@ -35,14 +36,8 @@
 			<router-view></router-view>
 		</el-main>
 		<setting :visible="showSettingDialog" @close="closeSetting()"></setting>
-		<user-info v-show="uiStore.userInfo.show" 
-		:pos="uiStore.userInfo.pos" 
-		:user="uiStore.userInfo.user"
-		@close="$store.commit('closeUserInfoBox')"></user-info>
-		<full-image :visible="uiStore.fullImage.show" 
-		:url="uiStore.fullImage.url"
-		@close="$store.commit('closeFullImageBox')"
-		></full-image>
+		<user-info v-show="uiStore.userInfo.show" :pos="uiStore.userInfo.pos" :user="uiStore.userInfo.user" @close="$store.commit('closeUserInfoBox')"></user-info>
+		<full-image :visible="uiStore.fullImage.show" :url="uiStore.fullImage.url" @close="$store.commit('closeFullImageBox')"></full-image>
 	</el-container>
 </template>

@ -51,7 +46,7 @@
 	import Setting from '../components/setting/Setting.vue';
 	import UserInfo from '../components/common/UserInfo.vue';
 	import FullImage from '../components/common/FullImage.vue';
-	
+
 	export default {
 		components: {
 			HeadImage,
@ -173,9 +168,26 @@
 				this.showSettingDialog = false;
 			}
 		},
-		computed:{
-			uiStore(){
+		computed: {
+			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() {
@ -209,12 +221,14 @@
 			flex: 1;

 			.el-menu-item {
-				margin-top: 20px;
+				margin: 25px 0;

 				.router-link-exact-active span {
 					color: white !important;
 				}

+
+
 				span {
 					font-size: 24px !important;
 					color: #aaaaaa;
@ -223,6 +237,21 @@
 						color: white !important;
 					}
 				}
+
+				.unread-text {
+					position: absolute;
+					line-height: 20px;
+					background-color: #f56c6c;
+					left: 36px;
+					top: 7px;
+					color: white;
+					border-radius: 30px;
+					padding: 0 5px;
+					font-size: 10px;
+					text-align: center;
+					white-space: nowrap;
+					border: 1px solid #f1e5e5;
+				}
 			}
 		}