You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.3 KiB
114 lines
3.3 KiB
<template>
|
|
<div class="ranking-container">
|
|
<el-card class="ranking-card">
|
|
<h2 class="ranking-title">本月热租榜</h2>
|
|
|
|
<el-table :data="rankList" style="width: 100%">
|
|
<el-table-column type="index" label="排名" width="80" />
|
|
<el-table-column label="封面" width="120">
|
|
<template #default="scope">
|
|
<el-image :src="scope.row.url" class="cover-small" fit="cover" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="title" label="书名" width="200" />
|
|
<el-table-column prop="number" label="阅读量" width="120" />
|
|
<el-table-column prop="money" label="价格(元/天)" width="120">
|
|
<template #default="scope">
|
|
￥{{ scope.row.money }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" width="120">
|
|
<template #default="scope">
|
|
<el-button
|
|
type="text"
|
|
@click="handleBorrow(scope.row)"
|
|
:disabled="scope.row.number <= 0">
|
|
立即借阅
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="no-data" v-if="rankList.length === 0">
|
|
<el-empty description="暂无排行数据" />
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useStore } from 'vuex'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const store = useStore()
|
|
const rankList = ref([])
|
|
|
|
onMounted(async () => {
|
|
await fetchMonthlyRank()
|
|
})
|
|
|
|
const fetchMonthlyRank = async () => {
|
|
try {
|
|
const response = await store.dispatch('fetchMonthlyRank')
|
|
rankList.value = response.data
|
|
} catch (error) {
|
|
console.error('获取本月热租榜失败:', error)
|
|
ElMessage.error('获取本月热租榜失败')
|
|
// 预设数据
|
|
books.value = [
|
|
{ title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12},
|
|
{ title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10 },
|
|
{ title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 8},
|
|
{ title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15 },
|
|
{ title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9 },
|
|
{ title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7 },
|
|
{ title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20 },
|
|
{ title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18 }
|
|
]
|
|
}
|
|
}
|
|
|
|
const handleBorrow = async (book) => {
|
|
try {
|
|
if (book.number <= 0) {
|
|
ElMessage.warning('该书籍已无库存')
|
|
return
|
|
}
|
|
|
|
await store.dispatch('borrowBook', { title: book.title })
|
|
ElMessage.success(`成功借阅《${book.title}》`)
|
|
await fetchMonthlyRank()
|
|
} catch (error) {
|
|
console.error('借阅失败:', error)
|
|
ElMessage.error(error.message || '借阅失败')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ranking-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.ranking-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.ranking-title {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cover-small {
|
|
width: 80px;
|
|
height: 120px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.no-data {
|
|
margin: 40px 0;
|
|
text-align: center;
|
|
}
|
|
</style> |