perf(roll-tools-api): use random girl api

d2-projects · Feb 1, 2020 · 231c5f6 · 231c5f6
1 parent 3f22855
commit 231c5f6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/api/roll-tools-api.js b/src/api/roll-tools-api.js
@@ -38,7 +38,9 @@ export const client = () => {
 
   const apis = {
     image: {
-      girl: (page = 1) => instance.get('/image/girl/list', { params: { page } })
+      girl: (page = 1) =>
+        instance.get('/image/girl/list', { params: { page } }),
+      girl_random: () => instance.get('/image/girl/list/random')
     },
     ip: {
       self: () => instance.get('/ip/self'),

diff --git a/src/views/admin/roll-tools-api/fuli-images/index.vue b/src/views/admin/roll-tools-api/fuli-images/index.vue
@@ -16,15 +16,14 @@
       class="infinite-list"
       v-infinite-scroll="loadNext"
       infinite-scroll-distance="100"
-      :infinite-scroll-disabled="lock"
+      :infinite-scroll-disabled="!!lock"
     >
       <template v-for="pageNumber in page">
         <async
           :key="pageNumber"
-          :api="$rta.apis.image.girl"
-          :args="[pageNumber]"
+          :api="$rta.apis.image.girl_random"
           :transform="transform"
-          @success="lock = false"
+          @success="success"
           static
         >
           <template v-slot:default="{ pending, error, data }">
@@ -37,10 +36,11 @@
             <div v-else>
               <el-image
                 v-for="item in data"
+                lazy
                 class="infinite-list-item"
                 :key="item.imageUrl"
                 :src="item.imageUrl"
-                :preview-src-list="[item.imageUrl]"
+                :preview-src-list="urls"
               ></el-image>
             </div>
           </template>
@@ -51,23 +51,28 @@
 </template>
 
 <script>
-import { get } from 'lodash'
+import { get, map } from 'lodash'
 
 export default {
   inject: ['@adminContainer'],
   data() {
     return {
       page: 1,
-      lock: true
+      lock: 1,
+      urls: []
     }
   },
   methods: {
     transform(response) {
-      return get(response, 'data.data.list', [])
+      return get(response, 'data.data', [])
     },
     loadNext() {
-      this.lock = true
-      this.page++
+      this.lock += 1
+      this.page += 1
+    },
+    success(list) {
+      this.urls = [...this.urls, ...map(list, 'imageUrl')]
+      this.lock -= 1
     }
   }
 }
@@ -78,7 +83,7 @@ export default {
   overflow auto
   flex 1
   .infinite-list-item
-    width 25%
+    width 20%
     min-height 100px
 </style>