<template>
<div class="container-water-fall">
  <waterfall v-if="list.length>0" :col='2' :isTransition="false"  :data="list"  @loadmore="loadmore">
    <img v-for="item in list" :src="item.imgUrl">
  </waterfall>
  <p class="noDataText" v-else>暂无数据</p>
  <loading :loadingShow="loadingShow"></loading>
</div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
  data() {
    return{
      loadingShow: false,//加载
      pageNum: 1,
      list: [],
    }
  },
  components: {
    loading,
  },
  mounted() {
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Posters/userPosters',
      method: 'post',
      data: {
        token: localStorage.getItem("token"),
        page: 1,
        limit: 20
      }
    }).then(response => {
      this.loadingShow = false
      this.list = response.data.list
    })
  },
  computed:{
  },
  methods: {
    loadmore(){
      this.pageNum+=1
      request({
        url: '/api/MarketingToolApi/Posters/userPosters',
        method: 'post',
        data: {
          token: localStorage.getItem("token"),
          page: this.pageNum,
          limit: 20
        }
      }).then(response => {
        this.list = this.list.concat(response.data.list)
      })
    },
  }
}
</script>
<style lang="scss">
.container-water-fall{
  width: 100vw;
  box-sizing: border-box;
  padding: 5px 0 0 5px;
  img{
    width: 100%;
    height: 250px;
    padding-right: 5px;
  }
}
</style>