tnbapp/src/views/home/Image.vue

<template>
  <div>
    <!--电影列表，与推荐列表-->
    <el-row id="movie-list">
      <!--电影列表-->
      <el-col :md="24">
        <div>
          <el-col
            v-for="(image, index) in dataList"
            :key="image.thumbnailUrl"
            :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 class="imgs">
                <el-image
                  lazy
                  fit="cover"
                  class="coverImg"
                  :src="image.thumbnailUrl"
                  @click="showImages(index)"
                />
              </div>
              <div style="padding: 14px;">
                <span style="position: relative; bottom: 0; left: 0%; color:green">
                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
                </span>
                <span style="position: relative; bottom: 0; left: 0; color:blue">
                  来自相册:
                </span>
                <router-link target="_blank" :to="`/image/album/${image.albumId}`">
                  <span style="position: relative; bottom: 0; left: 0; color:blue">
                    {{ image.albumName | ellipsis }}
                  </span>
                </router-link>
              </div>
            </el-card>
          </el-col>
        </div>
        <!--
          分页按钮：
          page-size：每页显示条数
          total：总条数
          hide-on-single-page： 页数为一时隐藏
        -->
        <el-col :span="24" class="pagination">
          <el-pagination
            background
            :small="screenWidth <= 768"
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-col>
    </el-row>
    <el-row v-if="dataList.length === 0" class="not-result">
      <el-col :span="12" :offset="6">
        <img src="@/assets/img/icon/not-result.png">
        <div>没有图片数据</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getImages } from '@/api/image'
import { collectItem } from '@/api/collect'

export default {
  name: 'Image',
  components: {},
  filters: {
    ellipsis(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: 24,
      totalSize: 0,
      dataList: []
    }
  },
  created() {
    document.title = '图片主页'
    this.getImagesWrapper(this.currentPage)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getImagesWrapper(this.currentPage)

      // 回到顶部
      scrollTo(0, 0)
    },
    getImagesWrapper(page) {
      getImages(page).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        } else {
          this.$notify({
            title: '获取数据失败',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '获取数据错误',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    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
        }
      })
    },
    collectItem(image) {
      console.log(image)
      const jsonData = {}
      jsonData.contentType = 1001
      jsonData.contentId = image.imageFileId
      if (image.collected) {
        jsonData.collected = false
        collectItem(jsonData).then(resp => {
          if (resp.code === 0) {
            this.$notify({
              title: '取消收藏图片',
              type: 'info',
              duration: 3000
            })
            image.collected = false
          }
        })
      } else {
        jsonData.collected = true
        collectItem(jsonData).then(resp => {
          if (resp.code === 0) {
            this.$notify({
              title: '图片已收藏',
              type: 'info',
              duration: 3000
            })
            image.collected = true
          }
        })
      }
    }
  }
}
</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: 320px;
  display: block;
}

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

.pagination {
  text-align: center;
  padding: 10px;
}
</style>