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

解决honneybtn和聊天字符长度限制bug

Browse Source
pull/1/head
xuan 2 months ago
parent 19e2473fc8
commit 8277a99aae
3 changed files with 74 additions and 105 deletions
Show Stats Download Patch File Download Diff File

2
src/views/chat/ChatCard.vue
Unescape View File

@ -4,7 +4,7 @@
<div class="card-color-size-1">{{ content }} {{ console.log(content) }}</div>
</div>
<div v-else class="card-layout-2">
<div class="card-color-size-2">{{ content }} {{ console.log(content) }}</div>
<div class="card-color-size-2">{{ content }} {{ console.log(content) }}</div>
<img id="card-icon-2" :src="my_icon" alt="" style="width: 50px;height:50px">
</div>
</template>

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

@ -1,7 +1,7 @@
<template>
<!-- <h4>我是动效滚动</h4> -->
<div>
<input type="checkbox" id="honneyBtn" v-model="status">
<input type="checkbox" class="honneyBtn" v-model="status" :id="cnt">
<label for="honneyBtn" class="test">{{ status }}</label>
</div>
@ -11,7 +11,7 @@
export default{
data(){
return{
status: false
status: false,
}
},
mounted(){
@ -19,9 +19,21 @@ export default{
this.status = this.Status
},
props:{
Status:String,
Status:Boolean,
cnt:String,
ReviseStatus2Father: Function
// Status2:String
},
watch:{
status(newvalue){
this.status = newvalue
this.ReviseStatus2Father(this.status)
console.log(this.newvalue)
},
Status(){
this.status = this.Status
}
}
}
</script>
@ -31,7 +43,10 @@ export default{
--honey-height:100px;
}
input{
display: none;
/* display: none; */
opacity: 0;
width: calc(200px * 0.2);
height: calc(100px * 0.2);
}
label{
/* 圆角矩形组件 */
@ -44,6 +59,10 @@ label{
padding: 0px;
margin: 0px;
transition: all 0.37s ease-in;
position: inherit;
top: -50%;
z-index: -1;
}
label::before{
/* 圆角矩形里面的按钮 */
@ -59,10 +78,10 @@ label::before{
transition: all 1s ease-in;
animation: reverse_switch 0.35s forwards;
}
#honneyBtn:checked + label{
.honneyBtn:checked + label{
background-color: #FE4E96;
}
#honneyBtn:checked + label::before{
.honneyBtn:checked + label::before{
border:calc(2px * 0.2) solid #fc5ea0;
animation: switch 0.35s forwards;
}

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

@ -14,15 +14,15 @@
<img id="chatIconImg" :src="item.icon" />
<div class="chat-friend-text">
<p id="chatFriendName">{{ item.name }}</p>
<p id="chatFriendMsg">{{ getLatestNew[index][0] }}</p>
<p id="chatFriendMsg">{{ getLatestNew(item) }}</p>
</div>
<p id="chatTime">{{ getLatestNew[index][1] }}</p>
<p id="chatTime">{{ item.chatHistory[item.chatHistory.length - 1].time.split(' ')[1] }}</p>
</div>
</div>
</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 v-for="(item,index) of getFriendObject.chatHistory" :key="index">
<ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard>
</div>
<div class="send-msg">
<img :src="userInfo.icon" alt="" style="width: 40px;height: 40px; border-radius: 50%;">
@ -51,16 +51,16 @@
</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 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%;" key="1" :Status="getFriendObject.concern_status"></HonneyBtn>
<p style="position: relative;top: -27%;">关注他{{ getFriendObject.concern_status }}</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%;" key="2" :Status="getFriendObject.black_status"></HonneyBtn>
<p style="position: relative;top: -25%;">拉黑他{{ getFriendObject.black_status }}</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>
@ -84,35 +84,34 @@ export default {
return{
searchName: '',
new_msg_nums: 1,
chatWith:'潇潇',
chatWith:'',
userInfo:{
name:'我',
icon:'/icon/abc.jpg'
},
beeing_friends_time: 302,
sendingMsg: '',
// ！！！！注意！！！！
// 头像显示的是第一列好友列表，使用循环渲染。这时如果在assets文件夹里面会被服务器临时编译到public文件夹里面。
// 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
// 这里文件路径命名是相对于public的绝对路径
friendsInfoList: [
{name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,
{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,
{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:'hhh',time:'2024-11-25 22:11'},
{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,
{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,
{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'},
@ -127,7 +126,8 @@ export default {
}
},
mounted(){
this.showSearchList = this.friendsInfoList
if(this.searchName == '')
this.showSearchList = this.friendsInfoList
},
components:{
HonneyBtn,
@ -151,11 +151,41 @@ export default {
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})
// console.log(this.friendsInfoList[i].chatHistory)
break
}
}
this.sendingMsg = ''
}
},
concernStatusRevise(data){
this.getFriendObject.concern_status = data
},
blackStatusRevise(data){
this.getFriendObject.black_status = data
},
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 = 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){
@ -173,86 +203,6 @@ export default {
}
},
computed:{
getLatestNew(){
let time_list = []
let time_temp = ''
let content_list = []
let content_temp = ''
let time_compare1 = []
let time_compare2 = []
let time_content_list = []
for(let i=0;i<this.friendsInfoList.length;i++){
for(let j=0;j<this.friendsInfoList[i].chatHistory.length;j++){
time_temp =this.friendsInfoList[i].chatHistory[j].time
content_temp =this.friendsInfoList[i].chatHistory[j].content
if(time_list.length == i){
time_list.push(time_temp)
content_list.push(content_temp)
}
else{
time_compare1 = time_temp.split(/[-' ':]/)
time_compare2 = time_list[i].split(/[-' ':]/)
for(let k=0;k<time_compare1.length;k++){
if(parseInt(time_compare1[k])<parseInt(time_compare2[k])){
console.log(time_compare1[k],time_compare2[k])
break
}
else if(parseInt(time_compare1[k])>parseInt(time_compare2[k])){
console.log(time_compare1[k],time_compare2[k])
time_list[i] = time_temp
content_list[i] = content_temp
break
}
}
}
}
}
console.log(time_list,content_list)
content_list.map((x,index)=>{
time_content_list[index] = [x,time_list[index].split(' ')[1]]
})
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 != ''){

Write Preview
Loading…
Cancel
Save