20200728

在线聊天样式，历史记录正在修改

src/api/webim/index.js

@@ -26,11 +26,10 @@ export function sendMsg(query) {
 }
 // 发送文件
 export function sendFile(query) {
-  debugger
   return request({
     url: '/webim/sendFileMessage',
     method: 'post',
-    params: query.file
+    data: query
   })
 }
 // 聊天记录
@@ -40,3 +39,10 @@ export function getHistory(query) {
     method: 'get'
   })
 }
+// chatlog
+export function getChatlog(query) {
+  return request({
+    url: '/webim/getChatLog/'+query,
+    method: 'get'
+  })
+}

src/components/ChatBox/ChatBox.vue

@@ -13,10 +13,10 @@
                 <img :src="userAvatar(item.sender)">
               </div>
               <div class="chats chats-image" v-if="item.chatlogType === 'image'">
-                <img :src="item.content">
+                <img :src="item.content" style="width: 90%;height: auto">
               </div>
               <div class="chats chats-file" v-else-if="item.chatlogType === 'file'">
-                <a class="down-link" :href="item.content.src" download><i class="fa fa-cloud-download down-link-icon"></i><span class="down-link-file">{{item.content.name}}</span></a>
+                <a class="down-link" :href="item.content.src" :download="item.content.name"><i class="fa fa-cloud-download down-link-icon"></i><span class="down-link-file">{{item.content.name}}</span></a>
               </div>
               <div class="chats" v-else v-html="item.content"></div>
             </li>
@@ -26,8 +26,18 @@
           <Emoji v-show="emojiVisible"></Emoji>
           <div class="tool-bar">
             <span class="tool-bar-item fa fa-smile-o emjoi" @click="handleEmojiVisible(null)"></span>
-            <el-upload action="/dev-api/webim/sendFileMessage" v-if="action !== ''" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" :name="uploadName" :show-file-list="false" class="file-upload">
-              <span class="tool-bar-item fa fa-file-o"></span>
+            <el-upload
+              class="file-upload"
+              action="#"
+              :http-request="uploadFile"
+              :before-upload="handleBeforeUpload"
+              :on-success="handleUploadSuccess"
+              :on-error="handleUploadError"
+              :name="uploadName"
+              :show-file-list="false"
+              multiple
+              :limit="3">
+              <el-button size="small" type="primary" style="background: #fff;border:none;width:0px !important;height: 0px !important; "><i class="el-icon-upload" style="color: #e5e5e5;font-size: 20px"></i></el-button>
             </el-upload>
             <span class="tool-bar-item history" @click="handleHistoryVisible">历史记录</span>
           </div>
@@ -56,7 +66,6 @@
   export default {
     props: {
       mine: Object,
-      action: '/webim/sendFileMessage',
       type: String,
       ext: Array,
       uploadName: String,
@@ -146,22 +155,31 @@
         }
         this.afterSend(sendData)
       },
