school-file-portal/src/views/MyRecord/index.vue

<template>
  <div class="my-container">
    <MyHeader></MyHeader>
    <div class="container">
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/myUpload' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>我的收藏</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-card v-loading="loading" element-loading-text="数据加载中...">
        <div class="book-grid" v-if="resourceList.length > 0">
          <el-card v-for="item in resourceList">
            <div class="book-content" @click="goto(item)">
              <img class="file-type" src="@/assets/images/word.png" alt="">
              <img src="@/assets/images/book.png" alt="">
            </div>

            <template #footer>
              <div class="book-title">{{ item.fileName }}</div>
              <div class="book-des">
                <div class="book-teacher">
                  <el-space spacer="|">
                    <span>{{ item.createBy }}</span>
                    <span>{{ item.createDept }}</span>
                  </el-space>
                </div>
              </div>
            </template>
          </el-card>
        </div>
        <el-empty v-else description="暂无数据" />
        <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
          @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </el-card>
    </div>
    <MyFooter></MyFooter>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Star } from '@element-plus/icons-vue'
import { doLike, myRecordList } from '@/apis/user'
import MyHeader from '@/components/MyHeader/index.vue'

const router = useRouter()

const queryParams = ref({
  pageNum: 1,
  pageSize: 8
})

const loading = ref(false)
const resourceList = ref([])
const total = ref(0)
const myRecordListData = async () => {
  loading.value = true
  const res = await myRecordList(queryParams.value)
  resourceList.value = res.rows
  total.value = res.total
  loading.value = false
}

onMounted(() => {
  myRecordListData()
})

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  myRecordListData()
}

const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  myRecordListData()
}

const goto = (item) => {
  // router.push({ path: 'subjectDetail', query: { id: item.id } })
}
</script>

<style lang="scss" scoped>
.my-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .container {
    .bread-container {
      padding: 25px 0;

      :deep(.el-breadcrumb__inner) {
        color: #fff;
        font-size: 16px;
      }

      :deep(.el-breadcrumb__separator) {
        color: #fff;
      }
    }

    .book-grid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 7px;

      .book-content {
        position: relative;

        .file-type {
          position: absolute;
          top: 0;
          left: 0;
          width: 25px;
        }
      }

      .book-title {
        font-size: 16px;
        font-weight: bold;
      }

      .book-des {
        display: flex;
        justify-content: space-between;
        color: #919DA3;
        padding: 5px 0;
      }
    }

    .book-page {
      margin-top: 20px;
      display: flex;
      justify-content: end
    }
  }
}
</style>