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

src/views/chat/HonneyBtn.vue

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

src/views/chat/chat.vue

@@ -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">  
+            <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="item.content"></ChatCard>
+                <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>
+                <p style="position: relative;top: -27%;">关注他{{ getFriendObject.concern_status }}</p>
-                <HonneyBtn style="position: relative;top: 6%;" key="1" :Status="getFriendObject.concern_status"></HonneyBtn>
+                <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>
+                <p style="position: relative;top: -25%;">拉黑他{{ getFriendObject.black_status }}</p>
-                <HonneyBtn style="position: relative;top: 10%;" key="2" :Status="getFriendObject.black_status"></HonneyBtn>
+                <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,6 +126,7 @@ export default {
         }
     },
     mounted(){
+        if(this.searchName == '')
             this.showSearchList = this.friendsInfoList
     },
     components:{
@@ -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 != ''){