-      handleSendFile (src) {
-        debugger
+      uploadFile (item) {
+        const self = this
         this.$refs.textarea.focus()
-        sendFile(src).then(response => {
-          debugger
-          this.src = response.data;
+        let uploadData = new FormData()
+        uploadData.append('file', item.file)
+        sendFile(uploadData).then(response => {
+          if(response.code=="200") {
+            self.src = '/dev-api' + response.msg;
+            self.handleUploadSuccess(self.src);
+          }else{
+            self.handleUploadError();
+          }
         });
-        // const content = {
-        //   src: src,
-        //   name: this.fileName
-        // }
-        // const sendData = {
-        //   content: content,
-        //   chatlogType: 'file'
-        // }
-        // this.afterSend(sendData)
+      },
+      handleSendFile (src) {
+        this.$refs.textarea.focus()
+        const content = {
+          src: src,
+          name: this.fileName
+        }
+        const sendData = {
+          content: content,
+          chatlogType: 'file'
+        }
+        this.afterSend(sendData)
       },
       handleBeforeUpload (file) {
         const fileSize = file.size
@@ -175,11 +193,12 @@
         this.fileName = file.name
       },
       handleUploadSuccess (data) {
+        debugger
         this.$message({
           type: 'success',
           message: '文件发送成功'
         })
-        const src = data.src
+        const src = data
         const fileNameArr = this.fileName.split('.')
         const ext = fileNameArr[fileNameArr.length - 1].toLowerCase()
         const imgExt = ['bmp', 'jpg', 'jpeg', 'png', 'gif']
@@ -210,6 +229,7 @@
         this.handleScroll()
         this.sendMessage = ''
         this.$parent.emitSend(sendData)
+        debugger
         this.store.commit('updateLocalHistory', sendData)
         sendMsg(sendData)
       },
@@ -240,6 +260,7 @@
         this.currentImage = ''
       },
       handleHistoryVisible () {
+        debugger
         this.historyVisible = true
         let chat = Object.assign(this.currentChatInfo, this.currentChat)
         this.$parent.handleHistoryVisible(chat)
@@ -316,6 +337,9 @@
   }
 </script>
 <style lang="scss" scoped>
+  .send-btn{
+    background: #1d93ec;
+  }
   .clearfix::after{
     content: " ";
     display:block;
@@ -403,6 +427,7 @@
         padding: 10px;
         width: 79%;
         cursor: pointer;
+        max-width: 400px;
       }
       .mine {
         overflow: hidden;

src/components/ChatList/ChatList.vue

@@ -1,4 +1,5 @@
 <template>
+  <!--  图片文件发送模块-->
   <div class="middle">
     <ul class="list">
       <li class="list-item" v-for="(item, index) in lists" :key="index" @click="handleChatChange(item)" :class="{'current': currentChat && currentChat.id === item.id}">
@@ -99,6 +100,8 @@
     height: 100%;
     overflow: hidden;
     width: 230px;
+    border-right: 1px solid #e7e7e7;
+    background: #fafafa;
     .list{
       overflow-y: auto;
       padding: 0;
@@ -109,10 +112,14 @@
         padding: 10px;
         position: relative;
         cursor: pointer;
+        border-bottom: 1px solid #e5e5e5;
         &:hover .chat-close {
           display: block;
         }
       }
+  .current{
+    background: #ebebec;
+  }
       .avatar {
         width: 40px;
         height: 40px;
@@ -164,14 +171,14 @@
     .chat-close {
       display: none;
       position: absolute;
-      top: 30px;
+      top: 21px;
       right: 10px;
       width: 20px;
       height: 20px;
       line-height: 18px;
       font-size: 20px;
       text-align: center;
-      background: #6a6a6a;
+      background: #1d93ec;
       border-radius: 50%;
       color: #fff;
     }

src/components/ChatLog/ChatLog.vue

@@ -7,16 +7,16 @@
           <span class="close" @click="handleHistoryVisible">&times;</span>
         </div>
         <ul class="log-list">
-          <li class="log-item" v-for="(item, index) in cloneHistory" :class="{'mine': item.mine}">
+          <li class="log-item" v-for="(item, index) in cloneHistory.records" :class="{'mine': item.mine}">
             <div class="time" v-if="handleTimeVisible(item, index)"><span>{{item.time | formatDate(true) }}</span></div>
             <div class="avatar">
               <img :src="item.avatar">
             </div>
             <div class="message message-image" v-if="item.chatlogType === 'image'">
-              <img :src="item.content">
+              <img :src="item.content" style="width: 90%;height: auto">
             </div>
             <div class="message message-file" v-else-if="item.chatlogType === 'file'">
-              <a class="down-link" :href="item.content.src" download><i class="fa fa-cloud-download down-link-icon"></i><span class="down-link-file">{{item.content.name}}</span></a>
+              <a class="down-link" :href="item.content.src" :download="item.content.name"><i class="fa fa-cloud-download down-link-icon"></i><span class="down-link-file">{{item.content.name}}</span></a>
             </div>
             <div class="message" v-else v-html="item.content"></div>
           </li>
@@ -37,6 +37,7 @@
 <script>
   import { formatDate } from '@/filters/filters'
   import { deepCopy } from '@/utils/utils.js'
+  import { getChatlog } from '@/api/webim/index.js'
   export default {
     name: 'chatlog',
     props: {
@@ -55,10 +56,11 @@
     },
     methods: {
       handleTimeVisible (item, index) {
+        const self = this
         if (index === 0) {
           return true
         } else {
-          return (this.history.records[index].time - this.history.records[index - 1].time > 10 * 60 * 1000)
+          return (self.history.records[index].time - self.history.records[index - 1].time > 10 * 60 * 1000)
         }
       },
       handleHistoryVisible () {
@@ -69,27 +71,28 @@
         this.$parent.$parent.handlePageChange(page)
       },
       makeCloneHistory () {
-        if (this.history && !this.history.records) return
-        let history = deepCopy(this.history)
-        history.records.forEach(item => {
-          item.mine = item.sender === this.mine.id
+        // if (this.history && !this.history.records) return
+        // let history = deepCopy(this.history)
+        const self = this
+        getChatlog(self.mine.id).then(function (response) {
+          debugger
+          let history =response.data
+          history.records.forEach(item => {
+            item.mine = item.sender == self.mine.id.toString()
+          })
+          return self.cloneHistory=history
         })
-        return history.records
       }
     },
     filters: {
       formatDate
     },
+    mounted () {
+      this.makeCloneHistory()
+    },
     watch: {
       value (newV) {
         this.visible = newV
-      },
-      history: {
-        handler () {
-          this.cloneHistory = this.makeCloneHistory()
-        },
-        deep: true,
-        immediate: true
       }
     }
   }

src/components/Contacts/ContactCard.vue

@@ -74,6 +74,7 @@
       border-radius: 50%;
       font-size: 20px;
       cursor: pointer;
+      background: #07c160;
     }
     .cc-header {
       border-bottom: 1px solid #ccc;
@@ -122,7 +123,7 @@
         padding: 0 20px;
       }
       .cc-info-title {
-        font-weight: 400px;
+        font-weight: 400;
         padding: 20px 0;
       }
       .cc-info-item {

src/components/Contacts/Contacts.vue

@@ -5,7 +5,7 @@
         <ul class="contact-list">
           <li class="concat-item" :class="{'active': contactTab === 'friend'}" @click="handleContact('friend')"><span>好友</span><span class="line"></span></li>
           <li class="concat-item" :class="{'active': contactTab === 'group'}" @click="handleContact('group')"><span>群组</span><span class="line"></span></li>
-          <li class="hover_line"></li>
+          <li class="hover_line" style="display:none"></li>
         </ul>
       </div>
       <div class="contact-content">
@@ -63,39 +63,48 @@
   }
 </script>
 <style lang="scss" scoped>
+  .active{
+    border-bottom: 1px solid #07c160;
+  }
+  .contact-list{
+    padding-left: 0px;
+    border-bottom: 1px solid #292a2c;
+    margin: 0;
+  }
   .im-contacts {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: space-between;
-    .contact-left {
-      width: 230px;
-      height: 100%;
-    }
-    .contact-tab {
-      height: 40px;
-      line-height: 40px;
-      box-sizing: border-box;
-    }
-    .contact-content {
-      height: calc(100% - 40px);
-      overflow: hidden;
-    }
-    .concat-item {
-      position: relative;
-      display: inline-block;
-      width: 48%;
-      text-align: center;
-      font-size: 14px;
-      cursor: pointer;
-      .line {
-        position: absolute;
-        display: block;
-        bottom: 1px;
-        left: 25px;
-        width: 60px;
-        text-align: center;
-      }
-    }
+  .contact-left {
+    width: 230px;
+    height: 100%;
+    border-right: 1px solid #e5e5e5;
+  }
+  .contact-tab {
+    height: 40px;
+    line-height: 40px;
+    box-sizing: border-box;
+  }
+  .contact-content {
+    height: calc(100% - 40px);
+    overflow: hidden;
+  }
+  .concat-item {
+    position: relative;
+    display: inline-block;
+    width: 48%;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer;
+  .line {
+    position: absolute;
+    display: block;
+    bottom: 1px;
+    left: 25px;
+    width: 60px;
+    text-align: center;
+  }
+  }
   }
 </style>

src/components/FriendList/FriendList.vue

@@ -36,19 +36,11 @@
     methods: {
       makeCloneFriends () {
         let data = []
-        let tempData = {
-          groupname: '未命名分组',
-          id: 100000000,
-          list: []
-        }
         this.friendsList.forEach(item => {
-          if (!item.groupname) {
-            tempData.list.push(item)
-          } else {
-            data.push(item)
-          }
+            if (item.groupname) {
+              data.push(item)
+            }
         })
-        data.push(tempData)
         data.map(item => {
           item.isOpen = false
         })
@@ -59,7 +51,6 @@
         // group.isOpen = !group.isOpen
       },
       handleUserItemClick (contact) {
-        debugger
         contact.type = 'friend'
         this.clickCount++
         setTimeout(() => {
@@ -85,40 +76,44 @@
   .friends {
     width: 100%;
     margin-top: 10px;
-    height: 98%;
+    /*height: 98%;*/
+    height: 520px;
     overflow: auto;
     font-size: 14px;
-    &-group {
-      cursor: pointer;
-      .fg-title {
-        margin-left: 10px;
-        height: 26px;
-        line-height: 26px;
-      }
-    }
-    .fg-caret {
-      transition: all 0.35s;
-      transform: rotate(0);
-      margin-right: 5px;
-      &.open {
-        transform: rotate(90deg)
-      }
-    }
-    .fg-item {
-      height: 50px;
-      line-height: 50px;
-      padding-left: 20px;
-    }
-    .fg-avatar {
-      width: 30px;
-      height: 30px;
-      margin-right: 10px;
-      border-radius: 50%;
-      vertical-align: middle;
-    }
-    .fg-empty {
-      text-align: center;
-      color: #ccc;
-    }
+  &-group {
+     cursor: pointer;
+  .fg-title {
+    margin-left: 10px;
+    height: 26px;
+    line-height: 26px;
+  }
+  }
+  .fg-caret {
+    transition: all 0.35s;
+    transform: rotate(0);
+    margin-right: 5px;
+  &.open {
+     transform: rotate(90deg)
+   }
+  }
+  .fg-item {
+    height: 50px;
+    line-height: 50px;
+    padding-left: 20px;
+  }
+  .fg-avatar {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+  .fg-empty {
+    text-align: center;
+    color: #ccc;
+  }
+  }
+  .friends .fg-caret .open {
+    transform: rotate(90deg);
   }
 </style>

src/components/GroupList/GroupList.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="gg-list-container">
+    <div class="gg-add-new" @click="handledialogVisible">+</div>
     <ul class='gg-list'>
       <li class="gg-empty" v-if="groupsList.length === 0">暂无群组信息</li>
       <li class='gg-item' v-for='(group, gindex) in groupsList' :key='gindex' @click="handleGroupItemClick(group)" v-else>
@@ -7,7 +8,6 @@
         <span class='gg-name'>{{group.groupname}}</span>
       </li>
     </ul>
-    <div class="gg-add-new" @click="handledialogVisible">+</div>
     <el-dialog width="650px" :visible.sync="dialogVisible" title="创建群组">
       <div class="">
         <label class="label">请输入群组名称</label>
@@ -144,7 +144,7 @@
     font-size: 32px;
     font-weight: 600;
     border-radius: 50%;
-    color: #fff;
+    color: #303133;
     text-align: center;
     cursor: pointer;
   }

src/components/Header/TheHeader.vue

@@ -23,12 +23,12 @@
     <ul class="im-tab" v-if="!brief">
       <li class="im-tab-item tab-chatlist" :class="{'active': currentTab === 'chat'}" title="会话列表" @click="handleCurrentTab('chat')">
         <i class="new-msg" v-show="count !== 0">{{count}}</i>
-        <button class="btn btn-chatlist"><i class="fa fa-comment-o"></i></button>
+        <button class="btn btn-chatlist" ><i class="fa fa-comment-o"></i></button>
         <p class="ti-arrow"><i class="fa fa-caret-up"></i></p>
       </li>
       <li class="im-tab-item tab-userlist" :class="{'active': currentTab === 'user'}" title="联系人列表" @click="handleCurrentTab('user')">
         <button class="btn btn-userlist"><i class="fa fa-users"></i></button>
-        <p class="ti-arrow"><i class="fa fa-caret-up"></i></p>
+        <p class="ti-arrow" ><i class="fa fa-caret-up"></i></p>
       </li>
     </ul>
     <ul class="im-tools">
@@ -115,183 +115,195 @@ export default {
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
-    .avatar {
-      display: block;
-      float: left;
-      margin: 5px 10px;
-      width: 40px;
-      height: 40px;
-      padding: 3px;
-      background: #fff;
-      border-radius: 50%;
-      img{
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-    .top-search {
-      display: inline-block;
-      .search-box {
-        position: relative;
-        width: 180px;
-        height: 20px;
-        line-height: 20px;
-        margin: 14px auto;
-        border-radius: 20px;
-        padding: 3px 10px;
-      }
-      input {
-        width: 150px;
-        height: 20px;
-        outline: none;
-        border: none;
-        flex: 1;
-      }
-      button{
-        border:none;
-        outline: none;
-        padding: 0;
-        margin: 0;
-      }
-      .search-close {
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        text-align: center;
-        line-height: 18px;
-        background: #d5d5d5;
-        cursor: pointer;
-        color: #000;
-        font-size: 20px;
-        font-weight: 400;
-        &:hover {
-          background: #ccc;
-        }
-      }
-    }
-    .im-tab, .im-tools {
-      margin-top: 15px;
-    }
-    .im-tools-item {
-      cursor: pointer;
-      margin-top: 5px;
-      .btn {
-        font-size: 18px;
-      }
-    }
-    .im-tab-item {
-      display: inline-block;
-      margin: 0 20px;
-      cursor: pointer;
-      .ti-arrow {
-        margin: 0;
-        padding: 0;
-        text-align: center;
-        font-size: 30px;
-        margin-top: -9px;
-        margin-top: -4px\9\0;
-        opacity: 0;
-        transition: opacity 0.35s;
-      }
-    }
-    .active {
-      .ti-arrow {
-        opacity: 1;
-      }
-    }
-    .btn {
-      border: none;
-      outline: none;
-      font-size: 24px;
-      cursor: pointer;
-    }
-    .im-tools {
-      margin-right: 30px;
-    }
-    .im-tools-skin {
-      position: relative;
-    }
-    .skin-list {
-      position: absolute;
-      left: -79px;
-      top: 20px;
-      z-index: 99;
-      width: 100px;
-      background: #fff;
-      border-radius: 5px;
-      overflow: hidden;
-      box-shadow: 0 0 20px rgba(0,0,0,0.15);
-    }
-    .skin-item {
-      padding: 10px;
-      font-size: 14px;
-      border-bottom: 1px solid #ddd;
-      .fa {
-        color: transparent;
-        margin-right: 5px;
-      }
-      .active {
-        color: #000;
-      }
-      &:hover {
-        background: #f5f5f5;
-      }
-    }
-    .tab-chatlist {
-      position: relative;
-    }
-    .new-msg {
-      position: absolute;
-      top: -10px;
-      left: -10px;
-      background: #f00;
-      color: #fff;
-      width: 32px;
-      height: 26px;
-      border-radius: 50%;
-      font-size: 12px;
-      line-height: 26px;
-      text-align: center;
-    }
-    .search-result-panel {
-      position: absolute;
-      top: 60px;
-      left: 0;
-      bottom: 0px;
-      width: 260px;
-      background: #fff;
-      z-index: 999;
-      box-shadow: 0 0 20px #ccc;
-      overflow: auto;
-      .sr-title {
-        padding: 20px 10px;
-        font-size:16px;
-        border-bottom: 1px solid #ccc;
-      }
-      .sr-title-empty {
-        padding: 20px 10px;
-        font-size:16px;
-        border: none;
-        text-align: center;
-      }
-      .sr-list-item {
-        display: block;
-        width: 100%;
-        height: 60px;
-        cursor: pointer;
-        &:hover {
-          background: #ccc;
-        }
-        p {
-          display: inline-block;
-          height: 60px;
-          line-height: 60px;
-        }
-      }
-    }
+    /*background: #1d93ec;*/
+    background: #292a2c;
+  .avatar {
+    display: block;
+    float: left;
+    margin: 5px 10px;
+    width: 40px;
+    height: 40px;
+    padding: 3px;
+    background: #fff;
+    border-radius: 50%;
+  img{
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+  }
+  .top-search {
+    display: inline-block;
+  .search-box {
+    position: relative;
+    width: 230px;
+    height: 50px;
+    line-height: 20px;
+    margin: 4px auto;
+    border-radius: 20px;
+    padding: 12px 10px 0;
+  }
+  input {
+    width: 200px;
+    height: 28px;
+    outline: none;
+    border: none;
+    flex: 1;
+    border-radius: 13px;
+    padding-left: 30px;
+  }
+  button{
+    position: absolute;
+    left: 22px;
+    top: 18px;
+    border:none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+  }
+  .search-close {
+    position: absolute;
+    top: -3px;
+    right: 31px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 18px;
+    background: #d5d5d5;
+    cursor: pointer;
+    color: #000;
+    font-size: 20px;
+    font-weight: 400;
+  &:hover {
+     background: #ccc;
+   }
+  }
+  }
+  .im-tab, .im-tools {
+    margin-top: 15px;
+  }
+  .im-tools-item {
+    cursor: pointer;
+    margin-top: 5px;
+  .btn {
+    font-size: 18px;
+  }
+  }
+  .im-tab-item {
+    display: inline-block;
+    margin: 0 20px;
+    cursor: pointer;
+  .ti-arrow {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 30px;
+    margin-top: -9px;
+    margin-top: -4px\9\0;
+    opacity: 0;
+    transition: opacity 0.35s;
+    color: #fff;
+  }
+  }
+  .active {
+  .ti-arrow {
+    opacity: 1;
+  }
+  }
+  .btn {
+    border: none;
+    outline: none;
+    font-size: 24px;
+    cursor: pointer;
+    background: none;
+    color: #fff;
+  }
+  .im-tools {
+    margin-right: 30px;
+  }
+  .im-tools-skin {
+    position: relative;
+  }
+  .skin-list {
+    position: absolute;
+    left: -79px;
+    top: 20px;
+    z-index: 99;
+    width: 100px;
+    background: #fff;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0,0,0,0.15);
+  }
+  .skin-item {
+    padding: 10px;
+    font-size: 14px;
+    border-bottom: 1px solid #ddd;
+  .fa {
+    color: transparent;
+    margin-right: 5px;
+  }
+  .active {
+    color: #000;
+  }
+  &:hover {
+     background: #f5f5f5;
+   }
+  }
+  .tab-chatlist {
+    position: relative;
+  }
+  .new-msg {
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    background: #f00;
+    color: #fff;
+    width: 32px;
+    height: 26px;
+    border-radius: 50%;
+    font-size: 12px;
+    line-height: 26px;
+    text-align: center;
+  }
+  .search-result-panel {
+    position: absolute;
+    top: 80px;
+    left: 30px;
+    bottom: 0px;
+    width: 270px;
+    height: 610px;
+    background: #fff;
+    z-index: 999;
+    box-shadow: 0 0 20px #ccc;
+    overflow: auto;
+  .sr-title {
+    padding: 20px 10px;
+    font-size:16px;
+    border-bottom: 1px solid #ccc;
+  }
+  .sr-title-empty {
+    padding: 20px 10px;
+    font-size:16px;
+    border: none;
+    text-align: center;
+  }
+  .sr-list-item {
+    display: block;
+    width: 100%;
+    height: 60px;
+    cursor: pointer;
+  &:hover {
+     background: #ccc;
+   }
+  p {
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+  }
+  }
+  }
   }
 </style>
+

src/filters/filters.js

@@ -3,6 +3,7 @@ import moment from 'moment'
 moment.locale('zh-cn')
 
 export function formatDate (value, type) {
+  value=parseInt(value)
   if (!value) {
     return value
   }
@@ -10,32 +11,34 @@ export function formatDate (value, type) {
   const diff = now - value
   const oneDay = 24 * 60 * 60 * 1000
   if (diff < oneDay) {
-    return new Date(value).format('hh:mm')
+    return format(new Date(value),'hh:mm')
   } else if (diff < 2 * oneDay) {
     return '昨天'
   } else if (type) {
-    return new Date(value).format('yyyy-MM-dd hh:mm')
+    return format(new Date(value),'yyyy-MM-dd hh:mm')
   } else {
     return ''
   }
 }
-Date.prototype.format = function(fmt) {
-  var o = {
-    "M+" : this.getMonth()+1,                 //月份
-    "d+" : this.getDate(),                    //日
-    "h+" : this.getHours(),                   //小时
-    "m+" : this.getMinutes(),                 //分
-    "s+" : this.getSeconds(),                 //秒
-    "q+" : Math.floor((this.getMonth()+3)/3), //季度
-    "S"  : this.getMilliseconds()             //毫秒
-  };
-  if(/(y+)/.test(fmt)) {
-    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
+export function format(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
   }
-  for(var k in o) {
-    if(new RegExp("("+ k +")").test(fmt)){
-      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
     }
   }
   return fmt;
 }
+function padLeftZero (str) {
+  return ('00' + str).substr(str.length);
+}

src/store/store.js

@@ -141,6 +141,7 @@ IMStroe.prototype.mutations = {
     this.commit('setCurrentChat', states.chatLogsList[0])
   },
   getNewMsg (states, message) {
+    debugger
     if (!states.newMsgLists.hasOwnProperty(message.sender)) {
       states.newMsgLists[message.sender] = []
     }

src/views/webim/im.vue

@@ -20,7 +20,6 @@
             :mine="mine"
             :ext="ext"
             :max-size="maxSize"
-            :action="action"
             :history="history"
             :upload-name="uploadName"
             :store="store"/>
@@ -40,8 +39,8 @@
   import { device, typeOf } from '@/utils/utils'
   import storage from '@/utils/storage'
   import IMStore from '@/store/store'
-  import {list,getMine,getHistory} from '@/api/webim/index'
-  import '@/dist/vue-im.min.js'
+  import {list,getMine,getHistory,getChatlog} from '@/api/webim/index'
+
 
   export default {
     name: 'vue-im',
@@ -88,7 +87,6 @@
           return []
         }
       },
-      action: '/webim/sendFileMessage',
       uploadName: {
         type: String,
         default: 'image'
@@ -144,7 +142,8 @@
       },
       websocketonmessage: function (e) {
         console.log(e.data);
-        this.message = eval('('+e.data+')');
+        this
+        this.message = eval('(' + e.data + ')');
         this.getMessage(this.message);
       },
       websocketclose: function (e) {
@@ -161,44 +160,29 @@
       },
       getHistory(id){
         const self = this
-        getHistory(id).then(function (response) {
+        getChatlog(id).then(function (response) {
           let history = response.data
-          return history
-        })
-      },
-      fetchUserList () {
-        const self = this
-        list().then(function (response) {
-            let lists = response.data
-            self.lists = lists
-          })
-      },
-      initIM () {
-        if (!this.mine || !this.mine.id) {
-          return
-        } else {
-          this.store.states.mine = this.mine
-          this.store.commit('updateUserInfoCenter', this.mine)
+          debugger
           const localData = storage.readData('iminfo')
           let currentChat = storage.readData('currentChat')
-          if (currentChat && currentChat.hostId === this.mine.id) {
-            this.store.commit('setCurrentChat', currentChat)
+          if (currentChat && currentChat.hostId === id) {
+            self.store.commit('setCurrentChat', currentChat)
           } else {
-            this.store.commit('setCurrentChat', null)
+            self.store.commit('setCurrentChat', null)
           }
-          if (this.brief && this.chat && this.chat.id) {
-            this.chat.type = this.chat.type || 'friend'
-            currentChat = this.chat
-            this.store.commit('updateUserInfoCenter', this.chat)
-            this.store.commit('setCurrentChat', this.chat)
-            this.store.commit('setCurrentTab', 'chat')
+          if (self.brief && self.chat && self.chat.id) {
+            self.chat.type = self.chat.type || 'friend'
+            currentChat = self.chat
+            self.store.commit('updateUserInfoCenter', self.chat)
+            self.store.commit('setCurrentChat', self.chat)
+            self.store.commit('setCurrentTab', 'chat')
           }
           let tempData = {
-            avatar: this.mine.avatar,
-            id: this.mine.id,
-            username: this.mine.username
+            avatar: self.mine.avatar,
+            id: self.mine.id,
+            username: self.mine.username
           }
-          if (localData && localData.id === this.mine.id) {
+          if (localData && localData.id === self.mine.id) {
             tempData.history = localData.history
             tempData.chatList = localData.chatList
           } else {
@@ -209,14 +193,32 @@
           let chatLogsList = tempData.chatList
           if (currentChat !== null && currentChat !== undefined) {
             const flag = chatLogsList.find(item => {
-              return item.id === currentChat.id
+              return item.id == currentChat.id.toString()
             })
             if (!flag) {
               chatLogsList.unshift(currentChat)
             }
           }
-          this.store.commit('setLocalHistory', tempData.history)
-          this.store.commit('updateChatLogsList', chatLogsList)
+          self.store.commit('setLocalHistory', tempData.history)
+          self.store.commit('updateChatLogsList', chatLogsList)
+          self.history=history
+        })
+      },
+      fetchUserList () {
+        const self = this
+        list().then(function (response) {
+            let lists = response.data
+            self.lists = lists
+          })
+      },
+      initIM () {
+        if (!this.mine || !this.mine.id) {
+          return
+        } else {
+          this.store.states.mine = this.mine
+          this.store.commit('updateUserInfoCenter', this.mine)
+
+          this.getHistory(this.mine.id)
         }
         this.initWebSocket()
       },
@@ -224,6 +226,9 @@
         this.$emit('on-send', message)
       },
       getMessage (message) {
+        if(message.chatlogType=="file"){
+          message.content=eval('(' + message.content + ')')
+        }
         this.handleVoice()
         this.store.commit('getNewMsg', message)
         message.username = message.sendername
@@ -325,8 +330,11 @@
 </script>
 <style lang="scss">
   .wrapper {
-    width: 100%;
+    /*width: 100%;*/
     height: 100%;
+    margin: 12px;
+    background: #fff;
+    padding: 20px;
   ::-webkit-scrollbar {
     width: 5px;
     height: 12px;