vue-waterfall-easy 2.x 实现瀑布流，可无限滚动。同时，可以隐藏滚动条 · Issue #I45XQE · 张德政/vue_basic - Gitee.com

forked from xxll/vue_basic

/ 详情

待办的

拥有者

创建于

2021-08-17 11:00

### 该问题是怎么引起的？

~~~
<template>
  <div class="recommand-out">
    
    <div class="up">
      
      <div class="line"></div>
      
      <div class="text-01 text">热门佳作</div>
      <div class="text-02 text">POPULAR</div>
    </div>
    
    
    <div class="down">
      
      <div class="down-container">
        <vue-waterfall-easy :imgsArr="fourthList" :height="400" @scrollReachBottom="getFour">
          
          
          <div class="img-info" slot-scope="props">
            
            
            {{props}}
            
            
          </div>
        </vue-waterfall-easy>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkList, getOwnWorkList, getWorkCount } from '@/network/work.js'
import { usermassage } from '@/network/user.js'
import { getWorkLikeList } from '@/network/workLike.js'
import { getfans } from '@/network/follow.js'
import secret from '@/components/common/secret/secret.js'
import vueWaterfallEasy from 'vue-waterfall-easy'
// import Myvideoplayer from '@/components/common/myvideoplayer/Myvideoplayer.vue'
export default {
  // mounted () {
  //   // console.log('this.$refs.imgitem[0]', this.$refs.imgitem[0].naturalHeight)
  // },
  components: {
    vueWaterfallEasy
  },
  data () {
    return {
      name: '',
      // 网络图片占位
      imgs: [],
      // img1: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      // img3: 'https://image.app.ftmainchain.com/uploadfile/avatar/image-1626759870175-316294520.png',
      // img2: 'https://t1.picb.cc/uploads/2020/04/24/k9KEfe.jpg',
      // text: '自媒体独白，团队访问徐峥：药神不是我，我不是药神',
      // text: '自媒体独白，团队访问徐峥：药神不是我，我不是药神自媒体独白，团队访问徐峥：药神不是我，我不是药神自媒体独白，团队访问徐峥：药神不是我，我不是药神自媒体独白，团队访问徐峥：药神不是我，我不是药神',
      // text: '自媒体独白，团队访问徐峥',
      ownWorkList: {
        items: [],
        meta: null
      },
      commonList: [],
      // 热门佳作
      firstList: [],
      // 我的喜好
      secondList: [],
      // 热门用户
      thirdList: [],
      // 加载页数
      thirdPageNum: 0,
      // 最新上传
      fourthList: [],
      fourthNum: 1,
      endList: [], // 分页拿到全部数据，用于循环展示数据
      // endListTest: [],
      workNum: 0, // 作品总数
      fansNum: 0, // 粉丝数量
      singlePageNum: 9, // 单页作品数
      PageNum: 0 // 总需要加载页数
    }
  },
  filters: {
    // judge the type of src
    getSrc (item) {
      if (item.type === 'Image') {
        return 'https://' + item.fullnames[0]
      } else if (item.type === 'Video') {
        return item.background
      } else if (item.type === 'Article' || item.type === 'Audio') {
        return 'https://' + item.background
      }
    },
    // get type
    getType (type) {
      if (type === 'Image') return '图片'
      if (type === 'Video') return '视频'
      if (type === 'Audio') return '音频'
      if (type === 'Article') return '文章'
    }
  },
  methods: {
    // 路由跳转至作品详情页
    goWorkPage (id) {
      let route = this.$router.resolve({
        path: '/workpage/' + id
      })
      window.open(route.href, '_blank')
    },
    // 获取作品列表，默认拿前150，再看点赞前五十
    getWorkList (page = 1, limit = 80) {
      // console.log('this.$store.getters.get_uuid', this.$store.getters.get_uuid)
      if (this.$store.getters.get_uuid) {
        return getWorkList({
          page,
          limit,
          state: 'Normal'
        })
      }
    },
    // 用户获取自己的作品列表
    getOwnWorkListPlus (page, limit = 9) {
      return getOwnWorkList({
        uuid: this.$store.getters.get_uuid,
        limit,
        page
      })
    },
    // 用户获取自己的作品列表,获取对应的数据
    getOwnWorkList (page, limit = 9) {
      try {
        // console.log('this.$store.getters.get_uuid', this.$store.getters.get_uuid)
        if (this.$store.getters.get_uuid) {
          return new Promise(resolve => {
            getOwnWorkList({
              uuid: this.$store.getters.get_uuid,
              limit,
              page
            }).then(res => {
              // console.log(res, '2res')
              if (res.statusCode === 200) {
                // 成功
                this.ownWorkList.items = res.data.items
                this.ownWorkList.meta = res.data.meta
                // console.log('拿到数据', this.ownWorkList)
                // 页面总数
                // console.log('数据总数', this.getPageNum())
              }
              for (let item of this.ownWorkList.items) {
                if (item.type === 'Video') {
                  // console.log(item.fullnames[0], '55484826')
                  this.getVideoBase64('https://' + item.fullnames[0]).then(res => {
                    // console.log(res, '645546')
                    item.background = res
                    // this.src3 = res
                    // item = Object.assign({}, item)
                  })
                }
              }
              let list = this.ownWorkList
              // let list2 = JSON.parse(JSON.stringify(list))
              // this.ownWorkList = Object.assign({}, list2)
              // this.ownWorkList =
              // console.log('963963', this.ownWorkList)
              resolve(list)
            })
          })
        }
      } catch (error) {
        console.error('未登录')
      }
    },
    // 轮播作品一共加载几页
    getPageNum () {
      return getWorkCount(this.$store.getters.get_uuid)
    },
    // 截取视频图片
    getVideoBase64 (url) {
      return new Promise(function (resolve) {
        let dataURL = ''
        let video = document.createElement('video')
        // video['defaultMuted'] = true
        video.setAttribute('crossOrigin', 'anonymous')
        video.setAttribute('src', url)
        video.setAttribute('preload', 'auto')
        video.addEventListener('loadeddata', function () {
          let canvas = document.createElement('canvas')
          let width = video.videoWidth * 0.3 // canvas的尺寸和图片一样
          let height = video.videoHeight * 0.3
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
          dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
          // video.paused()
          resolve(dataURL)
        })
        // 延时截图
        video.addEventListener('loadedmetadata', () => {
          video.currentTime = Math.ceil(video.duration / 10)
        })
      })
    },
    // 分页获取数据
    async orderCorrect () {
      let res = await this.getPageNum()
      this.workNum = res.data
      // 加载页数
      if (this.workNum) {
        this.PageNum = Math.ceil(this.workNum / this.singlePageNum)
      }
      // // 测试
      // this.getOwnWorkList(3, this.singlePageNum)
      // const list = []
      // let that = this
      // // 加载全部数据
      // for (let n = 1; n <= this.PageNum; n++) {
      //   let res = await this.getOwnWorkListPlus(n, this.singlePageNum)
      //   if (res.data) {
      //     for (let item of res.data.items) {
      //       if (item.type === 'Video') {
      //         that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
      //           item.background = res
      //         })
      //       }
      //     }
      //     list.push(res.data.items)
      //   }
      // }
      // this.endList = list
    },
    // 分割数组
    split_array (arr, len) {
      let arr_length = arr.length
      let newArr = []
      for (let i = 0; i < arr_length; i += len) {
        newArr.push(arr.slice(i, i + len))
      }
      return newArr
    },
    // 统一处理
    async combine () {
      this.getSecond()
      this.orderCorrect()
      // let date01 = new Date()
      // 获取作品列表，默认拿80，再看点赞前40
      let res = await this.getWorkList(1, 80)
      // 点赞排序
      let resList = res.data.items.sort((a, b) => {
        return a.likesCount < b.likesCount ? 1 : -1
      })
      // 保存该数据，避免第三部分重复获取
      this.commonList = resList
      this.getFirst()
      this.getThird()
      // let date02 = new Date()
      // console.log('***********dd79319e-3579-493a-b652-cef0b19551f6****************', date02 - date01 + 'ms')
    },
    // 1.热门佳作
    async getFirst () {
      // let date01 = new Date()
      // 获取作品列表，默认拿80，再看点赞前40
      // let res = await this.getWorkList()
      // let date02 = new Date()
      // console.log('list///////////////////////////////////////////////before', date02 - date01)
      // 点赞降序
      // let resList = res.data.items.sort((a, b) => {
      //   return a.likesCount < b.likesCount ? 1 : -1
      // })
      // 保存该数据，避免第三部分重复获取
      // this.commonList = resList
      // 截取点赞前40
      let list = this.commonList.slice(0, 40)
      // 添加图片
      let that = this
      for (let item of list) {
        if (item.type === 'Video') {
          that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
            item.background = res
          })
        }
      }
      // 分割数组到firstList
      this.firstList = this.split_array(list, 9)
      // console.log('list+++++++++++++++after', this.firstList)
      // let arr = [1, 2, 2, 5, 1, 6]
      // console.log('list+++++++++++++++arr.slice(3,10)', arr.slice(3, 10))
    },
    // 2.我的喜好
    async getSecond () {
      // 我的点赞列表
      let list = await getWorkLikeList(this.$store.getters.get_uuid)
      // console.log('+++++++++++++++++++++getMylove+++before++++++++++', list.data[0])
      // 添加图片
      const List = []
      list.data[0].forEach(item => {
        List.push(item.work)
        // console.log('******************', item.work)
      })
      // console.log('*********arr*********', List)
      // 接口的每一项数据的属性跟之前的不一样
      let that = this
      for (let item of List) {
        if (item.type === 'Video') {
          that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
            item.background = res
          })
        }
      }
      // 分割数组到secondList
      this.secondList = this.split_array(List, 9)
      // console.log('+++++++++++++++++++++getMylove+++++++++++++', this.secondList)
    },
    // 获取用户的粉丝数量
    async getFansNum (uuid) {
      let res = await getfans(uuid)
      return res
    },
    // 获取用户的作品总数
    async getUserWorkCount (uuid) {
      let res = await getWorkCount(uuid)
      return res
    },
    // 3.热门用户
    async getThird () {
      // let res = await this.getWorkList(1, 60)
      // 点赞降序
      // let resList = this.commonList.sort((a, b) => {
      //   return a.likesCount < b.likesCount ? 1 : -1
      // })
      // let date01 = new Date()
      // console.log('***********dd79319e-3579-493a-b652-cef0b19551f6****************', date02 - date01)
      let userList = this.commonList.map(item => item.userUuid)
      // console.log('userList***********************', userList)
      const Arr = Array.from(new Set(userList))
      // console.log('Arr***********************', Arr)
      // 去重
      // let filter_arrObj = []
      // filter_arrObj = resList.filter((item, index, origin) =>
      //   index === origin.findIndex(itemInner => {
      //     return itemInner.userUuid === item.userUuid
      //   }
      //   ))
      // resList = filter_arrObj
      // 取前几个,但只拿四的倍数个数据
      let listpre = Arr.slice(0, 20)
      let num = Math.floor(listpre.length / 4) * 4
      let list = listpre.slice(0, num)
      // console.log('----------------num---------------', num, list)
      let arr = []
      const listArr = []
      for (let item of list) {
        listArr.push(usermassage(item))
      }
      const arrList = await Promise.all(listArr)
      arr = arrList.map(item => item.data)
      // console.log('***********arrList****************', arrList)
      // 获取各项的粉丝数，装回各项fansnum属性
      let arrbox1 = []
      let arrbox2 = []
      for (let item of arr) {
        // let fansnum = await this.getFansNum(item.uuid)
        // let workCount = await this.getUserWorkCount(item.uuid)
        // item.fansnum = fansnum.data.followersCount
        // item.workCount = workCount.data
        arrbox1.push(this.getFansNum(item.uuid).then(res => {
          item.fansnum = res.data.followersCount
          return Promise.resolve()
        }))
        arrbox2.push(this.getUserWorkCount(item.uuid).then(res => {
          item.workCount = res.data
          return Promise.resolve()
        }))
        // arrbox.push(Promise.all([this.getFansNum(item.uuid), this.getUserWorkCount(item.uuid)].then(res => {
        //   console.log('**************res1******res2*********', res)
        //   // item.fansnum = res[0].data.followersCount
        //   // item.workCount = res[1].data1
        //   return Promise.resolve()
        // })))
        // let fansnum = await this.getFansNum(item.uuid)
        // let workCount = await this.getUserWorkCount(item.uuid)
        // item.fansnum = fansnum.data.followersCount
        // item.workCount = workCount.data
        // this.$set(item, 'fansnum', fansnum.data.followersCount)
        // this.$set(item, 'workCount', workCount.data)
        // console.log('***********arr****************', fansnum)
        // console.log('***********arr****************', workCount)
      }
      await Promise.all([...arrbox1, ...arrbox2])
      // await Promise.all()
      // 分组装进thirdList
      this.thirdList = this.split_array(arr, 4)
      // let date02 = new Date()
      // this.thirdList = arr
      // console.log('***********dd79319e-3579-493a-b652-cef0b19551f6****************', arr)
      // console.log('***********要10s！！！变5秒了***变2秒了*************', date02 - date01)
      // console.log('***********arr****************', fansnum)
      // // 获取各项的粉丝数，装回各项fansnum属性
      // for (let item of list) {
      //   let fansnum = await this.getFansNum(item.userUuid)
      //   let workCount = await this.getUserWorkCount(item.userUuid)
      //   this.$set(item.user, 'fansnum', fansnum.data.followersCount)
      //   this.$set(item.user, 'workCount', workCount.data)
      //   let videos = await getOwnWorkList({uuid: item.userUuid, page: 1, limit: 2, type: 'Video'})
      //   let imglist = []
      //   if (videos.data) {
      //     // console.log('第三部分请求到了视频')
      //     videos.data.items.forEach(async item => {
      //       // console.log('item', item)
      //       let n = await this.getVideoBase64('https://' + item.fullnames[0])
      //       imglist.push({
      //         img: n,
      //         message: item.message
      //       })
      //     })
      //   }
      //   this.$set(item.user, 'imglist', imglist)
      //   // console.log('videos', videos)
      //   // console.log('imglist', imglist)
      //   // // this.$set(item.user, 'videoimg', workCount.data)
      // }
      // 分组装进thirdList
      // this.thirdList = this.split_array(list, 4)
    },
    // 去作者页面
    toAuthor (uuid) {
      // console.log('................uuid.................', uuid)
      let userUuid = secret.encrypt(uuid)
      let route = this.$router.resolve({
        // 改一下路径即可，记得给该路径配置动态路由
        path: '/homepage/' + userUuid
      })
      window.open(route.href, '_blank')
    },
    // async getThird () {
    //   let res = await this.getWorkList(1, 80)
    //   // 点赞降序
    //   let resList = res.data.items.sort((a, b) => {
    //     return a.likesCount < b.likesCount ? 1 : -1
    //   })
    //   // 去重
    //   let filter_arrObj = []
    //   filter_arrObj = resList.filter((item, index, origin) =>
    //     index === origin.findIndex(itemInner => {
    //       return itemInner.userUuid === item.userUuid
    //     }
    //     ))
    //   resList = filter_arrObj
    //   // 取前几个,但只拿四的倍数个数据
    //   let listpre = resList.slice(0, 20)
    //   let num = Math.floor(listpre.length / 4) * 4
    //   let list = listpre.slice(0, num)
    //   console.log('----------------num---------------', num)
    //   // // 获取各项的粉丝数，装回各项fansnum属性
    //   for (let item of list) {
    //     let fansnum = await this.getFansNum(item.userUuid)
    //     let workCount = await this.getUserWorkCount(item.userUuid)
    //     this.$set(item.user, 'fansnum', fansnum.data.followersCount)
    //     this.$set(item.user, 'workCount', workCount.data)
    //     let videos = await getOwnWorkList({uuid: item.userUuid, page: 1, limit: 2, type: 'Video'})
    //     let imglist = []
    //     if (videos.data) {
    //       // console.log('第三部分请求到了视频')
    //       videos.data.items.forEach(async item => {
    //         // console.log('item', item)
    //         let n = await this.getVideoBase64('https://' + item.fullnames[0])
    //         imglist.push({
    //           img: n,
    //           message: item.message
    //         })
    //       })
    //     }
    //     this.$set(item.user, 'imglist', imglist)
    //     // console.log('videos', videos)
    //     // console.log('imglist', imglist)
    //     // // this.$set(item.user, 'videoimg', workCount.data)
    //   }
    //   // 分组装进thirdList
    //   this.thirdList = this.split_array(list, 4)
    //   // this.thirdList = resList
    //   // console.log('res***********************', res)
    //   // console.log('***********this.thirdList************', this.thirdList)
    // },
    // 4.获取最新上传
    async getFour () {
      // 获取作品列表，默认拿前9个，点击之后再拿9个
      let res = await this.getWorkList(this.fourthNum, 8)
      res.data.items.forEach(item => {
        this.fourthList.push(item)
      })
      // 接口的每一项数据的属性跟之前的不一样
      let that = this
      for (let item of this.fourthList) {
        if (item.type === 'Video') {
          that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
            item.background = res
          })
        }
      }
      this.fourthNum++
      // let res = await this.getWorkList(num++, 9)
      console.log('------------------res-----------------------', this.fourthList)
      // console.log('-----------------this.fourthNum-----------------------', this.fourthNum)
      // let list
    }
    // 获取图片宽度
    // getWidth (imgitem) {
    //   let height
    //   let width
    //   this.$nextTick(function () {
    //     // height = this.$refs.imgitem[0].naturalHeight
    //     // width = this.$refs.imgitem[0].naturalWidth
    //     height = imgitem[0].naturalHeight
    //     width = imgitem[0].naturalWidth
    //     return (180 / height) * width + 'px'
    //   })
    //   this.$forceUpdate()
    // }
  },
  created () {
    // this.getWorkList()
    // try {
    this.combine()
    this.getFour()
    console.log('uuid', this.$store.getters.get_uuid)
    // } catch (err) {
    // console.error('未登录！！！')
    // }
    // 获取数据
  },
  mounted () {
    // window.addEventListener('scroll', () => {
    //   console.log('000')
    // })
    // console.log('uuid------------', this.$store.getters.get_uuid)
    // console.log('--------------------mounted------------')
  },
  activated () {
    this.combine()
    this.getFour()
    // this.combine()
    // console.log('--------------------activated------------')
  }
}
</script>

