联系人加载更多

public/images/file/other.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1625028321516" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10195" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M256 85.333333c-46.933333 0-85.333333 38.4-85.333333 85.333334v682.666666c0 46.933333 38.4 85.333333 85.333333 85.333334h512c46.933333 0 85.333333-38.4 85.333333-85.333334V337.066667L601.6 85.333333H256z" fill="#989FA5" p-id="10196"></path><path d="M686.933333 337.066667H853.333333L601.6 85.333333v166.4c0 46.933333 38.4 85.333333 85.333333 85.333334z" fill="#FFFFFF" opacity=".4" p-id="10197"></path><path d="M486.4 780.8h-170.666667c-4.266667 0-8.533333-4.266667-8.533333-8.533333s4.266667-8.533333 8.533333-8.533334h170.666667c4.266667 0 8.533333 4.266667 8.533333 8.533334s-4.266667 8.533333-8.533333 8.533333zM571.733333 695.466667h-256c-4.266667 0-8.533333-4.266667-8.533333-8.533334s4.266667-8.533333 8.533333-8.533333h256c4.266667 0 8.533333 4.266667 8.533334 8.533333s-4.266667 8.533333-8.533334 8.533334zM571.733333 610.133333h-256c-4.266667 0-8.533333-4.266667-8.533333-8.533333s4.266667-8.533333 8.533333-8.533333h256c4.266667 0 8.533333 4.266667 8.533334 8.533333s-4.266667 8.533333-8.533334 8.533333zM571.733333 524.8h-256c-4.266667 0-8.533333-4.266667-8.533333-8.533333s4.266667-8.533333 8.533333-8.533334h256c4.266667 0 8.533333 4.266667 8.533334 8.533334s-4.266667 8.533333-8.533334 8.533333z" fill="#FFFFFF" p-id="10198"></path></svg>

resources/assets/js/components/UserAvatar.vue

@@ -67,6 +67,10 @@
                 type: String,
                 default: ''
             },
+            asynch: {
+                type: Boolean,
+                default: true
+            },
         },
         data() {
             return {
@@ -172,6 +176,14 @@
                     this.user = this.userInfo;
                     return;
                 }
+                if (this.asynch) {
+                    setTimeout(this.loadData);
+                } else {
+                    this.loadData();
+                }
+            },
+
+            loadData() {
                 this.$store.dispatch("getUserBasic", {
                     userid: this.userid,
                     success: (user) => {

resources/assets/js/pages/manage/messenger.vue

@@ -19,7 +19,11 @@
                         {{$L(item.name)}}
                     </p>
                 </div>
-                <div ref="list" class="messenger-list overlay-y">
+                <ScrollerY
+                    ref="list"
+                    class="messenger-list overlay-y"
+                    @on-scroll="listScroll"
+                    static>
                     <ul v-if="tabActive==='dialog'" class="dialog">
                         <li
                             v-for="(dialog, key) in dialogList"
@@ -45,7 +49,7 @@
                         </li>
                     </ul>
                     <ul v-else class="contacts">
-                        <li v-for="(users, label) in contactsLists">
+                        <li v-for="(users, label) in contactsData">
                             <div class="label">{{label}}</div>
                             <ul>
                                 <li v-for="(user, index) in users" :key="index" @click="openContacts(user)">
@@ -55,8 +59,9 @@
                             </ul>
                         </li>
                         <li v-if="contactsLoad > 0" class="loading"><Loading/></li>
+                        <li v-else-if="!contactsHasMorePages" class="loaded">{{$L('共' + contactsList.length + '位联系人')}}</li>
                     </ul>
-                </div>
+                </ScrollerY>
                 <div class="messenger-menu">
                     <Icon @click="tabActive='dialog'" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
                     <Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
@@ -81,9 +86,10 @@
 <script>
 import {mapState} from "vuex";
 import DialogWrapper from "./components/DialogWrapper";
+import ScrollerY from "../../components/ScrollerY";
 
 export default {
-    components: {DialogWrapper},
+    components: {ScrollerY, DialogWrapper},
     data() {
         return {
             tabActive: 'dialog',
@@ -100,7 +106,10 @@ export default {
 
             contactsKey: '',
             contactsLoad: 0,
-            contactsLists: null,
+            contactsList: [],
+            contactsData: null,
+            contactsCurrentPage: 1,
+            contactsHasMorePages: false,
         }
     },
 
@@ -178,7 +187,7 @@ export default {
 
     watch: {
         tabActive(val) {
-            if (val && this.contactsLists === null) {
+            if (val && this.contactsData === null) {
                 this.getContactsList(1);
             }
         },
@@ -188,7 +197,7 @@ export default {
         contactsKey(val) {
             setTimeout(() => {
                 if (this.contactsKey == val) {
-                    this.contactsLists = null;
+                    this.contactsData = null;
                     this.getContactsList(1);
                 }
             }, 600);
@@ -196,6 +205,20 @@ export default {
     },
 
     methods: {
+        listScroll(res) {
+            switch (res.directionreal) {
+                case 'up':
+                    if (res.scrollE < 10) {
+                        if (this.tabActive === 'contacts'
+                            && this.contactsLoad == 0
+                            && this.contactsHasMorePages) {
+                            this.getContactsList(this.contactsCurrentPage + 1);
+                        }
+                    }
+                    break;
+            }
+        },
+
         closeDialog() {
             this.dialogId = 0;
             this.$store.state.method.setStorage("messenger::dialogId", 0)
@@ -223,8 +246,8 @@ export default {
         },
 
         getContactsList(page) {
-            if (this.contactsLists === null) {
+            if (this.contactsData === null) {
-                this.contactsLists = {};
+                this.contactsData = {};
             }
             this.contactsLoad++;
             this.$store.dispatch("call", {
@@ -246,20 +269,21 @@ export default {
                         return false;
                     }
                     let az = user.az ? user.az.toUpperCase() : "#";
-                    if (typeof this.contactsLists[az] === "undefined") this.contactsLists[az] = [];
+                    if (typeof this.contactsData[az] === "undefined") this.contactsData[az] = [];
                     //
-                    let index = this.contactsLists[az].findIndex(({userid}) => userid === user.userid);
+                    let index = this.contactsData[az].findIndex(({userid}) => userid === user.userid);
                     if (index > -1) {
-                        this.contactsLists[az].splice(index, 1, user);
+                        this.contactsData[az].splice(index, 1, user);
                     } else {
-                        this.contactsLists[az].push(user);
+                        this.contactsData[az].push(user);
+                        this.contactsList.push(user);
                     }
                 });
-                if (data.next_page_url && data.current_page < 3) {
+                this.contactsCurrentPage = data.current_page;
-                    this.getContactsList(data.current_page + 1)
+                this.contactsHasMorePages = data.current_page < data.last_page;
-                }
             }).catch(() => {
                 this.contactsLoad--;
+                this.contactsHasMorePages = false;
             });
         },
 

resources/assets/sass/pages/page-messenger.scss

@@ -193,7 +193,8 @@
                                 line-height: 34px;
                                 border-bottom: 1px solid #efefef;
                             }
-                            &.loading {
+                            &.loading,
+                            &.loaded {
                                 margin: 0;
                                 height: 52px;
                                 display: flex;