|
|
<template>
|
|
|
<div class="chat-totallayout">
|
|
|
<div class="chat-leftlayout">
|
|
|
<div class="chat-leftline1">
|
|
|
<p>信息</p>
|
|
|
<p>{{ new_msg_nums }}条新信息</p>
|
|
|
</div>
|
|
|
<div class="chat-leftline2">
|
|
|
<img id="chatSearchImg" src="@/assets/pictures/chat/search.png">
|
|
|
<input id="chatSearchInput" type="search" v-model="searchName">
|
|
|
</div>
|
|
|
<div class="chat-leftline3">
|
|
|
<ChatList :shownum="Number(7)" :items="showSearchList" :one_height="Number(58)" v-slot="a">
|
|
|
<div class="chat-friends" v-for="(item,index) of a.show_list" :key="index" @click="clickFriendList(item)">
|
|
|
<img id="chatIconImg" :src="item.icon" />
|
|
|
<div class="chat-friend-text">
|
|
|
<p id="chatFriendName">{{ item.name }}</p>
|
|
|
<p id="chatFriendMsg">{{ getLatestNew(item) }}</p>
|
|
|
</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 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>
|
|
|
</ChatList>
|
|
|
<div class="send-msg">
|
|
|
<img :src="userInfo.icon" alt="" style="width: 40px;height: 40px; border-radius: 50%;">
|
|
|
<input id="send-msg-input" type="search" v-model="sendingMsg">
|
|
|
<button class="search-btn" @click="sendMsg"></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chat-rightlayout" v-if="chatWith != ''">
|
|
|
<img :src="getFriendObject.icon" alt="" style="width: 90px;height: 90px; border-radius: 50%;border: 1px solid #f85096;">
|
|
|
<p style="font-weight: 600; font-size: large;">{{ getFriendObject.name }}</p>
|
|
|
<div class="friend-information">
|
|
|
<img src="../../assets/pictures/chat/Location.png" alt="" style="height: 20px;">
|
|
|
<p>{{ getFriendObject.position }}</p>
|
|
|
<img src="../../assets/pictures/chat/Calendar.png" alt="" style="height: 20px;">
|
|
|
<p>{{ getFriendObject.birth }}</p>
|
|
|
</div>
|
|
|
<div class="chat-special-btn" style="position: relative;top: -3%;">
|
|
|
<div class="chat-home-tree-btn">
|
|
|
<button class="chat-home-page-btn" style=""></button>
|
|
|
<p style="color: #f85096;">他的主页</p>
|
|
|
</div>
|
|
|
<div class="chat-home-tree-btn">
|
|
|
<button class="chat-tree-btn" @click="cliTreeBtn"></button>
|
|
|
<p style="color: #a75efb;">族谱树</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="position: relative;top: -3%; width: 60%; height: 2px; background: linear-gradient(to right, transparent, gray, transparent);opacity: 0.7;">
|
|
|
</div>
|
|
|
<div style="position: relative;top: -1%;font-size: small;">你和他已经聊了{{ getFriendObject.beeing_friends_time }}天</div>
|
|
|
<div class="chat-connection" style="position: relative;top: 1%;">
|
|
|
<img src="../../assets/pictures/chat/GuanZhu.png" style="height: 23px;">
|
|
|
<p style="position: relative;top: -27%;">关注他</p>
|
|
|
<HonneyBtn style="position: relative;top: 6%;" cnt="1" :Status="getFriendObject.concern_status " :ReviseStatus2Father="concernStatusRevise"></HonneyBtn>
|
|
|
</div>
|
|
|
<div class="chat-connection" style="position: relative;top: -2%;">
|
|
|
<img src="../../assets/pictures/chat/HeiMinDan.png" style="height: 25px;">
|
|
|
<p style="position: relative;top: -25%;">拉黑他</p>
|
|
|
<HonneyBtn style="position: relative;top: 10%;" cnt="2" :Status="getFriendObject.black_status" :ReviseStatus2Father="blackStatusRevise"></HonneyBtn>
|
|
|
</div>
|
|
|
<div style="position:relative;top: -4%;width: 60%; height: 2px; background: linear-gradient(to right, transparent, gray, transparent);opacity: 0.7;"></div>
|
|
|
<p style="position: relative;top: -5%;">可能感兴趣的人</p>
|
|
|
<div class="chat-recomend" style="position: relative;top: -5%;">
|
|
|
<div v-for="(item,index) of recomendList" :key="index" style="display: flex;flex-direction: column;align-items: center;">
|
|
|
<img :src="item.icon" alt="" style="width: 50px;height: 50px;border: 2px solid #f85096;border-radius: 50%;">
|
|
|
<p>{{ item.name }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
// import RecycleScroller from 'vue-virtual-scroller';
|
|
|
|
|
|
import HonneyBtn from './HonneyBtn.vue';
|
|
|
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: 0,
|
|
|
chatWith:'',
|
|
|
userInfo:{
|
|
|
id: Number(),
|
|
|
name:'我',
|
|
|
icon:'/icon/abc.jpg'
|
|
|
},
|
|
|
sendingMsg: '',
|
|
|
// ！！！！注意！！！！
|
|
|
// 头像显示的是第一列好友列表，使用循环渲染。这时如果在assets文件夹里面会被服务器临时编译到public文件夹里面。
|
|
|
// 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
|
|
|
// 这里文件路径命名是相对于public的绝对路径
|
|
|
friendsInfoList: [
|
|
|
// {name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,beeing_friends_time: 302,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'早重中之重做做做做做做做做做做做做做做做做做做做战争之子战争之子做做做做',time:'2024-11-24 1:24'},
|
|
|
// {name:'潇潇',content:'中',time:'2024-11-24 2:11'},
|
|
|
// {name:'我',content:'晚',time:'2024-11-24 3:24'},
|
|
|
// ]},
|
|
|
// {name:'小刚',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 2,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'小刚',content:'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'吴伟',icon:'/icon/icon.png',position:'endland',birth:'2004-5-2',concern_status:false,black_status:false,beeing_friends_time: 32,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'早上好',time:'2024-11-24 22:25'},
|
|
|
// {name:'吴伟',content:'iii',time:'2024-11-24 23:11'},
|
|
|
// ]},
|
|
|
// {name:'小闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'小闽',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'小',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'小',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'闽',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'哈哈',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'哈哈',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'kk',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'kk',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'44',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'44',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'77',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'77',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
// {name:'88',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
|
|
|
// chatHistory:[
|
|
|
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
// {name:'88',content:'h',time:'2024-11-25 22:11'},
|
|
|
// ]},
|
|
|
],
|
|
|
showSearchList: [],
|
|
|
recomendList: [
|
|
|
{name:'Amon',icon:'/icon/bird.jpg'},
|
|
|
{name:'果果',icon:'/icon/icon.png'},
|
|
|
{name:'xixi',icon:'/icon/UserIcon.png'},
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
if(this.searchName == '')
|
|
|
this.showSearchList = this.friendsInfoList
|
|
|
|
|
|
this.get_friendsInfoList()
|
|
|
},
|
|
|
components:{
|
|
|
HonneyBtn,
|
|
|
// RecycleScroller,
|
|
|
ChatCard,
|
|
|
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,
|
|
|
receiverId: receiverId,
|
|
|
content: content
|
|
|
},{
|
|
|
headers:{Authorization : 'Bearer '+getToken()}
|
|
|
})
|
|
|
console.log(response.data)
|
|
|
}catch(error){
|
|
|
alert('消息保存失败',error)
|
|
|
}
|
|
|
},
|
|
|
async get_friendsInfoList(){
|
|
|
//向后端获取好友列表和聊天记录（两个axios
|
|
|
try{
|
|
|
// const tempt_chat = {name:'',content:'',time:''}
|
|
|
const UserId = getUserId()
|
|
|
const token = 'Bearer '+getToken()
|
|
|
console.log(UserId,token)
|
|
|
const response1 =await axios.get(`/relationships/${UserId}`,{
|
|
|
headers:{Authorization : token}
|
|
|
})
|
|
|
const data = response1.data
|
|
|
console.log(data)
|
|
|
|
|
|
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,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/${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/${UserId}/${data[i].userId1}`,{
|
|
|
headers:{Authorization : token}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
let chat_history = response2.data
|
|
|
console.log(chat_history)
|
|
|
|
|
|
if(chat_history.length != 0){
|
|
|
for(let j = 0;j < chat_history.length ; j++){
|
|
|
let tempt_chat = {name:'',content:'',time:''}
|
|
|
|
|
|
if(chat_history[j].senderId == UserId){
|
|
|
tempt_chat.name = data[i].myNickname
|
|
|
}else{
|
|
|
tempt_chat.name = data[i].otherUserNickname
|
|
|
}
|
|
|
|
|
|
tempt_chat.content = chat_history[j].content
|
|
|
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
|
|
|
tempt_data.black_status = false
|
|
|
}else if(data[i].status == 'black'){
|
|
|
tempt_data.concern_status = false
|
|
|
tempt_data.black_status = true
|
|
|
}else if(data[i].status == 'normal'){
|
|
|
tempt_data.concern_status = false
|
|
|
tempt_data.black_status = false
|
|
|
}
|
|
|
this.friendsInfoList.push(tempt_data)
|
|
|
this.new_msg_nums += tempt_data.unreading_num
|
|
|
this.userInfo.name = data[i].myNickname
|
|
|
}
|
|
|
|
|
|
this.userInfo.id = UserId
|
|
|
console.log(this.friendsInfoList,this.userInfo)
|
|
|
}catch(error){
|
|
|
alert('获取好友信息失败',error)
|
|
|
}
|
|
|
},
|
|
|
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(){
|
|
|
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()
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
let new_content = content
|
|
|
for(let i = 0;i<content.length;i++){
|
|
|
let charCode = new_content.charCodeAt(i)
|
|
|
if(charCode <= 128 && charCode >= 0 && content[i] != '\n'){
|
|
|
char_sizeof += 1
|
|
|
}else{
|
|
|
char_sizeof += 2
|
|
|
}
|
|
|
if (char_sizeof % 40 == 0){
|
|
|
new_content = new_content.slice(0,i) + '\n' + new_content.slice(i)
|
|
|
}
|
|
|
}
|
|
|
return new_content
|
|
|
},
|
|
|
getLatestNew(object){
|
|
|
let latest_new = ''
|
|
|
if(object.chatHistory.length != 0){
|
|
|
latest_new = object.chatHistory[object.chatHistory.length - 1].content
|
|
|
if(latest_new.length > 14){
|
|
|
latest_new= latest_new.slice(0,13) + '...'
|
|
|
}
|
|
|
}
|
|
|
return latest_new
|
|
|
},
|
|
|
},
|
|
|
watch:{
|
|
|
searchName(newvalue){
|
|
|
this.showSearchList = []
|
|
|
if(newvalue == ''){
|
|
|
this.showSearchList = this.friendsInfoList
|
|
|
}
|
|
|
else{
|
|
|
this.friendsInfoList.map((x) =>{
|
|
|
if(x.name.includes(newvalue)){
|
|
|
this.showSearchList.push(x)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
computed:{
|
|
|
getFriendObject(){
|
|
|
let FriendObject = {}
|
|
|
if(this.chatWith != ''){
|
|
|
this.friendsInfoList.map((x) =>{
|
|
|
if(x.name == this.chatWith){
|
|
|
FriendObject = x
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
console.log(FriendObject)
|
|
|
return FriendObject
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@import url('../../assets/css/chat/chat.css');
|
|
|
</style> |
