<template>
|
<!-- <page> -->
|
<div class="personalPage-box">
|
<div class="personalPage-title">我的收藏</div>
|
<div class="personalPage-content">
|
<div class="cartClass">
|
<el-tabs v-model="currentCollect" type="capsule" @tab-click="tabCart">
|
<el-tab-pane label="数字教材" name="textBooks"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="myCarTopPage">
|
<div class="list-box" v-loading="pages.loading">
|
<div
|
:class="
|
currentCollect == 'book' || currentCollect == 'textBooks'
|
? 'bookCartContent cartContent'
|
: currentCollect == 'course'
|
? 'courseCartContent cartContent'
|
: 'cartContent'
|
"
|
>
|
<div
|
class="collectList flex jc-sb clear"
|
v-if="collectList.length > 0 && !pages.loading"
|
>
|
<div v-for="(item, index) in collectList" :key="index" class="collectList-item fl">
|
<div class="cover" @click="goBookDetails(item.id, item.name)">
|
<img :src="item.icon" alt="" />
|
</div>
|
<div class="info" @click="goBookDetails(item.id, item.name)">
|
<span>{{ item.name }}</span>
|
</div>
|
<div class="currentBtn hover" @click="setCoolect(item)">
|
<img src="@/assets/images/personalCenter/collect-click.png" alt="star" />
|
</div>
|
</div>
|
</div>
|
<div v-if="collectList.length == 0 && !pages.loading">
|
<el-empty :image-size="200" description="暂无数据" />
|
</div>
|
</div>
|
<div class="pagination-box">
|
<el-pagination
|
v-model:current-page="pages.page"
|
v-model:page-size="pages.pageSize"
|
:disabled="disabled"
|
:background="background"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@current-change="handleCurrentChange"
|
v-if="collectList.length > 0 && !pages.loading"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- </page> -->
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { useUserStore } from '@/store'
|
import { useRouter } from 'vue-router'
|
const userStore = useUserStore()
|
const router = useRouter()
|
const MG: any = inject('MG')
|
const config: any = inject('config')
|
let currentCollect = ref('textBooks')
|
let collectList = ref([])
|
const background = ref(false)
|
const disabled = ref(false)
|
let pages = reactive({
|
page: 1,
|
pageSize: 10,
|
count: 0,
|
loading: false,
|
})
|
let linkType = ref('FavoriteBookCity')
|
|
const tabCart = (event: Event) => {
|
pages.page = 1
|
pages.loading = true
|
collectList.value = []
|
currentCollect.value = event.props.name
|
if (currentCollect.value == 'textBooks') {
|
linkType.value = 'FavoriteBookCity'
|
}
|
getDataList()
|
}
|
|
function getDataList() {
|
pages.loading = true
|
MG.store
|
.getProductList({
|
handelEBooK: true,
|
queryType: 'AppUserProductLink',
|
linkType: linkType.value,
|
paging: {
|
start: pages.pageSize * pages.page - pages.pageSize,
|
size: pages.pageSize,
|
},
|
})
|
.then((res) => {
|
collectList.value = res.datas
|
pages.count = res.total
|
pages.loading = false
|
})
|
.catch(() => {
|
pages.loading = false
|
})
|
}
|
onMounted(() => {
|
getDataList()
|
})
|
|
// watch(
|
// () => userStore.token,
|
// () => {
|
// getDataList()
|
// }
|
// )
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val
|
getDataList()
|
}
|
|
const setCoolect = (item) => {
|
ElMessageBox.confirm('确定要取消收藏吗？', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
autofocus: false,
|
type: 'warning',
|
})
|
.then(() => {
|
MG.store
|
.delProductLink({
|
productIds: [item.id],
|
linkType: linkType.value,
|
})
|
.then(() => {
|
ElMessage({
|
message: '收藏已取消！',
|
type: 'success',
|
})
|
pages.page = 1
|
getDataList()
|
})
|
})
|
.catch(() => {})
|
}
|
// 跳转书本详情
|
const goBookDetails = (id: number, name: string) => {
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: id,
|
},
|
})
|
}
|
</script>
|
<style lang="less" scoped>
|
.cartClass {
|
::v-deep .el-tabs__nav-wrap::after {
|
background-color: #019e58;
|
height: 1px;
|
}
|
|
::v-deep .el-tabs__item {
|
width: 100px;
|
padding: 0;
|
color: #545c63;
|
}
|
|
::v-deep .is-active {
|
background-color: #019e58;
|
color: #fff;
|
border-radius: 3px 3px 0 0;
|
}
|
}
|
|
.collectList {
|
// overflow: hidden;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
|
.bookCartContent {
|
.collectList-item {
|
width: 130px;
|
cursor: pointer;
|
box-sizing: border-box;
|
float: left;
|
position: relative;
|
margin-right: 38px;
|
|
.cover {
|
width: 100%;
|
height: 180px;
|
box-shadow: 0px 0px 20px 1px #ccc;
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
|
.info {
|
height: 90px;
|
padding: 15px 0;
|
width: 100%;
|
|
span {
|
font-weight: bold;
|
height: 45px;
|
line-height: 22px;
|
display: -webkit-box;
|
margin-bottom: 5px;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
|
.collectList-item:nth-child(5),
|
:nth-child(10) {
|
margin-right: 0;
|
}
|
}
|
|
.courseCartContent {
|
.collectList-item {
|
width: 28%;
|
cursor: pointer;
|
box-sizing: border-box;
|
float: left;
|
margin-right: 5%;
|
box-shadow: 0px 0px 20px 1px #ccc;
|
position: relative;
|
|
.cover {
|
width: 100%;
|
height: 130px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
|
.info {
|
height: 70px;
|
padding: 15px;
|
width: 100%;
|
|
span {
|
font-weight: bold;
|
height: 45px;
|
line-height: 22px;
|
display: -webkit-box;
|
margin-bottom: 5px;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
|
.currentBtn {
|
width: 20px;
|
height: 20px;
|
padding: 2px;
|
background-color: #fff;
|
position: absolute;
|
top: 5px;
|
right: 2px;
|
|
img {
|
height: 20px;
|
}
|
}
|
|
.cartContent {
|
min-height: 495px;
|
}
|
|
.pagination-box {
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
