Add paginator to message frontend.

public/js/message.js

@@ -7,8 +7,15 @@ Vue.component('contact-list', {
     template: '#contact_list',
     data: function () {
         return {
-            contacts: null,
-            errorMessage: ''
+            contacts: [],
+            errorMessage: '',
+            current_page: 0,
+            last_page: null
+        }
+    },
+    computed: {
+        hasMore: function () {
+            return this.current_page < this.last_page;
         }
     },
     mounted: function () {
@@ -21,9 +28,12 @@ Vue.component('contact-list', {
     methods: {
         getContact: function () {
             var vm = this;
-            axios.get('/message/contacts')
+            axios.get('/message/contacts?page=' + (this.current_page + 1).toString())
                 .then(function (response) {
-                    vm.contacts = response.data.data;
+                    vm.current_page = response.data.current_page;
+                    vm.last_page = response.data.last_page;
+                    for (var i in response.data.data)
+                        vm.contacts.push(response.data.data[i]);
                 })
                 .catch(function (error) {
                     vm.errorMessage = error;
@@ -40,27 +50,58 @@ Vue.component('message-dialog', {
     template: '#message_dialog',
     data: function () {
         return {
-            messages: null,
-            errorMessage: ''
+            messages: [],
+            errorMessage: '',
+            current_page: 0,
+            last_page: null,
+            contact_id: null,
+            isHidden: true
         }
     },
     mounted: function () {
         this.$nextTick(function () {
             this.$on('loadDialogHandler', function (id) {
+                this.current_page = 0;
+                this.last_page = null;
                 this.getMessage(id);
             })
         })
     },
+    computed: {
+        hasMore: function () {
+            return this.current_page < this.last_page;
+        }
+    },
     methods: {
         getMessage: function (contact_id) {
             var vm = this;
-            axios.get('/message/getMessage?contact_id=' + contact_id.toString())
-                .then(function (response) {
-                    vm.messages = response.data.data;
-                })
-                .catch(function (error) {
-                    vm.errorMessage = error;
-                })
+            if (contact_id === 0 || this.contact_id === contact_id) {
+                contact_id = this.contact_id;
+                axios.get('/message/getMessage?contact_id=' + contact_id.toString() + '&page=' + (this.current_page + 1).toString())
+                    .then(function (response) {
+                        vm.current_page = response.data.current_page;
+                        vm.last_page = response.data.last_page;
+                        for (var i in response.data.data)
+                            vm.messages.unshift(response.data.data[i]);
+                        vm.isHidden = false;
+                    })
+                    .catch(function (error) {
+                        vm.errorMessage = error;
+                    })
+            }
+            else {
+                axios.get('/message/getMessage?contact_id=' + contact_id.toString())
+                    .then(function (response) {
+                        vm.current_page = response.data.current_page;
+                        vm.last_page = response.data.last_page;
+                        vm.messages = response.data.data.reverse();
+                        vm.isHidden = false;
+                    })
+                    .catch(function (error) {
+                        vm.errorMessage = error;
+                    })
+                this.contact_id = contact_id;
+            }
         }
     }
 });

resources/views/message/message.blade.php

@@ -40,10 +40,14 @@
                     @{{ contact.contact.nickname }} @{{ contact.unread_count }}
                 </li>
             </ul>
+            <a v-if="hasMore" v-on:click="getContact">加载更多</a>
         </div>
     </script>
+
     <script type="text/x-template" id="message_dialog">
-        <div>
+        <div :class="{ hide: isHidden }">
+            <a v-if="hasMore" v-on:click="getMessage(0)">加载更多</a>
+            <p v-else>没有更多了</p>
             <p v-if="errorMessage">@{{ errorMessage }}</p>
             <ul>
                 <li v-for="message in messages">