tnbapp/src/views/disk/DiskAlbumIndex.vue

<template>
  <div>
    <el-row style="padding: 5px">
      <el-button
        style="float: left; padding: 5px"
        icon="el-icon-plus"
        type="text"
        @click="onCreateAlbum"
      >创建相册</el-button>
    </el-row>
    <el-row style="padding: 5px">
      <el-col
        v-for="(album, index) in dataList"
        :key="index"
        :md="6"
        :sm="12"
        :xs="12"
        style="padding: 5px"
      >
        <el-card :body-style="{ padding: '1px' }">
          <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/${album.albumId}`">
            <div>
              <el-image
                lazy
                fit="cover"
                :src="album.coverUrl"
                class="coverImg"
              />
            </div>
          </router-link>
          <div style="padding: 14px">
            <el-row style="padding: 1px">
              <span style="color: black">
                {{ album.albumName }}
              </span>
              <span style="color: black">
                <i class="el-icon-picture-outline">{{ album.num }}</i>
              </span>
            </el-row>
            <el-row style="padding: 1px">
              <el-button style="float: right; padding: 5px;" icon="el-icon-share" type="text" @click="onShareAlbum">分享</el-button>
              <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/${album.albumId}`">
                <el-button style="float: right; padding: 5px" icon="el-icon-view" type="text" @click="true">查看</el-button>
              </router-link>
              <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/edit/${album.albumId}`">
                <el-button style="float: right; padding: 5px" icon="el-icon-edit" type="text" @click="true">管理</el-button>
              </router-link>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <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"
      />
    </el-row>

    <el-dialog
      :visible.sync="showCreateAlbumDialog"
      center
    >
      <div>
        <el-form ref="createAlbumForm" :model="createAlbumForm">
          <el-form-item label="相册名" label-width="120px" prop="title">
            <el-input
              v-model="createAlbumForm.albumName"
              style="margin-left: 5px"
              clearable
            />
          </el-form-item>
          <el-button
            type="primary"
            plain
            size="small"
            icon="el-icon-plus"
            style="margin-left: 10px"
            @click="createAlbum"
          >
            创建相册
          </el-button>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createAlbum, getAlbumList } from '@/api/disk'

export default {
  name: 'DiskAlbumIndex',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      // ****************************************************************************************************************
      showCreateAlbumDialog: false,
      createAlbumForm: {
        albumName: null,
        fileType: 1001
      }
    }
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  created() {
    document.title = '相册'
    this.getData()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.dataList = []
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      getAlbumList(this.currentPage).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data
        }
      })
    },
    onCreateAlbum() {
      this.showCreateAlbumDialog = true
    },
    createAlbum() {
      this.showCreateAlbumDialog = false
      createAlbum(this.createAlbumForm).then(resp => {
        this.$message.info(resp.msg)
      })
    },
    onShareAlbum() {
      this.$message.info('share album')
    }
  }
}
</script>

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

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