tnbapp/src/views/home/PostAlbumView.vue

<template>
  <el-row class="movie-list">
    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
      <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <div slot="header" class="clearfix">
          <span>播放列表 - <span style="color: blue">{{ albumName }}</span></span>
        </div>
      </el-card>
    </el-row>
    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
      <el-col :md="24">
        <div v-if="dataList.length === 0" align="center">
          <img src="@/assets/img/icon/not-result.png">
          <div>还没有收藏呢~</div>
        </div>
        <div v-if="dataList.length !== 0">
          <el-col
            v-for="(item, index) in dataList"
            :key="index"
            :md="6"
            :sm="12"
            :xs="12"
            style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
          >
            <el-card :body-style="{ padding: '0px' }" class="card">
              <div v-if="postType === 1" class="imgs">
                <el-image
                  lazy
                  fit="cover"
                  class="coverImg"
                  :src="item.thumbnailUrl"
                  @click="showImages(index)"
                />
              </div>
              <div v-if="postType === 2" class="imgs" style="cursor: pointer" :title="item.title">
                <router-link target="_blank" :to="`/video/${item.videoId}`">
                  <el-image
                    lazy
                    fit="cover"
                    class="coverImg"
                    :src="item.coverUrl"
                  />
                  <span style="position: absolute; top: 0; left: 60%; color:white"> {{ item.duration }} </span>
                  <span style="position: absolute; bottom: 0; left: 0; color:white">
                    <i v-if="item.horizontal" class="el-icon-monitor" />
                    <i v-else class="el-icon-mobile-phone" />
                  </span>
                  <span style="position: absolute; bottom: 0; left: 10%; color:white">
                    <i class="el-icon-video-play">{{ getVisited(item.view) }}</i>
                  </span>
                  <span style="position: absolute; bottom: 0; left: 40%; color:white">
                    <i class="el-icon-s-comment">{{ getVisited(item.comment) }}</i>
                  </span>
                </router-link>
              </div>
              <div v-if="postType === 2" style="padding: 14px">
                <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${item.videoId}`">
                  <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
                </router-link>
              </div>
              <div v-if="postType === 2" style="padding: 14px">
                <span style="left: 0;margin-bottom: 0px;color: black;">
                  <router-link target="_blank" :to="`/user/${item.user.userId}`">
                    <i class="el-icon-user"> {{ item.user.screenName | ellipsisUsername }} </i></router-link> • {{ item.pubDateStr }}
                </span>
              </div>
            </el-card>
          </el-col>
          <el-pagination
            :small="screenWidth <= 768"
            hide-on-single-page
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @current-change="handleCurrentChange"
            @prev-click="handleCurrentChange"
            @next-click="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import {
  collectItem, getAlbumItems
} from '@/api/collect'
import { handleVisited } from '@/assets/js/utils'
import { getUserInfo } from '@/api/user'

export default {
  name: 'PostAlbumView',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      const max = 20
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    },
    ellipsisUsername(value) {
      if (!value) return ''
      const max = 10
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    }
  },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      favlistId: 1,
      contentType: 1001,
      albumId: null,
      albumName: null,
      postType: null,
      user: null
    }
  },
  created() {
    document.title = '播放列表'
    this.albumId = this.$route.params.albumId
    this.getAlbumItemsWrapper()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.dataList = []
      this.getAlbumItemsWrapper()
      // 回到顶部
      scrollTo(0, 0)
    },
    getAlbumItemsWrapper() {
      getAlbumItems(this.currentPage, this.albumId).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.albumName = respData.albumName
          this.postType = respData.postType
          this.dataList = respData.pageList.list
          this.totalSize = respData.pageList.totalSize

          getUserInfo(respData.createBy).then(resp => {
            if (resp.code === 0) {
              this.user = resp.data
              document.title = this.user.screenName + '的播放列表'
            }
          })
        }
      })
    },
    onReturnAlbum() {
      this.$router.push('/post/album')
    },
    showImages(index) {
      const imageUrls = []
      for (const i of this.dataList) {
        imageUrls.push(i.originalUrl)
      }

      this.$viewerApi({
        images: imageUrls,
        options: {
          initialViewIndex: index,
          movable: true,
          fullscreen: false,
          keyboard: true
        }
      })
    },
    getVisited(visited) {
      return handleVisited(visited)
    },
    onSetCover(item) {
      const jsonData = {}
      jsonData.albumId = this.albumId
      if (this.postType === 1) {
        jsonData.postId = item.imageFileId
      } else if (this.postType === 2) {
        jsonData.postId = item.videoId
      }

      jsonData.action = 3
      collectItem(jsonData).then(res => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '封面已更新!'
          })
          this.$router.go(0)
        }
      })
    },
    // 移除收藏
    onDeleteItem(item) {
      this.$confirm('确认删除本收藏？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const jsonData = {}
        jsonData.albumId = this.albumId
        if (this.postType === 1) {
          jsonData.postId = item.imageFileId
        } else if (this.postType === 2) {
          jsonData.postId = item.videoId
        }

        jsonData.action = 2
        collectItem(jsonData).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '移除成功!'
            })
            this.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }

  .coverImg {
    height: 120px !important;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

.coverImg {
  width: 100%;
  height: 130px;
  display: block;
}

.card {
  margin-bottom: 20px;
  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
}

.imgs {
  position: relative;
}

#collection-list {
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 30px;
}

.bread {
  font-size: 15px;
}

.movie-list {
  padding-top: 15px;
}

.reslut {
  color: red;
}

.not-result {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.remove-slot {
  position: absolute;
  right: 5px;
  bottom: 2px;
}
</style>