|
@@ -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%;
|
|
|
}
|