<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("book");
|
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("FavoriteTextBooks");
|
|
const tabCart = (event: Event) => {
|
pages.page = 1;
|
pages.loading = true;
|
collectList.value = [];
|
currentCollect.value = event.props.name;
|
if (currentCollect.value == "textBooks") {
|
linkType.value = "FavoriteTextBooks";
|
}
|
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: 10px;
|
right: 10px;
|
|
img {
|
width: 16px;
|
height: 16px;
|
}
|
}
|
|
.cartContent {
|
min-height: 495px;
|
}
|
|
.pagination-box {
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
