144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
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> |