From c81f15f4c97ac7aa2230ed5f80f15d357c22c837 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 23 Jul 2021 14:08:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |   1 +
 src/assets/scss/variables.scss          |   3 +-
 src/components/FromBottomDialog.vue     |   6 +
 src/pages/message/Chat.vue              | 317 ++++++++++++++++++++++++
 src/pages/{home => message}/Message.vue |   4 +-
 src/router/index.js                     |   4 +-
 src/utils/enums.js                      |   3 +-
 7 files changed, 333 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/message/Chat.vue
 rename src/pages/{home => message}/Message.vue (99%)

diff --git a/src/App.vue b/src/App.vue
index 4ef23f8..3d38c6e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,6 +58,7 @@ export default {
         '/video-detail',
         '/scan',
         '/face-to-face',
+        '/chat',
         '',
       ];
       const toDepth = routeDeep.indexOf(to.path)
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index 37e7d17..3063082 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -1 +1,2 @@
-$footer-height: 60px;
\ No newline at end of file
+$footer-height: 6rem;
+$header-height: 6rem;
\ No newline at end of file
diff --git a/src/components/FromBottomDialog.vue b/src/components/FromBottomDialog.vue
index cd054b7..50c32c3 100644
--- a/src/components/FromBottomDialog.vue
+++ b/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)
     },
diff --git a/src/pages/message/Chat.vue b/src/pages/message/Chat.vue
new file mode 100644
index 0000000..28a617a
--- /dev/null
+++ b/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>
diff --git a/src/pages/home/Message.vue b/src/pages/message/Message.vue
similarity index 99%
rename from src/pages/home/Message.vue
rename to src/pages/message/Message.vue
index 9dbb51c..4763773 100644
--- a/src/pages/home/Message.vue
+++ b/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;
diff --git a/src/router/index.js b/src/router/index.js
index 4f52344..6165d15 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/utils/enums.js b/src/utils/enums.js
index c92d650..66a39f7 100644
--- a/src/utils/enums.js
+++ b/src/utils/enums.js
@@ -4,4 +4,5 @@ export default {
     SCHOOL: 1,
     ME: 2,
   }
-}
\ No newline at end of file
+}
+