diff --git a/buyer/src/components/ChatApp/ChatApp.vue b/buyer/src/components/ChatApp/ChatApp.vue
index 56dec20fec36e3b638518e65f2a6f1bb34acb32f..74a14f64b302153e656364190c5bf015d70b478b 100644
--- a/buyer/src/components/ChatApp/ChatApp.vue
+++ b/buyer/src/components/ChatApp/ChatApp.vue
@@ -16,12 +16,13 @@
         <div class="friend-list">
           <div
             v-for="item in showFriends"
-            :key="item['friends_id']"
+            :key="item['target_id']"
             class="friend-item"
-            :class="{active: receiver_id === item['friends_id']}"
+            :class="{active: receiver_id === item['target_id']}"
             @click="handleClickFriend(item)"
           >
-            <div class="face-friend" :style="{backgroundImage: `url(${item.face || defaultFace})`}"></div>
+            <div v-if="!Number(item.target_id)" class="face-friend" :style="{backgroundImage: `url(${platformFace})`}"></div>
+            <div v-else class="face-friend" :style="{backgroundImage: `url(${item.avatar || defaultFace})`}"></div>
             <div class="name-friend ellipsis">{{ item.name }}</div>
             <div v-if="item['un_read_num'] > 0" class="unread-friend">{{ item['un_read_num'] }}</div>
             <div class="icon-delete" @click.stop="handleDeleteFriend(item)"></div>
@@ -31,7 +32,8 @@
       <div class="right-chat">
         <div class="head-right">
           <div v-if="currentChat" class="wrapper-head">
-            <div class="face-head" :style="{backgroundImage: `url(${currentChat.face || defaultFace})`}"></div>
+            <div v-if="!Number(currentChat.target_id)" class="face-head" :style="{backgroundImage: `url(${platformFace})`}"></div>
+            <div v-else class="face-head" :style="{backgroundImage: `url(${currentChat.avatar || defaultFace})`}"></div>
             <div class="info-head">
               <p class="name-info-head">
                 {{ currentChat.name }}
@@ -163,7 +165,7 @@
                   <div class="other-order">
                     <p class="price-order">
                       <span>订单金额：</span>
-                      <span class="price">￥{{ item['order_amount'] }}</span>
+                      <span class="price">{{ item['order_amount'] | unitPrice }}</span>
                     </p>
                     <div>
                       <span class="date-order">{{ unixToDate(item.create_time) }}</span>
@@ -192,6 +194,7 @@
 </template>
 
 <script>
+import { component as Viewer } from 'v-viewer'
 import apiMixin from './apiMixin'
 import emojiMixin from './emojiMixin'
 import ChatAppEmoji from './ChatAppEmoji'
@@ -199,10 +202,12 @@ import ChatMessageItem from './ChatMessageItem'
 import { MessageBox } from 'element-ui'
 import websocket from './Websocket'
 import JSONBig from 'json-bigint'