<style lang="less" scoped>
.recommand-out{
  width: 100%;
  // 暂时给个高度
  // height: auto;
  margin: 16px auto;
  .up{
    width: 90%;
    margin: 0 auto;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      height: 100%;
      width: 4px;
      background-image: linear-gradient(to right, #ff8d94, #ff1668);
    }
    .text{
      height: 100%;
      display: flex;
      align-items: center;
      // background-color: #f5f5f5;
      margin-left: 10px;
      font-family: '微软雅黑';
    }
    .text-01{
      font-size: 30px;
    }
    .text-02{
      font-size: 28px;
      color: #c7c7c7;
    }
  }
  // 第一第二部分轮播图
  .down {
    // height: 500px;
    // position: relative;
    margin-bottom: 50px;
    .down-container{
      // background-color: #ff5465;
      width: 100%;
      // padding: 10px;
      margin: 0 auto;
      // display: flex;
      // .down-container-item{
        // width: 20%;
        // overflow: hidden;
      // height: auto;
      // .vue-waterfall-easy{
      // z-index: 500;
      // }
      // }
      .vue-waterfall-easy-container{
        // padding: 10px;
        // box-sizing: border-box;
        width: 100%;
        // padding: 50px;
        // height: 800px;
        overflow: hidden;
        margin:0 auto;
        box-sizing: border-box;
      }
      .vue-waterfall-easy-scroll{
        box-sizing: border-box;
        padding: 20px;
        width: 98%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      /deep/ .vue-waterfall-easy-scroll::-webkit-scrollbar {
        display: none;
        width: 0px;
      }
      .vue-waterfall-easy{
        box-sizing: border-box;
        width: 100% !important;
        padding: 30px;
      }
      // .vue-waterfall-easy-scroll{
      //   box-sizing: border-box;
      // }
    }
  }
}
</style>
~~~

### 该问题是怎么引起的？

~~~
<template>
  <div class="recommand-out">
    
    <div class="up">
      
      <div class="line"></div>
      
      <div class="text-01 text">热门佳作</div>
      <div class="text-02 text">POPULAR</div>
    </div>
    
    
    <div class="down">
      
      <div class="down-container">
        <vue-waterfall-easy :imgsArr="fourthList" :height="400" @scrollReachBottom="getFour">
          
          
          <div class="img-info" slot-scope="props">
            
            
            {{props}}
            
            
          </div>
        </vue-waterfall-easy>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkList, getOwnWorkList, getWorkCount } from '@/network/work.js'
