feat: 历史消息数据展示优化

src/views/customerService/components/historyMessageList.vue

@@ -18,7 +18,7 @@
       <el-button size="mini" class="filter-item" @click="handleReset">重置</el-button>
       <el-main style="background-color: rgb(238, 241, 246); padding: 0; border: 1px solid #eee">
         <div class="chat-message">
-          <div class="chat-message-list" style="overflow:auto">
+          <div v-if="messageList && messageList.length > 0" class="chat-message-list" style="overflow:auto">
             <div
               v-if="isHasNextPage"
               class="chat-message-list__more"
@@ -38,6 +38,7 @@
             </ul>
             <div class="hash" />
           </div>
+          <div v-else class="chat-message-empty">暂无记录</div>
         </div>
       </el-main>
 
@@ -109,7 +110,7 @@ export default {
       findHistoryRecord(params).then(response => {
         if (response && response.data && response.data.data && response.data.data.dataList) {
           this.isHasNextPage = response.data.data.isHasNextPage
-          const list = []
+          let list = []
           response.data.data.dataList.map((item) => {
             const messageItem = {
               id: item.msgKey,
@@ -122,6 +123,7 @@ export default {
             }
             list.push(messageItem)
           })
+          list = list.reverse()
           if (this.listQuery.page === 1) {
             this.messageList = list
             this.scrollToBottom(true)
@@ -201,6 +203,19 @@ export default {
         }
       }
     }
+    .chat-message-empty {
+      height: 100%;
+      width: 100%;
+      font-size: 20px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      color: #989CA8;
+      line-height: 40px;
+      text-align: center;
+      justify-self: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
     .chat-message-input {
       border: 1px solid #DCDFE6;