pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

聊天接口OK，但是还不能实时通信。滚动条自动划到最底部可能滑不最底部

Browse Source
main
xuan 1 month ago
parent 62b5ccc769
commit 4d650512b0
4 changed files with 107 additions and 30 deletions
Show Stats Download Patch File Download Diff File

26
src/views/chat/ChatList.vue
Unescape View File

@ -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)

1
src/views/chat/HonneyBtn.vue
Unescape View File

@ -21,6 +21,7 @@ export default{
props:{
Status:Boolean,
cnt:String,
userId1: Number,
ReviseStatus2Father: Function
// Status2:String
},

105
src/views/chat/chat.vue
Unescape View File

@ -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

5
vue.config.js
Unescape View File

@ -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
}
}
},

Write Preview
Loading…
Cancel
Save