import { usermassage } from '@/network/user.js'
import { getWorkLikeList } from '@/network/workLike.js'
import { getfans } from '@/network/follow.js'
import secret from '@/components/common/secret/secret.js'
import vueWaterfallEasy from 'vue-waterfall-easy'
// import Myvideoplayer from '@/components/common/myvideoplayer/Myvideoplayer.vue'
export default {
  // mounted () {
  //   // console.log('this.$refs.imgitem[0]', this.$refs.imgitem[0].naturalHeight)
  // },
  components: {
    vueWaterfallEasy
  },
  data () {
    return {
      name: '',
      // 网络图片占位
      imgs: [],
      // img1: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      // img3: 'https://image.app.ftmainchain.com/uploadfile/avatar/image-1626759870175-316294520.png',
      // img2: 'https://t1.picb.cc/uploads/2020/04/24/k9KEfe.jpg',
      // text: '自媒体独白，团队访问徐峥：药神不是我，我不是药神',
      // text: '自媒体独白，团队访问徐峥：药神不是我，我不是药神自媒体独白，团队访问徐峥：药神不是我，我不是药神自媒体独白，团队访问徐峥：药神不是我，我不是药神自媒体独白，团队访问徐峥：药神不是我，我不是药神',
      // text: '自媒体独白，团队访问徐峥',
      ownWorkList: {
        items: [],
        meta: null
      },
      commonList: [],
      // 热门佳作
      firstList: [],
      // 我的喜好
      secondList: [],
      // 热门用户
      thirdList: [],
      // 加载页数
      thirdPageNum: 0,
      // 最新上传
      fourthList: [],
      fourthNum: 1,
      endList: [], // 分页拿到全部数据，用于循环展示数据
      // endListTest: [],
      workNum: 0, // 作品总数
      fansNum: 0, // 粉丝数量
      singlePageNum: 9, // 单页作品数
      PageNum: 0 // 总需要加载页数
    }
  },
  filters: {
    // judge the type of src
    getSrc (item) {
      if (item.type === 'Image') {
        return 'https://' + item.fullnames[0]
      } else if (item.type === 'Video') {
        return item.background
      } else if (item.type === 'Article' || item.type === 'Audio') {
        return 'https://' + item.background
      }
    },
    // get type
    getType (type) {
      if (type === 'Image') return '图片'
      if (type === 'Video') return '视频'
      if (type === 'Audio') return '音频'
      if (type === 'Article') return '文章'
    }
  },
  methods: {
    // 路由跳转至作品详情页
    goWorkPage (id) {
      let route = this.$router.resolve({
        path: '/workpage/' + id
      })
      window.open(route.href, '_blank')
    },
    // 获取作品列表，默认拿前150，再看点赞前五十
    getWorkList (page = 1, limit = 80) {
      // console.log('this.$store.getters.get_uuid', this.$store.getters.get_uuid)
      if (this.$store.getters.get_uuid) {
        return getWorkList({
          page,
          limit,
          state: 'Normal'
        })
      }
    },
    // 用户获取自己的作品列表
    getOwnWorkListPlus (page, limit = 9) {
      return getOwnWorkList({
        uuid: this.$store.getters.get_uuid,
        limit,
        page
      })
    },
    // 用户获取自己的作品列表,获取对应的数据
    getOwnWorkList (page, limit = 9) {
      try {
        // console.log('this.$store.getters.get_uuid', this.$store.getters.get_uuid)
        if (this.$store.getters.get_uuid) {
          return new Promise(resolve => {
            getOwnWorkList({
              uuid: this.$store.getters.get_uuid,
              limit,
              page
            }).then(res => {
              // console.log(res, '2res')
              if (res.statusCode === 200) {
                // 成功
                this.ownWorkList.items = res.data.items
                this.ownWorkList.meta = res.data.meta
                // console.log('拿到数据', this.ownWorkList)
                // 页面总数
                // console.log('数据总数', this.getPageNum())
              }
              for (let item of this.ownWorkList.items) {
                if (item.type === 'Video') {
                  // console.log(item.fullnames[0], '55484826')
                  this.getVideoBase64('https://' + item.fullnames[0]).then(res => {
                    // console.log(res, '645546')
                    item.background = res
                    // this.src3 = res
                    // item = Object.assign({}, item)
                  })
                }
              }
              let list = this.ownWorkList
              // let list2 = JSON.parse(JSON.stringify(list))
              // this.ownWorkList = Object.assign({}, list2)
              // this.ownWorkList =
              // console.log('963963', this.ownWorkList)
              resolve(list)
            })
          })
        }
      } catch (error) {
        console.error('未登录')
      }
    },
    // 轮播作品一共加载几页
    getPageNum () {
      return getWorkCount(this.$store.getters.get_uuid)
    },
    // 截取视频图片
    getVideoBase64 (url) {
      return new Promise(function (resolve) {
        let dataURL = ''
        let video = document.createElement('video')
        // video['defaultMuted'] = true
        video.setAttribute('crossOrigin', 'anonymous')
        video.setAttribute('src', url)
        video.setAttribute('preload', 'auto')
        video.addEventListener('loadeddata', function () {
          let canvas = document.createElement('canvas')
          let width = video.videoWidth * 0.3 // canvas的尺寸和图片一样
          let height = video.videoHeight * 0.3
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
          dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
          // video.paused()
          resolve(dataURL)
        })
        // 延时截图
        video.addEventListener('loadedmetadata', () => {
          video.currentTime = Math.ceil(video.duration / 10)
        })
      })
    },
    // 分页获取数据
    async orderCorrect () {
      let res = await this.getPageNum()
      this.workNum = res.data
      // 加载页数
      if (this.workNum) {
        this.PageNum = Math.ceil(this.workNum / this.singlePageNum)
      }
      // // 测试
      // this.getOwnWorkList(3, this.singlePageNum)
      // const list = []
      // let that = this
      // // 加载全部数据
      // for (let n = 1; n <= this.PageNum; n++) {
      //   let res = await this.getOwnWorkListPlus(n, this.singlePageNum)
      //   if (res.data) {
      //     for (let item of res.data.items) {
      //       if (item.type === 'Video') {
      //         that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
      //           item.background = res
      //         })
      //       }
      //     }
      //     list.push(res.data.items)
      //   }
      // }
      // this.endList = list
    },
    // 分割数组
    split_array (arr, len) {
      let arr_length = arr.length
      let newArr = []
      for (let i = 0; i < arr_length; i += len) {
        newArr.push(arr.slice(i, i + len))
      }
      return newArr
    },
    // 统一处理
    async combine () {
      this.getSecond()
      this.orderCorrect()
      // let date01 = new Date()
      // 获取作品列表，默认拿80，再看点赞前40
      let res = await this.getWorkList(1, 80)
      // 点赞排序
      let resList = res.data.items.sort((a, b) => {
        return a.likesCount < b.likesCount ? 1 : -1
      })
      // 保存该数据，避免第三部分重复获取
      this.commonList = resList
      this.getFirst()
      this.getThird()
      // let date02 = new Date()
      // console.log('***********dd79319e-3579-493a-b652-cef0b19551f6****************', date02 - date01 + 'ms')
    },
    // 1.热门佳作
    async getFirst () {
      // let date01 = new Date()
      // 获取作品列表，默认拿80，再看点赞前40
      // let res = await this.getWorkList()
      // let date02 = new Date()
      // console.log('list///////////////////////////////////////////////before', date02 - date01)
      // 点赞降序
      // let resList = res.data.items.sort((a, b) => {
      //   return a.likesCount < b.likesCount ? 1 : -1
      // })
      // 保存该数据，避免第三部分重复获取
      // this.commonList = resList
      // 截取点赞前40
      let list = this.commonList.slice(0, 40)
      // 添加图片
      let that = this
      for (let item of list) {
        if (item.type === 'Video') {
          that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
            item.background = res
          })
        }
      }
      // 分割数组到firstList
      this.firstList = this.split_array(list, 9)
      // console.log('list+++++++++++++++after', this.firstList)
      // let arr = [1, 2, 2, 5, 1, 6]
      // console.log('list+++++++++++++++arr.slice(3,10)', arr.slice(3, 10))
    },
    // 2.我的喜好
    async getSecond () {
      // 我的点赞列表
      let list = await getWorkLikeList(this.$store.getters.get_uuid)
      // console.log('+++++++++++++++++++++getMylove+++before++++++++++', list.data[0])
      // 添加图片
      const List = []
      list.data[0].forEach(item => {
        List.push(item.work)
        // console.log('******************', item.work)
      })
      // console.log('*********arr*********', List)
      // 接口的每一项数据的属性跟之前的不一样
      let that = this
      for (let item of List) {
        if (item.type === 'Video') {
          that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
            item.background = res
          })
        }
      }
      // 分割数组到secondList
      this.secondList = this.split_array(List, 9)
      // console.log('+++++++++++++++++++++getMylove+++++++++++++', this.secondList)
    },
    // 获取用户的粉丝数量
    async getFansNum (uuid) {
      let res = await getfans(uuid)
      return res
    },
    // 获取用户的作品总数
    async getUserWorkCount (uuid) {
      let res = await getWorkCount(uuid)
      return res
    },
    // 3.热门用户
    async getThird () {
      // let res = await this.getWorkList(1, 60)
      // 点赞降序
      // let resList = this.commonList.sort((a, b) => {
      //   return a.likesCount < b.likesCount ? 1 : -1
      // })
      // let date01 = new Date()
      // console.log('***********dd79319e-3579-493a-b652-cef0b19551f6****************', date02 - date01)
      let userList = this.commonList.map(item => item.userUuid)
      // console.log('userList***********************', userList)
      const Arr = Array.from(new Set(userList))
      // console.log('Arr***********************', Arr)
      // 去重
      // let filter_arrObj = []
      // filter_arrObj = resList.filter((item, index, origin) =>
      //   index === origin.findIndex(itemInner => {
      //     return itemInner.userUuid === item.userUuid
      //   }
      //   ))
      // resList = filter_arrObj
      // 取前几个,但只拿四的倍数个数据
      let listpre = Arr.slice(0, 20)
      let num = Math.floor(listpre.length / 4) * 4
      let list = listpre.slice(0, num)
      // console.log('----------------num---------------', num, list)
      let arr = []
      const listArr = []
      for (let item of list) {
        listArr.push(usermassage(item))
      }
      const arrList = await Promise.all(listArr)
      arr = arrList.map(item => item.data)
      // console.log('***********arrList****************', arrList)
      // 获取各项的粉丝数，装回各项fansnum属性
      let arrbox1 = []
      let arrbox2 = []
      for (let item of arr) {
        // let fansnum = await this.getFansNum(item.uuid)
        // let workCount = await this.getUserWorkCount(item.uuid)
        // item.fansnum = fansnum.data.followersCount
        // item.workCount = workCount.data
        arrbox1.push(this.getFansNum(item.uuid).then(res => {
          item.fansnum = res.data.followersCount
          return Promise.resolve()
        }))
        arrbox2.push(this.getUserWorkCount(item.uuid).then(res => {
          item.workCount = res.data
          return Promise.resolve()
        }))
        // arrbox.push(Promise.all([this.getFansNum(item.uuid), this.getUserWorkCount(item.uuid)].then(res => {
        //   console.log('**************res1******res2*********', res)
        //   // item.fansnum = res[0].data.followersCount
        //   // item.workCount = res[1].data1
        //   return Promise.resolve()
        // })))
        // let fansnum = await this.getFansNum(item.uuid)
        // let workCount = await this.getUserWorkCount(item.uuid)
        // item.fansnum = fansnum.data.followersCount
        // item.workCount = workCount.data
        // this.$set(item, 'fansnum', fansnum.data.followersCount)
        // this.$set(item, 'workCount', workCount.data)
        // console.log('***********arr****************', fansnum)
        // console.log('***********arr****************', workCount)
      }
      await Promise.all([...arrbox1, ...arrbox2])
      // await Promise.all()
      // 分组装进thirdList
      this.thirdList = this.split_array(arr, 4)
      // let date02 = new Date()
      // this.thirdList = arr
      // console.log('***********dd79319e-3579-493a-b652-cef0b19551f6****************', arr)
      // console.log('***********要10s！！！变5秒了***变2秒了*************', date02 - date01)
      // console.log('***********arr****************', fansnum)
      // // 获取各项的粉丝数，装回各项fansnum属性
      // for (let item of list) {
      //   let fansnum = await this.getFansNum(item.userUuid)
      //   let workCount = await this.getUserWorkCount(item.userUuid)
      //   this.$set(item.user, 'fansnum', fansnum.data.followersCount)
      //   this.$set(item.user, 'workCount', workCount.data)
      //   let videos = await getOwnWorkList({uuid: item.userUuid, page: 1, limit: 2, type: 'Video'})
      //   let imglist = []
      //   if (videos.data) {
      //     // console.log('第三部分请求到了视频')
      //     videos.data.items.forEach(async item => {
      //       // console.log('item', item)
      //       let n = await this.getVideoBase64('https://' + item.fullnames[0])
      //       imglist.push({
      //         img: n,
      //         message: item.message
      //       })
      //     })
      //   }
      //   this.$set(item.user, 'imglist', imglist)
      //   // console.log('videos', videos)
      //   // console.log('imglist', imglist)
      //   // // this.$set(item.user, 'videoimg', workCount.data)
      // }
      // 分组装进thirdList
      // this.thirdList = this.split_array(list, 4)
    },
    // 去作者页面
    toAuthor (uuid) {
      // console.log('................uuid.................', uuid)
      let userUuid = secret.encrypt(uuid)
      let route = this.$router.resolve({
        // 改一下路径即可，记得给该路径配置动态路由
        path: '/homepage/' + userUuid
      })
      window.open(route.href, '_blank')
    },
    // async getThird () {
    //   let res = await this.getWorkList(1, 80)
    //   // 点赞降序
    //   let resList = res.data.items.sort((a, b) => {
    //     return a.likesCount < b.likesCount ? 1 : -1
    //   })
    //   // 去重
    //   let filter_arrObj = []
    //   filter_arrObj = resList.filter((item, index, origin) =>
    //     index === origin.findIndex(itemInner => {
    //       return itemInner.userUuid === item.userUuid
    //     }
    //     ))
    //   resList = filter_arrObj
    //   // 取前几个,但只拿四的倍数个数据
    //   let listpre = resList.slice(0, 20)
    //   let num = Math.floor(listpre.length / 4) * 4
    //   let list = listpre.slice(0, num)
    //   console.log('----------------num---------------', num)
    //   // // 获取各项的粉丝数，装回各项fansnum属性
    //   for (let item of list) {
    //     let fansnum = await this.getFansNum(item.userUuid)
    //     let workCount = await this.getUserWorkCount(item.userUuid)
    //     this.$set(item.user, 'fansnum', fansnum.data.followersCount)
    //     this.$set(item.user, 'workCount', workCount.data)
    //     let videos = await getOwnWorkList({uuid: item.userUuid, page: 1, limit: 2, type: 'Video'})
    //     let imglist = []
    //     if (videos.data) {
    //       // console.log('第三部分请求到了视频')
    //       videos.data.items.forEach(async item => {
    //         // console.log('item', item)
    //         let n = await this.getVideoBase64('https://' + item.fullnames[0])
    //         imglist.push({
    //           img: n,
    //           message: item.message
    //         })
    //       })
    //     }
    //     this.$set(item.user, 'imglist', imglist)
    //     // console.log('videos', videos)
    //     // console.log('imglist', imglist)
    //     // // this.$set(item.user, 'videoimg', workCount.data)
    //   }
    //   // 分组装进thirdList
    //   this.thirdList = this.split_array(list, 4)
    //   // this.thirdList = resList
    //   // console.log('res***********************', res)
    //   // console.log('***********this.thirdList************', this.thirdList)
    // },
    // 4.获取最新上传
    async getFour () {
      // 获取作品列表，默认拿前9个，点击之后再拿9个
      let res = await this.getWorkList(this.fourthNum, 8)
      res.data.items.forEach(item => {
        this.fourthList.push(item)
      })
      // 接口的每一项数据的属性跟之前的不一样
      let that = this
      for (let item of this.fourthList) {
        if (item.type === 'Video') {
          that.getVideoBase64('https://' + item.fullnames[0]).then(res => {
            item.background = res
          })
        }
      }
      this.fourthNum++
      // let res = await this.getWorkList(num++, 9)
      console.log('------------------res-----------------------', this.fourthList)
      // console.log('-----------------this.fourthNum-----------------------', this.fourthNum)
      // let list
    }
    // 获取图片宽度
    // getWidth (imgitem) {
    //   let height
    //   let width
    //   this.$nextTick(function () {
    //     // height = this.$refs.imgitem[0].naturalHeight
    //     // width = this.$refs.imgitem[0].naturalWidth
    //     height = imgitem[0].naturalHeight
    //     width = imgitem[0].naturalWidth
    //     return (180 / height) * width + 'px'
    //   })
    //   this.$forceUpdate()
    // }
  },
  created () {
    // this.getWorkList()
    // try {
    this.combine()
    this.getFour()
    console.log('uuid', this.$store.getters.get_uuid)
    // } catch (err) {
    // console.error('未登录！！！')
    // }
    // 获取数据
  },
  mounted () {
    // window.addEventListener('scroll', () => {
    //   console.log('000')
    // })
    // console.log('uuid------------', this.$store.getters.get_uuid)
    // console.log('--------------------mounted------------')
  },
  activated () {
    this.combine()
    this.getFour()
    // this.combine()
    // console.log('--------------------activated------------')
  }
}
</script>

