聊天页面

src/App.vue

@@ -58,6 +58,7 @@ export default {
         '/video-detail',
         '/scan',
         '/face-to-face',
+        '/chat',
         '',
       ];
       const toDepth = routeDeep.indexOf(to.path)

src/assets/scss/variables.scss

@@ -1 +1,2 @@
-$footer-height: 60px;
+$footer-height: 6rem;
+$header-height: 6rem;

src/components/FromBottomDialog.vue

@@ -98,6 +98,8 @@ export default {
         done()
       }, 200)
     },
+    afterEnter() {
+    },
     beforeLeave(el) {
       this.$setCss(el, 'transition-duration', `200ms`)
       this.$setCss(el, 'transform', `translate3d(0,0,0)`)
@@ -106,6 +108,10 @@ export default {
       this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
       setTimeout(done, 200)
     },
+    afterLeave() {
+    },
+
+
     hide(val = false) {
       this.$emit('update:modelValue', val)
     },

src/pages/message/Chat.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="Chat">
+    <div class="header">
+      <div class="left">
+        <img src="../../assets/img/icon/back.png" alt="" @click="$back">
+        <div class="badge">12</div>
+        <span>zzzz</span>
+      </div>
+      <div class="right">
+        <img src="../../assets/img/icon/back.png" alt="">
+        <img src="../../assets/img/icon/back.png" alt="">
+        <img src="../../assets/img/icon/back.png" alt="">
+      </div>
+    </div>
+    <div class="message-wrapper">
+      <div class="message" v-for="item in messages">
+
+        <div class="time"
+             v-if="item.type ===  MESSAGE_TYPE.TIME">
+          {{ item.time }}
+        </div>
+
+        <div class="chat-text"
+             :class="item.createBy !== myId ? 'left' : 'right'"
+             v-if="item.type ===  MESSAGE_TYPE.TEXT">
+          <img v-if="item.createBy !== myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+          <div class="content">{{ item.data }}</div>
+          <img v-if="item.createBy === myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+        </div>
+        <div class="douyin_video"
+             :class="item.createBy !== myId ? 'left' : 'right'"
+             v-if="item.type ===  MESSAGE_TYPE.DOUYIN_VIDEO">
+          <img v-if="item.createBy !== myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+          <div class="content">{{ item.data }}</div>
+          <img v-if="item.createBy === myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+let CALL_STATE = {
+  REJECT: 0,
+  RESOLVE: 1,
+  NONE: 2,
+}
+let VIDEO_STATE = {
+  VALID: 0,
+  INVALID: 1,
+}
+let AUDIO_STATE = {
+  NORMAL: 0,
+  SENDING: 1,
+}
+let READ_STATE = {
+  SENDING: 0,
+  ARRIVED: 1,
+  READ: 1,
+}
+let MESSAGE_TYPE = {
+  TEXT: 0,
+  TIME: 1,
+  VIDEO: 2,
+  DOUYIN_VIDEO: 2,
+  AUDIO: 3,
+  IMAGE: 6,
+  VIDEO_CALL: 4,
+  AUDIO_CALL: 5,
+  MEME: 7,//表情包
+  RED_PACKET: 8,//红包
+}
+export default {
+  name: "Chat",
+  data() {
+    return {
+      videoCall: [],
+      MESSAGE_TYPE,
+      myId: 1,
+      messages: [
+        {
+          type: MESSAGE_TYPE.TIME,
+          data: '',
+          time: '2021-01-02 21:21'
+        },
+        {
+          type: MESSAGE_TYPE.TEXT,
+          data: '又在刷抖音',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.TEXT,
+          data: '我昨天@你那个视频发给我下',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.TEXT,
+          data: '我找不到了',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.TEXT,
+          data: '我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了',
+          time: '2021-01-02 21:21',
+          createBy: 2
+        },
+        {
+          type: MESSAGE_TYPE.DOUYIN_VIDEO,
+          state: VIDEO_STATE.VALID,
+          data: {
+            src: '../../assets/video/1.mp4',
+            author: {
+              name: 'safasdfas',
+              avatar: '../../assets/img/icon/head-image.jpg'
+            },
+            title: 'asdfasdfasdfasdf'
+          },
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.DOUYIN_VIDEO,
+          state: VIDEO_STATE.INVALID,
+          data: {
+            src: '../../assets/video/1.mp4',
+            author: {
+              name: 'safasdfas',
+              avatar: '../../assets/img/icon/head-image.jpg'
+            },
+            title: 'asdfasdfasdfasdf'
+          },
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.VIDEO,
+          state: VIDEO_STATE.VALID,
+          data: '../../assets/video/1.mp4',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.AUDIO,
+          state: AUDIO_STATE.NORMAL,
+          data: '../../assets/video/1.mp4',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.AUDIO,
+          state: AUDIO_STATE.SENDING,
+          data: '../../assets/video/1.mp4',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.VIDEO_CALL,
+          state: CALL_STATE.REJECT,
+          data: '2021-01-02 21:44',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.VIDEO_CALL,
+          state: CALL_STATE.RESOLVE,
+          data: '2021-01-02 21:44',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.VIDEO_CALL,
+          state: CALL_STATE.NONE,
+          data: '2021-01-02 21:44',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.AUDIO_CALL,
+          state: CALL_STATE.REJECT,
+          data: '2021-01-02 21:44',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.AUDIO_CALL,
+          state: CALL_STATE.RESOLVE,
+          data: '2021-01-02 21:44',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.AUDIO_CALL,
+          state: CALL_STATE.NONE,
+          data: '2021-01-02 21:44',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.IMAGE,
+          state: AUDIO_STATE.NORMAL,
+          data: '../../assets/video/1.mp4',
+          time: '2021-01-02 21:21',
+          createBy: 1
+        },
+        {
+          type: MESSAGE_TYPE.IMAGE,
+          state: AUDIO_STATE.NORMAL,
+          data: '../../assets/video/1.mp4',
+          time: '2021-01-02 21:21',
+          createBy: 1,
+          readState: READ_STATE.ARRIVED
+        },
+      ]
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.Chat {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+
+  .header {
+    position: fixed;
+    width: 100%;
+    box-sizing: border-box;
+    height: $header-height;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid $line-color;
+
+    img {
+      height: 2rem;
+      margin: 0 1rem;
+    }
+
+    .left {
+      max-width: 60%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+
+      .badge {
+        margin-right: 1rem;
+        font-size: 1.2rem;
+        display: block;
+        padding: 1px 6px;
+        border-radius: 10px;
+        color: white;
+        background: $second-btn-color;
+      }
+    }
+
+  }
+
+  .message-wrapper {
+    padding-top: 6rem;
+
+    .message {
+      padding: 0 1rem;
+      margin-bottom: 2rem;
+
+      .time {
+        color: $second-text-color;
+        text-align: center;
+        height: 4rem;
+        line-height: 6rem;
+      }
+
+      .right {
+        justify-content: flex-end;
+      }
+
+      .left {
+        justify-content: flex-start;
+      }
+
+      .chat-text {
+        display: flex;
+        margin: 1rem 0;
+
+        .content {
+          max-width: 60vw;
+          padding: 1rem;
+          border-radius: .3rem;
+          margin: 0 1rem;
+          display: flex;
+          align-items: center;
+          font-size: 1.4rem;
+          background: dodgerblue;
+        }
+
+        .avatar {
+          height: 3.6rem;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/message/Message.vue

@@ -10,7 +10,7 @@
     <div class="line mb2r"></div>
     <div class="friends  pl1r ">
       <div class="friend pr1r pl1r"
-           @click="$nav('/edit-userinfo')"
+           @click="$nav('/chat')"
            v-for="item in 10">
         <div class="avatar on-line">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
@@ -719,7 +719,7 @@ export default {
           }
 
           .badge {
-            font-size: 1rem;
+            font-size: 1.2rem;
             display: block;
             color: black;
             padding: 1px 6px;

src/router/index.js

@@ -2,7 +2,7 @@ import * as VueRouter from "vue-router";
 
 import Index from "../pages/home/Index";
 import Attention from "../pages/home/Attention";
-import Message from "../pages/home/Message";
+import Message from "../pages/message/Message";
 import Me from "../pages/me/Me";
 import Music from "../components/common/Music";
 import countryChoose from "../pages/login/countryChoose";
@@ -27,6 +27,7 @@ import ServiceProtocol from "../pages/other/ServiceProtocol";
 import AddressList from "../pages/people/AddressList";
 import Scan from "../pages/people/Scan";
 import FaceToFace from "../pages/people/FaceToFace";
+import Chat from "../pages/message/Chat";
 
 const routes = [
   // {path: '', component: Music},
@@ -58,6 +59,7 @@ const routes = [
   {path: '/address-list', component: AddressList},
   {path: '/scan', component: Scan},
   {path: '/face-to-face', component: FaceToFace},
+  {path: '/chat', component: Chat},
 ]
 
 export default VueRouter.createRouter({

src/utils/enums.js

@@ -4,4 +4,5 @@ export default {
     SCHOOL: 1,
     ME: 2,
   }
-}
+}
+