'私信聊天第一列功能和显示'

src/assets/css/chat/honneyBtn.css

@@ -1,63 +0,0 @@
-input{
-    display: none;
-}
-label{
-    /* 圆角矩形组件 */
-    display: block;
-    position: relative;
-    background-color:#979797;
-    width: 200px;
-    height: 100px;
-    border-radius: 100px;
-    padding: 0px;
-    margin: 0px;
-    transition: all 0.37s ease-in;
-}
-label::before{
-    /* 圆角矩形里面的按钮 */
-    content: '';
-    position: absolute;
-    width: 82px;
-    height: 82px;
-    border-radius: 50%;
-    border: 2px solid #b0b0b0;
-    background-color: white;
-    top: 7px;
-    left: 5px;
-    transition: all 1s ease-in;
-    animation: reverse_switch 0.35s forwards;
-}
-input:checked + label{
-    background-color: #FE4E96;
-}
-input:checked +label::before{
-    border:2px solid #fc5ea0;
-    animation: switch 0.35s forwards;
-}
-
-/* 给圆形定义关键帧 */
-@keyframes switch {
-    0% {
-        left: 4px;
-    }
-    60% {
-        left:4px;
-        width: 112px;
-    }
-    100%{
-        left: 104px;
-    }
-}
-@keyframes reverse_switch {
-    0% {
-        left: 104px;
-    }
-    60%{
-        left: 74px;
-        width: 112px;
-    }
-    100%{
-        left: 4px;
-    }
-}
-

src/views/chat/HonneyBtn.vue

@@ -1,23 +0,0 @@
-<template>
-    <h4>我是动效滚动</h4>
-    <input type="checkbox" id="honneyBtn" v-model="status">
-    <label for="honneyBtn">{{ status }}</label>
-</template>
-
-<script>
-export default{
-    data(){
-        return{
-            status: false
-        }
-    },
-    mounted(){
-        // 后端接口获取好友状态
-        this.status = true
-    }
-}
-</script>
-
-<style scoped>
-@import url('../../assets/css/chat/honneyBtn.css');
-</style>

src/views/chat/chat.vue

@@ -1,23 +0,0 @@
-<template>
-    <div>
-        <h4>私信聊天</h4> <hr>
-        <HonneyBtn />
-    </div>
-</template>
-<script>
-import HonneyBtn from './HonneyBtn.vue'
-export default {
-    name: 'chatIndex', // 添加组件名称
-    data(){
-        return{
-            
-        }
-    },
-    components:{
-        HonneyBtn,
-    }
-}
-</script>
-
-<script setup>
-</script>

新建文件夹/src/assets/css/chat/honneyBtn.css

@@ -0,0 +1,26 @@
+/* 给圆形定义关键帧 */
+@keyframes switch {
+    0% {
+        left: calc(4px * 0.5);
+    }
+    60% {
+        left:calc(4px * 0.5);
+        width: calc(112px * 0.5);
+    }
+    100%{
+        left: calc(104px * 0.5);
+    }
+}
+@keyframes reverse_switch {
+    0% {
+        left: calc(104px * 0.5);
+    }
+    60%{
+        left: calc(74px * 0.5);
+        width: calc(112px * 0.5);
+    }
+    100%{
+        left: calc(4px * 0.5);
+    }
+}
+

新建文件夹/src/views/chat/HonneyBtn.vue

@@ -0,0 +1,67 @@
+<template>
+    <!-- <h4>我是动效滚动</h4> -->
+     <div>
+        <input type="checkbox" id="honneyBtn" v-model="status">
+        <label for="honneyBtn" class="test">{{ status }}</label>
+     </div>
+
+</template>
+
+<script>
+export default{
+    data(){
+        return{
+            status: false
+        }
+    },
+    mounted(){
+        // 后端接口获取好友状态
+        this.status = true
+    }
+}
+</script>
+
+<style scoped>
+:root{
+    --prpotion: 0.5;
+}
+input{
+    display: none;
+}
+label{
+    /* 圆角矩形组件 */
+    display: block;
+    position: relative;
+    background-color:#979797;
+    width: calc(200px * 0.5);
+    height: calc(100px * 0.5);
+    border-radius: 200px;
+    padding: 0px;
+    margin: 0px;
+    transition: all 0.37s ease-in;
+}
+label::before{
+    /* 圆角矩形里面的按钮 */
+    content: '';
+    position: absolute;
+    width: calc(82px * 0.5);
+    height: calc(82px * 0.5);
+    border-radius: 50%;
+    border: calc(2px * 0.5) solid #b0b0b0;
+    background-color: white;
+    top: calc(7px * 0.5);
+    left: calc(5px * 0.5);
+    transition: all 1s ease-in;
+    animation: reverse_switch 0.35s forwards;
+}
+input:checked + label{
+    background-color: #FE4E96;
+}
+input:checked +label::before{
+    border:calc(2px * 0.5) solid #fc5ea0;
+    animation: switch 0.35s forwards;
+}
+
+@import url('../../assets/css/chat/honneyBtn.css');
+
+</style>

新建文件夹/src/views/chat/chat.vue

