会话存档

project/pidu/app/AppSessionArchive/AppSessionArchive.vue

@@ -26,7 +26,7 @@ export default {
   },
   data() {
     return {
-      component: "List",
+      component: "Detail",
       params: {},
       include: [],
     };

project/pidu/app/AppSessionArchive/components/Detail.vue

@@ -28,12 +28,12 @@
             </div>
           </div>
           <AiEmpty v-if="!list.length"></AiEmpty>
+        </div>
         <el-pagination class="pagination"
           layout="prev, pager, next"
           :total="total" @current-change="currentChange" :current-page="current" :page-size="20">
         </el-pagination>
       </div>
-      </div>
     </template>
     <template slot="content">
       <div class="content-right-title">
@@ -85,11 +85,11 @@
           </div>
         </div>
         <AiEmpty v-if="!msgList.length"></AiEmpty>
-        <el-pagination class="pagination"
+      </div>
+      <el-pagination class="msg-list-pagination"
         layout="prev, pager, next"
         :total="msgTotal" @current-change="msgCurrentChange" :current-page="msgCurrent" :page-size="20">
       </el-pagination>
-      </div>
     </template>
   </ai-list>
 </template>
@@ -116,11 +116,11 @@
           name: ''
         },
         current: 1,
-        total: '',
+        total: 0,
         list: [],
         leftActiveIndex: 0,
         msgCurrent: 1,
-        msgTotal: '',
+        msgTotal: 0,
         msgList: [],
         msgType: 0,
         msgTypeList: [
@@ -142,6 +142,7 @@
         this.id = this.params.id
         this.getList()
       }
+      this.getList()
     },
 
     methods: {
@@ -164,7 +165,7 @@
         }).then(res => {
           if (res.code === 0) {
             this.list = res.data.records
-            this.total = res.data.total
+            this.total = res.data.total || 0
             this.getMsgListInit()
           }
           this.isLoading = false
@@ -189,13 +190,13 @@
             roomId: this.list[this.leftActiveIndex].type == 1 ? this.list[this.leftActiveIndex].roomId : '',
             type: this.list[this.leftActiveIndex].type,
             content: this.searchMsg,
-            startTime: this.time.length ? this.time[0] : '',
+            startTime: this.time ? this.time[0] : '',
-            endTime: this.time.length ? this.time[1] : ''
+            endTime: this.time ? this.time[1] : ''
           }
         }).then(res => {
           if (res.code === 0) {
             this.msgList = res.data.records
-            this.msgTotal = res.data.total
+            this.msgTotal = res.data.total || 0
           }
           this.isLoading = false
         }).catch(() => {
@@ -207,7 +208,7 @@
         this.getListInit()
       },
       onChange() {
-        this.getListInit()
+        this.getMsgListInit()
       },
       currentChange(e) {
         console.log(e)
@@ -262,6 +263,7 @@
       width: 100%;
       height: auto;
       background: #FAFAFB;
+      position: relative;
 
       .addressBook-left__title {
         display: flex;
@@ -288,9 +290,9 @@
       }
 
       .addressBook-left__list--wrapper {
-        height: calc(100% - 68px);
+        height: calc(100% - 110px);
         padding: 8px;
-        position: relative;
+        overflow-y: scroll;
         .addressBook-left__list--item {
           line-height: 44px;
           font-size: 16px;
@@ -313,12 +315,6 @@
           background-color: #E8EFFF;
           color: #26f;
         }
-        .pagination {
-          position: absolute;
-          bottom: 20px;
-          width: 100%;
-          text-align: center;
-        }
       }
       .addressBook-left__list--title {
         display: flex;
@@ -339,6 +335,13 @@
           margin-right: 8px;
         }
       }
+      .pagination {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        background-color: #fff;
+      }
     }
 
     :deep( .ai-list__content--right ){
@@ -349,12 +352,10 @@
 
       .ai-list__content--right-wrapper {
         width: 100%;
-      }
-    }
-
-    :deep .ai-list__content--right-wrapper {
-      padding: 0!important;
         position: relative;
+        padding: 0!important;
+        height: 100%;
+      }
     }
 
     .content-right-title {
@@ -406,6 +407,8 @@
     }
     .content-right-info {
       padding: 24px 16px;
+      height: calc(100% - 80px);
+      overflow-y: scroll;
       .item {
         margin-bottom: 48px;
         .time {
@@ -496,13 +499,27 @@
         }
         
       }
-      .pagination {
+    }
+    .addressBook-left__list--wrapper::-webkit-scrollbar,
+    .content-right-info::-webkit-scrollbar {
+      width: 4px;
+    }
+    .addressBook-left__list--wrapper::-webkit-scrollbar-thumb,
+    .content-right-info::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: rgba(0,0,0,0.2);
+    }
+    .addressBook-left__list--wrapper::-webkit-scrollbar-track
+    .content-right-info::-webkit-scrollbar-track {
+      border-radius: 0;
+      background: rgba(0,0,0,0.1);
+    }
+    .msg-list-pagination {
       position: absolute;
       bottom: 0;
       width: calc(100% - 32px);
       text-align: center;
     }
   }
-  }
 
 </style>