feat: mobile我的收藏&我的文库

jydocs-mobile/src/api/main.ts

@@ -35,12 +35,11 @@ export function doSearchDocs (data: any) {
 }
 
 // 我的文库
-export function getMyLibList (data: any) {
-  data = qs.stringify(data)
+export function getMyLibList (params: any) {
   return $request({
     url: '/user/list',
     method: 'get',
-    params: data
+    params
   })
 }
 

jydocs-mobile/src/router/modules/main.ts

@@ -32,7 +32,7 @@ export default [
     }
   },
   {
-    path: '/user/library',
+    path: '/user/lib',
     name: 'userLibrary',
     component: () => import('@/views/user/Library.vue'),
     meta: {

jydocs-mobile/src/views/Search.vue

@@ -75,10 +75,12 @@ import { dateFormatter } from '@/utils/globalFunctions'
     Card,
     Empty
   },
-  methods: {
+  computed: {
     ...mapState('main', {
       searchState: (state: any) => state.searchPageData
-    }),
+    })
+  },
+  methods: {
     ...mapMutations({
       saveSearchState: 'main/saveSearchPageState',
       clearSearchState: 'main/clearSearchPageState'
@@ -277,7 +279,7 @@ export default class extends Vue {
   }
 
   reStoreState () {
-    const listInfo = this.searchState()
+    const listInfo = this.searchState
     if (!listInfo || Object.keys(listInfo).length === 0) {
       return false
     } else {
@@ -287,6 +289,7 @@ export default class extends Vue {
       this.$nextTick(() => {
         const wrapper: any = this.$refs.scrollWrap
         wrapper.scrollTop = this.listState.scrollTop
+        this.clearSearchState()
       })
       return true
     }
@@ -300,7 +303,6 @@ export default class extends Vue {
       sortTypeList: this.sortTypeList,
       listState: this.listState
     }
-    console.log(d)
     this.saveSearchState(d)
   }
 }

jydocs-mobile/src/views/user/Library.vue

@@ -6,27 +6,56 @@
       :line-width="tabConf.lineWidth"
       :color="tabConf.color"
       v-model="tabActive"
+      class="j-container"
     >
       <van-tab title="我的文库" name="0">
         <van-list
           v-model="myLibListState.loading"
           :finished="myLibListState.finished"
-          finished-text="没有更多了"
-          @load="onLoad('0')"
+          :offset="myLibListState.offset"
+          @load="onLoad"
+          class="more-list"
+          ref="vanList"
         >
-          00000
+          <div>
+            <Card
+              v-for="(item, index) in myLibListState.list"
+              :key="index"
+              :title="item.docName"
+              :desc="item.docSummary"
+              :docType="item.docFileType"
+              :price="item.price"
+              :subInfo="calcSubInfo(item)"
+              @onClick="toDocDetail(item)"
+            />
+          </div>
         </van-list>
+        <Empty v-if="myLibListState.list.length === 0 && myLibListState.loaded">暂无数据</Empty>
       </van-tab>
 
       <van-tab title="文库收藏" name="1">
         <van-list
           v-model="myCollectionListState.loading"
           :finished="myCollectionListState.finished"
-          finished-text="没有更多了"
-          @load="onLoad('1')"
+          :offset="myCollectionListState.offset"
+          @load="onLoad"
+          class="more-list"
+          ref="vanList"
         >
-          1111
+          <div>
+            <Card
+              v-for="(item, index) in myCollectionListState.list"
+              :key="index"
+              :title="item.docName"
+              :desc="item.docSummary"
+              :docType="item.docFileType"
+              :price="item.price"
+              :subInfo="calcSubInfo(item)"
+              @onClick="toDocDetail(item)"
+            />
+          </div>
         </van-list>
+        <Empty v-if="myLibListState.list.length === 0 && myCollectionListState.loaded">暂无数据</Empty>
       </van-tab>
     </van-tabs>
   </div>
@@ -34,14 +63,19 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Tabs, Tab, List } from 'vant'
-import { mapActions, mapState } from 'vuex'
+import { mapState, mapMutations, mapActions } from 'vuex'
+import Card from '@/components/docs-card/Card.vue'
+import Empty from '@/components/common/Empty.vue'
+import { dateFormatter } from '@/utils/globalFunctions'
 
 @Component({
   name: 'user-library',
   components: {
     [Tabs.name]: Tabs,
     [Tab.name]: Tab,
-    [List.name]: List
+    [List.name]: List,
+    Card,
+    Empty
   },
   computed: {
     ...mapState('main', {
@@ -49,14 +83,22 @@ import { mapActions, mapState } from 'vuex'
     })
   },
   methods: {
+    ...mapMutations({
+      saveLibState: 'main/saveMyLibState',
+      clearLibState: 'main/clearMyLibState'
+    }),
     ...mapActions({
-      getList: 'main/getMyLibList'
+      getMyLibList: 'main/getMyLibList'
     })
   }
 })
 
 export default class UserLibrary extends Vue {
-  getList: any
+  protected userLibInfo: any
+  protected saveLibState: any
+  protected clearLibState: any
+
+  protected getMyLibList: any
 
   tabActive = '0'
 
@@ -68,6 +110,7 @@ export default class UserLibrary extends Vue {
   }
 
   myLibListState = {
+    loaded: false,
     loading: false,
     finished: false,
     pageNum: 1,
@@ -78,6 +121,7 @@ export default class UserLibrary extends Vue {
   }
 
   myCollectionListState = {
+    loaded: false,
     loading: false,
     finished: false,
     pageNum: 1,
@@ -87,13 +131,96 @@ export default class UserLibrary extends Vue {
     list: []
   }
 
+  get keyForList () {
+    const map: any = {
+      0: 'myLibListState',
+      1: 'myCollectionListState'
+    }
+    return map[this.tabActive] || map[0]
+  }
+
   created () {
     this.tabActive = this.$route.query.tab as string
-    this.getList({})
+    this.reStoreState()
+  }
+
+  toDocDetail (item: any) {
+    const { docId: id } = item
+    this.saveState()
+    this.$router.push({
+      name: 'details',
+      params: { id }
+    })
   }
 
-  onLoad (tab: string) {
-    console.log(tab)
+  calcSubInfo (item: any) {
+    const { uploadDate, downTimes } = item
+    return [dateFormatter(uploadDate, 'yyyy/MM/dd'), `${downTimes}次下载`]
+  }
+
+  async onLoad () {
+    const t: any = this.$data[this.keyForList]
+    const query = {
+      num: t.pageNum,
+      size: t.pageSize,
+      sign: this.tabActive
+    }
+    console.log('搜索参数：', query)
+    t.loading = true
+    const { data } = await this.getMyLibList(query)
+    t.loading = false
+    t.loaded = true
+
+    if (data && Array.isArray(data.list)) {
+      t.pageNum += 1
+      t.total = data.total
+      t.list = t.list.concat(data.list)
+    } else {
+      t.finished = true
+    }
+
+    // 数据请求完成(根据页码计算，当前页是否是最后一页)
+    // 请求完成后，页码就变为了下一页的页面，所以这里要-1
+    const isLastPage = (t.pageNum - 1) * t.pageSize >= t.total
+    if (isLastPage) {
+      t.finished = true
+    }
+  }
+
+  reStoreState () {
+    console.log('reStoreState')
+    const listInfo = this.userLibInfo
+    if (!listInfo || Object.keys(listInfo).length === 0) {
+      return false
+    } else {
+      for (const key in listInfo) {
+        this.$data[key] = listInfo[key]
+      }
+      this.setScrollTop(this.$data[this.keyForList].scrollTop)
+      setTimeout(() => {
+        this.clearLibState()
+      }, 20)
+      return true
+    }
+  }
+
+  setScrollTop (scrollTop: number) {
+    this.$nextTick(() => {
+      const wrapper: any = document.querySelector('.van-tabs__content')
+      wrapper.scrollTop = scrollTop
+    })
+  }
+
+  saveState () {
+    console.log('saveState')
+    const wrapper: any = document.querySelector('.van-tabs__content')
+    this.$data[this.keyForList].scrollTop = wrapper.scrollTop
+    const d = {
+      tabActive: this.tabActive,
+      myLibListState: this.myLibListState,
+      myCollectionListState: this.myCollectionListState
+    }
+    this.saveLibState(d)
   }
 }
 </script>
@@ -107,6 +234,14 @@ export default class UserLibrary extends Vue {
     .van-tabs__line {
       bottom: 18px;
     }
+    .van-tab__pane {
+      height: 100%;
+    }
+    .van-tabs__content {
+      flex: 1;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
     .van-tabs {
       width: 100%;
     }