会话存档交互效果

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

@@ -55,7 +55,7 @@
           </ai-download> -->
         </div>
       </div>
-      <div class="content-right-info">
+      <div class="content-right-info" @scroll='msgScroll'>
         <div v-for="(item, index) in msgList" :key="index">
           <div class="item" :class="item.userId == id ? 'item-right' : 'item-left'">
             <!-- <p class="time" v-if="index == 0">{{item.msgSendTime}}</p> -->
@@ -147,10 +147,10 @@
         </div>
         <AiEmpty v-if="!msgList.length"></AiEmpty>
       </div>
-      <el-pagination class="msg-list-pagination"
+      <!-- <el-pagination class="msg-list-pagination"
         layout="prev, pager, next"
         :total="msgTotal" @current-change="msgCurrentChange" :current-page="msgCurrent" :page-size="20">
-      </el-pagination>
+      </el-pagination> -->
     </template>
   </ai-list>
 </template>
@@ -184,6 +184,7 @@
         leftActiveIndex: 0,
         msgCurrent: 1,
         msgTotal: 0,
+        msgPages: 2,
         msgList: [],
         msgType: 0,
         msgTypeList: [
@@ -193,7 +194,7 @@
           {name: '文件', value: 'file'},
         ],
         searchMsg: '',
-        // id: 'LiuYe',
+        id: 'LiuYe',
         id: ''
       }
     },
@@ -210,6 +211,17 @@
     },
 
     methods: {
+      msgScroll(e) {
+        if(e.target.scrollTop == 0) {
+          if(this.msgCurrent > this.msgPages) {
+            return this.$message('已加载完成，没有更多数据');
+          }else {
+            this.msgCurrent ++
+            this.getMsgList()
+          }
+        }
+        
+      },
       getListInit() {
         this.isLoading = true
         this.current = 1
@@ -240,9 +252,11 @@
       getMsgListInit() {
         this.isLoading = true
         this.msgCurrent = 1
+        this.msgPages = 2
         this.getMsgList()
       },
       getMsgList() {
+        var preveHeight = document.querySelector('.content-right-info').scrollHeight
         this.instance.post(`/app/appsessionarchiveinfo/list`, null, {
           params: {
             userId: this.id,
@@ -264,26 +278,20 @@
               if(item.msgType == 'file') {
                 item.files = [{url: item.sdkFileUrl, accessUrl: item.sdkFileUrl, name: item.sdkFileName, fileSizeStr: item.fileSizeStr}]
               }
-
               if(item.msgType == 'location') {
-                // const {AMap, map} = this
-                // item.map = null
-                // this.$load(item.map).then(() => {
-                //   // const marker = new AMap.Marker({
-                //   //   position: new AMap.LngLat(item.lng, item.lat),
-                //   //   title: item.address
-                //   // })
-                //   // item.map.add(marker)
-                //   item.map.setZoomAndCenter(item.zoom, [item.lng, item.lat], false, 600)
-                //   // item.map.setFitView()
-                // })
                 this.initMap(item.lng, item.lat, item.zoom, index)
               }
             })
-            this.msgList = res.data.records
+            this.msgList = this.msgCurrent > 1 ? [ ...res.data.records, ...this.msgList]: res.data.records
-            this.msgTotal = res.data.total || 0
+            this.msgPages = res.data.pages || 2
             this.$nextTick(() => {
-              document.querySelector('.content-right-info').scrollTo(0, 999999999)
+              if(this.msgCurrent == 1) {
+                document.querySelector('.content-right-info').scrollTo(0, 999999999)
+              }else {
+                var height = document.querySelector('.content-right-info').scrollHeight - preveHeight
+                document.querySelector('.content-right-info').scrollTop = height
+              }
+              
             })
           }
           this.isLoading = false
@@ -314,7 +322,6 @@
         this.getMsgListInit()
       },
       currentChange(e) {
-        console.log(e)
         this.current = e
         this.getList()
       },