+import 'viewerjs/dist/viewer.css'
+import Storage from '@/utils/storage'
 
 export default {
   name: 'ChatApp',
-  components: { ChatAppEmoji, ChatMessageItem },
+  components: { ChatAppEmoji, ChatMessageItem, Viewer },
   props: {
     user: {
       type: Object,
@@ -240,13 +245,15 @@ export default {
       new_message_tip: false,
       viewerImages: [],
       defaultFace: require('./icon-noface.jpg'),
+      platformFace: require('./platform.jpg'),
       search_goods_keyword: ''
     }
   },
   computed: {
     // 正在聊天对象
     currentChat() {
-      const friend = this.friends.filter(item => item['friends_id'] === this.receiver_id)[0]
+      console.log(this.friends)
+      const friend = this.friends.filter(item => item['target_id'] === this.receiver_id)[0]
       return friend || ''
     },
     // 正在咨询的商品
@@ -275,13 +282,19 @@ export default {
     this.goods_id = goods_id
 
     // 获取token
-    const webSocketToken = await this.getWebsocketToken()
-    websocket.init(this.apis['im'] + '/im/ws?token=' + webSocketToken, this.handleWebsocketMessage)
-
-    if (!this.isSeller && shop_id) {
-      this.goodsListParams.seller_id = shop_id
+    const accessToken = Storage.getItem('access_token')
+    websocket.init(this.apis['buyer'] + '/ws/shop?appType=buyer&token=' + accessToken, this.handleWebsocketMessage)
+    console.log(this.isSeller)
+    console.log(shop_id)
+    if (!this.isSeller) {
+      if (shop_id) {
+        this.goodsListParams.seller_id = shop_id
+      }
       this.getGoodsList()
     }
+    if (this.receiver_id) {
+      this.createSession()
+    }
   },
   watch: {
     search_goods_keyword: 'handleSearchGoods'
@@ -297,16 +310,32 @@ export default {
      * @param message
      */
     handleWebsocketMessage(message) {
-      let msg = JSON.parse(message)
+      let messageObject = JSONBig.parse(message)
+      if (messageObject.module_type !== 'IM') {
+        return
+      }
 
+      let msg = messageObject.data
       // 收到新消息
       if (msg.type === 'msg') {
         let senderId = msg.sender_id.toString()
         if (senderId !== this.receiver_id) {
-          const chat = this.friends.filter(item => item['friends_id'] === senderId)[0]
+          var chatIndex = -1
+          const chat = this.friends.filter((item, index, arr) => {
+            if (item['target_id'] === senderId) {
+              chatIndex = index
+              return item
+            }
+          })[0]
           if (chat) {
             chat.un_read_num += 1
+            this.friends.splice(chatIndex, 1)
+            this.friends.unshift(chat)
+          } else {
+            // 未找到会话
+            this.getFriends()
           }
+
           return
         }
 
@@ -340,13 +369,14 @@ export default {
      * @param item
      */
     handleDeleteFriend(item) {
-      const id = item['friends_id']
-      this.deleteFriend(id).then(() => {
-        if (this.receiver_id === id) {
-          this.receiver_id = ''
-          this.chatHistories = []
-        }
-        this.getFriends()
+      this.$confirm('确认要删除此联系人?', () => {
+        const id = item['target_id']
+        this.deleteFriend(id).then(() => {
+          if (this.receiver_id === id) {
+            this.receiver_id = ''
+          }
+          this.getFriends()
+        })
       })
     },
     /**
@@ -354,14 +384,14 @@ export default {
      * @param item
      */
     handleClickFriend(item) {
-      this.receiver_id = item['friends_id']
+      this.receiver_id = item['target_id']
       this.current_tab = 0
       this.removeUnreadNum()
       this.currentChat.un_read_num = 0
       this.chatContentScrollTo()
       if (!this.isSeller) {
         this.goodsListParams.page_no = 1
-        this.goodsListParams.seller_id = item['friends_id']
+        this.goodsListParams.seller_id = item['target_id']
         this.getGoodsList()
       }
     },
@@ -458,7 +488,8 @@ export default {
       if (message.type === 'ORDER') {
         this.handleClickOrder(message)
       } else if (message.type === 'GOODS') {
-        window.open(this.domains['buyer_pc'] + `/goods/${message['goods_id']}`)
+        const route = this.$router.resolve(`/goods/${message['goods_id']}`)
+        window.open(route.href, '_blank')
       }
     },
     /**
@@ -546,7 +577,6 @@ export default {
           reader.onload = (e) => {
             const h = this.$createElement
             const src = e.target.result
-            console.log(this)
             MessageBox({
               title: '是否发送图片？',
               message: h('img',
diff --git a/buyer/src/components/ChatApp/ChatMessageItem.vue b/buyer/src/components/ChatApp/ChatMessageItem.vue
index efe8c28c9721fc8fbb3737fa0a8372ee102956ae..64828d7333ebfb8a5ad777a280cb3aebbca2e094 100644
--- a/buyer/src/components/ChatApp/ChatMessageItem.vue
+++ b/buyer/src/components/ChatApp/ChatMessageItem.vue
@@ -6,7 +6,8 @@
       <span v-if="!message.is_self" style="margin-left: 10px">{{ message.msg_time | unixToDate }}</span>
     </p>
     <div class="wrapper-message">
-      <div class="head-message" :style="{backgroundImage: `url(${user.face || defaultFace})`}"/>
+      <div v-if="!Number(receiver.target_id) && !message.is_self" class="head-message" :style="{backgroundImage: `url(${platformFace})`}"></div>
+      <div v-else class="head-message" :style="{backgroundImage: `url(${user.face || defaultFace})`}"/>
       <div class="body-message">
         <div class="text-message">
           <div v-if="message.type === 'ORDER' || message.type === 'GOODS'" class="order-message">
@@ -28,9 +29,9 @@
               </div>
               <div class="info-order-box">
                 订单金额合计：
-                <span class="price">¥{{ message['order_price'] || message['goods_price'] }}</span>
+                <span class="price">{{ (message['order_price'] || message['goods_price'] || 0) | unitPrice }}</span>
               </div>
-              <div class="tag-order-message">{{ message.type === 'ORDER' ? '订单' : '商品' }}</div>
+              <div class="tag-order-message">订单</div>
             </template>
             <div v-else class="inner-order" :class="message.type" @click="clickMessage(message)">
               <div class="image-order-message">
@@ -41,10 +42,10 @@
                   <p>{{ message['goods_name'] }}</p>
                 </div>
                 <div class="label normal"></div>
-              </div>
                 <div class="info-order-box">
-                  <span class="price">¥{{ message['order_price'] || message['goods_price'] || 0 }}</span>
+                  <span class="price">{{ (message['order_price'] || message['goods_price'] || 0) | unitPrice }}</span>
                 </div>
+              </div>
               <div class="tag-order-message">{{ message.type === 'ORDER' ? '订单' : '商品' }}</div>
             </div>
           </div>
@@ -94,7 +95,8 @@ export default {
   },
   data() {
     return {
-      defaultFace: require('./icon-noface.jpg')
+      defaultFace: require('./icon-noface.jpg'),
+      platformFace: require('./platform.jpg')
     }
   },
   mounted() {
@@ -111,7 +113,7 @@ export default {
       const self = this.message['is_self']
       return {
         name: self ? sender.name : receiver.name,
-        face: (self ? sender.face : receiver.face) || this.defaultFace
+        face: (self ? sender.face : receiver.avatar) || this.defaultFace
       }
     }
   },
@@ -252,7 +254,6 @@ export default {
     .info-order-message {
       width: 260px;
       margin-left: 10px;
-
       .goods-name {
         height: 31px;
         line-height: 1.2;
@@ -261,13 +262,12 @@ export default {
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
       }
-    }
       .info-order-box {
         font-size: 13px;
         margin-top: 12px;
-        margin-bottom: 10px;
         color: #999999;
         display: inline-block;
+      }
     }
     .tag-order-message {
       position: absolute;
diff --git a/buyer/src/components/ChatApp/Websocket.js b/buyer/src/components/ChatApp/Websocket.js
index 98017470a69d95dc6d747de41edeada26b285719..049b676b647f41eb03583ed3e32384e576c20334 100644
--- a/buyer/src/components/ChatApp/Websocket.js
+++ b/buyer/src/components/ChatApp/Websocket.js
@@ -51,23 +51,15 @@ function reconnect(url) {
 
 /**
  * 心跳检测
- * @type {{serverTimeoutObj: null, timeoutObj: null, start: heartCheck.start, timeout: number}}
+ * @type {{timeoutObj: null, start: heartCheck.start, timeout: number}}
  */
 var heartCheck = {
-  timeout: 1000 * 60,
+  timeout: 1000 * 20,
   timeoutObj: null,
-  serverTimeoutObj: null,
   start: function() {
-    var self = this
     this.timeoutObj && clearTimeout(this.timeoutObj)
-    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
     this.timeoutObj = setTimeout(function() {
       ws.send('')
-      self.serverTimeoutObj = setTimeout(function() {
-        if (ws.readyState !== 1) {
-          ws.close()
-        }
-      }, self.timeout)
     }, this.timeout)
   }
 }
diff --git a/buyer/src/components/ChatApp/apiMixin.js b/buyer/src/components/ChatApp/apiMixin.js
index 81d25e043875abd0f222bf99e8c9acb03f2c3400..26dbe51ae304004475aefb57df22c06fb15eba31 100644
--- a/buyer/src/components/ChatApp/apiMixin.js
+++ b/buyer/src/components/ChatApp/apiMixin.js
@@ -35,7 +35,6 @@ export default {
   },
   mounted() {
     this.getFriends()
-    if (this.isSeller) this.getGoodsList()
     if (this.goods_id) {
       this.getGoodsDetail()
     }
@@ -45,8 +44,6 @@ export default {
       immediate: true,
       async handler(newVal) {
         if (!newVal) return
-        await this.createSession()
-        this.getFriends()
         this.orders = []
         this.orderParams.no_data = false
         this.orderParams.page_no = 1
@@ -67,16 +64,19 @@ export default {
      */
     getFriends() {
       this.request({
-        url: this.apis['im'] + `/${this.type}/im/friends-list`,
+        url: this.apis['buyer'] + `/${this.type}/im/friends-list`,
         method: 'get',
         loading: false,
         needToken: true
       }).then(res => {
-        const currentChat = res.filter(item => item['friends_id'] === this.receiver_id)[0]
+        const currentChat = res.filter(item => item['target_id'] === this.receiver_id)[0]
         if (currentChat) {
           currentChat.un_read_num = 0
         }
         this.friends = res
+        if (!this.receiver_id) {
+          this.receiver_id = res[0].target_id
+        }
       })
     },
     /**
@@ -89,7 +89,7 @@ export default {
       delete params.loading
       let url = this.isSeller
         ? `${this.apis['seller']}/seller/trade/orders?member_id=${this.receiver_id}`
-        : `${this.apis['buyer']}/buyer/trade/orders/im/${this.receiver_id}`
+        : `${this.apis['buyer']}/${this.type}/im/orders/${this.receiver_id}`
       this.request({
         url,
         method: 'get',
@@ -115,10 +115,12 @@ export default {
      */
     createSession() {
       return this.request({
-        url: this.apis['im'] + `/${this.type}/im/session/${this.receiver_id}`,
+        url: this.apis['buyer'] + `/${this.type}/im/session/${this.receiver_id}`,
         method: 'post',
         loading: false,
         needToken: true
+      }).then(res => {
+        this.getFriends()
       })
     },
 
@@ -168,7 +170,7 @@ export default {
     getGoodsDetail() {
       if (!this.goods_id) return
       this.request({
-        url: this.apis['buyer'] + `/buyer/goods/${this.goods_id}`,
+        url: this.apis['buyer'] + `/${this.type}/goods/${this.goods_id}`,
         loading: false
       }).then(res => {
         this.askGoods = res
@@ -185,7 +187,7 @@ export default {
       delete params.no_data
       delete params.loading
       this.request({
-        url: this.apis['im'] + `/${this.type}/im/history`,
+        url: this.apis['buyer'] + `/${this.type}/im/history`,
         method: 'get',
         loading: false,
         needToken: true,
@@ -212,7 +214,7 @@ export default {
         receiver_id: this.receiver_id
       }
       const res = await this.request({
-        url: this.apis['im'] + `/${this.type}/im/message/${type}`,
+        url: this.apis['buyer'] + `/${this.type}/im/message/${type}`,
         method: 'post',
         loading: false,
         needToken: true,
@@ -229,7 +231,7 @@ export default {
      */
     removeUnreadNum() {
       return this.request({
-        url: this.apis['im'] + `/${this.type}/im/unread-num`,
+        url: this.apis['buyer'] + `/${this.type}/im/unread-num`,
         method: 'delete',
         loading: false,
         needToken: true,
@@ -245,7 +247,7 @@ export default {
     getNewMessage() {
       return new Promise(resolve => {
         this.request({
-          url: this.apis['im'] + `/${this.type}/im/history`,
+          url: this.apis['buyer'] + `/${this.type}/im/history`,
           method: 'get',
           loading: false,
           needToken: true,
@@ -278,7 +280,7 @@ export default {
         const formData = new FormData()
         formData.append('file', file)
         this.request({
-          url: this.apis['buyer'] + `/buyer/uploaders`,
+          url: this.apis['buyer'] + `/${this.type}/uploaders`,
           method: 'post',
           headers: {
             'Content-Type': 'multipart/form-data',
@@ -291,27 +293,15 @@ export default {
       })
     },
 
-    /**
-     * 获取websocket连接Token
-     * @returns {*}
-     */
-    async getWebsocketToken() {
-      return this.request({
-        url: this.apis['im'] + `/${this.type}/im/token`,
-        method: 'get',
-        loading: false,
-        needToken: true
-      })
-    },
     /**
      * 删除会话[移除好友]
      * @param id
      */
     deleteFriend(id) {
       return new Promise((resolve, reject) => {
-        let url = this.apis['im']
-        url += this.isSeller ? '/seller/im/delete' : '/buyer/im/delete'
-        const params = this.isSeller ? { member_id: id } : { shop_id: id }
+        let url = this.apis['buyer']
+        url += '/buyer/im/delete'
+        const params = { shop_id: id }
         this.request({
           url,
           method: 'get',
diff --git a/buyer/src/components/ChatApp/icon-close.png b/buyer/src/components/ChatApp/icon-close.png
index f899b40822b93f5d5415b673961e06fb6519aee8..b11df4169d4e016c0fbc995019a81e63707b9fa0 100644
Binary files a/buyer/src/components/ChatApp/icon-close.png and b/buyer/src/components/ChatApp/icon-close.png differ
diff --git a/buyer/src/components/ChatApp/icon-noface.jpg b/buyer/src/components/ChatApp/icon-noface.jpg
index c33efc11d7c97481f1488f28afbffc3591536840..21c6aa59437c4df4017cf10501e1a0d035c43755 100644
Binary files a/buyer/src/components/ChatApp/icon-noface.jpg and b/buyer/src/components/ChatApp/icon-noface.jpg differ
diff --git a/buyer/src/components/ChatApp/images/e01.gif b/buyer/src/components/ChatApp/images/e01.gif
index de15cf1d1ed500a08ce0828cecf5773d1738560b..c5baabcd73fabe51b021f8311455a2ec2c7a61bf 100644
Binary files a/buyer/src/components/ChatApp/images/e01.gif and b/buyer/src/components/ChatApp/images/e01.gif differ
diff --git a/buyer/src/components/ChatApp/images/e02.gif b/buyer/src/components/ChatApp/images/e02.gif
index 0ade606de7ef08bc06db3643a8d555a8610b43ad..616dcbcf6456f7dbaa045c93ca53a51b7176fe22 100644
Binary files a/buyer/src/components/ChatApp/images/e02.gif and b/buyer/src/components/ChatApp/images/e02.gif differ
diff --git a/buyer/src/components/ChatApp/images/e03.gif b/buyer/src/components/ChatApp/images/e03.gif
index eed8a8446b87dbacf915d568034afcdcbab50d3f..244787dd9081ed0710515f6280d845992913db07 100644
Binary files a/buyer/src/components/ChatApp/images/e03.gif and b/buyer/src/components/ChatApp/images/e03.gif differ
diff --git a/buyer/src/components/ChatApp/images/e04.gif b/buyer/src/components/ChatApp/images/e04.gif
index 9b0a52ee030dfec6c87041fef239a02933437e8a..3798fe8b8faf2fd1e0387f32efa8bee1fffd967f 100644
Binary files a/buyer/src/components/ChatApp/images/e04.gif and b/buyer/src/components/ChatApp/images/e04.gif differ
diff --git a/buyer/src/components/ChatApp/images/e05.gif b/buyer/src/components/ChatApp/images/e05.gif
index 574084a1b429552d13bd60a62e095ce30330aaf9..4e3ddae5cb233c98c88547fbb87b29736e27fa71 100644
Binary files a/buyer/src/components/ChatApp/images/e05.gif and b/buyer/src/components/ChatApp/images/e05.gif differ
diff --git a/buyer/src/components/ChatApp/images/e06.gif b/buyer/src/components/ChatApp/images/e06.gif
index 9fc76b9279c6908fb7185e044f744f88d1c8a8cb..9902cab36ce265d729ac9c9b8b9da83c18641972 100644
Binary files a/buyer/src/components/ChatApp/images/e06.gif and b/buyer/src/components/ChatApp/images/e06.gif differ
diff --git a/buyer/src/components/ChatApp/images/e07.gif b/buyer/src/components/ChatApp/images/e07.gif
index f0f54f823669a339bce6e8714926675d4be421e7..7d4d2a76c2c32e05bbc2ccdeac185bae3023bda2 100644
Binary files a/buyer/src/components/ChatApp/images/e07.gif and b/buyer/src/components/ChatApp/images/e07.gif differ
diff --git a/buyer/src/components/ChatApp/images/e08.gif b/buyer/src/components/ChatApp/images/e08.gif
index 713a710d92cc367489657c0396b7008f792f919e..26d421d1dd090b00b18d7e1300aad07d1d45936a 100644
Binary files a/buyer/src/components/ChatApp/images/e08.gif and b/buyer/src/components/ChatApp/images/e08.gif differ
diff --git a/buyer/src/components/ChatApp/images/e09.gif b/buyer/src/components/ChatApp/images/e09.gif
index 078a08f7e43df2a0ac0fb54ae30b51d63afcbf1e..8a6e2122394c599a9636c7181880f566552dae2b 100644
Binary files a/buyer/src/components/ChatApp/images/e09.gif and b/buyer/src/components/ChatApp/images/e09.gif differ
diff --git a/buyer/src/components/ChatApp/images/e10.gif b/buyer/src/components/ChatApp/images/e10.gif
index 07cec7a035d322b128f8d897a282bfeb53d2720c..1383a2ebfe76ca37a14dde49d37c79f385c1b7f5 100644
Binary files a/buyer/src/components/ChatApp/images/e10.gif and b/buyer/src/components/ChatApp/images/e10.gif differ
diff --git a/buyer/src/components/ChatApp/images/e11.gif b/buyer/src/components/ChatApp/images/e11.gif
index c45ec4bfd02dff3bd9c85d7c3af6e67c5c482418..614ebca78f432620abc3c08da9ca0c1e73187a3e 100644
Binary files a/buyer/src/components/ChatApp/images/e11.gif and b/buyer/src/components/ChatApp/images/e11.gif differ
diff --git a/buyer/src/components/ChatApp/images/e12.gif b/buyer/src/components/ChatApp/images/e12.gif
index 8f7bad33dae6695672d09531778911a0d2a4878b..7ce9cf6a9f4e73adccb29a2d068667264fa4decd 100644
Binary files a/buyer/src/components/ChatApp/images/e12.gif and b/buyer/src/components/ChatApp/images/e12.gif differ
diff --git a/buyer/src/components/ChatApp/images/e13.gif b/buyer/src/components/ChatApp/images/e13.gif
index d3de6bb9aaada73efd03df0d0bd3962f0d03b617..2105024ab8f5559c8b8c7e1456c5dd8ca4db15d4 100644
Binary files a/buyer/src/components/ChatApp/images/e13.gif and b/buyer/src/components/ChatApp/images/e13.gif differ
diff --git a/buyer/src/components/ChatApp/images/e14.gif b/buyer/src/components/ChatApp/images/e14.gif
index 92373b8bf0d93f9b646e3d788136297ce59e9614..2e62299f34e7be7fd1965369e584ce06c1cb360e 100644
Binary files a/buyer/src/components/ChatApp/images/e14.gif and b/buyer/src/components/ChatApp/images/e14.gif differ
diff --git a/buyer/src/components/ChatApp/images/e15.gif b/buyer/src/components/ChatApp/images/e15.gif
index 2e2d2df85bef20d689543eaddbc66ed587cc0e47..bf52d0b2ce1dd122b346956edc9c586229ceebc1 100644
Binary files a/buyer/src/components/ChatApp/images/e15.gif and b/buyer/src/components/ChatApp/images/e15.gif differ
diff --git a/buyer/src/components/ChatApp/images/e16.gif b/buyer/src/components/ChatApp/images/e16.gif
index d0005aed0e548bda687db0be375d103f08fa29b0..c2b9c70d4ea000a868c815ce7925baca532d632f 100644
Binary files a/buyer/src/components/ChatApp/images/e16.gif and b/buyer/src/components/ChatApp/images/e16.gif differ
diff --git a/buyer/src/components/ChatApp/images/e17.gif b/buyer/src/components/ChatApp/images/e17.gif
index 2570efa0a3722a5cd285c417db7b3c24546e4152..32cb793e50ec3919648a94546a6e51b7ed5526aa 100644
Binary files a/buyer/src/components/ChatApp/images/e17.gif and b/buyer/src/components/ChatApp/images/e17.gif differ
diff --git a/buyer/src/components/ChatApp/images/e18.gif b/buyer/src/components/ChatApp/images/e18.gif
index 8b93912987e56b81f3de94ed6e5e4863dc475d6e..b2cc2c5b3e4f765eb16090afa03a36b6e5995d45 100644
Binary files a/buyer/src/components/ChatApp/images/e18.gif and b/buyer/src/components/ChatApp/images/e18.gif differ
diff --git a/buyer/src/components/ChatApp/images/e19.gif b/buyer/src/components/ChatApp/images/e19.gif
index c9435d9681f25c92ee1e557a96f8a89d7ab4aa86..7bcb322f9e91dafc7f068272c469c489e1aef403 100644
Binary files a/buyer/src/components/ChatApp/images/e19.gif and b/buyer/src/components/ChatApp/images/e19.gif differ
diff --git a/buyer/src/components/ChatApp/images/e20.gif b/buyer/src/components/ChatApp/images/e20.gif
index 43c28a473cb171c5b3ee327415122093d026d355..0bbca35984e0a1d141b5a0e42095c9429664088d 100644
Binary files a/buyer/src/components/ChatApp/images/e20.gif and b/buyer/src/components/ChatApp/images/e20.gif differ
diff --git a/buyer/src/components/ChatApp/images/e21.gif b/buyer/src/components/ChatApp/images/e21.gif
index 45c1eb1afcb3c9b5c543c8a0e2dbf452f88d55ef..7267c775d14ed163681baeea12855bf0e252789f 100644
Binary files a/buyer/src/components/ChatApp/images/e21.gif and b/buyer/src/components/ChatApp/images/e21.gif differ
diff --git a/buyer/src/components/ChatApp/images/e22.gif b/buyer/src/components/ChatApp/images/e22.gif
index 5be0c5ef6dd4d199134fa9f370e6d30b06d2f370..7a2e7f133c458eb2ed4fe3b664027631eeb19764 100644
Binary files a/buyer/src/components/ChatApp/images/e22.gif and b/buyer/src/components/ChatApp/images/e22.gif differ
diff --git a/buyer/src/components/ChatApp/images/e23.gif b/buyer/src/components/ChatApp/images/e23.gif
index 740a522f0b6e0d7f9b11eadce8d069228e51bdfb..b3715550fdb42e39e5062ce62fa720b13c30feba 100644
Binary files a/buyer/src/components/ChatApp/images/e23.gif and b/buyer/src/components/ChatApp/images/e23.gif differ
diff --git a/buyer/src/components/ChatApp/images/e24.gif b/buyer/src/components/ChatApp/images/e24.gif
index 1d9e998eb2fb336c80342eb58e3b5aedc7d88f2c..0d1e4541a4c6a4a8901d89094a764f6458f544ce 100644
Binary files a/buyer/src/components/ChatApp/images/e24.gif and b/buyer/src/components/ChatApp/images/e24.gif differ
diff --git a/buyer/src/components/ChatApp/images/e25.gif b/buyer/src/components/ChatApp/images/e25.gif
index 5f4b23cf4627c2b8bf6bf8e1b9ed1603c5ef1374..3fe507c0bf0fa827d3afc575f78387bc85ec6434 100644
Binary files a/buyer/src/components/ChatApp/images/e25.gif and b/buyer/src/components/ChatApp/images/e25.gif differ
diff --git a/buyer/src/components/ChatApp/images/e26.gif b/buyer/src/components/ChatApp/images/e26.gif
index d72678a6809372da1395cf8f41769ef8b548736d..87e635bc27a8e9aacdd6c9984ee03b8db13d500d 100644
Binary files a/buyer/src/components/ChatApp/images/e26.gif and b/buyer/src/components/ChatApp/images/e26.gif differ
diff --git a/buyer/src/components/ChatApp/images/e27.gif b/buyer/src/components/ChatApp/images/e27.gif
index 094ab9582742d916aeb735c1fac98a2d27b3a7e8..e1e4dfd1b32eee2645b942a1d48bd82e0db5a58b 100644
Binary files a/buyer/src/components/ChatApp/images/e27.gif and b/buyer/src/components/ChatApp/images/e27.gif differ
diff --git a/buyer/src/components/ChatApp/images/e28.gif b/buyer/src/components/ChatApp/images/e28.gif
index 0669b08668886d7eee6f1c41595a893bcef14c5d..8d3760fd407b78c84edbd8306fce96384d9b4ef0 100644
Binary files a/buyer/src/components/ChatApp/images/e28.gif and b/buyer/src/components/ChatApp/images/e28.gif differ
diff --git a/buyer/src/components/ChatApp/images/e29.gif b/buyer/src/components/ChatApp/images/e29.gif
index 04f57d331918f60085792d57fb7d70e1d126acda..86b9c848186bbf140be4bd6264a140c3553a17e6 100644
Binary files a/buyer/src/components/ChatApp/images/e29.gif and b/buyer/src/components/ChatApp/images/e29.gif differ
diff --git a/buyer/src/components/ChatApp/images/e30.gif b/buyer/src/components/ChatApp/images/e30.gif
index ed5072d7d6bc47c0e823e124d9d6407b00ab296a..16850ce1c93483915c5d6f55837b945295936515 100644
Binary files a/buyer/src/components/ChatApp/images/e30.gif and b/buyer/src/components/ChatApp/images/e30.gif differ
diff --git a/buyer/src/components/ChatApp/images/e31.gif b/buyer/src/components/ChatApp/images/e31.gif
index d937a81468b5225ec933c61a80f4511b6ec1c0e3..86863cf1330853850b01782392bd5f87d4c30be1 100644
Binary files a/buyer/src/components/ChatApp/images/e31.gif and b/buyer/src/components/ChatApp/images/e31.gif differ
diff --git a/buyer/src/components/ChatApp/images/e32.gif b/buyer/src/components/ChatApp/images/e32.gif
index e0aa5b027073189a81647456eee332c8acfb041e..f2f187508a20c9f30ceabcba2f53d2470e084b42 100644
Binary files a/buyer/src/components/ChatApp/images/e32.gif and b/buyer/src/components/ChatApp/images/e32.gif differ
diff --git a/buyer/src/components/ChatApp/images/e33.gif b/buyer/src/components/ChatApp/images/e33.gif
index 73a032f220a1860dcb7ccbd5649454d38579127b..ee6f51387a0d76eea676d5795c2234bb7cf8e02b 100644
Binary files a/buyer/src/components/ChatApp/images/e33.gif and b/buyer/src/components/ChatApp/images/e33.gif differ
diff --git a/buyer/src/components/ChatApp/images/e34.gif b/buyer/src/components/ChatApp/images/e34.gif
index abd0bb038c45898f1bedd056a31df38935b4276e..8a7cf0a092b17b3d7967fb5cea4fec40fa791dad 100644
Binary files a/buyer/src/components/ChatApp/images/e34.gif and b/buyer/src/components/ChatApp/images/e34.gif differ
diff --git a/buyer/src/components/ChatApp/images/e35.gif b/buyer/src/components/ChatApp/images/e35.gif
index b9b1e5f9450be2e314c93f914fd049ba5a93d5c3..0235d389da3c77af489714e937c60f856057d1d7 100644
Binary files a/buyer/src/components/ChatApp/images/e35.gif and b/buyer/src/components/ChatApp/images/e35.gif differ
diff --git a/buyer/src/components/ChatApp/images/e36.gif b/buyer/src/components/ChatApp/images/e36.gif
index 3ea61d0b24c1f80466c50a2977dc5a7e0bf5e36a..2bbb9a095a8160519b514cda20354e95b04c8640 100644
Binary files a/buyer/src/components/ChatApp/images/e36.gif and b/buyer/src/components/ChatApp/images/e36.gif differ
diff --git a/buyer/src/components/ChatApp/images/e37.gif b/buyer/src/components/ChatApp/images/e37.gif
index 672f589eea897b89f713b634e7869bc6fcf4a509..0cb82f5e63e5d7ec1670446cfcba88ee7499347c 100644
Binary files a/buyer/src/components/ChatApp/images/e37.gif and b/buyer/src/components/ChatApp/images/e37.gif differ
diff --git a/buyer/src/components/ChatApp/images/e38.gif b/buyer/src/components/ChatApp/images/e38.gif
index 94a00831f7e3d0898a2333e6fa20aa859f073d8c..8e03ca87d3a5ba922b72438fa8f5c25d33b7f0da 100644
Binary files a/buyer/src/components/ChatApp/images/e38.gif and b/buyer/src/components/ChatApp/images/e38.gif differ
diff --git a/buyer/src/components/ChatApp/images/e39.gif b/buyer/src/components/ChatApp/images/e39.gif
index bac4c142de599386301771527e2ea06ce727949b..4e26b94dd52477583dc1cb77c867b25c024d620c 100644
Binary files a/buyer/src/components/ChatApp/images/e39.gif and b/buyer/src/components/ChatApp/images/e39.gif differ
diff --git a/buyer/src/components/ChatApp/images/e40.gif b/buyer/src/components/ChatApp/images/e40.gif
index 99563ca069dd495e7593c21c31e47c6278105754..3643e9ef34baeb0ba275b748a7f8262f89726c96 100644
Binary files a/buyer/src/components/ChatApp/images/e40.gif and b/buyer/src/components/ChatApp/images/e40.gif differ
diff --git a/buyer/src/components/ChatApp/images/e41.gif b/buyer/src/components/ChatApp/images/e41.gif
index 791971226a5ed24a9ef2a168182e05ac0e14bec2..b9f86388bf9d0f31b21add074247fe48131bec7c 100644
Binary files a/buyer/src/components/ChatApp/images/e41.gif and b/buyer/src/components/ChatApp/images/e41.gif differ
diff --git a/buyer/src/components/ChatApp/images/e42.gif b/buyer/src/components/ChatApp/images/e42.gif
index 987aaae4127f9010c45312ed95b7708954b90cf1..c6931188a62ec0a60a53f4285ecb5b6e04c3b7d5 100644
Binary files a/buyer/src/components/ChatApp/images/e42.gif and b/buyer/src/components/ChatApp/images/e42.gif differ
diff --git a/buyer/src/components/ChatApp/images/e43.gif b/buyer/src/components/ChatApp/images/e43.gif
index 029ea71727f38aa3ad592b851db5fc73ce734784..58cfc659a942fe81d2fa046998dd137bc53ce06e 100644
Binary files a/buyer/src/components/ChatApp/images/e43.gif and b/buyer/src/components/ChatApp/images/e43.gif differ
diff --git a/buyer/src/components/ChatApp/images/e44.gif b/buyer/src/components/ChatApp/images/e44.gif
index 1df389be68ac11a8054f83269997a594d31732fb..7dd32fb2f20cbe7791796f3c90a51528d506f694 100644
Binary files a/buyer/src/components/ChatApp/images/e44.gif and b/buyer/src/components/ChatApp/images/e44.gif differ
diff --git a/buyer/src/components/ChatApp/images/e45.gif b/buyer/src/components/ChatApp/images/e45.gif
index 12ca2d9049e4b8d968d466a588200390c7345078..c92402f89441fff83674c0b59df9053b0c1116ec 100644
Binary files a/buyer/src/components/ChatApp/images/e45.gif and b/buyer/src/components/ChatApp/images/e45.gif differ
diff --git a/buyer/src/components/ChatApp/images/e46.gif b/buyer/src/components/ChatApp/images/e46.gif
index c3910b1aeea72b18e3a92afe844da8b97a30ee68..67c63e6c1a33734db81b60a28a3f7c5566df21be 100644
Binary files a/buyer/src/components/ChatApp/images/e46.gif and b/buyer/src/components/ChatApp/images/e46.gif differ
diff --git a/buyer/src/components/ChatApp/images/e47.gif b/buyer/src/components/ChatApp/images/e47.gif
index cdd59b2305553301ff183160870c4dd47792ee39..ba2b736d74ed31165f32168e7978f5386588d5a3 100644
Binary files a/buyer/src/components/ChatApp/images/e47.gif and b/buyer/src/components/ChatApp/images/e47.gif differ
diff --git a/buyer/src/components/ChatApp/images/e48.gif b/buyer/src/components/ChatApp/images/e48.gif
index 2ea141346b8bf2d3640aa0e0393d04436042cc83..be58ea9c6f1a4eaf4ab0fb13bf407019e38bebf4 100644
Binary files a/buyer/src/components/ChatApp/images/e48.gif and b/buyer/src/components/ChatApp/images/e48.gif differ
diff --git a/buyer/src/components/ChatApp/images/e49.gif b/buyer/src/components/ChatApp/images/e49.gif
index ffa0899055a16db9838822e42b9f8b921b1ee221..73aee8bfb72d6636bad13b85491e881d4658b994 100644
Binary files a/buyer/src/components/ChatApp/images/e49.gif and b/buyer/src/components/ChatApp/images/e49.gif differ
diff --git a/buyer/src/components/ChatApp/images/e50.gif b/buyer/src/components/ChatApp/images/e50.gif
index 5b83262dfcc7c796b79a8594656419e5f768563c..ae5d59204d7f73bb391a8d92fb36256e0e56ebc2 100644
Binary files a/buyer/src/components/ChatApp/images/e50.gif and b/buyer/src/components/ChatApp/images/e50.gif differ
diff --git a/buyer/src/components/ChatApp/images/e51.gif b/buyer/src/components/ChatApp/images/e51.gif
index 207e408adb6790e09f2f5b9e6ff424ae1aeaf322..1d7f838e30799bf966b1fb1e0f461ed78ab36f2d 100644
Binary files a/buyer/src/components/ChatApp/images/e51.gif and b/buyer/src/components/ChatApp/images/e51.gif differ
diff --git a/buyer/src/components/ChatApp/images/e52.gif b/buyer/src/components/ChatApp/images/e52.gif
index 4e639e5b6201b95ceecedc23d893d03e04f53fb9..d5cbf4e309199632bd20e24f7b4c6a2ca040184e 100644
Binary files a/buyer/src/components/ChatApp/images/e52.gif and b/buyer/src/components/ChatApp/images/e52.gif differ
diff --git a/buyer/src/components/ChatApp/images/e53.gif b/buyer/src/components/ChatApp/images/e53.gif
index 881394ed25f6729abea7d01588d87e700bedf276..8c49e0e34684aa988eaa5dc0ecbc1040a4c99315 100644
Binary files a/buyer/src/components/ChatApp/images/e53.gif and b/buyer/src/components/ChatApp/images/e53.gif differ
diff --git a/buyer/src/components/ChatApp/images/e54.gif b/buyer/src/components/ChatApp/images/e54.gif
index 3c23ca97b9ef7881c0ce81bc7278b2580d24c583..b65ad4d08bc7ecae5ddbf95ef643fd2cfc6bd693 100644
Binary files a/buyer/src/components/ChatApp/images/e54.gif and b/buyer/src/components/ChatApp/images/e54.gif differ
diff --git a/buyer/src/components/ChatApp/images/e55.gif b/buyer/src/components/ChatApp/images/e55.gif
index c59a2c2b888fcf3ba1900592e36a4dc9ab887345..d90fbb7077001bb7f82e707d9c07873a90e1b9e5 100644
Binary files a/buyer/src/components/ChatApp/images/e55.gif and b/buyer/src/components/ChatApp/images/e55.gif differ
diff --git a/buyer/src/components/ChatApp/images/e56.gif b/buyer/src/components/ChatApp/images/e56.gif
index 053c57a26de9ecf96c79cc797b42b8bf53000d86..8e3fa4d81b066ca36a92e8ac60da4463d1a023f4 100644
Binary files a/buyer/src/components/ChatApp/images/e56.gif and b/buyer/src/components/ChatApp/images/e56.gif differ
diff --git a/buyer/src/components/ChatApp/images/e57.gif b/buyer/src/components/ChatApp/images/e57.gif
index 593fbc563d3734e2f9b65bcb1ef273d07c7f5cbb..32beb40d5ca900cc766310dab400a387720dfb17 100644
Binary files a/buyer/src/components/ChatApp/images/e57.gif and b/buyer/src/components/ChatApp/images/e57.gif differ
diff --git a/buyer/src/components/ChatApp/images/e58.gif b/buyer/src/components/ChatApp/images/e58.gif
index fba2fd950060226687264902573f8962cafc6b18..f34ab3414d5fa4f0fc2a006b56a057c2fd18aacc 100644
Binary files a/buyer/src/components/ChatApp/images/e58.gif and b/buyer/src/components/ChatApp/images/e58.gif differ
diff --git a/buyer/src/components/ChatApp/images/e59.gif b/buyer/src/components/ChatApp/images/e59.gif
index add81a1ee39ae30fbeca632abef41bea6695578a..6c23b256e9d6b94e13ac9c88f234ab2da4d167d3 100644
Binary files a/buyer/src/components/ChatApp/images/e59.gif and b/buyer/src/components/ChatApp/images/e59.gif differ
diff --git a/buyer/src/components/ChatApp/images/e60.gif b/buyer/src/components/ChatApp/images/e60.gif
index f2f49d2fd884ea076405e1d4186d7d9409a67e59..dc7931c9101b8f674aef3fb3b99052fbfe650112 100644
Binary files a/buyer/src/components/ChatApp/images/e60.gif and b/buyer/src/components/ChatApp/images/e60.gif differ
diff --git a/buyer/src/components/ChatApp/images/e61.gif b/buyer/src/components/ChatApp/images/e61.gif
index f50a6f4b09359b2a6a8178b76246c01173af3b79..e9e6d3567a21c6f507969305accaf4d4e90993a3 100644
Binary files a/buyer/src/components/ChatApp/images/e61.gif and b/buyer/src/components/ChatApp/images/e61.gif differ
diff --git a/buyer/src/components/ChatApp/images/e62.gif b/buyer/src/components/ChatApp/images/e62.gif
index c20d2eb23346e934c7bde6158e1b2e083c2b484a..a360e0ba2f78f832b6076362ca84e00b0d6d5f73 100644
Binary files a/buyer/src/components/ChatApp/images/e62.gif and b/buyer/src/components/ChatApp/images/e62.gif differ
diff --git a/buyer/src/components/ChatApp/images/e63.gif b/buyer/src/components/ChatApp/images/e63.gif
index 0fbe1210de9c7fd9f17aab11d765742533e6c885..768df9188039f9d408de13a26cf9c7ceec0607a1 100644
Binary files a/buyer/src/components/ChatApp/images/e63.gif and b/buyer/src/components/ChatApp/images/e63.gif differ
diff --git a/buyer/src/components/ChatApp/images/e64.gif b/buyer/src/components/ChatApp/images/e64.gif
index 8df64ba34207526ed52bc43053c9f02047b47790..aa1f2adad451559a920e3715a74074c87f1f4419 100644
Binary files a/buyer/src/components/ChatApp/images/e64.gif and b/buyer/src/components/ChatApp/images/e64.gif differ
diff --git a/buyer/src/components/ChatApp/images/e65.gif b/buyer/src/components/ChatApp/images/e65.gif
index 6629d5b996cb797b8324b0712ad4d90f2ef5ddcd..f0bcda2f4e41bfd5fb70fdd13883ad8c43defdc9 100644
Binary files a/buyer/src/components/ChatApp/images/e65.gif and b/buyer/src/components/ChatApp/images/e65.gif differ
diff --git a/buyer/src/components/ChatApp/images/e66.gif b/buyer/src/components/ChatApp/images/e66.gif
index 86a6573d99ab5d16b9b278fbc3e0a0a44476d9cc..c824ee08d875e9185346aa587144e6f3a4f4b737 100644
Binary files a/buyer/src/components/ChatApp/images/e66.gif and b/buyer/src/components/ChatApp/images/e66.gif differ
diff --git a/buyer/src/components/ChatApp/images/e67.gif b/buyer/src/components/ChatApp/images/e67.gif
index 36b4e6d56c51648c9309e90c3ef65879c9b2e655..65d9ad03ee6c12e170ec61f747911b913e3f966f 100644
Binary files a/buyer/src/components/ChatApp/images/e67.gif and b/buyer/src/components/ChatApp/images/e67.gif differ
diff --git a/buyer/src/components/ChatApp/images/e68.gif b/buyer/src/components/ChatApp/images/e68.gif
index 7013b05b80cfda1785689fb6ecf4179304f27f09..0f599f665175d15471cb94987c99a31e0824ed8f 100644
Binary files a/buyer/src/components/ChatApp/images/e68.gif and b/buyer/src/components/ChatApp/images/e68.gif differ
diff --git a/buyer/src/components/ChatApp/images/e69.gif b/buyer/src/components/ChatApp/images/e69.gif
index 019b6d4dd6b91881a7bd490858d6d615b4a6c4d8..46c30b3f8ee749b570d8cf99e155dae332c21b47 100644
Binary files a/buyer/src/components/ChatApp/images/e69.gif and b/buyer/src/components/ChatApp/images/e69.gif differ
diff --git a/buyer/src/components/ChatApp/images/e70.gif b/buyer/src/components/ChatApp/images/e70.gif
index 8a7af82e762030cfb4cd3c95a38953b67bb072c1..0bcd24aaa435cd4b5c76764df7e1abfe2d335d7b 100644
Binary files a/buyer/src/components/ChatApp/images/e70.gif and b/buyer/src/components/ChatApp/images/e70.gif differ
diff --git a/buyer/src/components/ChatApp/images/e71.gif b/buyer/src/components/ChatApp/images/e71.gif
index 21858c41e4aadf8676a9b7cde54a264d65e4b42f..922e968445f92788a541e9fc374ffd4fe2372bb9 100644
Binary files a/buyer/src/components/ChatApp/images/e71.gif and b/buyer/src/components/ChatApp/images/e71.gif differ
diff --git a/buyer/src/components/ChatApp/images/e72.gif b/buyer/src/components/ChatApp/images/e72.gif
index 2d6401f95f22ad9e1ed4dfa9317b159470929ab4..318e7e30ad3d70a9ff450330e597ba2d8d6b881c 100644
Binary files a/buyer/src/components/ChatApp/images/e72.gif and b/buyer/src/components/ChatApp/images/e72.gif differ
diff --git a/buyer/src/components/ChatApp/images/emojis.gif b/buyer/src/components/ChatApp/images/emojis.gif
index c5c3d876957b3e1cbf788e29139051358bf47b61..0a964cb842e93bb242ea1e7fccc7f5793f852d4d 100644
Binary files a/buyer/src/components/ChatApp/images/emojis.gif and b/buyer/src/components/ChatApp/images/emojis.gif differ
diff --git a/buyer/src/components/ChatApp/platform.jpg b/buyer/src/components/ChatApp/platform.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f7e5e0bb460c0a389cf3ece7db6b20fcc06cf82e
Binary files /dev/null and b/buyer/src/components/ChatApp/platform.jpg differ
diff --git a/buyer/src/components/ChatApp/styles.scss b/buyer/src/components/ChatApp/styles.scss
index 532d8e3f38ed1e9b1996f0bccfde8e3c36700a03..4be694ac343822cb9d383c0695464cf45f185fae 100644
--- a/buyer/src/components/ChatApp/styles.scss
+++ b/buyer/src/components/ChatApp/styles.scss
@@ -662,7 +662,7 @@
     display: inline-block;
     padding: 4px 11px;
     line-height: 15px;
-    max-width: 60px;
+    max-width: 140px;
     text-align: center;
     color: #f23030;
     background: #ffeded;
diff --git a/buyer/src/views/checkout/cashier.vue b/buyer/src/views/checkout/cashier.vue
index 31bb0b0bd90bbdf703f3a9aebe7414ed759e6b43..1a570d07aea48133d511646551473a7056c28724 100644
--- a/buyer/src/views/checkout/cashier.vue
+++ b/buyer/src/views/checkout/cashier.vue
@@ -3,23 +3,34 @@
     <en-header-other title="收银台"/>
     <div class="cashier-box" v-if="!price">
       <div class="cashier-change" v-if="isExistence">
-        <h2 class="time-tip" v-if="order.pay_type_text === 'ONLINE' && order.need_pay_price !== 0 && (order.pay_status !== 'PAID_OFF' && order.pay_status !== 'PAY_YES')">
-          订单提交成功，请您在<span>{{leftTime}}</span>内完成支付，否则订单会被自动取消。
-        </h2>
-        <h2 class="time-tip" v-else-if="order.pay_type_text !== 'COD' || order.pay_status === 'PAID_OFF' || order.pay_status === 'PAY_YES'">订单金额为 <span>￥0.00</span>，您无需支付。</h2>
-        <h2 v-if="this.trade_sn">
-          交易号：<b>{{ trade_sn }}</b>
-          <router-link class="see-order-btn" to="/member/my-order">查看订单</router-link>
-        </h2>
-        <h2 v-else>订单编号：<b>{{ order_sn }}</b>
-          <router-link class="see-order-btn" :to="'/member/my-order/detail?order_sn=' + order_sn">查看订单</router-link>
-        </h2>
-        <h2>{{ !order ? '' : order.pay_type_text === 'ONLINE' ? '在线支付：' : '货到付款：' }}
-          <span v-if="order">￥{{ order.need_pay_price | unitPrice }}</span>
-          <span v-else>加载中...</span>
-          <i>元</i>
-          <span class="pay-tip">订单状态刷新可能会延迟，如果您已付款成功，请勿重复支付！</span>
-        </h2>
+        <div class="time-box">
+          <div style="width: 80%;">
+            <h2 class="time-tip" v-if="order.pay_type_text === 'ONLINE' && order.need_pay_price !== 0 && (order.pay_status !== 'PAID_OFF' && order.pay_status !== 'PAY_YES')">
+              订单提交成功，请您在<span>{{leftTime}}</span>内完成支付，否则订单会被自动取消。
+            </h2>
+            <h2 class="time-tip" v-else-if="order.pay_type_text !== 'COD' || order.pay_status === 'PAID_OFF' || order.pay_status === 'PAY_YES'">订单金额为 <span>￥0.00</span>，您无需支付。</h2>
+            <h2 v-if="this.trade_sn">
+              交易号：<b>{{ trade_sn }}</b>
+              <router-link class="see-order-btn" to="/member/my-order">查看订单</router-link>
+            </h2>
+            <h2 v-else>订单编号：<b>{{ order_sn }}</b>
+              <router-link class="see-order-btn" :to="'/member/my-order/detail?order_sn=' + order_sn">查看订单</router-link>
+            </h2>
+            <h2>{{ !order ? '' : order.pay_type_text === 'ONLINE' ? '在线支付：' : '货到付款：' }}
+              <span v-if="order">￥{{ order.need_pay_price | unitPrice }}</span>
+              <span v-else>加载中...</span>
+              <i>元</i>
+              <span class="pay-tip">订单状态刷新可能会延迟，如果您已付款成功，请勿重复支付！</span>
+            </h2>
+          </div>
+          <div v-if="is_IM" style="width: 100px;" >
+            <a href='javascript:;' @click="MixinOpenIm({shop_id: '0'})" class="service-btn" >
+              <i class="iconfont ea-icon-service"></i>
+              联系客服
+            </a>
+          </div>
+        </div>
+
         <div class="cashier-order-detail">
           <div class="cashier-order-inside">
             <h3><i></i>送货至：
@@ -194,7 +205,9 @@ export default {
       password: '',
       // 订单取消时间
       leftTime: '',
-      Time: ''
+      Time: '',
+      // 是否开启了IM
+      is_IM: process.env.IM
     }
   },
   async mounted() {
@@ -532,6 +545,15 @@ export default {
   position: relative;
   box-shadow: 0 2px 5px #ccc;
   background: #fff;
+  .time-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    .service-btn {
+      font-size: 12px;
+      color: $color-main;
+    }
+  }
   h2 {
     width: 950px;
     height: 30px;
diff --git a/manager-admin/config/dev.env.js b/manager-admin/config/dev.env.js
index 491160c8b80b10658663c4142fc05fd191c40a7d..0782078eacc52b73a1087992238a9db97bd090d3 100644
--- a/manager-admin/config/dev.env.js
+++ b/manager-admin/config/dev.env.js
@@ -1,4 +1,4 @@
-const { distribution, liveVideo, o2o, supplier } = require('./index')
+const { distribution, liveVideo, o2o, supplier, im } = require('./index')
 
 module.exports = {
 	NODE_ENV: '"development"',
@@ -6,5 +6,6 @@ module.exports = {
   DISTRIBUTION: distribution,
   LIVEVIDEO: liveVideo,
   O2O: o2o,
-  SUPPLIER: supplier
+  SUPPLIER: supplier,
+  IM: im
 }
diff --git a/manager-admin/config/index.js b/manager-admin/config/index.js
index da4119e1154780279fdc03b445e2ff343f9d0f0c..45ad6aeef577acafcb6c21f3144379c04f8f9ab4 100644
--- a/manager-admin/config/index.js
+++ b/manager-admin/config/index.js
@@ -26,6 +26,11 @@ module.exports = {
    * 如果您需要开启供应商相关功能，请设置为true
    */
   supplier: false,
+  /*
+    * IM功能开关
+    * 如果您需要开启IM相关功能，请设置为true
+    */
+  im: false,
   dev: {
 
     // Paths
@@ -48,7 +53,6 @@ module.exports = {
     // If true, eslint errors and warnings will also be shown in the error overlay
     // in the browser.
     showEslintErrorsInOverlay: false,
-
     /**
      * Source Maps
      */
@@ -66,7 +70,7 @@ module.exports = {
     // (https://github.com/webpack/css-loader#sourcemaps)
     // In our experience, they generally work as expected,
     // just be aware of this issue when enabling this option.
-    cssSourceMap: false,
+    cssSourceMap: false
   },
 
   build: {
diff --git a/manager-admin/config/prod.env.js b/manager-admin/config/prod.env.js
index 5a044556410baa463fc1a3cedefecf06419bf959..b6ce96ef1e5cfaaa2002e845432957edbdaf7a83 100644
--- a/manager-admin/config/prod.env.js
+++ b/manager-admin/config/prod.env.js
@@ -1,4 +1,4 @@
-const { distribution, liveVideo, o2o, supplier } = require('./index')
+const { distribution, liveVideo, o2o, supplier, im } = require('./index')
 
 module.exports = {
 	NODE_ENV: '"production"',
@@ -6,5 +6,6 @@ module.exports = {
   DISTRIBUTION: distribution,
   LIVEVIDEO: liveVideo,
   O2O: o2o,
-  SUPPLIER: supplier
+  SUPPLIER: supplier,
+  IM: im
 }
diff --git a/manager-admin/config/test.env.js b/manager-admin/config/test.env.js
index ba567a47d082e8821bfe10a126105ab7ddc6a385..64107c668da73a5b1524c333ec3cf3d824e32b21 100644
--- a/manager-admin/config/test.env.js
+++ b/manager-admin/config/test.env.js
@@ -1,4 +1,4 @@
-const { distribution, liveVideo, o2o, supplier } = require('./index')
+const { distribution, liveVideo, o2o, supplier, im } = require('./index')
 
 module.exports = {
 	NODE_ENV: '"test"',
@@ -6,5 +6,6 @@ module.exports = {
   DISTRIBUTION: distribution,
   LIVEVIDEO: liveVideo,
   O2O: o2o,
-  SUPPLIER: supplier
+  SUPPLIER: supplier,
+  IM: im
 }
diff --git a/manager-admin/src/api/im.js b/manager-admin/src/api/im.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3ad9c8a117bd28b9175d59c1f682aa4ad7548d9
--- /dev/null
+++ b/manager-admin/src/api/im.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+import { api } from '~/ui-domain'
+
+/**
+ * 获取IM未读消息数量
+ * @returns {*|Promise<unknown>}
+ */
+export function getUnreadNum() {
+  return request({
+    url: api['admin'] + `/admin/im/unread-num`,
+    method: 'post',
+    loading: false,
+    needToken: true
+  })
+}
diff --git a/manager-admin/src/components/ChatApp/ChatApp.vue b/manager-admin/src/components/ChatApp/ChatApp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a3b621c1dd9bbc1245a7ea40d90f19261f3808d
--- /dev/null
+++ b/manager-admin/src/components/ChatApp/ChatApp.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="chat-app" @click="dismissAnyShow">
+    <div class="chat-container">
+      <div class="left-chat">
+        <div class="user-info">
+          <div class="face-user">
+            <div class="img-face-user" :style="{backgroundImage: `url(${platformFace})`}"></div>
+            <div class="info-user">
+              <div class="name-user ellipsis">{{ user.name }}</div>
+            </div>
+          </div>
+          <div class="search-user">
+            <input v-model="search_keyword" placeholder="搜索最近联系人" class="search-input-user">
+          </div>
+        </div>
+        <div class="friend-list">
+          <div
+            v-for="item in showFriends"
+            :key="item['target_id']"
+            class="friend-item"
+            :class="{active: receiver_id === item['target_id']}"
+            @click="handleClickFriend(item)"
+          >
+            <div class="face-friend" :style="{backgroundImage: `url(${item.avatar || defaultFace})`}"></div>
+            <div class="name-friend ellipsis">{{ item.name }}</div>
+            <div v-if="item['un_read_num'] > 0" class="unread-friend">{{ item['un_read_num'] }}</div>
+            <div class="icon-delete" @click.stop="handleDeleteFriend(item)"></div>
+          </div>
+        </div>
+      </div>
+      <div class="right-chat">
+        <div class="head-right">
+          <div v-if="currentChat" class="wrapper-head">
+            <div class="face-head" :style="{backgroundImage: `url(${currentChat.avatar || defaultFace})`}"></div>
+            <div class="info-head">
+              <p class="name-info-head">
+                {{ currentChat.name }}
+              </p>
+              <p class="desc-info-head"></p>
+            </div>
+          </div>
+        </div>
+        <div class="body-right">
+          <div class="chat-right">
+            <div ref="chat-content" class="list-chat">
+              <div v-if="chatHistoryParams.loading" class="load-more no-data">正在加载数据...</div>
+              <div v-else-if="currentChat" class="load-more" :class="{'no-data': chatHistoryParams.no_data}" @click="handleLoadMoreHistory">
+                {{ chatHistoryParams.no_data ? '没有聊天记录了' : '点击加载更多' }}
+              </div>
+              <div v-else class="load-more no-data">请在左侧选择一个对话</div>
+              <chat-message-item
+                v-for="item in chatHistories"
+                :key="item['msg_id']"
+                :message="item"
+                :sender="user"
+                :receiver="currentChat"
+                :get-emoji-path="getEmojiPath"
+                :click-message="handleClickMessage"
+                :unix-to-date="unixToDate"
+                :preview-image="handlePreviewImage"
+              />
+            </div>
+            <div v-if="new_message_tip" class="scroll-tip" @click="chatContentScrollTo">
+              <i class="scroll-tip-icon"></i>
+              <span>有新的消息</span>
+            </div>
+            <div class="input-chat">
+              <div class="toolbar-input-chat">
+                <div class="btn-toolbar emoji" @click.stop="show_emoji_box = true"></div>
+                <div class="btn-toolbar image" @click="handleClickTool('image')">
+                  <input
+                    type="file"
+                    id="image-upload-input"
+                    class="btn-toolbar-input"
+                    accept="image/jpg,image/jpeg,image/png,image/webp,image/bmp,image/gif"
+                    @change="handleToolbarFileChange"
+                  >
+                </div>
+                <div class="btn-toolbar video" @click="handleClickTool('video')">
+                  <input
+                    type="file"
+                    id="video-upload-input"
+                    class="btn-toolbar-input"
+                    accept="video/mp4,video/flv"
+                    @change="handleToolbarFileChange"
+                  >
+                </div>
+                <div v-if="play_audio === 0" class="btn-toolbar audio-text" @click="handleClickTool('audio-text')">
+                  开启声音提醒
+                </div>
+
+              </div>
+              <div class="textarea-chat" @keydown.enter="handleSendContent">
+                <p id="textarea-input" contenteditable="true" class="textarea-input"></p>
+              </div>
+              <div class="send-chat">
+                <div class="send-btn">
+                  <div class="btn-send" @click="handleSendContent(1)">发送</div>
+                  <i class="send-btn-arrow" @click.stop="show_enter_key_picker = true"></i>
+                  <ul v-show="show_enter_key_picker" class="send-keys">
+                    <li class="send-key" :class="{active: enter_key === 1}" @click="enter_key = 1">按Enter发送</li>
+                    <li class="send-key" :class="{active: enter_key === 2}" @click="enter_key = 2">按Ctrl+Enter发送</li>
+                  </ul>
+                </div>
+              </div>
+              <div class="emoji-chat">
+                <chat-app-emoji v-show="show_emoji_box" @select="handleEmojiSelect" />
+              </div>
+            </div>
+          </div>
+          <div class="actions-right">
+            <div class="tabs-actions">
+              <div class="tab-actions ellipsis" :class="{active: current_tab === 0}" @click="current_tab = 0">
+                会员浏览历史
+              </div>
+              <div class="tab-actions ellipsis" :class="{active: current_tab === 1}" @click="current_tab = 1">
+                会员订单
+              </div>
+            </div>
+            <div class="content-actions">
+              <div v-show="current_tab === 0" class="history-actions">
+                <div v-if="currentAskGoods" class="history-goods">
+                  <a :href="`${domains['buyer_pc']}/goods/${currentAskGoods['goods_id']}`" target="_blank" class="history-goods-link">
+                    <img :src="currentAskGoods['thumbnail']" alt="" class="history-goods-image">
+                    <span class="history-goods-name">{{ currentAskGoods['goods_name'] }}</span>
+                  </a>
+                  <div class="send-btn" @click="sendMessage(currentAskGoods['goods_id'], 'GOODS')">发送</div>
+                </div>
+                <div v-if="currentAskGoods" class="tab-actions active">会员浏览历史</div>
+                <div v-for="item in goodsList" :key="item['goods_id']" class="history-goods">
+                  <a :href="`${domains['buyer_pc']}/goods/${item['goods_id']}`" target="_blank" class="history-goods-link">
+                    <img :src="item['goods_img']" alt="" class="history-goods-image">
+                    <span class="history-goods-name">{{ item['goods_name'] }}</span>
+                  </a>
+                  <div class="send-btn" @click="sendMessage(item['goods_id'], 'GOODS')">发送</div>
+                </div>
+                <div
+                  class="tip-load-more"
+                  :class="{disabled: goodsListParams.loading || goodsListParams.no_data || !receiver_id}"
+                  @click="handleLoadMoreGoods"
+                >
+                  <span v-if="goodsListParams.loading">加载中...</span>
+                  <span v-else-if="goodsListParams.no_data">没有更多了...</span>
+                  <span v-else>{{ receiver_id ? '加载更多' : '请在左侧选择一个对话' }}</span>
+                </div>
+              </div>
+              <div v-show="current_tab === 1" class="orders-actions">
+                <div v-for="item in orders" :key="item['order_id']" class="item-order">
+                  <div class="title-order">
+                    <span class="id-order">订单号：{{ item.sn }}</span>
+                    <span class="status-order send-btn" @click="sendMessage(item['sn'], 'ORDER')">发送</span>
+                  </div>
+                  <ul class="products-order" @click="handleClickOrder(item)">
+                    <li v-for="sku in item.sku_list" :key="sku['sku_id']" class="item-products">
+                      <div class="image-product">
+                        <img :src="sku['goods_image']" alt="" class="img-product">
+                      </div>
+                      <div class="info-product">
+                        <p :title="sku['name']" class="name-product">{{ sku['name'] }}</p>
+                        <div class="status-order">{{ item['order_status_text'] }}</div>
+                      </div>
+                    </li>
+                  </ul>
+                  <div class="other-order">
+                    <p class="price-order">
+                      <span>订单金额：</span>
+                      <span class="price">{{ item['order_amount'] | unitPrice }}</span>
+                    </p>
+                    <div>
+                      <span class="date-order">{{ unixToDate(item.create_time) }}</span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="tip-load-more"
+                  :class="{disabled: orderParams.loading || orderParams.no_data || !receiver_id}"
+                  @click="handleLoadMoreOrder"
+                >
+                  <span v-if="orderParams.loading">加载中...</span>
+                  <span v-else-if="orderParams.no_data">没有更多了...</span>
+                  <span v-else>{{ receiver_id ? '加载更多' : '请在左侧选择一个对话' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <viewer ref="viewer" :images="viewerImages" style="display: none">
+      <img v-for="src in viewerImages" :src="src" :key="src" alt="" />
+    </viewer>
+    <audio :src="message_mp3" id="chatAudio" style="z-index: 9999999; display: none; margin-left: 600px"/>
+  </div>
+</template>
+
+<script>
+import apiMixin from './apiMixin'
+import emojiMixin from './emojiMixin'
+import ChatAppEmoji from './ChatAppEmoji'
+import ChatMessageItem from './ChatMessageItem'
+import { MessageBox } from 'element-ui'
+import 'viewerjs/dist/viewer.css'
+import Storage from '@/utils/storage'
+import messageMp3 from './message.mp3'
+
+export default {
+  name: 'ChatApp',
+  components: { ChatAppEmoji, ChatMessageItem },
+  props: {
+    user: {
+      type: Object,
+      required: true
+    },
+    apis: {
+      type: Object,
+      required: true
+    },
+    domains: {
+      type: Object,
+      required: true
+    },
+    request: {
+      type: Function,
+      required: true
+    },
+    // 聊天类型
+    type: {
+      type: String,
+      required: true
+    }
+  },
+  mixins: [apiMixin, emojiMixin],
+  data() {
+    return {
+      receiver_id: '',
+      goods_id: '',
+      search_keyword: '',
+      current_chat: '',
+      current_tab: 0,
+      show_emoji_box: false,
+      show_enter_key_picker: false,
+      enter_key: 1,
+      new_message_tip: false,
+      viewerImages: [],
+      defaultFace: require('./icon-noface.jpg'),
+      search_goods_keyword: '',
+      message_mp3: messageMp3,
+      play_audio: Storage.getItem('admin_play_audio'),
+      platformFace: require('./platform.jpg')
+    }
+  },
+  computed: {
+    // 正在聊天对象
+    currentChat() {
+      const friend = this.friends.filter(item => item['target_id'] === this.receiver_id)[0]
+      return friend || ''
+    },
+    // 正在咨询的商品
+    currentAskGoods() {
+      if (this.$route.query.shop_id !== this.receiver_id) return ''
+      return this.askGoods
+    },
+    // 输入框节点
+    contentEl() {
+      return document.getElementById('textarea-input')
+    },
+    // 展示的朋友列表【经过搜索关键字过滤】
+    showFriends() {
+      const { search_keyword, friends } = this
+      if (!search_keyword.trim()) return friends
+      return friends.filter(item => item.name.indexOf(search_keyword) !== -1)
+    }
+  },
+  async created() {
+    const { member_id, goods_id } = this.$route.query
+    this.receiver_id = member_id
+    this.goods_id = goods_id
+    if (this.$eventCenter) {
+      this.$eventCenter.on('IM', this.handleWebsocketMessage)
+    }
+    if (this.receiver_id) {
+      this.createSession()
+    }
+  },
+  watch: {
+    search_goods_keyword: 'handleSearchGoods'
+  },
+  mounted() {
+    if (!document) return
+    this.$refs['chat-content'].addEventListener('scroll', this.chatBoxScrollListener)
+    this.initPasteScreenshot()
+    if (this.play_audio !== 0) {
+      this.showAudioConfirmDialog()
+    }
+  },
+  methods: {
+    /**
+     * 处理websocket消息
+     * @param moduleType
+     * @param msg
+     */
+    handleWebsocketMessage(msg) {
+      // 收到新消息
+      if (msg.type === 'msg') {
+        if (this.play_audio !== 0) {
+          const chatAudio = document.getElementById('chatAudio')
+          try {
+            chatAudio.pause()
+            chatAudio.currentTime = 0
+            chatAudio.play()
+          } catch (e) {
+            //
+          }
+        }
+        let senderId = msg.sender_id.toString()
+        if (senderId !== this.receiver_id) {
+          var chatIndex = -1
+          const chat = this.friends.filter((item, index, arr) => {
+            if (item['target_id'] === senderId) {
+              chatIndex = index
+              return item
+            }
+          })[0]
+          if (chat) {
+            chat.un_read_num += 1
+            // 将会话置为第一个
+            this.friends.splice(chatIndex, 1)
+            this.friends.unshift(chat)
+          } else {
+            // 未找到会话
+            this.getFriends()
+          }
+          return
+        }
+
+        let num = 0
+        let item = msg.payload
+        let msgId = item.msg_id.toString()
+        if (!this.chatHistories.map(_item => _item['msg_id']).includes(msgId)) {
+          item.msg_id = msgId
+          this.chatHistories.push(item)
+          num++
+        }
+        if (num !== 0) {
+          const $el = this.$refs['chat-content']
+          if ($el.scrollHeight - $el.scrollTop < $el.offsetHeight + 5) {
+            this.chatContentScrollTo()
+          } else {
+            this.new_message_tip = true
+          }
+          this.removeUnreadNum()
+        }
+        return
+      }
+      // 会话内容变化
+      if (msg.type === 'friend') {
+        this.getFriends()
+        return
+      }
+    },
+    /**
+     * 移除会话[删除好友]
+     * @param item
+     */
+    handleDeleteFriend(item) {
+      this.$confirm('确认要删除此联系人?', '提示', { type: 'warning' }).then(() => {
+        const id = item['target_id']
+        this.deleteFriend(id).then(() => {
+          if (this.receiver_id === id) {
+            this.receiver_id = ''
+            this.chatHistories = []
+          }
+          this.getFriends()
+        })
+      })
+    },
+    /**
+     * 选择好友
+     * @param item
+     */
+    handleClickFriend(item) {
+      this.receiver_id = item['target_id']
+      this.current_tab = 0
+      this.removeUnreadNum()
+      this.currentChat.un_read_num = 0
+      this.chatContentScrollTo()
+    },
+    /**
+     * 发送消息
+     */
+    handleSendContent(event) {
+      if (!this.receiver_id) return
+      if (event !== 1) {
+        if (this.enter_key === 1) {
+          event.preventDefault()
+        } else {
+          if (!event.ctrlKey) return
+        }
+      }
+
+      if (!this.contentEl.innerHTML.trim()) return
+      const emojiEls = this.contentEl.querySelectorAll('.emoji-img')
+      emojiEls.forEach(item => (item.src = ''))
+      const content = this.contentEl.innerHTML
+      this.sendMessage(content.trim(), 'TEXT')
+      this.$nextTick(() => {
+        this.contentEl.innerHTML = ''
+      })
+    },
+    /**
+     * 选择emoji
+     * @param item
+     */
+    handleEmojiSelect(item) {
+      this.contentEl.innerHTML += `<img src="${this.getEmojiPath(item)}" alt="${item}" class="emoji-img">`
+      this.show_emoji_box = false
+    },
+    /**
+     * 隐藏所有框框
+     */
+    dismissAnyShow() {
+      this.show_emoji_box = false
+      this.show_enter_key_picker = false
+    },
+    /**
+     * 聊天窗口滚动到底部
+     */
+    chatContentScrollTo(offset) {
+      this.$nextTick(() => {
+        const $content = this.$refs['chat-content']
+        $content.scrollTop = typeof offset !== 'number' ? $content.scrollHeight : offset
+        this.new_message_tip = false
+      })
+    },
+    /**
+     * 加载更多聊天记录
+     */
+    async handleLoadMoreHistory() {
+      if (this.chatHistoryParams.loading || this.chatHistoryParams.no_data) return
+      this.chatHistoryParams.page_no += 1
+      this.getChatHistory()
+    },
+    /**
+     * 聊天区域滚动监听
+     * @param event
+     */
+    chatBoxScrollListener(event) {
+      const $el = event.target
+      if ($el.scrollHeight - $el.scrollTop === $el.offsetHeight) {
+        this.new_message_tip = false
+      }
+    },
+    /**
+     * 选择图片或视频
+     * @param type
+     */
+    handleClickTool(type) {
+      if (type === 'audio-text') {
+        this.showAudioConfirmDialog()
+        return
+      }
+      if (!this.receiver_id) {
+        return
+      }
+      document.getElementById(`${type}-upload-input`).click()
+    },
+    /**
+     * 文件发生改变
+     * @param event
+     */
+    async handleToolbarFileChange(event) {
+      const { files } = event.target
+      const file = files[0]
+      if (!file) return
+      const type = /image\//.test(file.type) ? 'IMAGES' : 'VIDEO'
+      const res = await this.uploadFile(file)
+      await this.sendMessage(res.url, type)
+    },
+    /**
+     * 点了消息
+     * @param message
+     */
+    handleClickMessage(message) {
+      if (message.type === 'ORDER') {
+        this.handleClickOrder(message)
+      } else if (message.type === 'GOODS') {
+        window.open(this.domains['buyer_pc'] + `/goods/${message['goods_id']}`)
+      }
+    },
+    /**
+     * 查看订单详情
+     */
+    handleClickOrder(item) {
+      const { order_sn, sn } = item
+      let url = this.$router.resolve(`/order/detail/${order_sn || sn}`).href
+      window.open(url)
+    },
+    /**
+     * 加载更多商品
+     */
+    handleLoadMoreGoods() {
+      if (this.goodsListParams.no_data) return
+      this.goodsListParams.page_no += 1
+      this.getGoodsList()
+    },
+    /**
+     * 加载更多订单
+     */
+    handleLoadMoreOrder() {
+      if (this.orderParams.no_data || !this.receiver_id) return
+      this.orderParams.page_no += 1
+      this.getOrders()
+    },
+    /**
+     * 格式化日期
+     * @param unix
+     * @param format
+     * @returns {string}
+     */
+    unixToDate(unix, format) {
+      let _format = format || 'yyyy-MM-dd hh:mm:ss'
+      const d = new Date(unix * 1000)
+      const o = {
+        'M+': d.getMonth() + 1,
+        'd+': d.getDate(),
+        'h+': d.getHours(),
+        'm+': d.getMinutes(),
+        's+': d.getSeconds(),
+        'q+': Math.floor((d.getMonth() + 3) / 3),
+        S: d.getMilliseconds()
+      }
+      if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
+      for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+      return _format
+    },
+    /**
+     * 素材选择器确认选择
+     * @param items
+     */
+    handleResourcePickerConfirm(items) {
+      if (items.length) {
+        const type = this.resource_picker_type === 'image' ? 'IMAGES' : 'VIDEO'
+        this.sendMessage(items[0]['resource_url'], type)
+      }
+    },
+    /**
+     * 预览图片
+     * @param message
+     */
+    handlePreviewImage(message) {
+      this.viewerImages = [message.url]
+      console.log(this.$refs['viewer'])
+      this.$refs['viewer']['$viewer']['show']()
+    },
+    /**
+     * 初始化粘贴板监听
+     */
+    initPasteScreenshot() {
+      this.contentEl.addEventListener('paste', async(event) => {
+        let paste = (event.clipboardData || window.clipboardData)
+        if (paste.files.length !== 0) {
+          const file = paste.files[0]
+          if (file.type.indexOf('image/') === -1) return
+          event.preventDefault()
+          if (!this.receiver_id) {
+            return this.$message.error('请选择一个对话！')
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (e) => {
+            const h = this.$createElement
+            const src = e.target.result
+            console.log(this)
+            MessageBox({
+              title: '是否发送图片？',
+              message: h('img',
+                {
+                  style: { 'max-width': '390px', 'max-height': '390px' },
+                  attrs: { src }
+                }
+              ),
+              showCancelButton: true,
+              confirmButtonText: '确定',
+              cancelButtonText: '取消'
+            }).then(async() => {
+              const res = await this.uploadFile(file)
+              await this.sendMessage(res.url, 'IMAGES')
+            })
+          }
+        }
+      })
+    },
+    handleSearchGoods() {
+      this.goodsListParams.no_data = false
+      this.goodsListParams.page_no = 1
+      this.getGoodsList()
+    },
+    /**
+     * 显示消息通知确认弹框
+     */
+    showAudioConfirmDialog() {
+      this.$msgbox.confirm(
+        '因浏览器限制，如需要使用声音提示，每次进入聊天界面，您需要点击下面确认按钮授权使用系统声音。\n如您不需要使用声音提醒，则点击下方的“不提示声音”按钮，本提示将不在弹出。',
+        {
+          type: 'warning',
+          center: true,
+          showClose: false,
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          confirmButtonText: '使用声音提示',
+          cancelButtonText: '不提示声音',
+          callback: (res) => {
+            if (res === 'cancel') {
+              this.play_audio = 0
+              Storage.setItem('admin_play_audio', 0)
+            } else {
+              this.play_audio = 1
+              Storage.setItem('admin_play_audio', 1)
+            }
+          }
+        }
+      )
+    }
+  },
+  beforeDestroy() {
+    if (!document) return
+    this.$refs['chat-content'].removeEventListener('scroll', this.chatBoxScrollListener)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./styles";
+</style>
diff --git a/manager-admin/src/components/ChatApp/ChatAppEmoji.vue b/manager-admin/src/components/ChatApp/ChatAppEmoji.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a31d0cfc6b4c4d07d4277fec93bca6348ff9e93
--- /dev/null
+++ b/manager-admin/src/components/ChatApp/ChatAppEmoji.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="emoji-box">
+    <div class="emoji-container">
+      <div
+        v-for="(item, index) in emojis"
+        :key="index"
+        class="item-emoji"
+        :style="{backgroundPosition: `-${index % 12 *38}px -${Math.floor(index / 12) * 38}px`}"
+        @click="handleClickEmoji(item)"
+      >
+        <div class="preview-item-emoji">
+          <img :src="emojiMap[item]" alt="" class="img-preview-item-emoji">
+        </div>
+      </div>
+    </div>
+    <div class="emoji-tabs">
+      <div class="emoji-tab active">经典</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import emojiMixin from './emojiMixin'
+export default {
+  name: 'ChatAppEmoji',
+  mixins: [emojiMixin],
+  methods: {
+    handleClickEmoji(item) {
+      this.$emit('select', item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.emoji-box {
+  background-color: #fff;
+  box-sizing: border-box;
+  position: relative;
+  width: 372px;
+  height: 218px;
+  border: 1px solid #e1e1e1;
+  .emoji-container {
+    padding: 5px 5px 0;
+    box-sizing: border-box;
+    font-size: 0;
+    line-height: 0;
+    width: 370px;
+    height: 185px;
+    background-color: #fff;
+    .item-emoji {
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+      width: 30px;
+      height: 30px;
+      background-color: #fafafa;
+      border-right: 1px solid;
+      border-bottom: 1px solid;
+      border-color: #e1e1e1;
+      cursor: pointer;
+      user-select: none;
+      background-image: url('./images/emojis.gif');
+      background-repeat: no-repeat;
+      &:nth-child(-n + 12) {
+        border-top: 1px solid #e1e1e1;
+      }
+      &:nth-child(12n + 1) {
+        border-left: 1px solid #e1e1e1;
+      }
+      &:hover {
+        border: 1px solid #45ac4a;
+        .preview-item-emoji {
+          display: flex;
+        }
+      }
+      .preview-item-emoji {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        border: 1px solid #45ac4a;
+        width: 60px;
+        height: 60px;
+        bottom: -62px;
+        right: -62px;
+        z-index: 2;
+        background-color: #fff;
+      }
+    }
+  }
+  .emoji-tabs {
+    background-color: #f0f0f0;
+    font-size: 0;
+    margin-top: 5px;
+    .emoji-tab {
+      display: inline-block;
+      width: 63px;
+      text-align: center;
+      font-size: 12px;
+      line-height: 26px;
+      height: 26px;
+      cursor: pointer;
+      &.active {
+        background-color: #ffffff;
+      }
+    }
+  }
+}
+</style>
diff --git a/manager-admin/src/components/ChatApp/ChatMessageItem.vue b/manager-admin/src/components/ChatApp/ChatMessageItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4130fcec065b8bd6f9a246c936ea0b0a2b8c8243
--- /dev/null
+++ b/manager-admin/src/components/ChatApp/ChatMessageItem.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="message-item" :class="{self: message['is_self']}">
+    <p class="name-message">
+      <span v-if="message.is_self" style="margin-right: 10px">{{ message.msg_time | unixToDate }}</span>
+      {{ user.name }}
+      <span v-if="!message.is_self" style="margin-left: 10px">{{ message.msg_time | unixToDate }}</span>
+    </p>
+    <div class="wrapper-message">
+      <div v-if="message.is_self" class="head-message" :style="{backgroundImage: `url(${platformFace})`}"></div>
+      <div v-else class="head-message" :style="{backgroundImage: `url(${user.face || defaultFace})`}"/>
+      <div class="body-message">
+        <div class="text-message">
+          <div v-if="message.type === 'ORDER' || message.type === 'GOODS'" class="order-message">
+            <div v-if="message.type === 'ORDER'" class="top-order">
+              <span style="color: #5a606b">订单号：{{ message['order_sn'] }}</span>
+              <span style="color: #a1a6af">{{ unixToDate(message['create_time'], 'yyyy-MM-dd hh:mm') }}</span>
+            </div>
+            <template v-if="message.type === 'ORDER'">
+              <div v-for="goods in message.goods_list" :key="goods.name" class="inner-order" :class="message.type" @click="clickMessage(message)">
+                <div class="image-order-message">
+                  <img :src="goods['goods_image']" alt="">
+                </div>
+                <div class="info-order-message">
+                  <div class="goods-name">
+                    <p>{{ goods['goods_name'] }}</p>
+                  </div>
+                  <div class="label normal"></div>
+                </div>
+              </div>
+              <div class="info-order-box">
+                订单金额合计：
+                <span class="price">{{ message['order_price'] | unitPrice }}</span>
+              </div>
+              <div class="tag-order-message">订单</div>
+            </template>
+            <div v-else class="inner-order" :class="message.type" @click="clickMessage(message)">
+              <div class="image-order-message">
+                <img :src="message['goods_image']" alt="">
+              </div>
+              <div class="info-order-message">
+                <div class="goods-name">
+                  <p>{{ message['goods_name'] }}</p>
+                </div>
+                <div class="label normal"></div>
+                <div class="info-order-box">
+                  <span class="price">{{ message['goods_price'] | unitPrice }}</span>
+                </div>
+              </div>
+              <div class="tag-order-message">{{ message.type === 'ORDER' ? '订单' : '商品' }}</div>
+            </div>
+          </div>
+          <div v-else class="content-message" :class="message.type">
+            <p v-if="message.type === 'TEXT'" ref="pre" class="message-pre"></p>
+            <img v-else-if="message.type === 'IMAGES'" :src="message.url" alt class="message-image" @click="previewImage(message)" />
+            <video v-else-if="message.type === 'VIDEO'" :src="message.url" controls="controls" class="message-video" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatMessageItem',
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+    getEmojiPath: {
+      type: Function,
+      required: true
+    },
+    sender: {
+      type: Object,
+      required: true
+    },
+    receiver: {
+      type: [Object, String],
+      required: true
+    },
+    clickMessage: {
+      type: Function,
+      required: false
+    },
+    unixToDate: {
+      type: Function,
+      required: false
+    },
+    previewImage: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultFace: require('./icon-noface.jpg'),
+      platformFace: require('./platform.jpg')
+    }
+  },
+  mounted() {
+    const { type, text } = this.message
+    if (type === 'TEXT') {
+      const $pre = this.$refs['pre']
+      $pre.innerHTML = text
+      $pre.querySelectorAll('.emoji-img').forEach(item => (item.src = this.getEmojiPath(item.alt)))
+    }
+  },
+  computed: {
+    user() {
+      const { sender, receiver } = this
+      const self = this.message['is_self']
+      return {
+        name: self ? sender.name : receiver.name,
+        face: (self ? sender.face : receiver.avatar) || this.defaultFace
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-item {
+  margin-bottom: 20px;
+  clear: both;
+  overflow: hidden;
+  &.self {
+    .name-message {
+      text-align: right;
+    }
+    .head-message {
+      float: right;
+      margin-left: 10px;
+      margin-right: 0;
+    }
+    .text-message {
+      float: right;
+    }
+    .content-message {
+      margin-right: 5px;
+      padding-right: 17px;
+      padding-left: 9px;
+      background-color: #d0e9ff;
+      &:after {
+        left: auto;
+        right: -6px;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAqCAYAAABYzsDTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzI0QTVCMUUxNjBBMTFFODlGQzlDRDUzQTg4RDcxQzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzI0QTVCMUYxNjBBMTFFODlGQzlDRDUzQTg4RDcxQzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMjRBNUIxQzE2MEExMUU4OUZDOUNENTNBODhENzFDMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMjRBNUIxRDE2MEExMUU4OUZDOUNENTNBODhENzFDMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqBcZigAAAD0SURBVHjaYrzw8j8DEMgAcRcQOwCxJANh8ByIDwBxmb4YwxNcihiBhoMMvgjEQgykg3dArI/LAiaoi8kxmAGqrwuXJBM0KCgBDvgMl6TQcEl8htMMjBo+RA2/+IpBi5YuPw20IIFWhnMB8XygBQuAmItWYR4P9YUWrOD6T4O4/AbEabRKLaCg6aaV4SCXF7LQwOBrQBwKLOOvUdvlC4DYFGQwiMNCxWDIAhq6EFmQWobDXUv1TITN4NFScdTwUcNHDR81fHgZ/pxCM57jM/wAhYYfwGd4GbTLRw54B9WP03BQH1IfiJeTEETPoer18XVyAQIMACbMN3JUxFKPAAAAAElFTkSuQmCC');
+      }
+    }
+  }
+  .name-message {
+    text-align: left;
+    box-sizing: border-box;
+    font-size: 12px;
+    color: #a1a6af;
+    padding: 0 48px;
+    margin-bottom: 3px;
+    width: 100%;
+  }
+  .wrapper-message {
+    position: relative;
+  }
+  .head-message {
+    float: left;
+    margin-right: 10px;
+    width: 32px;
+    height: 32px;
+    border-radius: 3px;
+    overflow: hidden;
+    box-sizing: border-box;
+    background-color: #fff;
+    background-size: 100%;
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+  }
+  .body-message {
+    position: relative;
+  }
+  .text-message {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    min-height: 42px;
+    line-height: 1.4;
+    font-size: 13px;
+    color: #252525;
+    letter-spacing: 0;
+    max-width: 390px;
+  }
+  .content-message {
+    position: relative;
+    display: inline-block;
+    min-height: 18px;
+    line-height: 1.4;
+    background-color: #f3f3f3;
+    border-radius: 4px;
+    word-break: break-all;
+    margin-left: 5px;
+    padding: 12px 9px 12px 17px;
+    text-align: justify;
+    &.IMAGES,
+    &.VIDEO {
+      padding: 10px;
+    }
+    &:after {
+      position: absolute;
+      content: "";
+      width: 23px;
+      height: 42px;
+      left: -6px;
+      top: 0;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAqCAYAAABYzsDTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzI0QTVCMjIxNjBBMTFFODlGQzlDRDUzQTg4RDcxQzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzI0QTVCMjMxNjBBMTFFODlGQzlDRDUzQTg4RDcxQzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMjRBNUIyMDE2MEExMUU4OUZDOUNENTNBODhENzFDMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMjRBNUIyMTE2MEExMUU4OUZDOUNENTNBODhENzFDMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsDqUnkAAADjSURBVHjaYvz8+TMDHiADxF1A7ADEkgyEwXMgPgDEZTw8PE8Y8RgOMvgiEAsxkA7eAbE+Ex4FXWQazADV14XP5c+IDAqcQYTP5ZQYDNbPxEBDMGr44DFci1aGJwDxaWoYzoLE5gLiaUAcT61gYUEKhtXUCg7kYImGBoMWtSMUVLY8o0JWx+nyQiD+RivDVwKxKRBfo1U6vwa1YAGtMhEoaBKh6fwbtSIUVw69Sqvsf42WZctokTtq+Kjho4aPGj58DH9Oodl4uy0HKDT8wIB1FZ+AFADxchKC6DlUvT6okwsQYAC/AjSzkv2m0gAAAABJRU5ErkJggg==');
+    }
+  }
+  .order-message {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border: 1px solid #F2F2F2;
+    border-radius: 4px;
+    width: 400px;
+    padding: 0 20px;
+    .top-order {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0;
+      span {
+        font-size: 12px;
+      }
+    }
+    .inner-order {
+      display: flex;
+      padding: 20px 0;
+      cursor: pointer;
+      &.ORDER {
+        padding-top: 0;
+      }
+    }
+    .image-order-message {
+      width: 80px;
+      height: 80px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .info-order-message {
+      width: 260px;
+      margin-left: 10px;
+      .goods-name {
+        height: 46px;
+        line-height: 1.2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+      .info-order-box {
+        font-size: 13px;
+        margin-top: 12px;
+        color: #999999;
+        display: inline-block;
+      }
+    }
+    .tag-order-message {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      color: #fff;
+      padding: 2px 10px;
+      background-color: #90a4ae;
+      border-top-left-radius: 3px;
+    }
+  }
+}
+.message-pre {
+  margin: 0;
+}
+.message-image,
+.message-video {
+  position: relative;
+  min-width: 100px;
+  min-height: 100px;
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 4px;
+  z-index: 2;
+}
+.message-image {
+  cursor: pointer;
+}
+/deep/ {
+  .emoji-img {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    margin: 0 1px -2px;
+    vertical-align: middle;
+  }
+}
+</style>
diff --git a/manager-admin/src/components/ChatApp/apiMixin.js b/manager-admin/src/components/ChatApp/apiMixin.js
new file mode 100644
index 0000000000000000000000000000000000000000..586c7e52df3e109b90532827b28be8690650e6f7
--- /dev/null
+++ b/manager-admin/src/components/ChatApp/apiMixin.js
@@ -0,0 +1,292 @@
+export default {
+  data() {
+    return {
+      // 朋友
+      friend_timer: null,
+      friends: [],
+      // 订单
+      orders: [],
+      orderParams: {
+        page_no: 1,
+        page_size: 10,
+        no_data: false,
+        loading: false
+      },
+      // 商品浏览历史或者本店商品
+      goodsList: [],
+      goodsListParams: {
+        page_no: 1,
+        page_size: 10,
+        no_data: false,
+        loading: false
+      },
+      // 正在咨询的商品
+      askGoods: '',
+      // 聊天记录
+      chatHistories: [],
+      chatHistoryParams: {
+        page_no: 1,
+        page_size: 10,
+        no_data: false,
+        loading: false
+      },
+      new_message_timer: null
+    }
+  },
+  mounted() {
+    this.getFriends()
+  },
+  watch: {
+    receiver_id: {
+      immediate: true,
+      async handler(newVal) {
+        if (!newVal) return
+        this.orders = []
+        this.orderParams.no_data = false
+        this.orderParams.page_no = 1
+        this.chatHistories = []
+        this.chatHistoryParams.no_data = false
+        this.chatHistoryParams.page_no = 1
+        this.getOrders()
+        this.getGoodsList()
+        await this.getNewMessage()
+        setTimeout(() => {
+          this.chatContentScrollTo()
+        }, 1000)
+      }
+    }
+  },
+  methods: {
+    /**
+     * 获取好友列表
+     */
+    getFriends() {
+      this.request({
+        url: this.apis['admin'] + `/admin/im/friends-list`,
+        method: 'get',
+        loading: false,
+        needToken: true
+      }).then(res => {
+        const currentChat = res.filter(item => item['target_id'] === this.receiver_id)[0]
+        if (currentChat) {
+          currentChat.un_read_num = 0
+        }
+        this.friends = res
+        if (!this.receiver_id) {
+          this.receiver_id = res[0].target_id
+        }
+      })
+    },
+    /**
+     * 获取订单列表
+     */
+    getOrders() {
+      this.orderParams.loading = true
+      const params = JSON.parse(JSON.stringify(this.orderParams))
+      delete params.no_data
+      delete params.loading
+      let url = `${this.apis['admin']}/admin/im/orders/${this.receiver_id}`
+      this.request({
+        url,
+        method: 'get',
+        loading: false,
+        needToken: true,
+        params
+      }).then(res => {
+        const data = res.data
+        if (params.page_no === 1) {
+          this.orders = data
+        } else {
+          this.orders.push(...data)
+        }
+        this.orderParams.no_data = data.length < params.page_size
+      }).finally(() => {
+        this.orderParams.loading = false
+      })
+    },
+
+    /**
+     * 创建对话
+     * @returns {*}
+     */
+    createSession() {
+      return this.request({
+        url: this.apis['admin'] + `/admin/im/session/${this.receiver_id}`,
+        method: 'post',
+        loading: false,
+        needToken: true
+      }).then(res => {
+        this.getFriends()
+      })
+    },
+
+    /**
+     * 获取商品列表
+     * 如果是商家端，获取店铺商品列表
+     * 否则，获取会员商品浏览记录
+     */
+    getGoodsList() {
+      this.goodsListParams.loading = true
+      const params = JSON.parse(JSON.stringify(this.goodsListParams))
+      if (this.search_goods_keyword) {
+        params.goods_name = this.search_goods_keyword
+      }
+      delete params.no_data
+      delete params.loading
+      let url = `${this.apis['admin']}/admin/im/visit-history/${this.receiver_id}`
+      this.request({
+        url,
+        method: 'get',
+        loading: false,
+        needToken: true,
+        params
+      }).then(res => {
+        const data = []
+        res.data.forEach(item => data.push(item))
+        if (params.page_no === 1) {
+          this.goodsList = data
+        } else {
+          this.goodsList.push(...data)
+        }
+        this.goodsListParams.no_data = data.length < params.page_size
+      }).finally(() => {
+        this.goodsListParams.loading = false
+      })
+    },
+
+    /**
+     * 获取聊天记录，用于加载更多
+     */
+    getChatHistory() {
+      this.chatHistoryParams.loading = true
+      const params = JSON.parse(JSON.stringify(this.chatHistoryParams))
+      params.receiver_id = this.receiver_id
+      delete params.no_data
+      delete params.loading
+      this.request({
+        url: this.apis['admin'] + `/admin/im/history`,
+        method: 'get',
+        loading: false,
+        needToken: true,
+        params
+      }).then(res => {
+        const data = res.data
+        this.chatHistories.splice(0, 0, ...data)
+        this.chatHistoryParams.no_data = data.length < params.page_size
+      }).finally(() => {
+        this.chatHistoryParams.loading = false
+      })
+    },
+
+    /**
+     * 发送消息
+     * @param content
+     * @param type
+     * @returns {Promise<*>}
+     */
+    async sendMessage(content, type) {
+      if (!this.receiver_id) return this.$message.error('请选择一个对话！')
+      const data = {
+        content,
+        receiver_id: this.receiver_id
+      }
+      const res = await this.request({
+        url: this.apis['admin'] + `/admin/im/message/${type}`,
+        method: 'post',
+        loading: false,
+        needToken: true,
+        data
+      })
+      this.chatHistories.push(res)
+      this.removeUnreadNum()
+      this.chatContentScrollTo()
+      return Promise.resolve(res)
+    },
+    /**
+     * 移除未读消息
+     * @returns {*}
+     */
+    removeUnreadNum() {
+      return this.request({
+        url: this.apis['admin'] + `/admin/im/unread-num`,
+        method: 'delete',
+        loading: false,
+        needToken: true,
+        params: {
+          sender_id: this.receiver_id
+        }
+      })
+    },
+    /**
+     * 获取新消息，轮询
+     * @returns {Promise<void>}
+     */
+    getNewMessage() {
+      return new Promise(resolve => {
+        this.request({
+          url: this.apis['admin'] + `/admin/im/history`,
+          method: 'get',
+          loading: false,
+          needToken: true,
+          params: { receiver_id: this.receiver_id }
+        }).then(res => {
+          let num = 0
+          res.data.forEach(item => {
+            if (!this.chatHistories.map(_item => _item['msg_id']).includes(item['msg_id'])) {
+              this.chatHistories.push(item)
+              num++
+            }
+          })
+          if (num !== 0) {
+            const $el = this.$refs['chat-content']
+            if ($el.scrollHeight - $el.scrollTop === $el.offsetHeight) {
+              this.chatContentScrollTo()
+            } else {
+              this.new_message_tip = true
+            }
+          }
+        }).finally(() => {
+          resolve()
+        })
+      })
+    },
+    /**
+     * 文件上传
+     * @param file
+     */
+    uploadFile(file) {
+      return new Promise(resolve => {
+        const formData = new FormData()
+        formData.append('file', file)
+        this.request({
+          url: this.MixinUploadApi,
+          method: 'post',
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            ...this.MixinAccessToken
+          },
+          data: formData
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
+
+    /**
+     * 删除会话[移除好友]
+     * @param id
+     */
+    deleteFriend(id) {
+      return new Promise((resolve, reject) => {
+        let url = this.apis['admin'] + '/admin/im/delete'
+        const params = { member_id: id }
+        this.request({
+          url,
+          method: 'get',
+          needToken: true,
+          params
+        }).then(resolve).catch(reject)
+      })
+    }
+  }
+}
diff --git a/manager-admin/src/components/ChatApp/emojiMixin.js b/manager-admin/src/components/ChatApp/emojiMixin.js
new file mode 100644
index 0000000000000000000000000000000000000000..17e091a08c99cf271e39b31eccf764649924fa5d
--- /dev/null
+++ b/manager-admin/src/components/ChatApp/emojiMixin.js
@@ -0,0 +1,40 @@
+let emojiFiles = []
+let emojiMap = {}
+let emojis = require['context']('./images', true, /[A-Za-z]\w+\.(gif)$/)
+emojis.keys().forEach(item => {
+  if (item.indexOf('emojis.gif') !== -1) return
+  emojiFiles.push(emojis(item))
+  const emojiName = item.split('.gif')[0].split('/')[1]
+  emojiMap[emojiName] = emojis(item)
+})
+
+export default {
+  data() {
+    return {
+      emojis: Object.keys(emojiMap),
+      emojiMap: emojiMap
+    }
+  },
+  methods: {
+    /**
+     * 通过emoji图片路径获取emojiId
+     * @param path
+     * @returns {*}
+     */
+    getEmojiId(path) {
+      if (!path) return
+      let temp = path.split('.gif')[0]
+      if (!temp) return
+      return temp.split('/')[1]
+    },
+    /**
+     * 通过emojiId获取emoji图片路径
+     * @param id
+     * @returns {*}
+     */
+    getEmojiPath(id) {
+      if (!id) return
+      return this.emojiMap[id]
+    }
+  }
+}
diff --git a/manager-admin/src/components/ChatApp/icon-close.png b/manager-admin/src/components/ChatApp/icon-close.png
new file mode 100644
index 0000000000000000000000000000000000000000..b11df4169d4e016c0fbc995019a81e63707b9fa0
Binary files /dev/null and b/manager-admin/src/components/ChatApp/icon-close.png differ
diff --git a/manager-admin/src/components/ChatApp/icon-noface.jpg b/manager-admin/src/components/ChatApp/icon-noface.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..21c6aa59437c4df4017cf10501e1a0d035c43755
Binary files /dev/null and b/manager-admin/src/components/ChatApp/icon-noface.jpg differ
diff --git a/manager-admin/src/components/ChatApp/images/e01.gif b/manager-admin/src/components/ChatApp/images/e01.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c5baabcd73fabe51b021f8311455a2ec2c7a61bf
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e01.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e02.gif b/manager-admin/src/components/ChatApp/images/e02.gif
new file mode 100644
index 0000000000000000000000000000000000000000..616dcbcf6456f7dbaa045c93ca53a51b7176fe22
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e02.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e03.gif b/manager-admin/src/components/ChatApp/images/e03.gif
new file mode 100644
index 0000000000000000000000000000000000000000..244787dd9081ed0710515f6280d845992913db07
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e03.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e04.gif b/manager-admin/src/components/ChatApp/images/e04.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3798fe8b8faf2fd1e0387f32efa8bee1fffd967f
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e04.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e05.gif b/manager-admin/src/components/ChatApp/images/e05.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4e3ddae5cb233c98c88547fbb87b29736e27fa71
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e05.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e06.gif b/manager-admin/src/components/ChatApp/images/e06.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9902cab36ce265d729ac9c9b8b9da83c18641972
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e06.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e07.gif b/manager-admin/src/components/ChatApp/images/e07.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d4d2a76c2c32e05bbc2ccdeac185bae3023bda2
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e07.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e08.gif b/manager-admin/src/components/ChatApp/images/e08.gif
new file mode 100644
index 0000000000000000000000000000000000000000..26d421d1dd090b00b18d7e1300aad07d1d45936a
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e08.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e09.gif b/manager-admin/src/components/ChatApp/images/e09.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8a6e2122394c599a9636c7181880f566552dae2b
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e09.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e10.gif b/manager-admin/src/components/ChatApp/images/e10.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1383a2ebfe76ca37a14dde49d37c79f385c1b7f5
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e10.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e11.gif b/manager-admin/src/components/ChatApp/images/e11.gif
new file mode 100644
index 0000000000000000000000000000000000000000..614ebca78f432620abc3c08da9ca0c1e73187a3e
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e11.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e12.gif b/manager-admin/src/components/ChatApp/images/e12.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7ce9cf6a9f4e73adccb29a2d068667264fa4decd
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e12.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e13.gif b/manager-admin/src/components/ChatApp/images/e13.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2105024ab8f5559c8b8c7e1456c5dd8ca4db15d4
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e13.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e14.gif b/manager-admin/src/components/ChatApp/images/e14.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2e62299f34e7be7fd1965369e584ce06c1cb360e
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e14.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e15.gif b/manager-admin/src/components/ChatApp/images/e15.gif
new file mode 100644
index 0000000000000000000000000000000000000000..bf52d0b2ce1dd122b346956edc9c586229ceebc1
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e15.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e16.gif b/manager-admin/src/components/ChatApp/images/e16.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c2b9c70d4ea000a868c815ce7925baca532d632f
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e16.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e17.gif b/manager-admin/src/components/ChatApp/images/e17.gif
new file mode 100644
index 0000000000000000000000000000000000000000..32cb793e50ec3919648a94546a6e51b7ed5526aa
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e17.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e18.gif b/manager-admin/src/components/ChatApp/images/e18.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b2cc2c5b3e4f765eb16090afa03a36b6e5995d45
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e18.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e19.gif b/manager-admin/src/components/ChatApp/images/e19.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7bcb322f9e91dafc7f068272c469c489e1aef403
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e19.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e20.gif b/manager-admin/src/components/ChatApp/images/e20.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0bbca35984e0a1d141b5a0e42095c9429664088d
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e20.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e21.gif b/manager-admin/src/components/ChatApp/images/e21.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7267c775d14ed163681baeea12855bf0e252789f
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e21.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e22.gif b/manager-admin/src/components/ChatApp/images/e22.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7a2e7f133c458eb2ed4fe3b664027631eeb19764
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e22.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e23.gif b/manager-admin/src/components/ChatApp/images/e23.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b3715550fdb42e39e5062ce62fa720b13c30feba
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e23.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e24.gif b/manager-admin/src/components/ChatApp/images/e24.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0d1e4541a4c6a4a8901d89094a764f6458f544ce
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e24.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e25.gif b/manager-admin/src/components/ChatApp/images/e25.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3fe507c0bf0fa827d3afc575f78387bc85ec6434
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e25.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e26.gif b/manager-admin/src/components/ChatApp/images/e26.gif
new file mode 100644
index 0000000000000000000000000000000000000000..87e635bc27a8e9aacdd6c9984ee03b8db13d500d
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e26.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e27.gif b/manager-admin/src/components/ChatApp/images/e27.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e1e4dfd1b32eee2645b942a1d48bd82e0db5a58b
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e27.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e28.gif b/manager-admin/src/components/ChatApp/images/e28.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8d3760fd407b78c84edbd8306fce96384d9b4ef0
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e28.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e29.gif b/manager-admin/src/components/ChatApp/images/e29.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86b9c848186bbf140be4bd6264a140c3553a17e6
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e29.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e30.gif b/manager-admin/src/components/ChatApp/images/e30.gif
new file mode 100644
index 0000000000000000000000000000000000000000..16850ce1c93483915c5d6f55837b945295936515
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e30.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e31.gif b/manager-admin/src/components/ChatApp/images/e31.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86863cf1330853850b01782392bd5f87d4c30be1
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e31.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e32.gif b/manager-admin/src/components/ChatApp/images/e32.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f2f187508a20c9f30ceabcba2f53d2470e084b42
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e32.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e33.gif b/manager-admin/src/components/ChatApp/images/e33.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ee6f51387a0d76eea676d5795c2234bb7cf8e02b
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e33.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e34.gif b/manager-admin/src/components/ChatApp/images/e34.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8a7cf0a092b17b3d7967fb5cea4fec40fa791dad
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e34.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e35.gif b/manager-admin/src/components/ChatApp/images/e35.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0235d389da3c77af489714e937c60f856057d1d7
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e35.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e36.gif b/manager-admin/src/components/ChatApp/images/e36.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2bbb9a095a8160519b514cda20354e95b04c8640
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e36.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e37.gif b/manager-admin/src/components/ChatApp/images/e37.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0cb82f5e63e5d7ec1670446cfcba88ee7499347c
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e37.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e38.gif b/manager-admin/src/components/ChatApp/images/e38.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8e03ca87d3a5ba922b72438fa8f5c25d33b7f0da
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e38.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e39.gif b/manager-admin/src/components/ChatApp/images/e39.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4e26b94dd52477583dc1cb77c867b25c024d620c
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e39.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e40.gif b/manager-admin/src/components/ChatApp/images/e40.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3643e9ef34baeb0ba275b748a7f8262f89726c96
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e40.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e41.gif b/manager-admin/src/components/ChatApp/images/e41.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b9f86388bf9d0f31b21add074247fe48131bec7c
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e41.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e42.gif b/manager-admin/src/components/ChatApp/images/e42.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c6931188a62ec0a60a53f4285ecb5b6e04c3b7d5
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e42.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e43.gif b/manager-admin/src/components/ChatApp/images/e43.gif
new file mode 100644
index 0000000000000000000000000000000000000000..58cfc659a942fe81d2fa046998dd137bc53ce06e
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e43.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e44.gif b/manager-admin/src/components/ChatApp/images/e44.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7dd32fb2f20cbe7791796f3c90a51528d506f694
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e44.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e45.gif b/manager-admin/src/components/ChatApp/images/e45.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c92402f89441fff83674c0b59df9053b0c1116ec
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e45.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e46.gif b/manager-admin/src/components/ChatApp/images/e46.gif
new file mode 100644
index 0000000000000000000000000000000000000000..67c63e6c1a33734db81b60a28a3f7c5566df21be
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e46.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e47.gif b/manager-admin/src/components/ChatApp/images/e47.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ba2b736d74ed31165f32168e7978f5386588d5a3
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e47.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e48.gif b/manager-admin/src/components/ChatApp/images/e48.gif
new file mode 100644
index 0000000000000000000000000000000000000000..be58ea9c6f1a4eaf4ab0fb13bf407019e38bebf4
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e48.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e49.gif b/manager-admin/src/components/ChatApp/images/e49.gif
new file mode 100644
index 0000000000000000000000000000000000000000..73aee8bfb72d6636bad13b85491e881d4658b994
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e49.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e50.gif b/manager-admin/src/components/ChatApp/images/e50.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ae5d59204d7f73bb391a8d92fb36256e0e56ebc2
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e50.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e51.gif b/manager-admin/src/components/ChatApp/images/e51.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1d7f838e30799bf966b1fb1e0f461ed78ab36f2d
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e51.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e52.gif b/manager-admin/src/components/ChatApp/images/e52.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d5cbf4e309199632bd20e24f7b4c6a2ca040184e
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e52.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e53.gif b/manager-admin/src/components/ChatApp/images/e53.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8c49e0e34684aa988eaa5dc0ecbc1040a4c99315
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e53.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e54.gif b/manager-admin/src/components/ChatApp/images/e54.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b65ad4d08bc7ecae5ddbf95ef643fd2cfc6bd693
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e54.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e55.gif b/manager-admin/src/components/ChatApp/images/e55.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d90fbb7077001bb7f82e707d9c07873a90e1b9e5
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e55.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e56.gif b/manager-admin/src/components/ChatApp/images/e56.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8e3fa4d81b066ca36a92e8ac60da4463d1a023f4
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e56.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e57.gif b/manager-admin/src/components/ChatApp/images/e57.gif
new file mode 100644
index 0000000000000000000000000000000000000000..32beb40d5ca900cc766310dab400a387720dfb17
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e57.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e58.gif b/manager-admin/src/components/ChatApp/images/e58.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f34ab3414d5fa4f0fc2a006b56a057c2fd18aacc
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e58.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e59.gif b/manager-admin/src/components/ChatApp/images/e59.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6c23b256e9d6b94e13ac9c88f234ab2da4d167d3
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e59.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e60.gif b/manager-admin/src/components/ChatApp/images/e60.gif
new file mode 100644
index 0000000000000000000000000000000000000000..dc7931c9101b8f674aef3fb3b99052fbfe650112
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e60.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e61.gif b/manager-admin/src/components/ChatApp/images/e61.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e9e6d3567a21c6f507969305accaf4d4e90993a3
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e61.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e62.gif b/manager-admin/src/components/ChatApp/images/e62.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a360e0ba2f78f832b6076362ca84e00b0d6d5f73
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e62.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e63.gif b/manager-admin/src/components/ChatApp/images/e63.gif
new file mode 100644
index 0000000000000000000000000000000000000000..768df9188039f9d408de13a26cf9c7ceec0607a1
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e63.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e64.gif b/manager-admin/src/components/ChatApp/images/e64.gif
new file mode 100644
index 0000000000000000000000000000000000000000..aa1f2adad451559a920e3715a74074c87f1f4419
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e64.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e65.gif b/manager-admin/src/components/ChatApp/images/e65.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f0bcda2f4e41bfd5fb70fdd13883ad8c43defdc9
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e65.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e66.gif b/manager-admin/src/components/ChatApp/images/e66.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c824ee08d875e9185346aa587144e6f3a4f4b737
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e66.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e67.gif b/manager-admin/src/components/ChatApp/images/e67.gif
new file mode 100644
index 0000000000000000000000000000000000000000..65d9ad03ee6c12e170ec61f747911b913e3f966f
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e67.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e68.gif b/manager-admin/src/components/ChatApp/images/e68.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0f599f665175d15471cb94987c99a31e0824ed8f
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e68.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e69.gif b/manager-admin/src/components/ChatApp/images/e69.gif
new file mode 100644
index 0000000000000000000000000000000000000000..46c30b3f8ee749b570d8cf99e155dae332c21b47
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e69.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e70.gif b/manager-admin/src/components/ChatApp/images/e70.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0bcd24aaa435cd4b5c76764df7e1abfe2d335d7b
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e70.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e71.gif b/manager-admin/src/components/ChatApp/images/e71.gif
new file mode 100644
index 0000000000000000000000000000000000000000..922e968445f92788a541e9fc374ffd4fe2372bb9
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e71.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/e72.gif b/manager-admin/src/components/ChatApp/images/e72.gif
new file mode 100644
index 0000000000000000000000000000000000000000..318e7e30ad3d70a9ff450330e597ba2d8d6b881c
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/e72.gif differ
diff --git a/manager-admin/src/components/ChatApp/images/emojis.gif b/manager-admin/src/components/ChatApp/images/emojis.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0a964cb842e93bb242ea1e7fccc7f5793f852d4d
Binary files /dev/null and b/manager-admin/src/components/ChatApp/images/emojis.gif differ
diff --git a/manager-admin/src/components/ChatApp/message.mp3 b/manager-admin/src/components/ChatApp/message.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..1c0f556ea56cd3fd9931f22cc454c0a7f62b21b3
Binary files /dev/null and b/manager-admin/src/components/ChatApp/message.mp3 differ
diff --git a/manager-admin/src/components/ChatApp/platform.jpg b/manager-admin/src/components/ChatApp/platform.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f7e5e0bb460c0a389cf3ece7db6b20fcc06cf82e
Binary files /dev/null and b/manager-admin/src/components/ChatApp/platform.jpg differ
diff --git a/manager-admin/src/components/ChatApp/styles.scss b/manager-admin/src/components/ChatApp/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..361e886cb0d1a54bac138383de7a51fb3bf86db4
--- /dev/null
+++ b/manager-admin/src/components/ChatApp/styles.scss
@@ -0,0 +1,713 @@
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-app {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: #2e2f3c;
+
+  .chat-container {
+    display: flex;
+    box-sizing: border-box;
+    width: 1130px;
+    height: calc(100vh - 60px - 90px);
+    min-height: 560px;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+}
+
+.left-chat {
+  width: 250px;
+  flex-shrink: 0;
+  border-right: 1px solid #E7E7E7;
+
+  .user-info {
+    box-sizing: border-box;
+    padding: 10px;
+    background: #FF534C;
+    background-image: -webkit-linear-gradient(
+                    229deg, #FF534C 0%, #FF3737 100%);
+    background-image: -o-linear-gradient(229deg, #FF534C 0%, #FF3737 100%);
+    background-image: linear-gradient(
+                    -139deg, #FF534C 0%, #FF3737 100%);
+    height: 104px;
+    border-top-left-radius: 5px;
+
+    .face-user {
+      display: flex;
+      width: 100%;
+      height: 50px;
+
+      .img-face-user {
+        width: 50px;
+        height: 50px;
+        float: left;
+        border-radius: 4px;
+        overflow: hidden;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+
+      .info-user {
+        margin-left: 10px;
+
+        .name-user {
+          font-size: 18px;
+          color: #ffffff;
+          letter-spacing: 0;
+          line-height: 20px;
+          width: 160px;
+        }
+      }
+    }
+
+    .search-user {
+      width: 230px;
+      height: 24px;
+      box-sizing: border-box;
+      margin-top: 10px;
+
+      .search-input-user {
+        outline: 0 none;
+        height: 24px;
+        box-sizing: border-box;
+        line-height: 24px;
+        width: 100%;
+        border-radius: 4px;
+        border: 0;
+        font-size: 12px;
+        padding: 0 5px 0 30px;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAV5JREFUKBV9kj9LA0EQxWfu/PsBUqW2sBEkV0UUWy0SLbz4h7MQS/0I2ohfwUoRiUbdJsbA9RZWYnoRbFMpdokm2XHeYiTeiVscu7Pvx+x7c0yJZUw927IyzSTjIzTcKJUWXphZBmXcPxgTZ1q9zyMtzBLJgxC3dZ/T+yb7vBWFxae+1kEA2t2PBrN3OjmRPQiCoNMXlK9utsXKoT9Eixvh8iPqHj6ugwLRWnF/EMBdtLp0zOTvdnt8FsfxKGoePOBJ6IDCXytaLxjVvL2+d+Zw78E0PCQ7pGChe2LKOwgpEXErJUoUNMG2JWsdhFh1EyQ0qaOQDTSoZwdhDrppIqWU8rtwfl2b0ddMjXmZmoMwOMwBsZYrt2ESBGCtVNTPSRjmnQ03JwgvTDWHWJESqWl4wJPQAYCI7LDvr2yGhbsfCCDm4GLVlGAaHvAkdChfVuc1BQPwFwTwvwVQf8K9L37ijplLBzcAAAAAAElFTkSuQmCC') no-repeat #ffffff 10px 5px;
+      }
+    }
+  }
+
+  .friend-list {
+    width: 100%;
+    height: calc(100% - 104px);
+    overflow: hidden auto;
+
+    .friend-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      height: 40px;
+      padding: 10px;
+      font-size: 13px;
+      user-select: none;
+      background-color: #F2F5F9;
+      cursor: pointer;
+      transition: all ease .2s;
+
+      &:hover .icon-delete {
+        display: block;
+      }
+
+      &.active {
+        font-size: 14px;
+        height: 50px;
+        background-color: #D2E6F9;
+
+        .face-friend {
+          width: 30px;
+          height: 30px;
+        }
+      }
+
+      .face-friend {
+        width: 20px;
+        height: 20px;
+        overflow: hidden;
+        box-sizing: border-box;
+        background-color: #fff;
+        background-size: 100%;
+        background-position: 0 50%;
+        background-repeat: no-repeat;
+        transition: all ease .2s;
+      }
+
+      .name-friend {
+        display: inline-block;
+        margin-left: 10px;
+        line-height: 20px;
+        width: 120px;
+        color: #1C2229;
+      }
+
+      .unread-friend {
+        position: absolute;
+        right: 50px;
+        font-size: 12px;
+        border-radius: 2px;
+        display: inline-block;
+        padding: 0 4px;
+        line-height: 16px;
+        color: #ffffff;
+        background: #F23030;
+      }
+
+      .icon-delete {
+        position: absolute;
+        display: none;
+        right: 0;
+        width: 50px;
+        height: 100%;
+        background-image: url('./icon-close.png');
+        background-size: 12px 12px;
+        background-position: 20px center;
+        background-repeat: no-repeat;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.right-chat {
+  flex: 1;
+  height: 100%;
+
+  .head-right {
+    width: 100%;
+    height: 60px;
+    background-color: #fafafa;
+    position: relative;
+    border-top-right-radius: 5px;
+
+    .wrapper-head {
+      display: flex;
+      box-sizing: border-box;
+      margin-left: 10px;
+      padding-top: 10px;
+
+      .face-head {
+        width: 40px;
+        height: 40px;
+        border-radius: 3px;
+        overflow: hidden;
+        background-color: #fff;
+        background-size: 100%;
+        background-position: 0 50%;
+        background-repeat: no-repeat;
+      }
+
+      .info-head {
+        box-sizing: border-box;
+        margin-left: 10px;
+        padding-top: 3px;
+
+        .name-info-head {
+          font-size: 14px;
+          line-height: 19px;
+          color: #343036;
+          position: relative;
+        }
+
+        .desc-info-head {
+          color: #a1a6af;
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+
+  .body-right {
+    position: relative;
+    display: flex;
+    height: calc(100% - 60px);
+    .chat-right {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      background-color: #fafafa;
+      border-right: 1px solid #e7e7e7;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 1px;
+        background-color: #e7e7e7;
+      }
+    }
+
+    .actions-right {
+      width: 330px;
+      height: 100%;
+      box-sizing: border-box;
+      flex-shrink: 0;
+      .tabs-actions {
+        display: flex;
+        box-sizing: border-box;
+        width: 100%;
+        height: 42px;
+        background-color: #F8F8F8;
+      }
+      .tab-actions {
+        flex: 1;
+        box-sizing: border-box;
+        height: 42px;
+        line-height: 42px;
+        border-top: 2px solid #F8F8F8;
+        border-bottom: 1px solid #e7e7e7;
+        text-align: center;
+        color: #5A606B;
+        font-size: 12px;
+        cursor: pointer;
+        user-select: none;
+        border-top: 1px solid #e7e7e7;
+        &.active {
+          background-color: #fff;
+          border-bottom: 0 none;
+          color: #F23030;
+          border-top: 2px solid #F23030;
+        }
+      }
+      .content-actions {
+        height: calc(100% - 42px);
+        border-bottom-right-radius: 5px;
+        overflow: hidden;
+        position: relative;
+        .tab-actions {
+          cursor: auto;
+          margin-top: 20px;
+        }
+        &>div {
+          height: 100%;
+        }
+        .tip-load-more {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 40px;
+          margin-top: 10px;
+          cursor: pointer;
+          font-size: 14px;
+          transition: all ease .2s;
+          &:hover:not(.disabled) {
+            background-color: #D7D7D7;
+          }
+          &.disabled {
+            cursor: not-allowed;
+            pointer-events: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.list-chat {
+  flex: 1;
+  overflow: hidden auto;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background-color: #fff;
+  .load-more {
+    font-size: 12px;
+    color: #5a606b;
+    text-align: center;
+    margin-bottom: 12px;
+    cursor: pointer;
+    user-select: none;
+    &.no-data {
+      cursor: not-allowed;
+    }
+  }
+}
+.scroll-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 130px;
+  right: 20px;
+  cursor: pointer;
+  color: #ffffff;
+  background-color: #81d4fa;
+  padding: 2px 10px;
+  border-radius: 3px 3px 0 0;
+  animation: scroll-tip 1s;
+  animation-iteration-count: infinite;
+  .scroll-tip-icon {
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+UlEQVQ4T6WTsS4FQRhGz+koNXgGXsITKEkUQiFBFAoJHToqOiqiIfEQEo9Do9Mgn8zN7s26d+/aMO3Mf/LNd2bkn8syn2QJ2FVX+vCSnAJP6vMAUEGOgcXfIEnOgXe1QBgC+kCSXAJv9fAYoAuS5Bp4UUvS4fqRoHGdE2Chvk6SW+BVPRztqBVQJRlAgM9qeL+t4ImACvIITKnLk+w0Ne6oqz01lj4eRjXel7jqehekMjGrrrVpvAG+1K02SJIzYE7drPfHOkhyVUH2mpAkpdR5dbuPxosKctB4GzPqmIkujSVuUfgBTKtHf9F4V/6autGpsY+6SWe+AcvmbxFKjVd0AAAAAElFTkSuQmCC');
+  }
+}
+@keyframes scroll-tip {
+  0% { opacity: 1 }
+  25% { opacity: 0.9 }
+  50% { opacity: 0.7 }
+  75% { opacity: 0.9 }
+  100% { opacity: 1 }
+}
+.input-chat {
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+  width: 100%;
+  height: 130px;
+  padding-bottom: 10px;
+  background-color: #ffffff;
+  border-top: 1px solid #e7e7e7;
+  user-select: none;
+  .toolbar-input-chat {
+    box-sizing: border-box;
+    height: 32px;
+    margin-bottom: 5px;
+    padding-top: 12px;
+    padding-left: 20px;
+    width: 100%;
+    .btn-toolbar {
+      display: inline-block;
+      height: 20px;
+      width: 20px;
+      margin-right: 18px;
+      cursor: pointer;
+      background-size: 100%;
+      background-position: center center;
+      &.emoji {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEN0lEQVRYR8VXbYgUdRj/Pf/d2yPiIvwiHYdEaPRGBZWgvdyZUh2cZB9WyBBud7ydwRRnpquoL15fsux2Z8K4m532DSQkhQoTFNS8+5BSdEKI9iFDKbgQAi3rort2nph199zdm5l9acH5+v8/z/N7Xv6/5zeEW/zRLY6PpgG8snPnHZEFsQZM/UTUT0zLAV5+IwG6wsRXmHkaxNPzXc6ZT/bt+6OZ5JoCIMnadgd4k4AVIJyGw8cZmIUQs6UgjtNLwF0Q9BwYawFcBvE7OcssNAIRCGBsbCz88+y1wyAaBCNJYVjZCeNikFNpu7aS/4UCwmsAFbpFRJ+cfO+qn40vgLiibQbjUwBnCfRGNp062Sib6nNJ1tczeC+AXiHEUGYyOeNl7wkgpuhDxPwlgGO5tDHYSuD6u3FZOwrgBQ7RivxE6pf68yUAJEVbzYxvCPgwmzbU/xO8YivJmukwP9WFuWds256r9lkDIBqNRnqW9Z0BcDWXNjZ0InjFR1zWThDRpayVGvEFIMn6KIM/INCGVnveCGx5Jk4I4vUZy/yqcn+xAsPD6p2im865g5ezjdFGDts5jye0cQhalbNSLy4BICXUTUz0uSjyA5mM+YNXgLiivXRd/HP80MTEn34AYoq2I28ZH3mdb9um3u+E6AJDPJhPJy+UKOxmj3SD2Xk6b5uPexkPK+qAYDrFwFQ+bazzAXgQjKhDvK5gmVNed2IJ9TsCjuRsc6wWgKJ97TJc5aDeuBkAMVk7RcBAEIB4Qt3tMmbOMp6sASDJ+kWHnb1527TbrYAka4cZ2NigAglBwiW2lXUAtOsO0ct5K3XEC8DWraO3d91WVJjEbD6dPOB1Z2REv7dIvHHh75C1f//4X54tUPQhwXwgmzZ6WgLQztS3CCC4BR0DkFC9WxBvMISdAuA7hDFZfdcVGpXprA7oTncX8xbbNn9tFohrA4hXK+998bmXEsVnOdtI1sxATNn1PLE4RiGsqt75ledHwPls2nioEYAbjCoMAj/hQGyuBlDSCkX8WB1jkYhcydU9Hz7vRcVSQo8y8UEC/eQQVL+X4rIpiHYzQAyxZUn2QVTsZha0jOKyugZEmst0AL4H8xc11SDaBOARAB+HWbxt28nfqs8bLiP3ctU6Ri5tPBZASFEC1jJwd7mPlxk47RAf8qPguKzNENHZwHVcqkJ5KXVCDd3cMyVVdF+YI4/a9vu/VyfmKcniCV0FsdEJVeSqIQZ2OYyHC7Zxrr6qvqI0pqjPEpMrRE8SaE+rAqXc87cA9IliaDCTGb/k1dJAWR6NRkM9y/r2AHjdleXC4ayfVqg4L+18QVJFli/MiR1+e6GGB4Led1miu0DuYeYZd597/Jj0MjBERO7wdubHpBqUSzChCAaYRD+IV3v9moHpW2JnujiPqULBvNaItJquQDOO2r3T1L9hu86bsfsP7xgMP+VrC84AAAAASUVORK5CYII=');
+        &:hover {
+          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEK0lEQVRYR8WXXWhcRRTH/+fOJo1N9yZV8CNIEGmlRsnMRm1p/WhqizaQon1IwL6KUrRg/Kroi/pioVqq4ENRhL6VVlCpBQttbPJgS6x3d26WxAcrLQhVQcl+NCW1vXNk2t1ls7n37iZd6IX7NOfM+c3Mmf85Q7jFH93i+GgY4N9169zE3Nx6ItoIwP53lX67hr9L/zgzj19raztzx8REoZHFNQSQV+oVB3iHgW4Apxk44TBfdICLNogBukB0DwPPANgA4AKAD12tD9aDiAXg/v5EIZc7SsCAYd7XJsSBtnT6XNykc319q+aCYKdD9CaAgyYI3ujMZmeifCIBilIOM9FhIkoHwO7OTGa03mqqx3Op1GYB7GVjuowQg53ptBfmHwowK+VgQPQ9mI+7vj+wmMC1tgUpfwDR1kRLS/fys2f/qB1fAJCXci0RTRDwWVLrkZsJXvYtKvWpYX5iNpF4qsvzLlfPOQ9gqqentXvZsjMwZibp+1uaEbwCIeVJJjrvav1SJEBBqbcAfGyItiz2zOvB2pxwmE+S42xOptM/lu0rOzCjVGcCyAbMhzt934I0/ctJ+YlDtNrV+rkFAAWlngfwLTlOTzKd/jUsekHK7XNXr564c3r6UhRdXspdHb7/edh4sa/vQTZmmogeSmYy09amsgNFpfYb5ic7fP/RMOcZpfoFcArAmKv1plBApY4AGAqATSu1HguzyUv5C4iOdWj9wTyAglI/WYUrD9Q6NwhgAfvjAIpKvW8V09X68VqAc8S8N+n7Xyx5B1Kpo2DeFgsg5ctMtNvVelUtQFEwv9Du+8fCAP7q7W1fLsROq/8rMplDETnyABxn2+UgOHD35ORsmE1J5A65WicXBdCsKxEHEHsEzQIoxhxBbBI2DSAmCT+yjUY5O6sDFpQ6JYTY0e55fzYKYn2I6NXyfS/72dsGom/cTGbfvBzIS/ksER1vdZzV1TW/fP0ImEpq/XA9AKuoAthPwGMgGq4GsL3Cf8b8Vh2jIkS25Wq9cmUqTIqLSg0xYEXmd8E8EnVTrJoSYO85EdGO2tXHSrFdWVwxKqRS68H8ulU6AD4D31XvBgFWyiWALyHEe67n/VM9XrcYWeNKOQaQzGQeiRIkBxhygA0M3Fc6xwsGOG2Ar6MkuJhKecycji3HpV24XpSa0Q1VEu9GV7TmmhDqds/L1+zcwnVeUmrE3Eikm+6KbDfEwGtOEPSuyGaztdGim9Le3qfZcUaJeTRwnD2LbVCuN6XGvMtE97YYM3Db5OT5sCONbcuPAGKrUnsAvG3bciHEV1G9QnlyW/ODIHix3JYnjdlFEXVhng7E3e+clMMOkQW5n5k9W89rHyaGqAvMg0Rkk7c5D5NqqJLA9BOwkYG1YU8zAn5mYDwAxlZqnasnWg3vQCMTLdWmobfhUidvxO9/UIn7MJ8VO5EAAAAASUVORK5CYII=');
+        }
+      }
+      &.image {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADEElEQVRYR+2XT2gUdxTHP28iXlICYhEPRUgPHnISIljSFtdDoD21BbVpg+DONjsrEtmxLaZIzaaHpErMjLE0u5PsbLQlbVMQESFFCiYQD0LF0j+XUkopldD0Ui+hocm8Mptu3Kwms1U3XvK7Db/f773P+77f+/3eCE94yBP2zwbAfQocTqVjtUpLnSG/5z92fi63vwyQ6LDb1JDXQV+tFUDRrjBBgOt7zrWlz/+GadkTwEuo2oHBt7WAMAJ2IeIAN/2c81wlgIJ+5ufcN2vh/F6g6TGQN/ycUwy+XAFFtcf33ExNAZLpbkQyVQOYxQ3GLtBZVb1V8FzvUQCX7FUJYKbscZQDIKOCtijsFJWDeW/gy4eFiFv2KYGeSAUSyeMHVHTcMIzdI0Nnb4UOTev4IGinbl7YVjh//s+HgagaIJRKRWKFnLOv3JFp2RqI7hvNupNRAImO9KFF+H502F2uKjOZfh+RDyIVMFPpdlQ+DUQbR7Pur+UKLAjPXMw6d9YCMC17Gnh+aY24/4jR90m2f7ZqgHBbwrJ/UKhHtAeVPUAqqlJimcymZ2fuzgBPo7yH0AzsB/4SyKhqQ1UKlKJLWPYVhReBWWDSzznWapHHrbebhODHYsxKe95zxorKJY+9gFF3GqWltDcyBVH5rZw3U/ZrKJdA/kal1ffOhilYMRIpu00DehEaHyuAmbS7EPoEfqrTxVbPG/xtdZXs6wKxqgHCw6gqb4nq1CbmznieN1dRFT4QR/jazzqtUcrFrSoB4pb9iiC9oE1lRn9RwSlknY+KuU3ZN8K8ioifzw4kopyH85EAqExj0AfsDjco0l/IDbxrWvaHwFHgKeA26A6QrVFVUQm1NoAwhbK3eIqFC7IQnBgZOfdHyciRI11b5nX+HRQT2K5gFnJOoZrIS2vWBli6NK4ahnFyZKj/u9UMt3d2NtTP19V7nhvW+/8akSmo9XMcoUDtG5J4Mv2NiDQ/qAzXoyWLIdINfOXnnJeLCV++cterKUUuS6Bf5Iedz1cAlEBq2ZaHPiqf8Y0/ow0F/gUYerIwQIh3JAAAAABJRU5ErkJggg==');
+        &:hover {
+          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADA0lEQVRYR+2XT0gUcRTHv2/Wg+XurFZERAReOgg6v0HB6A+tB6FOFWRZ0iELCqJDUFSE/zpoRZBEpw5WEFYGEREYEaRgh6DZ/c1ml4iIKCIj2pmh6LDOi1lnbVXcWa3Ni7/bMr/3fZ/f+74381vCAi9a4PxYBJhRge9CxIplyxJF+Vgaj7/N1Z8EsGpqmklR9gDYUSwAX3fQZe4tN80n3u9JAFvTBkG0lYHjLiCLAaEAgoDLAF6oUq6fCiAEM3A7KuW+YiTPalpC9BOwV5Uyc/g/FZgA6IpK2VlMAEeIDgY6CwbwAwSAMWI2IqZ57W8ALSE6qFAAW4gBAE0AbgDYAGAdAbsjUt6bL4Sj6+3M3BVYAUeIJgYGXEWpK4/HDS+hpWlXiOgYEa2MJBJf5wNh6Xo7FQjgeRVTpWzITWQLweNAQ4WUQ0EAlqbtd4leVUg5OVWOrrcx87nAClhCtBBwaxyorJDyfW4FSpjXLDXNT/kAbCFGAGz0O70XrtsTSSbHLE1rI6JgAC/QEWKUgTIAXcxcT0RHgiaFY7ESJ5X6DGAFiM6AuRbALgApr/vBrBYM4EHYuv4QzJu9KQAwpEp5eLaTO7pexcyvvecMtESl7M9oaNomEF3wGzkTHmhBkL/Tn9uathNE94noF7tuo2qangVTlqPrzS5zNwGV/xTA1vXTYO4B8CYdCjUuM4wPsx3AFuIZJpq7sDeh34yHGBj+EQpdXG0YP6dNRR+AAwQ8jUjZGFS5ggFsIbYD6AZQlSP6jpkvR03zasZbIZ5nfCXqUxOJg0HJ/Zj8FWCiEWLuIaDOF7ykSnnS1vXzzHyUgDADCQLWAlgeNBUzeiWfBQQMM7DFD7qppNOnwqOjX7IiqerqilAodIKZW0G0SmFuDZvm9UJOnt2T1wJ/0yNFUc6G4/HkbMLf6uvV0nS6rMwwvHmf0yq4B+akOofNQQDFv5Bo2ksiqp05hv/nShYjoAPMj1XT3OYVbiEupQ/Yde9Gk8k7UwCyNhbzWu7lmP4ZX/xntFiB3z50qDDaMeWTAAAAAElFTkSuQmCC');
+        }
+      }
+      &.video {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACLElEQVRYR+2XsW/TQBTGv3dRV8TSiYkVdWKllcLIxIDahYW6IokQkZJWzHFGBMRuKyA2zZUFoTZCCITYkAoUCQaY+i8wZUGsVe+hc3KRbcU4UZx4aSbr+fnez993efdMyPlHOdfHOcBIBW5XqxcWTgtXs7TndOHs16vd3b/xNSMAG5XaNTA9YOBmlsXNWgS8A/GjTtv9For1L63S1jJIfWXmnwLiIRMfgrmpBI5MsgDdA2OVmNbOhOrpeEGJxSCX0FXgZ0kxAi2BcYuAIlisSP/Jsc4dKmCV6zpwSXrOZX1jo7S5aiCk79oGwqrUDw1Ex291I7mErmw7a0mxIF6unzDwR3rOchygB9AH6bXWTbEQhC19t5kFhFWqNUB0X3rOYhyA45JH5GS2lcDnae0QCkUQNaTnBOqHLeBZbLykNUcDMDfDfs8CaGCBnQQQ8XpGAHayBcy5A4xlwZ1KrajVedl2hz1iXLXSLEgFsO7WbkDQx35B/gIiV7adt/MD6P+PbUV8nZgaurMx+KAghLv3vPU9DWR6BQYAZhdrOwyIhkqzJQuAyC5eL29dIVK2bs9zB7DKmzsAVwF6zSy29/3HP+ZhQaDAoNAnKLUjX2y/Tys8PEdiFkZb8ZidUPvIwO99390bt3CmAJMWDef/bxP2wPx0TmfByOP4mICLHc9ZmuYN055NHkjMSAYcgfCGwSdpi01yP3UkC8alPIfS8NvkNpZPImlWueefZrkr8A/F7bUwWMH7EAAAAABJRU5ErkJggg==');
+        &:hover {
+          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACHUlEQVRYR+2XsUsbcRTHv+9SEIT8rBQnp64i5JcuDlWIY6cOEndXsWPnxLF0UaGduheVUiqlW8GqhWZofBH/hU5S2iSToPfkhfvZ63HxLuSSW7zx3ct7n9/3+7vf74WQ80M598c9QKwCvxcWjHd5+SRLe/yJieajRqMTrfkfQMfapwBeAnieZfNQrU8AXhvm7y52C9AplRZBdCwiPz2iVwLsCbDpA4cuuQCsA6gSsHoFXGj8ATCjuQD2r4G3/WKeyDwRrQCoQGTJtFonmvsPwFoNzBrmx/qia23VQUwx1x1Ex1pt1oMoMu+HcxXCMK/2iwXxcwH+GubFKICu6LNhXnPNHAQB9SLzZhYQXWtrAmwY5pkogEQlD8upEFfAt2Ht8IAKATXD3FM/bIGMaOPFlo0FUAXCfo8CKLCgHgsQ9XoUAG1r630tyB0grQV/rK2oOtPMt2dEWrXutCANQLtcfkYiX4KGRxDZMq3Wx7EBuBVcA8sFoKYnmxDtgmhrqtn8kQQytALRAmqHA1GoJFuGBoju4m65PCcielRXxw7QLpV2iOgFAe8Lvr89eXbWGLkFToHeMSryVTxvx5yeHiQ1Dt0vehfEH0RpvoLgRtMivwzzu7SNMwUYtGk4/65NeCHAmzHdBbHX8QkBD4vM88OsMOm3XWv7DCTBSAbgUEQ++ETnScUGeZ84kmmxXIfS8GpyG8sHkTSr3Pu/ZrkrcAM57IgwdHU3jAAAAABJRU5ErkJggg==');
+        }
+      }
+      &.audio-text {
+        width: auto;
+        height: 20px;
+        color: #0d58ef;
+        font-size: 12px;
+      }
+      .btn-toolbar-input {
+        display: none;
+      }
+    }
+  }
+  .textarea-chat {
+    position: relative;
+    width: 100%;
+    /deep/ .emoji-img {
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      margin: 0 1px -2px;
+      vertical-align: bottom;
+    }
+    .textarea-input {
+      box-sizing: border-box;
+      width: 100%;
+      height: 56px;
+      padding: 0 19px 0 19px;
+      margin: 0;
+      outline: 0;
+      border: none;
+      background-color: #fff;
+      color: #252525;
+      font-size: 13px;
+      font-family: inherit;
+      word-break: break-all;
+      white-space: normal;
+      overflow-y: auto;
+    }
+  }
+  .send-chat {
+    display: flex;
+    justify-content: flex-end;
+    .send-btn {
+      position: relative;
+      user-select: none;
+    }
+    .btn-send {
+      box-sizing: border-box;
+      height: 26px;
+      padding: 0 12px;
+      line-height: 26px;
+      border-radius: 4px;
+      text-align: left;
+      font-size: 12px;
+      cursor: pointer;
+      background: #ffffff;
+      color: #343036;
+      border: 1px solid #d9d9d9;
+      width: 60px;
+      margin-right: 10px;
+    }
+    .send-btn-arrow {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-top-color: #666666;
+      border-top-width: 8px;
+      position: absolute;
+      left: 43px;
+      top: 10px;
+      cursor: pointer;
+      border-radius: 2px;
+      &::before {
+        content: "";
+        position: absolute;
+        top: -20px;
+        right: -12px;
+        bottom: -10px;
+        left: -6px;
+      }
+    }
+    .send-keys {
+      position: absolute;
+      top: 28px;
+      right: 10px;
+      width: 120px;
+      height: 60px;
+      margin: 0;
+      padding: 0;
+      color: #343036;
+      font-size: 12px;
+      background: #FFFFFF;
+      border: 1px solid #D9D9D9;
+      border-radius: 3px;
+      overflow: hidden;
+      cursor: pointer;
+      .send-key {
+        position: relative;
+        height: 30px;
+        line-height: 30px;
+        padding-left: 5px;
+        letter-spacing: -0.29px;
+        &:after {
+          content: "";
+          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABm0lEQVRYR+2Uv0scQRiG36cQETxIYSEoWKSwMqBiYWGRwkKwsEqTYCFYCBaCoCCICoKFIKQ4SBGwEBXif5C/xkYbS0GwemVgDs69uf1xcbki95W7M/s8+843H+pz0We+BgKDBP6PBGyvSXoB/mZvXa0J2J6RdClpPoKvgR/tErUJ2J6VdCtpOvPXk8BD61ktArYXIvxzBv4ITNSagO3FCJ9KTNkT4LiUgO0G8FxlVNteivB3fxm/cQicFjah7SNJLcsmsF1GwvZXSTeSxhPrD4Cz1Hc6esC2MwvvgG95EraXI3wssW4POO+2/52A7WFJT5IaZSVsr0T4pwRkF7jIk08l0H4E7Xs7krC9Gs98NAHZAX4WHV/yGmb6ICkRp1s485EEZBtoFsHD+65zIE9C0p8Y+1ACsgX8KgPPFQgvcyRCo6bkN4HfZeGFAlEiXMnQF0W1AYS5X6lKjWLbRRLrwFUlclxcSqAgie9AaMaeqrRAQuJe0j4QGrLnqiQQJb5Imgv3H3jtmVz1CP4V1G1/5QQ+WmQgMEig7wm8AQvveyEZQOAjAAAAAElFTkSuQmCC');
+          background-size: 100% 100%;
+          width: 12px;
+          height: 12px;
+          float: right;
+          margin: 10px 4px 0 0;
+        }
+        &.active {
+          background: #F23030;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+  .emoji-chat {
+    position: absolute;
+    top: -225px;
+    left: 5px;
+    z-index: 2;
+  }
+}
+
+.history-actions {
+  overflow: hidden auto;
+  background-color: #FAF9F9;
+  padding: 10px 0;
+  box-sizing: border-box;
+  .history-goods {
+    position: relative;
+    width: 100%;
+    height: 67px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    & + .history-goods {
+      margin-top: 20px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: -9px;
+        left: 10px;
+        width: calc(100% - 20px);
+        border-top: 1px dashed #d7d7d7;
+      }
+    }
+    .history-goods-link {
+      display: flex;
+    }
+    .history-goods-image {
+      width: 60px;
+      height: 60px;
+      border: 1px solid #F2F2F2;
+    }
+    .history-goods-name {
+      display: inline-block;
+      vertical-align: top;
+      padding: 10px 0 0 10px;
+      width: 214px;
+      height: 38px;
+      font-size: 12px;
+      line-height: 14px;
+      overflow: hidden;
+      box-sizing: border-box;
+      text-decoration: none;
+      color: #5A606B;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .send-btn {
+      position: absolute;
+      top: 40px;
+      left: 82px;
+      border-radius: 2px;
+      font-size: 12px;
+      display: inline-block;
+      padding: 4px 11px;
+      line-height: 15px;
+      border: 1px solid #D9D9D9;
+      background-color: #ffffff;
+      color: #343036;
+      cursor: pointer;
+    }
+  }
+}
+.orders-actions {
+  overflow: hidden auto;
+  background-color: #FAF9F9;
+  .item-order {
+    font-size: 12px;
+    padding: 0 10px;
+    color: #5a606b;
+    line-height: 17px;
+    margin-bottom: 10px;
+    background: #ffffff;
+  }
+  .title-order {
+    display: flex;
+    justify-content: space-between;
+    padding: 18px 0 8px;
+    border-bottom: 1px solid #f2f2f2;
+    letter-spacing: -1px;
+    .date-order {
+      color: #a1a6af;
+    }
+  }
+  .products-order {
+    cursor: pointer;
+    .item-products {
+      display: flex;
+      padding-top: 11px;
+      border-bottom: 1px solid #f2f2f2;
+      padding-bottom: 15px;
+    }
+    .image-product {
+      flex-shrink: 0;
+      width: 80px;
+      height: 80px;
+      border: 1px solid #f2f2f2;
+      box-sizing: border-box;
+      .img-product {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .info-product {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-left: 10px;
+      font-size: 12px;
+      color: #1C2229;
+      line-height: 20px;
+      .name-product {
+        height: 40px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        cursor: pointer;
+      }
+    }
+  }
+  .other-order {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    .price-order {
+      font-size: 12px;
+      margin-top: 2px;
+      .price {
+        color: #f02b2b;
+      }
+    }
+  }
+  .status-order {
+    border-radius: 2px;
+    font-size: 12px;
+    display: inline-block;
+    padding: 4px 11px;
+    line-height: 15px;
+    max-width: 80px;
+    text-align: center;
+    color: #f23030;
+    background: #ffeded;
+    &.send-btn {
+      border: 1px solid #D9D9D9;
+      background-color: #ffffff;
+      color: #343036;
+      cursor: pointer;
+    }
+  }
+}
+
+[contenteditable] {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+.history-actions.is-seller {
+  padding-top: 48px;
+}
+
+.search-goods {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 48px;
+  padding: 5px 10px;
+  background-color: #ffffff;
+  .search-goods-input {
+    width: 100%;
+    height: 100%;
+    outline: none;
+    padding: 6px;
+    border: #ccc 1px solid;
+    box-sizing: border-box;
+    color: #333333;
+    font-size: 13px;
+    border-radius: 4px;
+  }
+}
diff --git a/manager-admin/src/components/ChatEntry/index.vue b/manager-admin/src/components/ChatEntry/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0520a8b2769c98575f62ae80a17dc85bc2ae2a8e
--- /dev/null
+++ b/manager-admin/src/components/ChatEntry/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <router-link to="/chat" target="_blank">
+    <div class="chat-entry">
+      <svg t="1620782635756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+           p-id="13095" width="32" height="32">
+        <path
+          d="M520.97536 806.21056c4.72064 0 9.51808-0.2816 14.35136-0.86528 46.336-5.55008 85.67296-37.93408 100.1984-82.57024a6.85568 6.85568 0 0 0-3.6864-8.38656c-3.16416-1.46944-6.9888-0.19456-8.77056 2.80064-0.17408 0.29184-18.58048 30.01856-90.24512 39.69536a233.1904 233.1904 0 0 1-31.0528 2.19648c-50.21696-0.03584-72.59136-18.95936-72.79104-19.12832a6.8864 6.8864 0 0 0-8.97024-0.11776 6.92736 6.92736 0 0 0-1.43872 8.9088c21.85728 35.4304 61.0816 57.46688 102.40512 57.46688z"
+          p-id="13096"></path>
+        <path
+          d="M906.3168 362.07616c-0.62464 0-1.2032 0.11264-1.81248 0.11264-41.98912-181.79072-202.43456-317.39904-394.79808-317.39904-197.6576 0-361.78944 143.09888-398.16704 332.41088-35.37408 6.36928-62.29504 37.4528-62.29504 75.05408v150.47168c0 42.17344 33.8176 76.37504 75.58144 76.37504 23.552 0 44.34432-11.11552 58.17856-28.20608 33.41824 88.38656 101.45792 159.67232 187.55584 197.25824 0.20992-0.44544 1.83808-3.61984 3.79904-6.13376 1.3568-1.75104 2.87232-3.2 4.17792-3.2 1.35168 0 2.59072 0.50176 3.65056 1.24416-19.93216-14.82752-91.91424-91.09504-107.49952-197.51936-6.84544-46.848 28.24192-92.8256 69.10976-100.43904 65.60256-12.2112 130.85184-26.12736 196.4544-38.10816 41.69728-7.6032 70.1952-30.48448 87.62368-68.57216 4.08576-8.90368 9.97888-26.9056 12.68736-52.864 0.7168-3.85536 3.88096-6.83008 7.936-6.83008 2.70336 0 5.00736 1.38752 6.52288 3.37408l1.81248-1.12128c25.856 37.53984 77.12768 120.65792 84.49536 208.29696 8.45312 100.1984 3.7376 168.832-72.96 239.04256-0.09216 0.08704-0.19968 0.19456-0.32256 0.2816a6.33344 6.33344 0 0 0-1.69472 4.3008c0 2.16064 1.15712 3.9936 2.82112 5.12 0.63488 0.26112 1.25952 0.60416 1.89952 0.86528 0.52224 0.11264 1.00352 0.29184 1.52064 0.29184 0.52224 0 0.97792-0.17408 1.43872-0.29184 1.09056-0.57344 2.1248-1.23392 3.19488-1.81248 77.55776-42.7264 137.0624-114.08384 164.55168-199.9104a77.57824 77.57824 0 0 0 48.80384 32.57856c-32.46592 147.68128-164.17792 240.10752-327.36256 254.13632-9.77408-24.24832-33.8432-41.48224-62.11584-41.48224-36.93056 0-66.8672 29.24032-66.8672 65.28 0 36.0448 29.93664 65.2544 66.8672 65.2544 29.76256 0 54.70208-19.12832 63.35488-45.39904 188.89216-15.36512 340.30592-127.63136 371.9168-302.07488 27.91936-11.66848 47.53408-39.07584 47.53408-71.05024V439.1424c0-42.55232-34.7392-77.06624-77.5936-77.06624z m-390.48192 586.43456c-1.67424 5.08416-6.87616 10.21952-14.72512 10.21952-8.64256 0-15.6672-6.30272-15.6672-14.0544 0-7.76704 7.02976-14.08 15.6672-14.08 7.48032 0 12.73856 4.73088 14.62784 9.4208l1.59232 3.95264-1.49504 4.54144zM509.70624 111.48288c166.85568 0 305.47456 121.63584 334.55104 282.08128-2.87232 3.86048-5.51936 7.89504-7.61856 12.24704-49.26464-133.44768-176.92672-228.7872-327.10656-228.7872-149.54496 0-276.74624 94.53056-326.47168 227.11296-2.46784-3.02592-5.376-5.61664-8.22272-8.23808 28.14976-161.56672 167.20384-284.416 334.86848-284.416z m284.92288 502.03648a1168.46592 1168.46592 0 0 0-2.2784-31.54944c-7.71584-91.78624-55.01952-177.38752-93.34784-233.03168 0 0-18.03776-27.65824-53.17632-24.3456-27.2896 2.57024-50.53952 21.30432-55.6032 48.64l-0.37376 2.00192-0.20992 2.02752c-1.9968 19.13856-6.14912 32.14848-8.2944 36.81792-10.63936 23.25504-25.67168 35.06688-50.27328 39.55712-35.20512 6.43072-70.68672 13.48608-105.00096 20.30592-30.05952 5.97504-61.14304 12.16-91.63776 17.83296-58.624 10.92096-103.46496 62.90432-110.76608 121.88672l-24.32-64.32256-56.1408 69.34528c-2.78528 3.44064-8.87808 9.216-18.3808 9.216-13.44 0-24.38144-11.29472-24.38144-25.17504V452.25472c0-12.19072 8.47872-22.56384 20.16256-24.66304l10.9312-1.96608 9.50784 8.76032c0.86528 0.79872 1.7664 1.56672 2.5856 2.41664l56.07936 68.74112 31.28832-83.42528c43.4944-115.97312 155.42784-193.8944 278.528-193.8944 123.79648 0 235.94496 78.49472 279.07584 195.31776l35.80416 96.99328-29.77792 92.98432z m138.0864-22.11328c0 10.37824-6.30784 19.73248-16.08192 23.808l-7.37792 3.08736-8.40192-1.72032a26.55232 26.55232 0 0 1-16.60416-11.01312l-35.42016-85.66784 33.91488-91.8272c0.18944-0.39424 0.8192-1.56672 2.59584-3.95264l7.97696-10.7264h11.19232c1.03424 0 2.05312-0.03072 3.07712-0.08704 13.97248 0.65024 25.13408 11.99104 25.13408 25.84064v152.25856z"
+          p-id="13097"></path>
+      </svg>
+      <i v-if="un_read_num > 0" class="chat-entry__badge">{{ unread_num }}</i>
+    </div>
+  </router-link>
+</template>
+
+<script>
+import * as API_IM from '@/api/im'
+
+export default {
+  name: 'ChatEntry',
+  data() {
+    return {
+      un_read_num: 0,
+      un_read_num_timer: null
+    }
+  },
+  computed: {
+    unread_num() {
+      return this.un_read_num > 99 ? '99+' : this.un_read_num
+    }
+  },
+  mounted() {
+    this.getUnreadNum()
+    if (this.$eventCenter) {
+      this.$eventCenter.on('IM', this.handleWebsocketMessage)
+    }
+  },
+  methods: {
+    /**
+     * 处理websocket消息
+     * @param msg
+     */
+    handleWebsocketMessage(msg) {
+      if (msg.type !== 'unread_num') {
+        return
+      }
+      this.un_read_num = msg.payload
+    },
+    /**
+     * 未读消息数量
+     * @returns {Promise<void>}
+     */
+    async getUnreadNum() {
+      this.un_read_num = await API_IM.getUnreadNum()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-entry {
+  position: relative;
+  cursor: pointer;
+
+  .chat-entry__badge {
+    position: absolute;
+    top: -10px;
+    right: -18px;
+    padding: 2px 5px;
+    min-width: 20px;
+    text-align: center;
+    color: #ffffff;
+    font-style: normal;
+    font-size: 12px;
+    background-color: #fa1313;
+    border-radius: 90px;
+    border: 1px solid #ffffff;
+  }
+}
+</style>
diff --git a/manager-admin/src/main.js b/manager-admin/src/main.js
index f7b2a3833388828dae9eeb43f85187e110ec49f4..113649a64c163cfc4da9d82b679e5f60c2ebd43b 100644
--- a/manager-admin/src/main.js
+++ b/manager-admin/src/main.js
@@ -10,6 +10,7 @@ import UIComponents from 'ui-components'
 import EnComponents from '@/components'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
+import Viewer from 'v-viewer'
 
 import '@/styles/index.scss' // global css
 import App from './App'
@@ -37,6 +38,7 @@ Vue.use(VueClipboard)
 Vue.use(UIComponents)
 Vue.use(EnComponents)
 Vue.use(VueAwesomeSwiper)
+Vue.use(Viewer)
 
 Vue.prototype.$echarts = echarts
 Vue.prototype.$http = axios
diff --git a/manager-admin/src/router/index.js b/manager-admin/src/router/index.js
index 590248b919a6885d1cd5da64c41e96a9f56a3130..a119f54c6d88f056cc8adbf7102b8f4ac9bf7e24 100644
--- a/manager-admin/src/router/index.js
+++ b/manager-admin/src/router/index.js
@@ -520,7 +520,11 @@ const asyncRouters = [
 
   { path: '*', redirect: '/404', hidden: true }
 ]
-
+const chatRouter = { path: '/chat', component: () => import('@/views/chat/chat'), name: 'chat' }
+// 如果开启了IM
+if (process.env.IM) {
+  asyncRouters.push(chatRouter)
+}
 if (process.env.DISTRIBUTION) {
   asyncRouters.splice(7, 0, disRouterMap)
 }
diff --git a/manager-admin/src/store/getters.js b/manager-admin/src/store/getters.js
index 28630bc6b34e25ab8bca22d353707ea4f1b338f9..3bfd0b5bf893513c9f4cde882c03e0680fef5703 100644
--- a/manager-admin/src/store/getters.js
+++ b/manager-admin/src/store/getters.js
@@ -7,6 +7,7 @@ const getters = {
   user: state => state.user.user,
   permission_routers: state => state.permission.routers,
   addRouters: state => state.permission.addRouters,
-  siteInfo: state => state.app.siteInfo
+  siteInfo: state => state.app.siteInfo,
+  permission_chat: state => state.permission.permission_chat
 }
 export default getters
diff --git a/manager-admin/src/store/modules/permission.js b/manager-admin/src/store/modules/permission.js
index c573f3b6347845cb02f7eb142c8bc22abf7e5b7a..f45c1b37afea2631ae4fc206b93bd78d06099c9b 100644
--- a/manager-admin/src/store/modules/permission.js
+++ b/manager-admin/src/store/modules/permission.js
@@ -5,7 +5,8 @@ import Storage from '@/utils/storage'
 const permission = {
   state: {
     routers: constantRouterMap,
-    addRouters: []
+    addRouters: [],
+    permission_chat: false
   },
   mutations: {
     SET_ROUTERS: (state, routers) => {
@@ -14,7 +15,7 @@ const permission = {
     }
   },
   actions: {
-    GenerateRoutes({ commit }) {
+    GenerateRoutes({ commit, state }) {
       let user = Storage.getItem('admin_user')
       if (!user) return Promise.reject()
       user = JSON.parse(user)
@@ -22,10 +23,14 @@ const permission = {
       if (user.founder === 1) role_id = 0
       return new Promise((resolve, reject) => {
         if (role_id === 0) {
+          state.permission_chat = true
           commit('SET_ROUTERS', asyncRouterMap)
           resolve()
         } else {
           getUserRolesPermissions(role_id).then(response => {
+            if (response.includes('chat')) {
+              state.permission_chat = true
+            }
             // 设置管理下的身份验证菜单不受控制
             response.push('setting')
             response.push('systemSettingsVerification')
diff --git a/manager-admin/src/utils/mixin.js b/manager-admin/src/utils/mixin.js
index e10f5e3464c37e06a742c7a2821d75f4627c8c7f..9aa985fd1faf0274fcd5351f8a4bee9788150617 100644
--- a/manager-admin/src/utils/mixin.js
+++ b/manager-admin/src/utils/mixin.js
@@ -7,6 +7,7 @@ import { Foundation } from '~/ui-utils'
 import { api, domain } from '~/ui-domain'
 import * as XLSX from 'xlsx'
 import Storage from '@/utils/storage'
+import request from '@/utils/request'
 
 export default {
   data() {
@@ -52,7 +53,9 @@ export default {
       // Domain
       MixinDomain: domain,
       // API
-      MixinApi: api
+      MixinApi: api,
+      // 是否开启了IM
+      MixinIsIM: process.env.IM
     }
   },
   computed: {
@@ -81,6 +84,10 @@ export default {
     }
   },
   methods: {
+    /**
+     * 请求方法
+     */
+    MixinRequest: request,
     /** 返回克隆后的对象 */
     MixinClone(obj) {
       return JSON.parse(JSON.stringify(obj))
diff --git a/manager-admin/src/views/chat/chat.vue b/manager-admin/src/views/chat/chat.vue
new file mode 100644
index 0000000000000000000000000000000000000000..050c217623f231f559d72fc74108cc99b341d69f
--- /dev/null
+++ b/manager-admin/src/views/chat/chat.vue
@@ -0,0 +1,46 @@
+<template>
+  <chat-app
+    v-if="userInfo.name"
+    :user="userInfo"
+    :apis="MixinApi"
+    :request="MixinRequest"
+    :domains="MixinDomain"
+    type="admin"
+  />
+  <div v-else class="no-login">
+    请先<a :href="`/login?forward=${$route.fullPath}`" class="login-btn">登录</a>
+  </div>
+</template>
+
+<script>
+import ChatApp from '@/components/ChatApp/ChatApp'
+import Storage from '@/utils/storage'
+let user = Storage.getItem('admin_user')
+user = user ? JSON.parse(user) : {}
+export default {
+  name: 'chat',
+  components: { ChatApp },
+  data() {
+    return {
+      userInfo: {
+        face: user.face,
+        name: '平台'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.no-login {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  .login-btn {
+    color: #1E50A2;
+  }
+}
+</style>
diff --git a/manager-admin/src/views/layout/components/Navbar.vue b/manager-admin/src/views/layout/components/Navbar.vue
index 67f7c6a0480ac134b4498c575a9d3f1d6899fd4c..59dc6ea2ac10f288c0b7cfe5d06389c564db8adc 100644
--- a/manager-admin/src/views/layout/components/Navbar.vue
+++ b/manager-admin/src/views/layout/components/Navbar.vue
@@ -7,6 +7,9 @@
       </div>
 
       <div class="right-menu">
+        <el-tooltip v-if="MixinIsIM && permission_chat" effect="dark" content="客服系统">
+          <chat-entry class="right-menu-item" />
+        </el-tooltip>
         <el-tooltip effect="dark" content="全屏" placement="bottom">
           <screenfull class="screenfull right-menu-item"></screenfull>
         </el-tooltip>
@@ -93,6 +96,7 @@
   import Screenfull from '@/components/Screenfull'
   import LangSelect from '@/components/LangSelect'
   import ThemePicker from '@/components/ThemePicker'
+  import ChatEntry from '@/components/ChatEntry'
   import { RegExp } from '~/ui-utils'
   import * as API_Auth from '@/api/auth'
 
@@ -102,7 +106,8 @@
       Hamburger,
       Screenfull,
       LangSelect,
-      ThemePicker
+      ThemePicker,
+      ChatEntry
     },
     data() {
       const user = this.MixinClone(this.$store.getters.user)
@@ -143,7 +148,7 @@
       }
     },
     computed: {
-      ...mapGetters(['sidebar', 'user'])
+      ...mapGetters(['sidebar', 'user', 'permission_chat'])
     },
     watch: {
       form: {
diff --git a/manager-seller/config/index.js b/manager-seller/config/index.js
index 667cec23ef7cf50194d958899048b3f8cc4d9f39..53e2ca25a17722e9f7cc85fc750e2b6c42655939 100644
--- a/manager-seller/config/index.js
+++ b/manager-seller/config/index.js
@@ -21,7 +21,7 @@ module.exports = {
    * 如果您需要开启o2o相关功能，请设置为true
    */
   o2o: false,
-   /**
+  /**
    * 供应商功能开关
    * 如果您需要开启供应商相关功能，请设置为true
    */
diff --git a/manager-seller/src/components/ChatApp/ChatApp.vue b/manager-seller/src/components/ChatApp/ChatApp.vue
index 45e79caf3d233dd162452668aede650e288c19b3..fd5e471d2769290f65c33ad35bbffb93944cbe29 100644
--- a/manager-seller/src/components/ChatApp/ChatApp.vue
+++ b/manager-seller/src/components/ChatApp/ChatApp.vue
@@ -16,12 +16,12 @@
         <div class="friend-list">
           <div
             v-for="item in showFriends"
-            :key="item['friends_id']"
+            :key="item['target_id']"
             class="friend-item"
-            :class="{active: receiver_id === item['friends_id']}"
+            :class="{active: receiver_id === item['target_id']}"
             @click="handleClickFriend(item)"
           >
-            <div class="face-friend" :style="{backgroundImage: `url(${item.face || defaultFace})`}"></div>
+            <div  class="face-friend" :style="{backgroundImage: `url(${item.avatar || defaultFace})`}"></div>
             <div class="name-friend ellipsis">{{ item.name }}</div>
             <div v-if="item['un_read_num'] > 0" class="unread-friend">{{ item['un_read_num'] }}</div>
             <div class="icon-delete" @click.stop="handleDeleteFriend(item)"></div>
@@ -31,7 +31,7 @@
       <div class="right-chat">
         <div class="head-right">
           <div v-if="currentChat" class="wrapper-head">
-            <div class="face-head" :style="{backgroundImage: `url(${currentChat.face || defaultFace})`}"></div>
+            <div class="face-head" :style="{backgroundImage: `url(${currentChat.avatar || defaultFace})`}"></div>
             <div class="info-head">
               <p class="name-info-head">
                 {{ currentChat.name }}
@@ -85,9 +85,6 @@
                     @change="handleToolbarFileChange"
                   >
                 </div>
-                <div v-if="play_audio === 0" class="btn-toolbar audio-text" @click="handleClickTool('audio-text')">
-                  开启声音提醒
-                </div>
               </div>
               <div class="textarea-chat" @keydown.enter="handleSendContent">
                 <p id="textarea-input" contenteditable="true" class="textarea-input"></p>
@@ -166,7 +163,7 @@
                   <div class="other-order">
                     <p class="price-order">
                       <span>订单金额：</span>
-                      <span class="price">￥{{ item['order_amount'] }}</span>
+                      <span class="price">{{ item['order_amount'] | unitPrice }}</span>
                     </p>
                     <div>
                       <span class="date-order">{{ unixToDate(item.create_time) }}</span>
@@ -254,7 +251,7 @@ export default {
   computed: {
     // 正在聊天对象
     currentChat() {
-      const friend = this.friends.filter(item => item['friends_id'] === this.receiver_id)[0]
+      const friend = this.friends.filter(item => item['target_id'] === this.receiver_id)[0]
       return friend || ''
     },
     // 正在咨询的商品
@@ -281,10 +278,12 @@ export default {
     const { shop_id, goods_id } = this.$route.query
     this.receiver_id = shop_id
     this.goods_id = goods_id
-    // 获取token
-    const webSocketToken = await this.getWebsocketToken()
-    // websocket连接
-    websocket.init(this.apis['im'] + '/im/ws?token=' + webSocketToken, this.handleWebsocketMessage)
+    if (this.$eventCenter) {
+      this.$eventCenter.on('IM', this.handleWebsocketMessage)
+    }
+    if (this.receiver_id) {
+      this.createSession()
+    }
   },
   watch: {
     search_goods_keyword: 'handleSearchGoods'
@@ -293,16 +292,16 @@ export default {
     if (!document) return
     this.$refs['chat-content'].addEventListener('scroll', this.chatBoxScrollListener)
     this.initPasteScreenshot()
-    if (this.play_audio !== 0) this.showAudioConfirmDialog()
+    if (this.play_audio !== 0) {
+      this.showAudioConfirmDialog()
+    }
   },
   methods: {
     /**
      * 处理websocket消息
-     * @param message
+     * @param msg
      */
-    handleWebsocketMessage(message) {
-      let msg = JSONBig.parse(message)
-
+    handleWebsocketMessage(msg) {
       // 收到新消息
       if (msg.type === 'msg') {
         if (this.play_audio !== 0) {
@@ -317,9 +316,18 @@ export default {
         }
         let senderId = msg.sender_id.toString()
         if (senderId !== this.receiver_id) {
-          const chat = this.friends.filter(item => item['friends_id'] === senderId)[0]
+          var chatIndex = -1
+          const chat = this.friends.filter((item, index, arr) => {
+            if (item['target_id'] === senderId) {
+              chatIndex = index
+              return item
+            }
+          })[0]
           if (chat) {
             chat.un_read_num += 1
+            // 将会话置为第一个
+            this.friends.splice(chatIndex, 1)
+            this.friends.unshift(chat)
           } else {
             // 未找到会话
             this.getFriends()
@@ -358,7 +366,7 @@ export default {
      */
     handleDeleteFriend(item) {
       this.$confirm('确认要删除此联系人?', '提示', { type: 'warning' }).then(() => {
-        const id = item['friends_id']
+        const id = item['target_id']
         this.deleteFriend(id).then(() => {
           if (this.receiver_id === id) {
             this.receiver_id = ''
@@ -373,7 +381,7 @@ export default {
      * @param item
      */
     handleClickFriend(item) {
-      this.receiver_id = item['friends_id']
+      this.receiver_id = item['target_id']
       this.current_tab = 0
       this.removeUnreadNum()
       this.currentChat.un_read_num = 0
@@ -453,7 +461,9 @@ export default {
         this.showAudioConfirmDialog()
         return
       }
-      if (!this.receiver_id) return
+      if (!this.receiver_id) {
+        return
+      }
       document.getElementById(`${type}-upload-input`).click()
     },
     /**
diff --git a/manager-seller/src/components/ChatApp/ChatMessageItem.vue b/manager-seller/src/components/ChatApp/ChatMessageItem.vue
index cc2343f702dd1d0591adfb463193a7d2a10bf2a4..fe1e344640a91b23b593f1615336074275fe749a 100644
--- a/manager-seller/src/components/ChatApp/ChatMessageItem.vue
+++ b/manager-seller/src/components/ChatApp/ChatMessageItem.vue
@@ -6,7 +6,8 @@
       <span v-if="!message.is_self" style="margin-left: 10px">{{ message.msg_time | unixToDate }}</span>
     </p>
     <div class="wrapper-message">
-      <div class="head-message" :style="{backgroundImage: `url(${user.face || defaultFace})`}"/>
+      <img v-if="user.avatar" class="head-message" :src="user.avatar" alt="">
+      <div v-else class="head-message" :style="{backgroundImage: `url(${user.face || defaultFace})`}"/>
       <div class="body-message">
         <div class="text-message">
           <div v-if="message.type === 'ORDER' || message.type === 'GOODS'" class="order-message">
@@ -28,7 +29,7 @@
               </div>
               <div class="info-order-box">
                 订单金额合计：
-                <span class="price">¥{{ message['order_price'] || message['goods_price'] }}</span>
+                <span class="price">{{ message['order_price'] | unitPrice }}</span>
               </div>
               <div class="tag-order-message">订单</div>
             </template>
@@ -41,9 +42,9 @@
                   <p>{{ message['goods_name'] }}</p>
                 </div>
                 <div class="label normal"></div>
-              </div>
                 <div class="info-order-box">
-                  <span class="price">¥{{ message['order_price'] || message['goods_price'] }}</span>
+                  <span class="price">{{ message['goods_price'] | unitPrice }}</span>
+                </div>
               </div>
               <div class="tag-order-message">{{ message.type === 'ORDER' ? '订单' : '商品' }}</div>
             </div>
@@ -111,7 +112,7 @@ export default {
       const self = this.message['is_self']
       return {
         name: self ? sender.name : receiver.name,
-        face: (self ? sender.face : receiver.face) || this.defaultFace
+        face: (self ? sender.face : receiver.avatar) || this.defaultFace
       }
     }
   },
@@ -253,20 +254,18 @@ export default {
       width: 260px;
       margin-left: 10px;
       .goods-name {
-        height: 28px;
+        height: 46px;
         line-height: 1.2;
-        overflow: hidden;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
       }
-    }
       .info-order-box {
         font-size: 13px;
         margin-top: 12px;
-        margin-bottom: 10px;
         color: #999999;
         display: inline-block;
+      }
     }
     .tag-order-message {
       position: absolute;
diff --git a/manager-seller/src/components/ChatApp/apiMixin.js b/manager-seller/src/components/ChatApp/apiMixin.js
index 32cf65291c9ec015a3c689a96dc1f88eae0d1955..3d6eac33ee59a66c747c8ee61eb787bc60eb86d2 100644
--- a/manager-seller/src/components/ChatApp/apiMixin.js
+++ b/manager-seller/src/components/ChatApp/apiMixin.js
@@ -45,8 +45,6 @@ export default {
       immediate: true,
       async handler(newVal) {
         if (!newVal) return
-        await this.createSession()
-        this.getFriends()
         this.orders = []
         this.orderParams.no_data = false
         this.orderParams.page_no = 1
@@ -67,16 +65,19 @@ export default {
      */
     getFriends() {
       this.request({
-        url: this.apis['im'] + `/${this.type}/im/friends-list`,
+        url: this.apis['seller'] + `/${this.type}/im/friends-list`,
         method: 'get',
         loading: false,
         needToken: true
       }).then(res => {
-        const currentChat = res.filter(item => item['friends_id'] === this.receiver_id)[0]
+        const currentChat = res.filter(item => item['target_id'] === this.receiver_id)[0]
         if (currentChat) {
           currentChat.un_read_num = 0
         }
         this.friends = res
+        if (!this.receiver_id) {
+          this.receiver_id = res[0].target_id
+        }
       })
     },
     /**
@@ -89,7 +90,7 @@ export default {
       delete params.loading
       let url = this.isSeller
         ? `${this.apis['seller']}/seller/trade/orders?member_id=${this.receiver_id}`
-        : `${this.apis['buyer']}/buyer/trade/orders/im/${this.receiver_id}`
+        : `${this.apis['buyer']}/trade/orders/im/${this.receiver_id}`
       this.request({
         url,
         method: 'get',
@@ -115,10 +116,12 @@ export default {
      */
     createSession() {
       return this.request({
-        url: this.apis['im'] + `/${this.type}/im/session/${this.receiver_id}`,
+        url: this.apis['seller'] + `/${this.type}/im/session/${this.receiver_id}`,
         method: 'post',
         loading: false,
         needToken: true
+      }).then(res => {
+        this.getFriends()
       })
     },
 
@@ -185,7 +188,7 @@ export default {
       delete params.no_data
       delete params.loading
       this.request({
-        url: this.apis['im'] + `/${this.type}/im/history`,
+        url: this.apis['seller'] + `/${this.type}/im/history`,
         method: 'get',
         loading: false,
         needToken: true,
@@ -212,7 +215,7 @@ export default {
         receiver_id: this.receiver_id
       }
       const res = await this.request({
-        url: this.apis['im'] + `/${this.type}/im/message/${type}`,
+        url: this.apis['seller'] + `/${this.type}/im/message/${type}`,
         method: 'post',
         loading: false,
         needToken: true,
@@ -229,7 +232,7 @@ export default {
      */
     removeUnreadNum() {
       return this.request({
-        url: this.apis['im'] + `/${this.type}/im/unread-num`,
+        url: this.apis['seller'] + `/${this.type}/im/unread-num`,
         method: 'delete',
         loading: false,
         needToken: true,
@@ -245,7 +248,7 @@ export default {
     getNewMessage() {
       return new Promise(resolve => {
         this.request({
-          url: this.apis['im'] + `/${this.type}/im/history`,
+          url: this.apis['seller'] + `/${this.type}/im/history`,
           method: 'get',
           loading: false,
           needToken: true,
@@ -293,25 +296,13 @@ export default {
       })
     },
 
-    /**
-     * 获取websocket连接Token
-     * @returns {*}
-     */
-    async getWebsocketToken() {
-      return this.request({
-        url: this.apis['im'] + `/${this.type}/im/token`,
-        method: 'get',
-        loading: false,
-        needToken: true
-      })
-    },
     /**
      * 删除会话[移除好友]
      * @param id
      */
     deleteFriend(id) {
       return new Promise((resolve, reject) => {
-        let url = this.apis['im']
+        let url = this.apis['seller']
         url += this.isSeller ? '/seller/im/delete' : '/buyer/im/delete'
         const params = this.isSeller ? { member_id: id } : { shop_id: id }
         this.request({
diff --git a/manager-seller/src/components/ChatApp/icon-close.png b/manager-seller/src/components/ChatApp/icon-close.png
index f899b40822b93f5d5415b673961e06fb6519aee8..b11df4169d4e016c0fbc995019a81e63707b9fa0 100644
Binary files a/manager-seller/src/components/ChatApp/icon-close.png and b/manager-seller/src/components/ChatApp/icon-close.png differ
diff --git a/manager-seller/src/components/ChatApp/icon-noface.jpg b/manager-seller/src/components/ChatApp/icon-noface.jpg
index c33efc11d7c97481f1488f28afbffc3591536840..21c6aa59437c4df4017cf10501e1a0d035c43755 100644
Binary files a/manager-seller/src/components/ChatApp/icon-noface.jpg and b/manager-seller/src/components/ChatApp/icon-noface.jpg differ
diff --git a/manager-seller/src/components/ChatApp/images/e01.gif b/manager-seller/src/components/ChatApp/images/e01.gif
index de15cf1d1ed500a08ce0828cecf5773d1738560b..c5baabcd73fabe51b021f8311455a2ec2c7a61bf 100644
Binary files a/manager-seller/src/components/ChatApp/images/e01.gif and b/manager-seller/src/components/ChatApp/images/e01.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e02.gif b/manager-seller/src/components/ChatApp/images/e02.gif
index 0ade606de7ef08bc06db3643a8d555a8610b43ad..616dcbcf6456f7dbaa045c93ca53a51b7176fe22 100644
Binary files a/manager-seller/src/components/ChatApp/images/e02.gif and b/manager-seller/src/components/ChatApp/images/e02.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e03.gif b/manager-seller/src/components/ChatApp/images/e03.gif
index eed8a8446b87dbacf915d568034afcdcbab50d3f..244787dd9081ed0710515f6280d845992913db07 100644
Binary files a/manager-seller/src/components/ChatApp/images/e03.gif and b/manager-seller/src/components/ChatApp/images/e03.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e04.gif b/manager-seller/src/components/ChatApp/images/e04.gif
index 9b0a52ee030dfec6c87041fef239a02933437e8a..3798fe8b8faf2fd1e0387f32efa8bee1fffd967f 100644
Binary files a/manager-seller/src/components/ChatApp/images/e04.gif and b/manager-seller/src/components/ChatApp/images/e04.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e05.gif b/manager-seller/src/components/ChatApp/images/e05.gif
index 574084a1b429552d13bd60a62e095ce30330aaf9..4e3ddae5cb233c98c88547fbb87b29736e27fa71 100644
Binary files a/manager-seller/src/components/ChatApp/images/e05.gif and b/manager-seller/src/components/ChatApp/images/e05.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e06.gif b/manager-seller/src/components/ChatApp/images/e06.gif
index 9fc76b9279c6908fb7185e044f744f88d1c8a8cb..9902cab36ce265d729ac9c9b8b9da83c18641972 100644
Binary files a/manager-seller/src/components/ChatApp/images/e06.gif and b/manager-seller/src/components/ChatApp/images/e06.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e07.gif b/manager-seller/src/components/ChatApp/images/e07.gif
index f0f54f823669a339bce6e8714926675d4be421e7..7d4d2a76c2c32e05bbc2ccdeac185bae3023bda2 100644
Binary files a/manager-seller/src/components/ChatApp/images/e07.gif and b/manager-seller/src/components/ChatApp/images/e07.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e08.gif b/manager-seller/src/components/ChatApp/images/e08.gif
index 713a710d92cc367489657c0396b7008f792f919e..26d421d1dd090b00b18d7e1300aad07d1d45936a 100644
Binary files a/manager-seller/src/components/ChatApp/images/e08.gif and b/manager-seller/src/components/ChatApp/images/e08.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e09.gif b/manager-seller/src/components/ChatApp/images/e09.gif
index 078a08f7e43df2a0ac0fb54ae30b51d63afcbf1e..8a6e2122394c599a9636c7181880f566552dae2b 100644
Binary files a/manager-seller/src/components/ChatApp/images/e09.gif and b/manager-seller/src/components/ChatApp/images/e09.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e10.gif b/manager-seller/src/components/ChatApp/images/e10.gif
index 07cec7a035d322b128f8d897a282bfeb53d2720c..1383a2ebfe76ca37a14dde49d37c79f385c1b7f5 100644
Binary files a/manager-seller/src/components/ChatApp/images/e10.gif and b/manager-seller/src/components/ChatApp/images/e10.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e11.gif b/manager-seller/src/components/ChatApp/images/e11.gif
index c45ec4bfd02dff3bd9c85d7c3af6e67c5c482418..614ebca78f432620abc3c08da9ca0c1e73187a3e 100644
Binary files a/manager-seller/src/components/ChatApp/images/e11.gif and b/manager-seller/src/components/ChatApp/images/e11.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e12.gif b/manager-seller/src/components/ChatApp/images/e12.gif
index 8f7bad33dae6695672d09531778911a0d2a4878b..7ce9cf6a9f4e73adccb29a2d068667264fa4decd 100644
Binary files a/manager-seller/src/components/ChatApp/images/e12.gif and b/manager-seller/src/components/ChatApp/images/e12.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e13.gif b/manager-seller/src/components/ChatApp/images/e13.gif
index d3de6bb9aaada73efd03df0d0bd3962f0d03b617..2105024ab8f5559c8b8c7e1456c5dd8ca4db15d4 100644
Binary files a/manager-seller/src/components/ChatApp/images/e13.gif and b/manager-seller/src/components/ChatApp/images/e13.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e14.gif b/manager-seller/src/components/ChatApp/images/e14.gif
index 92373b8bf0d93f9b646e3d788136297ce59e9614..2e62299f34e7be7fd1965369e584ce06c1cb360e 100644
Binary files a/manager-seller/src/components/ChatApp/images/e14.gif and b/manager-seller/src/components/ChatApp/images/e14.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e15.gif b/manager-seller/src/components/ChatApp/images/e15.gif
index 2e2d2df85bef20d689543eaddbc66ed587cc0e47..bf52d0b2ce1dd122b346956edc9c586229ceebc1 100644
Binary files a/manager-seller/src/components/ChatApp/images/e15.gif and b/manager-seller/src/components/ChatApp/images/e15.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e16.gif b/manager-seller/src/components/ChatApp/images/e16.gif
index d0005aed0e548bda687db0be375d103f08fa29b0..c2b9c70d4ea000a868c815ce7925baca532d632f 100644
Binary files a/manager-seller/src/components/ChatApp/images/e16.gif and b/manager-seller/src/components/ChatApp/images/e16.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e17.gif b/manager-seller/src/components/ChatApp/images/e17.gif
index 2570efa0a3722a5cd285c417db7b3c24546e4152..32cb793e50ec3919648a94546a6e51b7ed5526aa 100644
Binary files a/manager-seller/src/components/ChatApp/images/e17.gif and b/manager-seller/src/components/ChatApp/images/e17.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e18.gif b/manager-seller/src/components/ChatApp/images/e18.gif
index 8b93912987e56b81f3de94ed6e5e4863dc475d6e..b2cc2c5b3e4f765eb16090afa03a36b6e5995d45 100644
Binary files a/manager-seller/src/components/ChatApp/images/e18.gif and b/manager-seller/src/components/ChatApp/images/e18.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e19.gif b/manager-seller/src/components/ChatApp/images/e19.gif
index c9435d9681f25c92ee1e557a96f8a89d7ab4aa86..7bcb322f9e91dafc7f068272c469c489e1aef403 100644
Binary files a/manager-seller/src/components/ChatApp/images/e19.gif and b/manager-seller/src/components/ChatApp/images/e19.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e20.gif b/manager-seller/src/components/ChatApp/images/e20.gif
index 43c28a473cb171c5b3ee327415122093d026d355..0bbca35984e0a1d141b5a0e42095c9429664088d 100644
Binary files a/manager-seller/src/components/ChatApp/images/e20.gif and b/manager-seller/src/components/ChatApp/images/e20.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e21.gif b/manager-seller/src/components/ChatApp/images/e21.gif
index 45c1eb1afcb3c9b5c543c8a0e2dbf452f88d55ef..7267c775d14ed163681baeea12855bf0e252789f 100644
Binary files a/manager-seller/src/components/ChatApp/images/e21.gif and b/manager-seller/src/components/ChatApp/images/e21.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e22.gif b/manager-seller/src/components/ChatApp/images/e22.gif
index 5be0c5ef6dd4d199134fa9f370e6d30b06d2f370..7a2e7f133c458eb2ed4fe3b664027631eeb19764 100644
Binary files a/manager-seller/src/components/ChatApp/images/e22.gif and b/manager-seller/src/components/ChatApp/images/e22.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e23.gif b/manager-seller/src/components/ChatApp/images/e23.gif
index 740a522f0b6e0d7f9b11eadce8d069228e51bdfb..b3715550fdb42e39e5062ce62fa720b13c30feba 100644
Binary files a/manager-seller/src/components/ChatApp/images/e23.gif and b/manager-seller/src/components/ChatApp/images/e23.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e24.gif b/manager-seller/src/components/ChatApp/images/e24.gif
index 1d9e998eb2fb336c80342eb58e3b5aedc7d88f2c..0d1e4541a4c6a4a8901d89094a764f6458f544ce 100644
Binary files a/manager-seller/src/components/ChatApp/images/e24.gif and b/manager-seller/src/components/ChatApp/images/e24.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e25.gif b/manager-seller/src/components/ChatApp/images/e25.gif
index 5f4b23cf4627c2b8bf6bf8e1b9ed1603c5ef1374..3fe507c0bf0fa827d3afc575f78387bc85ec6434 100644
Binary files a/manager-seller/src/components/ChatApp/images/e25.gif and b/manager-seller/src/components/ChatApp/images/e25.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e26.gif b/manager-seller/src/components/ChatApp/images/e26.gif
index d72678a6809372da1395cf8f41769ef8b548736d..87e635bc27a8e9aacdd6c9984ee03b8db13d500d 100644
Binary files a/manager-seller/src/components/ChatApp/images/e26.gif and b/manager-seller/src/components/ChatApp/images/e26.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e27.gif b/manager-seller/src/components/ChatApp/images/e27.gif
index 094ab9582742d916aeb735c1fac98a2d27b3a7e8..e1e4dfd1b32eee2645b942a1d48bd82e0db5a58b 100644
Binary files a/manager-seller/src/components/ChatApp/images/e27.gif and b/manager-seller/src/components/ChatApp/images/e27.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e28.gif b/manager-seller/src/components/ChatApp/images/e28.gif
index 0669b08668886d7eee6f1c41595a893bcef14c5d..8d3760fd407b78c84edbd8306fce96384d9b4ef0 100644
Binary files a/manager-seller/src/components/ChatApp/images/e28.gif and b/manager-seller/src/components/ChatApp/images/e28.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e29.gif b/manager-seller/src/components/ChatApp/images/e29.gif
index 04f57d331918f60085792d57fb7d70e1d126acda..86b9c848186bbf140be4bd6264a140c3553a17e6 100644
Binary files a/manager-seller/src/components/ChatApp/images/e29.gif and b/manager-seller/src/components/ChatApp/images/e29.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e30.gif b/manager-seller/src/components/ChatApp/images/e30.gif
index ed5072d7d6bc47c0e823e124d9d6407b00ab296a..16850ce1c93483915c5d6f55837b945295936515 100644
Binary files a/manager-seller/src/components/ChatApp/images/e30.gif and b/manager-seller/src/components/ChatApp/images/e30.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e31.gif b/manager-seller/src/components/ChatApp/images/e31.gif
index d937a81468b5225ec933c61a80f4511b6ec1c0e3..86863cf1330853850b01782392bd5f87d4c30be1 100644
Binary files a/manager-seller/src/components/ChatApp/images/e31.gif and b/manager-seller/src/components/ChatApp/images/e31.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e32.gif b/manager-seller/src/components/ChatApp/images/e32.gif
index e0aa5b027073189a81647456eee332c8acfb041e..f2f187508a20c9f30ceabcba2f53d2470e084b42 100644
Binary files a/manager-seller/src/components/ChatApp/images/e32.gif and b/manager-seller/src/components/ChatApp/images/e32.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e33.gif b/manager-seller/src/components/ChatApp/images/e33.gif
index 73a032f220a1860dcb7ccbd5649454d38579127b..ee6f51387a0d76eea676d5795c2234bb7cf8e02b 100644
Binary files a/manager-seller/src/components/ChatApp/images/e33.gif and b/manager-seller/src/components/ChatApp/images/e33.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e34.gif b/manager-seller/src/components/ChatApp/images/e34.gif
index abd0bb038c45898f1bedd056a31df38935b4276e..8a7cf0a092b17b3d7967fb5cea4fec40fa791dad 100644
Binary files a/manager-seller/src/components/ChatApp/images/e34.gif and b/manager-seller/src/components/ChatApp/images/e34.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e35.gif b/manager-seller/src/components/ChatApp/images/e35.gif
index b9b1e5f9450be2e314c93f914fd049ba5a93d5c3..0235d389da3c77af489714e937c60f856057d1d7 100644
Binary files a/manager-seller/src/components/ChatApp/images/e35.gif and b/manager-seller/src/components/ChatApp/images/e35.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e36.gif b/manager-seller/src/components/ChatApp/images/e36.gif
index 3ea61d0b24c1f80466c50a2977dc5a7e0bf5e36a..2bbb9a095a8160519b514cda20354e95b04c8640 100644
Binary files a/manager-seller/src/components/ChatApp/images/e36.gif and b/manager-seller/src/components/ChatApp/images/e36.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e37.gif b/manager-seller/src/components/ChatApp/images/e37.gif
index 672f589eea897b89f713b634e7869bc6fcf4a509..0cb82f5e63e5d7ec1670446cfcba88ee7499347c 100644
Binary files a/manager-seller/src/components/ChatApp/images/e37.gif and b/manager-seller/src/components/ChatApp/images/e37.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e38.gif b/manager-seller/src/components/ChatApp/images/e38.gif
index 94a00831f7e3d0898a2333e6fa20aa859f073d8c..8e03ca87d3a5ba922b72438fa8f5c25d33b7f0da 100644
Binary files a/manager-seller/src/components/ChatApp/images/e38.gif and b/manager-seller/src/components/ChatApp/images/e38.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e39.gif b/manager-seller/src/components/ChatApp/images/e39.gif
index bac4c142de599386301771527e2ea06ce727949b..4e26b94dd52477583dc1cb77c867b25c024d620c 100644
Binary files a/manager-seller/src/components/ChatApp/images/e39.gif and b/manager-seller/src/components/ChatApp/images/e39.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e40.gif b/manager-seller/src/components/ChatApp/images/e40.gif
index 99563ca069dd495e7593c21c31e47c6278105754..3643e9ef34baeb0ba275b748a7f8262f89726c96 100644
Binary files a/manager-seller/src/components/ChatApp/images/e40.gif and b/manager-seller/src/components/ChatApp/images/e40.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e41.gif b/manager-seller/src/components/ChatApp/images/e41.gif
index 791971226a5ed24a9ef2a168182e05ac0e14bec2..b9f86388bf9d0f31b21add074247fe48131bec7c 100644
Binary files a/manager-seller/src/components/ChatApp/images/e41.gif and b/manager-seller/src/components/ChatApp/images/e41.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e42.gif b/manager-seller/src/components/ChatApp/images/e42.gif
index 987aaae4127f9010c45312ed95b7708954b90cf1..c6931188a62ec0a60a53f4285ecb5b6e04c3b7d5 100644
Binary files a/manager-seller/src/components/ChatApp/images/e42.gif and b/manager-seller/src/components/ChatApp/images/e42.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e43.gif b/manager-seller/src/components/ChatApp/images/e43.gif
index 029ea71727f38aa3ad592b851db5fc73ce734784..58cfc659a942fe81d2fa046998dd137bc53ce06e 100644
Binary files a/manager-seller/src/components/ChatApp/images/e43.gif and b/manager-seller/src/components/ChatApp/images/e43.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e44.gif b/manager-seller/src/components/ChatApp/images/e44.gif
index 1df389be68ac11a8054f83269997a594d31732fb..7dd32fb2f20cbe7791796f3c90a51528d506f694 100644
Binary files a/manager-seller/src/components/ChatApp/images/e44.gif and b/manager-seller/src/components/ChatApp/images/e44.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e45.gif b/manager-seller/src/components/ChatApp/images/e45.gif
index 12ca2d9049e4b8d968d466a588200390c7345078..c92402f89441fff83674c0b59df9053b0c1116ec 100644
Binary files a/manager-seller/src/components/ChatApp/images/e45.gif and b/manager-seller/src/components/ChatApp/images/e45.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e46.gif b/manager-seller/src/components/ChatApp/images/e46.gif
index c3910b1aeea72b18e3a92afe844da8b97a30ee68..67c63e6c1a33734db81b60a28a3f7c5566df21be 100644
Binary files a/manager-seller/src/components/ChatApp/images/e46.gif and b/manager-seller/src/components/ChatApp/images/e46.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e47.gif b/manager-seller/src/components/ChatApp/images/e47.gif
index cdd59b2305553301ff183160870c4dd47792ee39..ba2b736d74ed31165f32168e7978f5386588d5a3 100644
Binary files a/manager-seller/src/components/ChatApp/images/e47.gif and b/manager-seller/src/components/ChatApp/images/e47.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e48.gif b/manager-seller/src/components/ChatApp/images/e48.gif
index 2ea141346b8bf2d3640aa0e0393d04436042cc83..be58ea9c6f1a4eaf4ab0fb13bf407019e38bebf4 100644
Binary files a/manager-seller/src/components/ChatApp/images/e48.gif and b/manager-seller/src/components/ChatApp/images/e48.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e49.gif b/manager-seller/src/components/ChatApp/images/e49.gif
index ffa0899055a16db9838822e42b9f8b921b1ee221..73aee8bfb72d6636bad13b85491e881d4658b994 100644
Binary files a/manager-seller/src/components/ChatApp/images/e49.gif and b/manager-seller/src/components/ChatApp/images/e49.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e50.gif b/manager-seller/src/components/ChatApp/images/e50.gif
index 5b83262dfcc7c796b79a8594656419e5f768563c..ae5d59204d7f73bb391a8d92fb36256e0e56ebc2 100644
Binary files a/manager-seller/src/components/ChatApp/images/e50.gif and b/manager-seller/src/components/ChatApp/images/e50.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e51.gif b/manager-seller/src/components/ChatApp/images/e51.gif
index 207e408adb6790e09f2f5b9e6ff424ae1aeaf322..1d7f838e30799bf966b1fb1e0f461ed78ab36f2d 100644
Binary files a/manager-seller/src/components/ChatApp/images/e51.gif and b/manager-seller/src/components/ChatApp/images/e51.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e52.gif b/manager-seller/src/components/ChatApp/images/e52.gif
index 4e639e5b6201b95ceecedc23d893d03e04f53fb9..d5cbf4e309199632bd20e24f7b4c6a2ca040184e 100644
Binary files a/manager-seller/src/components/ChatApp/images/e52.gif and b/manager-seller/src/components/ChatApp/images/e52.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e53.gif b/manager-seller/src/components/ChatApp/images/e53.gif
index 881394ed25f6729abea7d01588d87e700bedf276..8c49e0e34684aa988eaa5dc0ecbc1040a4c99315 100644
Binary files a/manager-seller/src/components/ChatApp/images/e53.gif and b/manager-seller/src/components/ChatApp/images/e53.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e54.gif b/manager-seller/src/components/ChatApp/images/e54.gif
index 3c23ca97b9ef7881c0ce81bc7278b2580d24c583..b65ad4d08bc7ecae5ddbf95ef643fd2cfc6bd693 100644
Binary files a/manager-seller/src/components/ChatApp/images/e54.gif and b/manager-seller/src/components/ChatApp/images/e54.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e55.gif b/manager-seller/src/components/ChatApp/images/e55.gif
index c59a2c2b888fcf3ba1900592e36a4dc9ab887345..d90fbb7077001bb7f82e707d9c07873a90e1b9e5 100644
Binary files a/manager-seller/src/components/ChatApp/images/e55.gif and b/manager-seller/src/components/ChatApp/images/e55.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e56.gif b/manager-seller/src/components/ChatApp/images/e56.gif
index 053c57a26de9ecf96c79cc797b42b8bf53000d86..8e3fa4d81b066ca36a92e8ac60da4463d1a023f4 100644
Binary files a/manager-seller/src/components/ChatApp/images/e56.gif and b/manager-seller/src/components/ChatApp/images/e56.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e57.gif b/manager-seller/src/components/ChatApp/images/e57.gif
index 593fbc563d3734e2f9b65bcb1ef273d07c7f5cbb..32beb40d5ca900cc766310dab400a387720dfb17 100644
Binary files a/manager-seller/src/components/ChatApp/images/e57.gif and b/manager-seller/src/components/ChatApp/images/e57.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e58.gif b/manager-seller/src/components/ChatApp/images/e58.gif
index fba2fd950060226687264902573f8962cafc6b18..f34ab3414d5fa4f0fc2a006b56a057c2fd18aacc 100644
Binary files a/manager-seller/src/components/ChatApp/images/e58.gif and b/manager-seller/src/components/ChatApp/images/e58.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e59.gif b/manager-seller/src/components/ChatApp/images/e59.gif
index add81a1ee39ae30fbeca632abef41bea6695578a..6c23b256e9d6b94e13ac9c88f234ab2da4d167d3 100644
Binary files a/manager-seller/src/components/ChatApp/images/e59.gif and b/manager-seller/src/components/ChatApp/images/e59.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e60.gif b/manager-seller/src/components/ChatApp/images/e60.gif
index f2f49d2fd884ea076405e1d4186d7d9409a67e59..dc7931c9101b8f674aef3fb3b99052fbfe650112 100644
Binary files a/manager-seller/src/components/ChatApp/images/e60.gif and b/manager-seller/src/components/ChatApp/images/e60.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e61.gif b/manager-seller/src/components/ChatApp/images/e61.gif
index f50a6f4b09359b2a6a8178b76246c01173af3b79..e9e6d3567a21c6f507969305accaf4d4e90993a3 100644
Binary files a/manager-seller/src/components/ChatApp/images/e61.gif and b/manager-seller/src/components/ChatApp/images/e61.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e62.gif b/manager-seller/src/components/ChatApp/images/e62.gif
index c20d2eb23346e934c7bde6158e1b2e083c2b484a..a360e0ba2f78f832b6076362ca84e00b0d6d5f73 100644
Binary files a/manager-seller/src/components/ChatApp/images/e62.gif and b/manager-seller/src/components/ChatApp/images/e62.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e63.gif b/manager-seller/src/components/ChatApp/images/e63.gif
index 0fbe1210de9c7fd9f17aab11d765742533e6c885..768df9188039f9d408de13a26cf9c7ceec0607a1 100644
Binary files a/manager-seller/src/components/ChatApp/images/e63.gif and b/manager-seller/src/components/ChatApp/images/e63.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e64.gif b/manager-seller/src/components/ChatApp/images/e64.gif
index 8df64ba34207526ed52bc43053c9f02047b47790..aa1f2adad451559a920e3715a74074c87f1f4419 100644
Binary files a/manager-seller/src/components/ChatApp/images/e64.gif and b/manager-seller/src/components/ChatApp/images/e64.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e65.gif b/manager-seller/src/components/ChatApp/images/e65.gif
index 6629d5b996cb797b8324b0712ad4d90f2ef5ddcd..f0bcda2f4e41bfd5fb70fdd13883ad8c43defdc9 100644
Binary files a/manager-seller/src/components/ChatApp/images/e65.gif and b/manager-seller/src/components/ChatApp/images/e65.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e66.gif b/manager-seller/src/components/ChatApp/images/e66.gif
index 86a6573d99ab5d16b9b278fbc3e0a0a44476d9cc..c824ee08d875e9185346aa587144e6f3a4f4b737 100644
Binary files a/manager-seller/src/components/ChatApp/images/e66.gif and b/manager-seller/src/components/ChatApp/images/e66.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e67.gif b/manager-seller/src/components/ChatApp/images/e67.gif
index 36b4e6d56c51648c9309e90c3ef65879c9b2e655..65d9ad03ee6c12e170ec61f747911b913e3f966f 100644
Binary files a/manager-seller/src/components/ChatApp/images/e67.gif and b/manager-seller/src/components/ChatApp/images/e67.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e68.gif b/manager-seller/src/components/ChatApp/images/e68.gif
index 7013b05b80cfda1785689fb6ecf4179304f27f09..0f599f665175d15471cb94987c99a31e0824ed8f 100644
Binary files a/manager-seller/src/components/ChatApp/images/e68.gif and b/manager-seller/src/components/ChatApp/images/e68.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e69.gif b/manager-seller/src/components/ChatApp/images/e69.gif
index 019b6d4dd6b91881a7bd490858d6d615b4a6c4d8..46c30b3f8ee749b570d8cf99e155dae332c21b47 100644
Binary files a/manager-seller/src/components/ChatApp/images/e69.gif and b/manager-seller/src/components/ChatApp/images/e69.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e70.gif b/manager-seller/src/components/ChatApp/images/e70.gif
index 8a7af82e762030cfb4cd3c95a38953b67bb072c1..0bcd24aaa435cd4b5c76764df7e1abfe2d335d7b 100644
Binary files a/manager-seller/src/components/ChatApp/images/e70.gif and b/manager-seller/src/components/ChatApp/images/e70.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e71.gif b/manager-seller/src/components/ChatApp/images/e71.gif
index 21858c41e4aadf8676a9b7cde54a264d65e4b42f..922e968445f92788a541e9fc374ffd4fe2372bb9 100644
Binary files a/manager-seller/src/components/ChatApp/images/e71.gif and b/manager-seller/src/components/ChatApp/images/e71.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/e72.gif b/manager-seller/src/components/ChatApp/images/e72.gif
index 2d6401f95f22ad9e1ed4dfa9317b159470929ab4..318e7e30ad3d70a9ff450330e597ba2d8d6b881c 100644
Binary files a/manager-seller/src/components/ChatApp/images/e72.gif and b/manager-seller/src/components/ChatApp/images/e72.gif differ
diff --git a/manager-seller/src/components/ChatApp/images/emojis.gif b/manager-seller/src/components/ChatApp/images/emojis.gif
index c5c3d876957b3e1cbf788e29139051358bf47b61..0a964cb842e93bb242ea1e7fccc7f5793f852d4d 100644
Binary files a/manager-seller/src/components/ChatApp/images/emojis.gif and b/manager-seller/src/components/ChatApp/images/emojis.gif differ
diff --git a/manager-seller/src/components/ChatApp/message.mp3 b/manager-seller/src/components/ChatApp/message.mp3
index 1b784bbfc6e2b22665b5a393506f8b5812bd3e33..1c0f556ea56cd3fd9931f22cc454c0a7f62b21b3 100644
Binary files a/manager-seller/src/components/ChatApp/message.mp3 and b/manager-seller/src/components/ChatApp/message.mp3 differ
diff --git a/manager-seller/src/components/ChatApp/styles.scss b/manager-seller/src/components/ChatApp/styles.scss
index a9c756330432f05ce676609995a47180e8a38e54..284c16541921fe72afd18dc1c462da30bd12349f 100644
--- a/manager-seller/src/components/ChatApp/styles.scss
+++ b/manager-seller/src/components/ChatApp/styles.scss
@@ -371,8 +371,6 @@
   border-top: 1px solid #e7e7e7;
   user-select: none;
   .toolbar-input-chat {
-    display: flex;
-    align-items: center;
     box-sizing: border-box;
     height: 32px;
     margin-bottom: 5px;
@@ -405,12 +403,6 @@
           background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACHUlEQVRYR+2XsUsbcRTHv+9SEIT8rBQnp64i5JcuDlWIY6cOEndXsWPnxLF0UaGduheVUiqlW8GqhWZofBH/hU5S2iSToPfkhfvZ63HxLuSSW7zx3ct7n9/3+7vf74WQ80M598c9QKwCvxcWjHd5+SRLe/yJieajRqMTrfkfQMfapwBeAnieZfNQrU8AXhvm7y52C9AplRZBdCwiPz2iVwLsCbDpA4cuuQCsA6gSsHoFXGj8ATCjuQD2r4G3/WKeyDwRrQCoQGTJtFonmvsPwFoNzBrmx/qia23VQUwx1x1Ex1pt1oMoMu+HcxXCMK/2iwXxcwH+GubFKICu6LNhXnPNHAQB9SLzZhYQXWtrAmwY5pkogEQlD8upEFfAt2Ht8IAKATXD3FM/bIGMaOPFlo0FUAXCfo8CKLCgHgsQ9XoUAG1r630tyB0grQV/rK2oOtPMt2dEWrXutCANQLtcfkYiX4KGRxDZMq3Wx7EBuBVcA8sFoKYnmxDtgmhrqtn8kQQytALRAmqHA1GoJFuGBoju4m65PCcielRXxw7QLpV2iOgFAe8Lvr89eXbWGLkFToHeMSryVTxvx5yeHiQ1Dt0vehfEH0RpvoLgRtMivwzzu7SNMwUYtGk4/65NeCHAmzHdBbHX8QkBD4vM88OsMOm3XWv7DCTBSAbgUEQ++ETnScUGeZ84kmmxXIfS8GpyG8sHkTSr3Pu/ZrkrcAM57IgwdHU3jAAAAABJRU5ErkJggg==');
         }
       }
-      &.audio-text {
-        width: auto;
-        height: auto;
-        color: #0d58ef;
-        font-size: 12px;
-      }
       .btn-toolbar-input {
         display: none;
       }
@@ -670,7 +662,7 @@
     display: inline-block;
     padding: 4px 11px;
     line-height: 15px;
-    max-width: 60px;
+    max-width: 80px;
     text-align: center;
     color: #f23030;
     background: #ffeded;