cha0yang/src/views/personal/Collection.vue

<template>
  <div class="wr">
    <template v-for="(item, index) in collect">
      <div class="page" :key="index">
        <time>
          <span class="iconfont icon-shizhong"></span>
          {{ item.date }}
        </time>
        <div id="box">
          <template v-for="(list, index) in item.data"> 
            <div class="box" :key="index" @click="tonewsdetail(list.article_id)">
              <span class="iconfont icon-changyongtubiao-mianxing-"></span>
              <aside>
                <span class="span1">{{list.title}}</span>
                <span class="span2">来源板块：{{list.type}}</span>
              </aside>
              <p>
               {{list.content}}
              </p>
            </div>
          </template>
        </div>
      </div>
    </template>
    <!-- 分页按钮 -->
    <div class="pages">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="pageall"
      ></el-pagination>
    </div>
    <!-- end -->
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      mData: [
        { time: '2019-10-14', shujv: [1, 2, 3, 4] },
        { time: '2019-10-14', shujv: [1, 2, 3, 4, 5] }
      ],
      num: 1019,
      collect:[],
      pageall:1
    }
  },
  computed: {},
  watch: {},
  methods: {
    tonewsdetail(e){
      console.log(e)
         let routeUrl = this.$router.resolve({
        path: '/newsDetails',
        query: { id: e }
      })
      window.open(routeUrl.href, '_blank')
    },
    getData (e) {
      let id = sessionStorage.id
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/user/collection',
        data: {
          id: id,
          page:e?e:1
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            console.log(res)
            this.collect=res.data.data.data.info
            this.pageall=res.data.data.data.allPage

          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sendMsgToParent () {
      this.$emit('listenToChildExen', this.num)
    },
    handleSizeChange (val) {
      this.pageNum = val
      this.getPackData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getPackData()
    },
    getPackData () {}
  },
  created () {
    this.currentPage = Number(localStorage.getItem('pagination')) || 1
    this.handleCurrentChange(this.currentPage)
    this.getData()
  },
  mounted () {
    this.sendMsgToParent()
  }
}
</script>

<style lang="scss" scoped>
.wr {
  width: 934px;
  height:1109px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding-top: 35px;

  .pages {
    margin-top: -71px;
    margin-right: 24px;
    height: 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #e60012;
    }

    /deep/ .el-icon.el-icon-arrow-left::before {
      content: '上一页';
      font-family: 'MicrosoftYaHei';
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #646464;
    }

    /deep/ .el-pagination .btn-prev {
      width: 80px;
    }

    /deep/ .el-pagination .btn-next {
      width: 80px;
    }

    /deep/ .el-icon.el-icon-arrow-right::before {
      content: '下一页';
      font-family: 'MicrosoftYaHei';
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #646464;
    }
  }

  .page {
    margin-bottom: 60px;
    max-height: 364px;
    box-sizing: border-box;
    #box {
      overflow-y: scroll;
      max-height: 375px;
      padding-bottom: 40px;
      box-sizing: border-box;

      &::-webkit-scrollbar {
        width: 0px;
      }

      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .box {
      width: 875px;
      height: 135px;
      box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
      border-radius: 5px;
      margin-top: 40px;
      padding: 31px 23px 32px 28px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:nth-of-type(1) {
        margin-top: 30px;
      }

      .iconfont {
        font-size: 23px;
        color: #fec300;
        position: absolute;
        right: 23px;
        top: 23px;
      }

      aside {
        width: 689px;
        height: 23px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .span1 {
          display: inline-block;
          width: 60%;
          font-family: 'MicrosoftYaHei';
          font-size: 22px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #333333;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .span2 {
          font-family: 'MicrosoftYaHei';
          font-size: 16px;
          font-weight: normal;
          letter-spacing: 1px;
          color: #999999;
        }
      }

      p {
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: 'MicrosoftYaHei';
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #666666;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    time {
      font-family: 'MicrosoftYaHei';
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #666666;
      display: flex;
      align-items: center;
      margin-left: 30px;

      .iconfont {
        font-size: 24px;
        margin-right: 24px;
      }
    }
  }
}
</style>