@@ -0,0 +1,279 @@
+<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">
+                <div class="chat-friends" v-for="(item,index) of showSearchList" :key="index" @click="clickFriendList(index)">
+                    <img id="chatIconImg" :src="item.icon" />
+                    <div class="chat-friend-text">
+                        <p id="chatFriendName">{{ item.name }}</p>
+                        <p id="chatFriendMsg">{{ getLatestNew[index][0] }}</p>
+                    </div>
+                    <p id="chatTime">{{ getLatestNew[index][1] }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="chat-middlelayout"></div>
+        <div class="chat-rightlayout"></div>
+    </div>
+</template>
+<script>
+// import HonneyBtn from './HonneyBtn.vue';
+
+export default {
+    name: 'chatIndex', // 添加组件名称
+    data(){
+        return{
+            searchName: '',
+            new_msg_nums: 1,
+            chatWith:'',
+            userInfo:{
+                name:'我',
+                icon:'@/assets/pictures/chat/UserIcon.png'
+            },
+            // ！！！！注意！！！！
+            // 头像显示的是第一列好友列表，使用循环渲染。这时如果在assets文件夹里面会被服务器临时编译到public文件夹里面。
+            // 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
+            // 这里文件路径命名是相对于public的绝对路径
+            friendsInfoList: [
+                {name:'潇潇',icon:'/icon/UserIcon.png',position:'london',birth:'2004-1-1',
+                chatHistory:[
+                    {name:'潇潇',content:'晚上好呀',time:'2024-11-24 2:11'},
+                    {name:'我',content:'你好呀',time:'2025-11-24 1:24'},
+                ]},
+                {name:'小刚','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',
+                chatHistory:[
+                    {name:'小刚',content:'hhh',time:'2024-11-25 22:11'},
+                    {name:'我',content:'you are',time:'2024-11-24 22:24'},
+                ]},
+                {name:'吴伟',icon:'/icon/UserIcon.png',position:'endland',birth:'2004-5-2',
+                chatHistory:[
+                    {name:'吴伟',content:'iii',time:'2024-12-24 23:11'},
+                    {name:'我',content:'早上好',time:'2024-11-24 22:25'},
+                ]},
+                {name:'小闽','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',
+                chatHistory:[
+                    {name:'小刚',content:'hhh',time:'2024-11-25 22:11'},
+                    {name:'我',content:'you are',time:'2024-11-24 22:24'},
+                ]},
+            ],
+            showSearchList: []
+        }
+    },
+    mounted(){
+        this.showSearchList = this.friendsInfoList
+    },
+    components:{
+        // HonneyBtn,
+    },
+    methods:{
+        clickFriendList(index){
+            this.chatWith = this.friendsInfoList[index].name
+            console.log(this.chatWith)
+        }
+    },
+    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:{
+        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
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+.chat-totallayout{
+    display: flex;
+    flex-direction: row;
+    height: 600px;
+    width: 100%;
+    /* background-color: aqua; */
+}
+.chat-leftlayout{
+    /* background-color: azure; */
+    width: 25%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.chat-middlelayout{
+    background-color: yellow;
+    width: 55%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.chat-rightlayout{
+    background-color: red;
+    width: 20%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+/**************整体布局***************/
+/*************左边************** *****/
+/* 第一行 */
+.chat-leftline1{
+    display: flex;
+    /* background-color: antiquewhite; */
+    align-items: center;
+    margin-left: 30px;
+    
+}
+.chat-leftlayout :nth-child(1){
+    flex-shrink: 0;
+    font-size: 30px;
+    font-weight: 600;
+}
+.chat-leftline1 :nth-child(2){
+    flex-shrink: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: rgb(61, 243, 243);
+    margin-left: 15px;
+
+    position: relative;
+    top: 2px;
+
+}
+/* 第二行 */
+.chat-leftline2{
+    display: flex;
+    align-items: center;
+}
+#chatSearchImg{
+    height: 16px;
+    position: relative;
+    left: 23px;
+    top: -18px;
+    z-index: 1;
+}
+#chatSearchInput{
+    outline: none;
+    height: 30px;
+    width: 300px;
+    border: 2px solid  #E44B9D;
+    border-radius: 8px;
+    padding-left: 30px;
+
+    position: relative;
+    top: -18px;
+
+    transition: all 0.5s;
+}
+#chatSearchInput:focus{
+    border-color: #fdadd8;
+}
+/* 第三行 */
+.chat-leftline3{
+    display: flex;
+    flex-direction: column;
+    /* align-items: center; */
+}
+.chat-friends{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgb(222, 222, 222);
+    /* background-color: #E44B9D; */
+    height: 70px;
+    width: 90%;
+    margin: 0 auto;
+    /* transition: all 0.2ss; */
+}
+.chat-friends:hover{
+    background-color: #fff2f9;
+}
+.chat-friend-text{
+    position: relative;
+    width: 60%;
+    /* background-color: #E44B9D; */
+    flex-shrink: 0;
+}
+#chatIconImg{
+    height: 50px;
+    width: 50px;
+}
+/* .chat-friend-text{
+    background-color: aliceblue;
+} */
+#chatFriendName{
+    font-size: medium;
+    color: black;
+    line-height: 10px;
+}
+#chatFriendMsg{
+    font-size: small;
+    font-weight: 300;
+    color: gray;
+    /* line-height: 0px; */
+}
+#chatTime{
+    font-size: small;
+    font-weight: 300;
+    color: gray;
+    /* background-color: #fdadd8; */
+}
+</style>

新建文件夹/src/views/login/login.vue

@@ -226,7 +226,7 @@ export default {
             this.isShow = !this.isShow
         },
         async UserLogin() {
-            this.$router.push('/chat');
+            this.$router.push('/main');
             if(this.loginUser.code === 'Yj98') {
                 try {
                     const response = await axios.post('', null, {
@@ -282,6 +282,6 @@ export default {
 
 </script>
 
-<style scoped>
+<style>
 @import url('../../assets/css/login/login.css');
 </style>