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

<template>
  <div class="user-docs">
    <h1 class="user-docs-header">
      <span class="u-d-title">{{ title }}</span>
    </h1>
    <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"
          :productType="item.product_type ? 1 : 0"
          :docType="item.DocFileType + ''"
          :subInfo="calcSubInfo(item)"
          @onClick="toDocDetail(item)"
        ></doc-card>
        <no-data v-if="listState.list.length === 0 && listState.loaded">暂无我的文库</no-data>
      </div>
      <div class="user-docs-pagination" v-if="listState.total > 0">
        <el-pagination
          popper-class="pagination-custom-select"
          background
          layout="prev, pager, next, sizes, jumper"
          :current-page="listState.pageNum"
          :page-size="listState.pageSize"
          :page-sizes="[5, 10, 50, 100]"
          :total="listState.total"
          :show-confirm-btn="true"
          @current-change="onPageChange"
          @size-change="onSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <selected-recommend
      :options="recommendList"
      @click="goContent"
    ></selected-recommend>
  </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 { getSearch } from '../api/modules/search'
import { dateFormatter, formatSize } from '@/utils/index'
import { mixinBackground } from '@/utils/mixins'
import SelectedRecommend from '@/components/SelectedRecommend.vue'

function checkType (type) {
  let typeStr = type
  switch (type) {
    case 1: {
      typeStr = 'word'
      break
    }
    case 2: {
      typeStr = 'pdf'
      break
    }
    case 3: {
      typeStr = 'excel'
      break
    }
    case 4: {
      typeStr = 'ppt'
      break
    }
    case 'doc': {
      typeStr = 'word'
      break
    }
    case 'xls': {
      typeStr = 'excel'
      break
    }
  }
  return typeStr
}

function formatData (v) {
  return {
    img: v?.docImg || v?.previewImgId,
    type: checkType(v?.docFileType),
    id: v.docId,
    title: v?.docName || v?.docTitle,
    money: v.price,
    docTags: v?.docTags,
    size: v?.docFileSize,
    page: v?.docPageSize,
    down: v?.downTimes,
    contribution: v?.sourceUserId,
    productType: v?.productType,
    viewTimes: v?.viewTimes
  }
}
export default {
  name: 'user-docs',
  mixins: [mixinBackground],
  components: {
    [Pagination.name]: Pagination,
    DocCard,
    NoData,
    SelectedRecommend
  },
  data () {
    return {
      title: '我的文库',
      listState: {
        loaded: false, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 10, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      },
      recommendList: []
    }
  },
  created () {
    this.getList()
    this.getRecommendList()
  },
  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 }
      // })
      window.open(`../content/${id}`) // 打开新窗口
      // window.open(`${process.env.VUE_APP_BASE_URL}/content/${id}`) // 打开新窗口
    },
    onPageChange (p) {
      this.listState.pageNum = p
      this.getList()
    },
    onSizeChange (size) {
      this.listState.pageSize = size
      this.listState.pageNum = 1
      this.getList()
    },
    calcSubInfo (item) {
      const { UpdateAt, DocFileSize } = item
      const subInfoArr = []
      if (UpdateAt !== undefined) {
        subInfoArr.push(dateFormatter(UpdateAt * 1000, 'yyyy-MM-dd'))
      }
      if (DocFileSize !== undefined) {
        subInfoArr.push(formatSize(DocFileSize))
      }
      return subInfoArr
    },
    getRecommendList () {
      getSearch({ productType: 2, sort: 'vSort', num: 1, size: 8 }).then(res => {
        const data = res.data
        if (data && data.error_code === 0) {
          this.recommendList = data.data.list.map((v) => formatData(v))
        }
      })
    },
    goContent (item) {
      const routeData = this.$router.resolve({
        name: 'content',
        params: {
          id: item.id
        }
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
@include diy-icon('iconJianYu', 24, 24);
@include diy-icon('pdf', 24);
@include diy-icon('word', 24);
@include diy-icon('excel', 24);
@include diy-icon('ppt', 24);
@include diy-icon('txt', 24);
.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;
      ::v-deep {
        .docs-card {
          margin-left: -18px;
          box-sizing: content-box;
          width: 1200px;
        }
      }
    }
    .bought {
      color: #686868;
    }
    .u-d-h-r {
      display: inline-block;
      width: 155px;
      .u-d-h-item {
        display: inline-block;
        width: 55%;
        &.size {
          width: 45%;
          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;
  }

  .keep-group{
    margin-top: 38px;
    padding-bottom: 50px;
    .hot-keep-group {
      .card-item {
        width: 33.33%;
        overflow: hidden;
      }
    }
    .card-item {
      cursor: pointer;
      justify-content: flex-start;
      padding: 8px 16px 12px 0;
      box-sizing: border-box;

      &:hover {
        .title-text {
          color: #2ABED1;
        }
      }

      .money-group {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 22px;
        color: #999999;
      }
      .mini-img-group {
        flex-shrink: 0;
        position: relative;
        border-radius: 4px;
        border: 1px solid #ececec;
        width: 100px;
        height: 124px;
        margin-right: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
        }
        i {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .info-text-group {
        span {
          display: inline-block;
          &:last-child {
            &::after {
              content: unset;
            }
          }
          &::after {
            content: "|";
            padding: 0 8px;
            color: #ececec;
          }
        }
      }
      .info-text {
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
        color: #999999;
      }
      .red-text {
        color: #FF3A20;
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 28px;
      }
      .title-text {
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 24px;
        color: #1D1D1D;
      }
    }

    .van-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .van-multi-ellipsis--l2 {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }
    .title-group {
      margin-bottom: 16px;
      h5 {
          color: #1D1D1D;
          font-family: Microsoft YaHei;
          font-size: 18px;
          line-height: 28px;
          letter-spacing: 0px;
          text-align: left;
          margin-right: 9px;
      }
    }
  }
}
.in-app{
  .user-d-list{
    ::v-deep{
      .docs-card{
        width: auto!important;
        box-sizing: border-box!important;
      }
    }
  }
  .user-docs{
    // padding: 0 18px;
    background-color: rgb(242, 242, 244) ;
    .user-docs-header{
      padding-top: 0;
    }
    .user-docs-content{
      padding: 24px;
      background-color: #fff;
      margin-top: 16px;
      border-radius: 8px;
    }
    .keep-group{
      padding: 24px;
      background-color: #fff;
      margin-top: 16px;
      border-radius: 8px;
    }
  }
}
</style>