tnbapp/src/views/disk/DiskAlbumView.vue

<template>
  <div v-loading="loading" style="height: 80vh;">
    <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
      <el-row v-if="dataList.length !== 0">
        <el-col
          v-for="(album, index) in dataList"
          :key="index"
          :md="6"
          :sm="12"
          :xs="12"
          style="padding: 5px"
        >
          <el-image
            lazy
            fit="cover"
            class="coverImg"
            :src="album.url"
            @click="showImages(index)"
          />
        </el-col>
      </el-row>
      <el-row v-if="!loading && dataList.length === 0" style="display: flex; justify-content: center;">
        <span style="color: #007bff">
          这是一个空相册, 快去
          <router-link style="text-decoration-line: none; color: red" :to="`/disk/album/edit/${albumId}`">
            添加
          </router-link>
          点照片到相册中吧!
        </span>
      </el-row>
      <el-row>
        <div v-if="hasMore" style="display: flex; justify-content: center;">
          <el-button link size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
            加载更多
          </el-button>
        </div>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>

import { getAlbumDetail } from '@/api/disk'

export default {
  name: 'DiskAlbumView',
  data() {
    return {
      albumId: null,
      currentPage: 1,
      dataList: [],
      loading: false,
      hasMore: false
    }
  },
  created() {
    document.title = '查看相册'
    const albumId = this.$route.params.albumId
    if (albumId === undefined) {
      return
    }
    this.albumId = albumId
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getAlbumDetail(this.albumId, this.currentPage).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          document.title = '查看相册 ' + respData.albumName

          this.dataList = this.dataList.concat(respData.pageList.list)
          this.hasMore = respData.pageList.hasNext
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.loading = false
        // 滚动条始终保持在底部
        this.$nextTick(() => {
          this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
        })
      })
    },
    loadMore() {
      this.currentPage += 1
      this.getData()
    },
    showImages(index) {
      const imageUrls = []
      for (const item of this.dataList) {
        imageUrls.push(item.url)
      }
      this.$viewerApi({
        images: imageUrls,
        options: {
          initialViewIndex: index,
          movable: true,
          fullscreen: false,
          keyboard: true
        }
      })
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  .coverImg {
    height: 120px !important;
  }
}

.coverImg {
  width: 100%;
  height: 320px;
  display: block;
}
</style>