feat: 我的收藏&我的文库页面

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="user-library">
+    <van-tabs
+      :title-active-color="tabConf.titleActiveColor"
+      :title-inactive-color="tabConf.titleInactiveColor"
+      :line-width="tabConf.lineWidth"
+      :color="tabConf.color"
+      v-model="tabActive"
+    >
+      <van-tab title="我的文库" name="0">
+        <van-list
+          v-model="myLibListState.loading"
+          :finished="myLibListState.finished"
+          finished-text="没有更多了"
+          @load="onLoad('0')"
+        >
+          00000
+        </van-list>
+      </van-tab>
+
+      <van-tab title="文库收藏" name="1">
+        <van-list
+          v-model="myCollectionListState.loading"
+          :finished="myCollectionListState.finished"
+          finished-text="没有更多了"
+          @load="onLoad('1')"
+        >
+          1111
+        </van-list>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Tabs, Tab, List } from 'vant'
+import { mapActions, mapState } from 'vuex'
+
+@Component({
+  name: 'user-library',
+  components: {
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+    [List.name]: List
+  },
+  computed: {
+    ...mapState('main', {
+      userLibInfo: (state: any) => state.userLib
+    })
+  },
+  methods: {
+    ...mapActions({
+      getList: 'main/getMyLibList'
+    })
+  }
+})
+
+export default class UserLibrary extends Vue {
+  getList: any
+
+  tabActive = '0'
+
+  tabConf = {
+    titleActiveColor: '#2ABED1',
+    titleInactiveColor: '#5F5E64',
+    lineWidth: '24',
+    color: '#2ABED1'
+  }
+
+  myLibListState = {
+    loading: false,
+    finished: false,
+    pageNum: 1,
+    pageSize: 10,
+    offset: 80,
+    scrollTop: 0,
+    list: []
+  }
+
+  myCollectionListState = {
+    loading: false,
+    finished: false,
+    pageNum: 1,
+    pageSize: 10,
+    offset: 80,
+    scrollTop: 0,
+    list: []
+  }
+
+  created () {
+    this.tabActive = this.$route.query.tab as string
+    this.getList({})
+  }
+
+  onLoad (tab: string) {
+    console.log(tab)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-library {
+  ::v-deep {
+    .van-tabs__wrap {
+      height: 48px;
+    }
+    .van-tabs__line {
+      bottom: 18px;
+    }
+    .van-tabs {
+      width: 100%;
+    }
+    .van-tab {
+      font-size: 16px;
+      line-height: 20px;
+    }
+  }
+}
+</style>