<style lang="less" scoped>
.recommand-out{
  width: 100%;
  // 暂时给个高度
  // height: auto;
  margin: 16px auto;
  .up{
    width: 90%;
    margin: 0 auto;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      height: 100%;
      width: 4px;
      background-image: linear-gradient(to right, #ff8d94, #ff1668);
    }
    .text{
      height: 100%;
      display: flex;
      align-items: center;
      // background-color: #f5f5f5;
      margin-left: 10px;
      font-family: '微软雅黑';
    }
    .text-01{
      font-size: 30px;
    }
    .text-02{
      font-size: 28px;
      color: #c7c7c7;
    }
  }
  // 第一第二部分轮播图
  .down {
    // height: 500px;
    // position: relative;
    margin-bottom: 50px;
    .down-container{
      // background-color: #ff5465;
      width: 100%;
      // padding: 10px;
      margin: 0 auto;
      // display: flex;
      // .down-container-item{
        // width: 20%;
        // overflow: hidden;
      // height: auto;
      // .vue-waterfall-easy{
      // z-index: 500;
      // }
      // }
      .vue-waterfall-easy-container{
        // padding: 10px;
        // box-sizing: border-box;
        width: 100%;
        // padding: 50px;
        // height: 800px;
        overflow: hidden;
        margin:0 auto;
        box-sizing: border-box;
      }
      .vue-waterfall-easy-scroll{
        box-sizing: border-box;
        padding: 20px;
        width: 98%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      /deep/ .vue-waterfall-easy-scroll::-webkit-scrollbar {
        display: none;
        width: 0px;
      }
      .vue-waterfall-easy{
        box-sizing: border-box;
        width: 100% !important;
        padding: 30px;
      }
      // .vue-waterfall-easy-scroll{
      //   box-sizing: border-box;
      // }
    }
  }
}
</style>
~~~

创建了任务

将关联仓库设置为张德政/vue_basic

展开全部操作日志

登录后才可以发表评论

1

https://gitee.com/zhang_dezheng_hsr/vue_basic.git

git@gitee.com:zhang_dezheng_hsr/vue_basic.git

zhang_dezheng_hsr

vue_basic

vue_basic