|
|
|
|
@ -20,63 +20,141 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chat-middlelayout"></div>
|
|
|
|
|
<div class="chat-rightlayout"></div>
|
|
|
|
|
<div class="chat-middlelayout">
|
|
|
|
|
<div v-for="(item,index) of getHistory" :key="index">
|
|
|
|
|
<ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="item.content"></ChatCard>
|
|
|
|
|
</div>
|
|
|
|
|
<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"></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;">你和他已经聊了{{ 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%;" key="1" :Status="getFriendObject.concern_status"></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%;" key="2" :Status="getFriendObject.black_status"></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 HonneyBtn from './HonneyBtn.vue';
|
|
|
|
|
// import RecycleScroller from 'vue-virtual-scroller';
|
|
|
|
|
|
|
|
|
|
import HonneyBtn from './HonneyBtn.vue';
|
|
|
|
|
import ChatCard from './ChatCard.vue'
|
|
|
|
|
export default {
|
|
|
|
|
name: 'chatIndex', // 添加组件名称
|
|
|
|
|
data(){
|
|
|
|
|
return{
|
|
|
|
|
searchName: '',
|
|
|
|
|
new_msg_nums: 1,
|
|
|
|
|
chatWith:'',
|
|
|
|
|
chatWith:'潇潇',
|
|
|
|
|
userInfo:{
|
|
|
|
|
name:'我',
|
|
|
|
|
icon:'@/assets/pictures/chat/UserIcon.png'
|
|
|
|
|
icon:'/icon/abc.jpg'
|
|
|
|
|
},
|
|
|
|
|
beeing_friends_time: 302,
|
|
|
|
|
sendingMsg: '',
|
|
|
|
|
// ！！！！注意！！！！
|
|
|
|
|
// 头像显示的是第一列好友列表，使用循环渲染。这时如果在assets文件夹里面会被服务器临时编译到public文件夹里面。
|
|
|
|
|
// 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
|
|
|
|
|
// 这里文件路径命名是相对于public的绝对路径
|
|
|
|
|
friendsInfoList: [
|
|
|
|
|
{name:'潇潇',icon:'/icon/UserIcon.png',position:'london',birth:'2004-1-1',
|
|
|
|
|
{name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,
|
|
|
|
|
chatHistory:[
|
|
|
|
|
{name:'潇潇',content:'晚上好呀',time:'2024-11-24 2:11'},
|
|
|
|
|
{name:'我',content:'你好呀',time:'2025-11-24 1:24'},
|
|
|
|
|
{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',
|
|
|
|
|
{name:'小刚','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,
|
|
|
|
|
chatHistory:[
|
|
|
|
|
{name:'小刚',content:'hhh',time:'2024-11-25 22:11'},
|
|
|
|
|
{name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
|
|
{name:'小刚',content:'hhh',time:'2024-11-25 22:11'},
|
|
|
|
|
]},
|
|
|
|
|
{name:'吴伟',icon:'/icon/UserIcon.png',position:'endland',birth:'2004-5-2',
|
|
|
|
|
{name:'吴伟',icon:'/icon/icon.png',position:'endland',birth:'2004-5-2',concern_status:false,black_status:false,
|
|
|
|
|
chatHistory:[
|
|
|
|
|
{name:'吴伟',content:'iii',time:'2024-12-24 23:11'},
|
|
|
|
|
{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',
|
|
|
|
|
{name:'小闽','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,
|
|
|
|
|
chatHistory:[
|
|
|
|
|
{name:'小刚',content:'hhh',time:'2024-11-25 22:11'},
|
|
|
|
|
{name:'我',content:'you are',time:'2024-11-24 22:24'},
|
|
|
|
|
{name:'小闽',content:'h',time:'2024-11-25 22:11'},
|
|
|
|
|
]},
|
|
|
|
|
],
|
|
|
|
|
showSearchList: []
|
|
|
|
|
showSearchList: [],
|
|
|
|
|
recomendList: [
|
|
|
|
|
{name:'Amon',icon:'/icon/bird.jpg'},
|
|
|
|
|
{name:'果果',icon:'/icon/icon.png'},
|
|
|
|
|
{name:'xixi',icon:'/icon/UserIcon.png'},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.showSearchList = this.friendsInfoList
|
|
|
|
|
},
|
|
|
|
|
components:{
|
|
|
|
|
// HonneyBtn,
|
|
|
|
|
HonneyBtn,
|
|
|
|
|
// RecycleScroller,
|
|
|
|
|
ChatCard
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
clickFriendList(index){
|
|
|
|
|
let who = this.friendsInfoList[index].name
|
|
|
|
|
if(this.chatWith != who){
|
|
|
|
|
this.sendingMsg = ''
|
|
|
|
|
}
|
|
|
|
|
this.chatWith = this.friendsInfoList[index].name
|
|
|
|
|
console.log(this.chatWith)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
sendMsg(){
|
|
|
|
|
const dayjs = require('dayjs')
|
|
|
|
|
const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
|
|
|
|
|
console.log(formattedTime)
|
|
|
|
|
for(let 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})
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.sendingMsg = ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch:{
|
|
|
|
|
@ -138,6 +216,55 @@ export default {
|
|
|
|
|
console.log(time_content_list)
|
|
|
|
|
return time_content_list
|
|
|
|
|
},
|
|
|
|
|
getHistory(){
|
|
|
|
|
let historyChat = []
|
|
|
|
|
let newHistoryChat = []
|
|
|
|
|
if(this.chatWith != ''){
|
|
|
|
|
this.friendsInfoList.map((x) =>{
|
|
|
|
|
if(x.name == this.chatWith){
|
|
|
|
|
historyChat = x.chatHistory
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
//规定字符超过40个字节长度就要换行
|
|
|
|
|
newHistoryChat = historyChat.map((y)=>{
|
|
|
|
|
let new_content = y.content
|
|
|
|
|
let sizeof_length = 0
|
|
|
|
|
for(let i=0;i<new_content.length;i++){
|
|
|
|
|
let charCode = new_content.charCodeAt(i)
|
|
|
|
|
// console.log(charCode)
|
|
|
|
|
if(charCode >=0 && charCode <=128 && charCode != '\n'){
|
|
|
|
|
sizeof_length += 1
|
|
|
|
|
}else{
|
|
|
|
|
sizeof_length += 2
|
|
|
|
|
}
|
|
|
|
|
// console.log(sizeof_length)
|
|
|
|
|
if(sizeof_length % 40 == 0){
|
|
|
|
|
new_content = new_content.slice(0,i) + '\n' + new_content.slice(i)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(new_content)
|
|
|
|
|
return new_content
|
|
|
|
|
})
|
|
|
|
|
// console.log(newHistoryChat)
|
|
|
|
|
}
|
|
|
|
|
newHistoryChat.map((z,index)=>{
|
|
|
|
|
historyChat[index].content = z
|
|
|
|
|
})
|
|
|
|
|
// console.log(historyChat)
|
|
|
|
|
return historyChat
|
|
|
|
|
},
|
|
|
|
|
getFriendObject(){
|
|
|
|
|
let FriendObject = {}
|
|
|
|
|
if(this.chatWith != ''){
|
|
|
|
|
this.friendsInfoList.map((x) =>{
|
|
|
|
|
if(x.name == this.chatWith){
|
|
|
|
|
FriendObject = x
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
console.log(FriendObject)
|
|
|
|
|
return FriendObject
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -147,8 +274,10 @@ export default {
|
|
|
|
|
.chat-totallayout{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
height: 600px;
|
|
|
|
|
height: 85%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* flex-grow: 0;
|
|
|
|
|
flex-shrink: 0; */
|
|
|
|
|
/* background-color: aqua; */
|
|
|
|
|
}
|
|
|
|
|
.chat-leftlayout{
|
|
|
|
|
@ -159,18 +288,22 @@ export default {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.chat-middlelayout{
|
|
|
|
|
background-color: yellow;
|
|
|
|
|
background: linear-gradient(to top, #fff9a1 65%, #fcdcd7);
|
|
|
|
|
width: 55%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.chat-rightlayout{
|
|
|
|
|
background-color: red;
|
|
|
|
|
/* background-color: red; */
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 20%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 3%;
|
|
|
|
|
}
|
|
|
|
|
/**************整体布局***************/
|
|
|
|
|
/*************左边************** *****/
|
|
|
|
|
@ -246,6 +379,9 @@ export default {
|
|
|
|
|
.chat-friends:hover{
|
|
|
|
|
background-color: #fff2f9;
|
|
|
|
|
}
|
|
|
|
|
.chat-friends:active{
|
|
|
|
|
background-color: #fcb8dd;
|
|
|
|
|
}
|
|
|
|
|
.chat-friend-text{
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 60%;
|
|
|
|
|
@ -276,4 +412,92 @@ export default {
|
|
|
|
|
color: gray;
|
|
|
|
|
/* background-color: #fdadd8; */
|
|
|
|
|
}
|
|
|
|
|
/*****************中间****************** */
|
|
|
|
|
.send-msg{
|
|
|
|
|
align-self: center;
|
|
|
|
|
justify-self: flex-end;
|
|
|
|
|
display: flex;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 5%;
|
|
|
|
|
width: 80%;
|
|
|
|
|
}
|
|
|
|
|
#send-msg-input{
|
|
|
|
|
outline: none;
|
|
|
|
|
border: 1px solid #E44B9D;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
width: 90%;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
}
|
|
|
|
|
.search-btn{
|
|
|
|
|
background-image: url("@/assets/pictures/chat/SendBtn.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border: none;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
.search-btn:active{
|
|
|
|
|
background-image: url("@/assets/pictures/chat/SendBtn.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border: none;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
background-color: #a75efb;
|
|
|
|
|
}
|
|
|
|
|
/*****************右边***************************/
|
|
|
|
|
.friend-information{
|
|
|
|
|
width: 75%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
color: gray;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 0%;
|
|
|
|
|
}
|
|
|
|
|
.friend-information p{
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -31%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-special-btn{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
width: 85%;
|
|
|
|
|
height: 20%;
|
|
|
|
|
}
|
|
|
|
|
.chat-home-tree-btn{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.chat-home-page-btn{
|
|
|
|
|
background-color: #f85096;
|
|
|
|
|
background-image: url('../../assets/pictures/chat/portrait.png');
|
|
|
|
|
background-size: 60% 60%;
|
|
|
|
|
background-position: center center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
height: 60px;width: 60px; border: none; border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.chat-tree-btn{
|
|
|
|
|
background-color: #a75efb;
|
|
|
|
|
background-image: url('../../assets/pictures/chat/tree.png');
|
|
|
|
|
background-size: 60% 60%;
|
|
|
|
|
background-position: center center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
height: 60px;width: 60px; border: none; border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.chat-connection{
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 62%;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
.chat-recomend{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
width: 90%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
