From 026af4e6ce59b18af31a45c37b553504419297c7 Mon Sep 17 00:00:00 2001
From: "xie.bx" <Blue_Xie@epam.com>
Date: Tue, 8 Nov 2022 11:45:48 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BC=98=E5=8C=96=EF=BC=9A=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=A9=BA=E7=99=BD=E5=A4=84=E9=80=80=E5=9B=9E?=
 =?UTF-8?q?=202.=E4=BC=98=E5=8C=96=EF=BC=9Acookie=E5=AD=98=E5=82=A8?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=9A=84=E7=94=A8=E6=88=B7=E5=90=8D=E5=92=8C?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=EF=BC=88=E4=B8=8D=E5=AE=89=E5=85=A8=EF=BC=9F?=
 =?UTF-8?q?=EF=BC=9F=EF=BC=89=203.=E8=81=8A=E5=A4=A9=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=9B=BE=E7=89=87=EF=BC=8C=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E9=AB=98=E6=B8=85=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-ui/src/components/chat/ChatBox.vue     |  9 +++---
 im-ui/src/components/chat/MessageItem.vue | 13 +++++++--
 im-ui/src/components/common/Emotion.vue   | 24 ++++++++++++----
 im-ui/src/components/common/FullImage.vue |  2 +-
 im-ui/src/view/Chat.vue                   |  2 +-
 im-ui/src/view/Login.vue                  | 34 +++++++++++++++++++++--
 6 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/im-ui/src/components/chat/ChatBox.vue b/im-ui/src/components/chat/ChatBox.vue
index 91949b3..6868baf 100644
--- a/im-ui/src/components/chat/ChatBox.vue
+++ b/im-ui/src/components/chat/ChatBox.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-container class="r-chat-box">
+	<el-container class="chat-box">
 		<el-header height="60px">
 			<span>{{title}}</span>
 			<span title="群聊信息" v-show="this.chat.type=='GROUP'" class="btn-side el-icon-more" @click="showSide=!showSide"></span>
