From 4d650512b00be80eb907b4930708e47bdba1789a Mon Sep 17 00:00:00 2001
From: xuan <3142316616@qq.com>
Date: Tue, 17 Dec 2024 19:43:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=8E=A5=E5=8F=A3OK=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=86=E6=98=AF=E8=BF=98=E4=B8=8D=E8=83=BD=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E9=80=9A=E4=BF=A1=E3=80=82=E6=BB=9A=E5=8A=A8=E6=9D=A1=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=88=92=E5=88=B0=E6=9C=80=E5=BA=95=E9=83=A8=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E6=BB=91=E4=B8=8D=E6=9C=80=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chat/ChatList.vue  |  26 +++++----
 src/views/chat/HonneyBtn.vue |   1 +
 src/views/chat/chat.vue      | 105 ++++++++++++++++++++++++++++-------
 vue.config.js                |   5 ++
 4 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/src/views/chat/ChatList.vue b/src/views/chat/ChatList.vue
index bd6a11ac..90c3607d 100644
--- a/src/views/chat/ChatList.vue
+++ b/src/views/chat/ChatList.vue
@@ -1,9 +1,10 @@
 <template>
     <div ref="scrollDiv" class="container" :style="{height: containerHeight}" @scroll="scroll_event">
         <div class="list" :style="{top: listTop}">
-            <slot :show_list="getShowList" :show_height="one_height" @chatWithEvent="chatWithHandle"></slot>
+            <slot :show_list="getShowList" :show_height="one_height"></slot>
             <div :style="{height: barHeight}"></div>
         </div>
+
     </div>
 
 </template>
@@ -37,7 +38,10 @@ export default{
             return this.items.slice(this.start,this.end)
         },
         barHeight(){
-            return this.one_height * (this.items.length-this.start-this.shownum+1) + 'px'
+            if((this.items.length-this.start-this.shownum+1) <= 0)
+                return 0 + 'px'
+            else
+                return this.one_height * (this.items.length-this.start-this.shownum+1) + 'px'
         },
         listTop(){
             // console.log(this.items,this.shownum,this.one_height)
@@ -49,24 +53,24 @@ export default{
             const top = e.target.scrollTop
             this.start = Math.floor(top / this.one_height)
             this.end = this.start + this.shownum
+
+            // e.target.scrollTop = e.target.scrollHeight
+            // this.end = this.items.length
+            // this.start = this.end - this.shownum
         },
         chatWithHandle(){
-            console.log(1)
             if(this.status == true){
+                let scrollElem = this.$refs.scrollDiv
+                scrollElem.scrollTop = scrollElem.scrollHeight 
+                console.log(scrollElem.scrollHeight,scrollElem.scrollTop)
                 this.end = this.items.length
-                // console.log(this.end)
                 this.start = this.end - this.shownum
-                if(this.start < 0 ){
+                if(this.start<0)
                     this.start = 0
-                }else{
-                    let scrollElem = this.$refs.scrollDiv
-                    scrollElem.scrollTo({top: scrollElem
-                        ,behavior: 'smooth'})
-                    console.log(1)
-                }
             }
         }
     },
