feat: pc我的文库&我的收藏页面完成

jydocs-pc/src/api/modules/user.js

@@ -1,5 +1,6 @@
 import httpRequest from '@/api'
 import mockRequest from '@/api/mock'
+import qs from 'qs'
 
 let request = httpRequest
 if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
@@ -15,9 +16,11 @@ export function ajaxSetLogin (data) {
   })
 }
 
-export function ajaxGetTest () {
+export function getUserDocs (data) {
+  data = qs.stringify(data)
   return request({
-    url: '/test/ajax',
-    method: 'get'
+    url: '/user/list',
+    method: 'POST',
+    data
   })
 }

jydocs-pc/src/router.js

@@ -43,6 +43,18 @@ export default new Router({
       name: 'purchasesuccess',
       component: () => import('@/views/purchase/purchasesuccess.vue')
     },
+    {
+      // 我的文库
+      path: '/user/docs',
+      name: 'user-docs',
+      component: () => import('@/views/UserDocs.vue')
+    },
+    {
+      // 我的收藏
+      path: '/user/collections',
+      name: 'user-docs',
+      component: () => import('@/views/UserCollections.vue')
+    },
     {
       path: '/404',
       name: '404',

jydocs-pc/src/views/Search.vue

@@ -177,7 +177,6 @@ export default {
     },
     onPageChange (p) {
       this.listState.pageNum = p
-      this.listState.loading = true
       this.doSearch()
     },
     calcSubInfo (item) {
@@ -232,7 +231,8 @@ export default {
     min-height: 500px;
   }
   .search-pagination {
-    margin: 28px 0 60px;
+    margin-top: 28px;
+    padding-bottom: 60px;
     text-align: right;
   }
 }

jydocs-pc/src/views/UserCollections.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="user-collections">
+    <div class="user-collections-header">
+      <span class="u-d-title">{{ title }}</span>
+    </div>
+    <div class="user-collections-content">
+      <div class="user-d-list" v-loading="listState.loading">
+        <doc-card
+          v-for="(item, index) in listState.list"
+          :key="index"
+          :title="item.DocName"
+          :desc="item.DocSummary"
+          :docType="item.docFileType"
+          :subInfo="calcSubInfo(item)"
+          @onClick="toDocDetail(item)"
+        >
+          <template slot="price">
+            <div class="highlight-text" v-if="item.Cost === '已购买'">已购买</div>
+            <Price v-else :price="item.Cost" />
+          </template>
+        </doc-card>
+        <no-data v-if="listState.list.length === 0 && listState.loaded">暂无文库收藏</no-data>
+      </div>
+      <div class="user-collections-pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next, ->, total"
+          :hide-on-single-page="true"
+          :current-page="listState.pageNum"
+          :page-size="listState.pageSize"
+          :total="listState.total"
+          @current-change="onPageChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Pagination } from 'element-ui'
+import DocCard from '@/components/doc-item-card/Card'
+import Price from '@/components/doc-item-card/Price'
+import NoData from '@/components/NoData'
+import { getUserDocs } from '../api/modules/user'
+import { dateFormatter, formatSize } from '@/utils/'
+import { mixinBackground } from '@/utils/mixins'
+
+export default {
+  name: 'user-collections',
+  mixins: [mixinBackground],
+  components: {
+    [Pagination.name]: Pagination,
+    DocCard,
+    Price,
+    NoData
+  },
+  data () {
+    return {
+      title: '我的收藏',
+      listState: {
+        loaded: false, // 是否已经搜索过
+        loading: false,
+        pageNum: 1, // 当前页
+        pageSize: 10, // 每页多少条数据
+        total: 0, // 一共多少条数据
+        list: [] // 查询请求返回的数据
+      }
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    async getList () {
+      const query = {
+        sign: 1,
+        num: this.listState.pageNum,
+        size: this.listState.pageSize
+      }
+      console.log(query)
+      this.listState.loading = true
+      this.listState.loaded = false
+      const r = await getUserDocs(query)
+      this.listState.loading = false
+      this.listState.loaded = true
+      const res = r.data
+      if (res.error_code === 0) {
+        this.listState.total = res.data.total
+        this.listState.list = res.data.list || []
+      }
+    },
+    toDocDetail (item) {
+      const { DocId: id } = item
+      this.$router.push({
+        name: 'content',
+        params: { id }
+      })
+    },
+    onPageChange (p) {
+      this.listState.pageNum = p
+      this.getList()
+    },
+    calcSubInfo (item) {
+      const { DocFileSize, CreateAt, UpdateAt, DeletedAt } = item
+      return [dateFormatter(CreateAt * 1000, 'yyyy-MM-dd'), formatSize(DocFileSize)]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-collections {
+  background-color: #fff;
+  margin: 0 auto;
+  .user-collections-header {
+    padding-top: 48px;
+    .u-d-title {
+      font-size: 24px;
+      line-height: 36px;
+      color: #1D1D1D;
+    }
+  }
+  .user-collections-content {
+    margin-top: 48px;
+    .u-d-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 28px;
+      height: 48px;
+      font-size: 14px;
+      line-height: 24px;
+      color: #686868;
+      border-radius: 4px;
+      background-color: #F5F6F7;
+    }
+    .user-d-list {
+      border-top: 1px solid transparent;
+      min-height: 500px;
+    }
+    .u-d-h-r {
+      display: inline-block;
+      width: 170px;
+      .u-d-h-item {
+        display: inline-block;
+        width: 50%;
+        &.size {
+          text-align: center;
+        }
+      }
+    }
+  }
+  .user-collections-pagination {
+    margin-top: 28px;
+    padding-bottom: 60px;
+    text-align: right;
+  }
+}
+</style>

jydocs-pc/src/views/UserDocs.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="user-docs">
+    <div class="user-docs-header">
+      <span class="u-d-title">{{ title }}</span>
+    </div>
+    <div class="user-docs-content">
+      <div class="u-d-header">
+        <span class="u-d-h-l">文件名</span>
+        <span class="u-d-h-r">
+          <span class="u-d-h-item time">下载时间</span>
+          <span class="u-d-h-item size">大小</span>
+        </span>
+      </div>
+      <div class="user-d-list" v-loading="listState.loading">
+        <doc-card
+          v-for="(item, index) in listState.list"
+          cardType="oneline"
+          :key="index"
+          :title="item.DocName"
+          :docType="item.docFileType"
+          :subInfo="calcSubInfo(item)"
+          @onClick="toDocDetail(item)"
+        />
+        <no-data v-if="listState.list.length === 0 && listState.loaded">暂无我的文库</no-data>
+      </div>
+      <div class="user-docs-pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next, ->, total"
+          :hide-on-single-page="true"
+          :current-page="listState.pageNum"
+          :page-size="listState.pageSize"
+          :total="listState.total"
+          @current-change="onPageChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Pagination } from 'element-ui'
+import DocCard from '@/components/doc-item-card/Card'
+import NoData from '@/components/NoData'
+import { getUserDocs } from '../api/modules/user'
+import { dateFormatter, formatSize } from '@/utils/'
+import { mixinBackground } from '@/utils/mixins'
+
+export default {
+  name: 'user-docs',
+  mixins: [mixinBackground],
+  components: {
+    [Pagination.name]: Pagination,
+    DocCard,
+    NoData
+  },
+  data () {
+    return {
+      title: '我的文库',
+      listState: {
+        loaded: false, // 是否已经搜索过
+        loading: false,
+        pageNum: 1, // 当前页
+        pageSize: 10, // 每页多少条数据
+        total: 0, // 一共多少条数据
+        list: [] // 查询请求返回的数据
+      }
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    async getList () {
+      const query = {
+        sign: 0,
+        num: this.listState.pageNum,
+        size: this.listState.pageSize
+      }
+      console.log(query)
+      this.listState.loading = true
+      this.listState.loaded = false
+      const r = await getUserDocs(query)
+      this.listState.loading = false
+      this.listState.loaded = true
+      const res = r.data
+      if (res.error_code === 0) {
+        this.listState.total = res.data.total
+        this.listState.list = res.data.list || []
+      }
+    },
+    toDocDetail (item) {
+      const { DocId: id } = item
+      this.$router.push({
+        name: 'content',
+        params: { id }
+      })
+    },
+    onPageChange (p) {
+      this.listState.pageNum = p
+      this.getList()
+    },
+    calcSubInfo (item) {
+      const { DocFileSize, CreateAt, UpdateAt, DeletedAt } = item
+      return [dateFormatter(CreateAt * 1000, 'yyyy-MM-dd'), formatSize(DocFileSize)]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-docs {
+  background-color: #fff;
+  margin: 0 auto;
+  .user-docs-header {
+    padding-top: 48px;
+    .u-d-title {
+      font-size: 24px;
+      line-height: 36px;
+      color: #1D1D1D;
+    }
+  }
+  .user-docs-content {
+    margin-top: 48px;
+    .u-d-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 28px;
+      height: 48px;
+      font-size: 14px;
+      line-height: 24px;
+      color: #686868;
+      border-radius: 4px;
+      background-color: #F5F6F7;
+    }
+    .user-d-list {
+      border-top: 1px solid transparent;
+      min-height: 500px;
+    }
+    .u-d-h-r {
+      display: inline-block;
+      width: 170px;
+      .u-d-h-item {
+        display: inline-block;
+        width: 50%;
+        &.size {
+          text-align: center;
+        }
+      }
+    }
+    
+    ::v-deep {
+      .subinfo-container {
+        display: inline-block;
+        margin-right: 10px;
+        width: 170px;
+        .subinfo-item {
+          display: inline-block;
+          margin-right: 0;
+          width: 50%;
+          &.last {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+  .user-docs-pagination {
+    margin-top: 28px;
+    padding-bottom: 60px;
+    text-align: right;
+  }
+}
+</style>