@@ -336,7 +336,7 @@
 		watch: {
 			chat: {
 				handler(newChat, oldChat) {
-					if(newChat.type != oldChat.type || newChat.targetId != oldChat.targetId){
+					if(newChat.targetId > 0 && (newChat.type != oldChat.type || newChat.targetId != oldChat.targetId)){
 						if (this.chat.type == "GROUP") {
 							this.loadGroup(this.chat.targetId);
 						} else {
@@ -348,14 +348,14 @@
 						this.$refs.sendBox.focus();
 					}		
 				},
-				deep: true // 深度监听
+				deep: true
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.r-chat-box {
+	.chat-box {
 		background: white;
 		border: #dddddd solid 1px;
 
@@ -440,7 +440,6 @@
 			}
 		}
 
-
 		.chat-group-side-box {
 			border: #dddddd solid 1px;
 			animation: rtl-drawer-in .3s 1ms;
diff --git a/im-ui/src/components/chat/MessageItem.vue b/im-ui/src/components/chat/MessageItem.vue
index 089de0f..cd05691 100644
--- a/im-ui/src/components/chat/MessageItem.vue
+++ b/im-ui/src/components/chat/MessageItem.vue
@@ -14,7 +14,9 @@
 					<div class="img-load-box" v-loading="loading"  
 					element-loading-text="上传中.."
 					element-loading-background="rgba(0, 0, 0, 0.4)">
-						<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"/>	
+						<img class="send-image" 
+						:src="JSON.parse(msgInfo.content).thumbUrl"
+						@click="showFullImageBox()"/>	
 					</div>
 					<span title="发送失败" v-show="loadFail" @click="handleSendFail" class="send-fail el-icon-warning"></span>
 				</div>
@@ -66,7 +68,13 @@
 		methods:{
 			handleSendFail(){
 				this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送")
-			}
+			},
+			showFullImageBox(){
+				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
+				if(imageUrl){
+					this.$store.commit('showFullImageBox',imageUrl);
+				}
+			}	
 		},
 		computed:{
 			loading(){
@@ -160,6 +168,7 @@
 					flex-wrap: nowrap;
 					flex-direction: row;
 					align-items: center;
+					
 					.send-image{
 						min-width: 300px;
 						min-height: 200px;
diff --git a/im-ui/src/components/common/Emotion.vue b/im-ui/src/components/common/Emotion.vue
index 53c3b6f..21e3307 100644
--- a/im-ui/src/components/common/Emotion.vue
+++ b/im-ui/src/components/common/Emotion.vue
@@ -1,11 +1,13 @@
 <template>
-	<div class="emotion-box" :style="{'left':x+'px','top':y+'px'}">
-		<el-scrollbar style="height:200px">
-			<div class="emotion-item-list">
-				<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="clickHandler(emoText)" v-html="$emo.textToImg(emoText)">
+	<div class="emotion-mask" @click="$emit('emotion','')">
+		<div class="emotion-box" :style="{'left':x+'px','top':y+'px'}">
+			<el-scrollbar style="height:200px">
+				<div class="emotion-item-list">
+					<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="clickHandler(emoText)" v-html="$emo.textToImg(emoText)">
+					</div>
 				</div>
-			</div>
-		</el-scrollbar>
+			</el-scrollbar>
+		</div>
 	</div>
 </template>
 
@@ -37,6 +39,16 @@
 	}
 </script>
 <style scoped lang="scss">
+	.emotion-mask {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+	}
+	
 	.emotion-box {
 		position: fixed;
 		width: 400px;
diff --git a/im-ui/src/components/common/FullImage.vue b/im-ui/src/components/common/FullImage.vue
index aef32ba..5244de3 100644
--- a/im-ui/src/components/common/FullImage.vue
+++ b/im-ui/src/components/common/FullImage.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-dialog width="30%" :visible.sync="visible"   :before-close="handleClose">
+	<el-dialog width="40%" :visible.sync="visible"   :before-close="handleClose">
 		<img class="full-img" :src="url" />
 	</el-dialog>
 </template>
diff --git a/im-ui/src/view/Chat.vue b/im-ui/src/view/Chat.vue
index fd9903c..3386572 100644
--- a/im-ui/src/view/Chat.vue
+++ b/im-ui/src/view/Chat.vue
@@ -14,7 +14,7 @@
 			</el-scrollbar>
 		</el-aside>
 		<el-container class="r-chat-box">
-			<chat-box :chat="activeChat"></chat-box>
+			<chat-box v-show="activeChat.targetId>0" :chat="activeChat"></chat-box>
 		</el-container>
 	</el-container>
 </template>
diff --git a/im-ui/src/view/Login.vue b/im-ui/src/view/Login.vue
index 5b69360..2583a8c 100644
--- a/im-ui/src/view/Login.vue
+++ b/im-ui/src/view/Login.vue
@@ -68,6 +68,8 @@
 								params: this.loginForm
 							})
 							.then((data) => {
+								this.setCookie('username',this.loginForm.username);
+								this.setCookie('password',this.loginForm.password);
 								this.$message.success("登陆成功");
 								this.$router.push("/home/chat");
 							})
@@ -77,9 +79,37 @@
 			},
 			resetForm(formName) {
 				this.$refs[formName].resetFields();
-			}
+			},
+			// 获取cookie、
+			getCookie(name) {
+				let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+				let arr = document.cookie.match(reg)
+			    if (arr){
+					 return (arr[2]);
+				}
+			    return '';
+			 },
+			  // 设置cookie,增加到vue实例方便全局调用
+			 setCookie (name, value, expiredays) {
+			    var exdate = new Date();
+			    exdate.setDate(exdate.getDate() + expiredays);
+			    document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
+			  },
+			  // 删除cookie
+			  delCookie (name) {
+			    var exp = new Date();
+			    exp.setTime(exp.getTime() - 1);
+			    var cval = this.getCookie(name);
+			    if (cval != null){
+					document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
+				}
+			  }
+		},
+		mounted() {
+			this.loginForm.username = this.getCookie("username");
+			// cookie存密码并不安全，暂时是为了方便
+			this.loginForm.password = this.getCookie("password");
 		}
-	
 	}
 </script>