jy-docs/jydocs-pc/src/views/UserCollections.vue

<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 { 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 { DocPageSize, DocFileSize } = item
      const subInfoArr = []
      if (DocPageSize !== undefined) {
        subInfoArr.push(`共${DocPageSize}页`)
      }
      if (DocFileSize !== undefined) {
        subInfoArr.push(formatSize(DocFileSize))
      }
      return subInfoArr
    }
  }
}
</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>