+    expose: ['chatWithHandle'],
     watch:{
         status(){
             console.log(1)
diff --git a/src/views/chat/HonneyBtn.vue b/src/views/chat/HonneyBtn.vue
index 3a2f8343..00e86e54 100644
--- a/src/views/chat/HonneyBtn.vue
+++ b/src/views/chat/HonneyBtn.vue
@@ -21,6 +21,7 @@ export default{
     props:{
         Status:Boolean,
         cnt:String,
+        userId1: Number,
         ReviseStatus2Father: Function
         // Status2:String
     },
diff --git a/src/views/chat/chat.vue b/src/views/chat/chat.vue
index 6254a114..8e8e8fae 100644
--- a/src/views/chat/chat.vue
+++ b/src/views/chat/chat.vue
@@ -19,13 +19,14 @@
                     </div>
                     <p id="chatTime" v-if="item.chatHistory.length != 0">{{ item.chatHistory[item.chatHistory.length - 1].time.split(' ')[1] }}</p>
                     <p id="chatTime" v-else>00:00</p>
+                    <label v-if="item.unreading_num != 0" style="position: relative;bottom:25%;background-color: red;color: white;border-radius: 50%;font-weight: 400;font-size: 8px;text-align: center;height: 15px;width: 15px;line-height: 180%;">{{ item.unreading_num }}</label>
                 </div>
                 </ChatList>
 
             </div>
         </div>
         <div class="chat-middlelayout">
-            <ChatList v-if="chatWith == '' ? false : true" :shownum="Number(5)" :items="getFriendObject.chatHistory" :one_height="Number(100)" :status="true" v-slot="a">
+            <ChatList ref="chatHandle" v-if="chatWith == '' ? false : true" :shownum="Number(5)" :items="getFriendObject.chatHistory" :one_height="Number(100)" :status="true" v-slot="a">
                 <div  v-for="(item,index) of a.show_list" :key="index">
                     <ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard>               
                 </div>
@@ -51,7 +52,7 @@
                     <p style="color: #f85096;">他的主页</p>
                 </div>
                 <div class="chat-home-tree-btn">
-                    <button class="chat-tree-btn"></button>
+                    <button class="chat-tree-btn" @click="cliTreeBtn"></button>
                     <p style="color: #a75efb;">族谱树</p>
                 </div>
             </div>
@@ -87,13 +88,12 @@ import ChatCard from './ChatCard.vue';
 import ChatList from './ChatList.vue';
 import {getToken,getUserId} from '@/token/auth'
 import axios from 'axios';
-
 export default {
     name: 'chatIndex', // 添加组件名称
     data(){
         return{
             searchName: '',
-            new_msg_nums: 1,
+            new_msg_nums: 0,
             chatWith:'',
             userInfo:{
                 id: Number(),
@@ -184,7 +184,34 @@ export default {
         ChatList
     },
     methods:{
+        async revise_honneyBtn_status(userId1,userId2,status){
+            //向后端发送是出于好友状态还是黑名单状态
+            try{
+                const response = await axios.post('/relationships',{
+                    userId1: userId1,
+                    userId2: userId2,
+                    status: status
+                },{
+                    headers:{Authorization : 'Bearer '+getToken()}
+                })
+                console.log(response.data)
+            }catch(error){
+                alert('好友状态修改失败',error)
+            }
+        },
+        async revise_reading(senderId,receiverId){ 
+            //向后端传输信息标记是否已读（一个axios
+            try{
+                const response = await axios.post(`/messages/mark-as-read/${senderId}/${receiverId}`,{},{
+                    headers:{Authorization : 'Bearer '+getToken()}
+                })
+                console.log(response.data)
+            }catch(error){
+                alert('消息已读失败',error)
+            }
+        },
         async save_chat_message(senderId,receiverId,content){
+            //向后端发送消息（一个axios
             try{
                 const response = await axios.post('/messages/send',{
                 senderId: senderId,
@@ -199,6 +226,7 @@ export default {
             }
         },
         async get_friendsInfoList(){
+            //向后端获取好友列表和聊天记录（两个axios
             try{
                 // const tempt_chat = {name:'',content:'',time:''}
                 const UserId = getUserId()
@@ -212,19 +240,19 @@ export default {
 
                 for(let i = 0;i< data.length;i++)
                 {
-                    let tempt_data = {id:Number(),name:'',icon:'/icon/UserIcon.png',position:'DEFAULT',birth:'',concern_status:false,black_status:false,beeing_friends_time: 0,
+                    let tempt_data = {id:Number(),name:'',icon:'/icon/UserIcon.png',position:'DEFAULT',birth:'',concern_status:false,black_status:false,beeing_friends_time: 0,unreading_num: 0,
                     chatHistory:[]}
 
                     // {name:'我',content:'you are',time:'2024-11-24 22:24'},
                     let response2
                     if(data[i].userId1 == UserId){
                         tempt_data.id = data[i].userId2
-                        response2 = await axios.get(`/messages/chat?userId1=${UserId}&userId2=${data[i].userId2}`,{
+                        response2 = await axios.get(`/messages/chat/${UserId}/${data[i].userId2}`,{
                             headers:{Authorization : token}
                         })
                     }else if(data[i].userId2 == UserId){
                         tempt_data.id = data[i].userId1
-                        response2 = await axios.get(`/messages/chat?userId1=${UserId}&userId2=${data[i].userId1}`,{
+                        response2 = await axios.get(`/messages/chat/${UserId}/${data[i].userId1}`,{
                             headers:{Authorization : token}
                         })
                     }
@@ -246,11 +274,16 @@ export default {
                             tempt_chat.time = chat_history[j].timestamp.replace('T',' ')
                             // console.log(tempt_chat)
                             tempt_data.chatHistory.push(tempt_chat)
+
+                            if(chat_history[j].read == false && chat_history[j].receiverId == UserId){
+                                tempt_data.unreading_num += 1
+                            }
                         }
                     }
 
                     tempt_data.name = data[i].otherUserNickname
                     tempt_data.birth = data[i].otherUserBirthday
+                    tempt_data.position = data[i].otherUserAddress
                     tempt_data.beeing_friends_time = data[i].daysSinceCreated
                     if(data[i].status == 'friend'){
                         tempt_data.concern_status = true
@@ -263,6 +296,7 @@ export default {
                         tempt_data.black_status = false
                     }
                     this.friendsInfoList.push(tempt_data) 
+                    this.new_msg_nums += tempt_data.unreading_num
                     this.userInfo.name = data[i].myNickname
                 }
                 
@@ -273,34 +307,67 @@ export default {
             }
         },
         clickFriendList(item){
+            //更新chatWith
             let who = item.name
             if(this.chatWith != who){
                 this.sendingMsg = ''
             }
             this.chatWith = item.name
             // console.log(this.chatWith)
-
+            //更新是否已读
+            this.revise_reading(this.userInfo.id,item.id)
+            this.new_msg_nums -= item.unreading_num
+            item.unreading_num = 0
+            //将列表下拉到最下面
+            this.$nextTick(() =>{
+                console.log(this.$refs.chatHandle)
+                this.$refs.chatHandle.chatWithHandle()
+            })
+        },
+        cliTreeBtn(){
+            this.$router.push('/main/familyTree')
         },
         sendMsg(){
-            const dayjs = require('dayjs')
-            const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
-            console.log(formattedTime) 
-            let i = 0
-            for(i=0;i<this.friendsInfoList.length;i++){
-                if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){
-                    this.friendsInfoList[i].chatHistory.push({name:this.userInfo.name,content:this.sendingMsg,time:formattedTime})
-                    // console.log(this.friendsInfoList[i].chatHistory)
-                    break
+            if(this.chatWith != ''){
+                const dayjs = require('dayjs')
+                const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
+                console.log(formattedTime) 
+                let i = 0
+                for(i=0;i<this.friendsInfoList.length;i++){
+                    if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){
+                        this.friendsInfoList[i].chatHistory.push({name:this.userInfo.name,content:this.sendingMsg,time:formattedTime})
+                        // console.log(this.friendsInfoList[i].chatHistory)
+                        break
+                    }
                 }
+                this.save_chat_message(this.userInfo.id,this.friendsInfoList[i].id,this.sendingMsg)
+                this.sendingMsg = ''
+                this.$nextTick(() =>{
+                    console.log(this.$refs.chatHandle)
+                    this.$refs.chatHandle.chatWithHandle()
+                })
             }
-            this.save_chat_message(this.userInfo.id,this.friendsInfoList[i].id,this.sendingMsg)
-            this.sendingMsg = ''
         },
         concernStatusRevise(data){
             this.getFriendObject.concern_status = data
+            // console.log(this.userInfo.id,this.getFriendObject.id)
+            if(data == true){
+                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'friend')
+                this.getFriendObject.black_status = false
+            }else if(this.getFriendObject.black_status == false && this.getFriendObject.concern_status == false){
+                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'normal')
+            }
+
         },
         blackStatusRevise(data){
             this.getFriendObject.black_status = data
+            if(data == true){
+                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'black')
+                this.getFriendObject.concern_status = false
+            }else if(this.getFriendObject.black_status == false && this.getFriendObject.concern_status == false){
+                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'normal')
+            }
+
         },
         historyContentHandle(content){
             let char_sizeof = 0
diff --git a/vue.config.js b/vue.config.js
index 7c5a56ff..ca3e7031 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -24,6 +24,11 @@ module.exports = defineConfig({
       '/messages/send':{
         target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
         changeOrigin : true
+      },
+      //新消息是否被已读的接口
+      '/messages/mark-as-read':{
+        target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
+        changeOrigin : true
       }
     }
   },