<template>
|
<div class="personalPage-box">
|
<div class="personalPage-title">我的书架</div>
|
<div class="personalPage-content">
|
<div class="pageBox cartPage" v-loading="isLoading">
|
<div class="myCarTopPage" v-if="collectList.length > 0">
|
<div
|
class="bookone"
|
v-for="(item, index) in collectList"
|
:key="index"
|
@click="goDetail(item)"
|
>
|
<div class="imgBox">
|
<img v-if="item.product.icon" :src="item.product.icon" />
|
<img v-else :src="defaultImg" alt="" />
|
</div>
|
<div class="details">
|
<div class="text-flow" v-if="item.product.name">
|
{{ item.product.name || "-" }}
|
</div>
|
<div class="text-flow" :title="item.isbn">
|
ISBN：{{ item.isbn.length != 0 ? item.isbn : "-" }}
|
</div>
|
<div class="text-flow">
|
作者：{{ item.author.length != 0 ? item.author : "-" }}
|
</div>
|
<!-- <div class="text-flow" v-if="item.ExpiryDate">
|
截止日期：<span style="color: #dd0000">{{ item.ExpiryDate }}</span>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
<div class="myCarTopPage" v-else>
|
<el-empty description="您还未购买任何图书" :image-size="200" />
|
</div>
|
</div>
|
<div class="pageCon">
|
<!-- 分页 -->
|
<el-pagination
|
background
|
:current-page="paginationData.page - 0"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-size="paginationData.limit"
|
layout="total, prev, pager, next, slot"
|
:total="paginationData.totalCount"
|
>
|
<div style="display: flex; align-items: center">
|
<span class="el-pagination__jump"
|
>前往
|
<div class="el-input el-pagination__editor is-in-pagination">
|
<input
|
type="number"
|
autocomplete="off"
|
min="1"
|
:max="paginationData.totalPage"
|
v-model="inputPage"
|
class="el-input__inner"
|
@keyup.enter="jumpFun($event)"
|
/>
|
</div>
|
页
|
</span>
|
<el-button type="primary" class="toBtn" @click="jumpFun">确定</el-button>
|
</div>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { reactive, ref, onMounted, inject, watch } from "vue";
|
import { useRouter } from "vue-router";
|
import defaultImg from "@/assets/images/default-book-img.png";
|
import { useUserStore } from "@/store";
|
import tool from "@/assets/js/toolClass";
|
const MG: any = inject("MG");
|
const config: any = inject("config");
|
const router = useRouter();
|
let collectList = ref([]);
|
let currentCollect = ref("book");
|
let isLoading = ref(false);
|
let pages = reactive({
|
page: 1,
|
pageSize: 10,
|
count: 0,
|
loading: false,
|
});
|
let linkType = ref("PurchasedProduct");
|
let paginationData = reactive({
|
page: 1,
|
limit: 10,
|
totalCount: 0,
|
totalPage: 0,
|
});
|
let inputPage = ref(1);
|
const loading = ref(false);
|
const listData = ref([]);
|
const keyQueryRequests = [
|
{
|
key: "author",
|
},
|
{
|
key: "isbn",
|
},
|
];
|
|
const getData = () => {
|
loading.value = true;
|
const searchData = [
|
{
|
keywords: "digitalTextbooks",
|
field: "ProductType",
|
},
|
];
|
const data = {
|
Size: paginationData.limit,
|
Start: (paginationData.page - 1) * paginationData.limit,
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
searchList: searchData,
|
keyQueryRequests: keyQueryRequests,
|
};
|
MG.store.getPurchasedProductList(data).then(async (response) => {
|
listData.value = handResultsChange(response.datas);
|
listData.value.forEach((item) => {
|
item.product.icon = tool.getPublicImage(item.product.icon);
|
});
|
// //当前页面
|
paginationData.totalCount = response.totalSize;
|
paginationData.totalPage =
|
response.totalSize % paginationData.limit === 0
|
? response.totalSize / paginationData.limit
|
: Math.floor(response.totalSize / paginationData.limit) + 1;
|
loading.value = false;
|
collectList.value = response.datas;
|
});
|
};
|
onMounted(() => {
|
getData();
|
});
|
// 处理查询结果
|
const handResultsChange = (data) => {
|
let fieldsData = [];
|
for (let i = 0; i < data.length; i++) {
|
const item = data[i];
|
for (const val in keyQueryRequests) {
|
fieldsData.push(keyQueryRequests[val].key);
|
}
|
for (let i = 0; i < fieldsData.length; i++) {
|
const field = fieldsData[i];
|
item[field] = JSON.parse(item.datas[field]);
|
const datas = item[field];
|
if (datas.length > 0) {
|
if (datas[0].Value) {
|
item[field] = datas[0].Value;
|
} else if (datas[0].Data) {
|
item[field] = datas[0].Data.Value;
|
}
|
}
|
}
|
}
|
return data;
|
};
|
|
//到图书详情
|
const goDetail = (item) => {
|
router.push({
|
path: "/bookdetail",
|
query: {
|
bookId: item.product.id,
|
},
|
});
|
};
|
|
//分页
|
const handleSizeChange = (val) => {
|
paginationData.limit = val;
|
getData();
|
};
|
const handleCurrentChange = (val) => {
|
paginationData.page = val;
|
inputPage.value = val;
|
getData();
|
};
|
const jumpFun = (event) => {
|
event.target.blur();
|
var that = this;
|
if (inputPage.value <= 0) {
|
inputPage.value = 1;
|
}
|
if (inputPage.value > paginationData.totalPage) {
|
inputPage.value = paginationData.totalPage;
|
}
|
paginationData.page = inputPage.value;
|
getData();
|
};
|
</script>
|
<style scoped>
|
.pageCon {
|
width: 100%;
|
float: left;
|
margin-top: 20px;
|
display: flex;
|
justify-content: center;
|
}
|
.myCarTopPage {
|
display: flex;
|
justify-content: flex-start;
|
box-sizing: border-box;
|
overflow: hidden;
|
padding-bottom: 20px;
|
}
|
.details div:first-child {
|
font-size: 16px;
|
color: #2b68cd;
|
margin-bottom: 11px;
|
}
|
|
.details div:nth-child(2) {
|
font-size: 14px;
|
color: #666;
|
margin: 15px 0;
|
}
|
|
.details div:nth-child(3) {
|
margin-bottom: 11px;
|
display: flex;
|
align-items: center;
|
}
|
.details div:last-child {
|
font-size: 14px;
|
color: #666666;
|
}
|
.resonBox {
|
display: flex;
|
line-height: 24px;
|
}
|
.resonTxt {
|
flex: 1;
|
overflow: hidden;
|
line-height: 24px;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
flex-direction: column;
|
}
|
|
.bookoneTitle {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #ddd;
|
}
|
.bookone {
|
display: flex;
|
width: 420px;
|
min-height: 173px;
|
float: left;
|
cursor: pointer;
|
box-sizing: border-box;
|
margin: 20px 0px 0 20px;
|
padding: 10px 30px;
|
border: 1px solid #ddd;
|
}
|
.bookone:hover {
|
-moz-box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
|
-webkit-box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
|
box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
|
}
|
|
.bookone .imgBox {
|
position: relative;
|
width: 120px;
|
height: 160px;
|
background: #fff;
|
}
|
.newBookli .imgBox {
|
position: relative;
|
width: 105px;
|
height: 140px;
|
}
|
|
.imgBox img {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
}
|
|
.details {
|
flex: 1;
|
margin-left: 10px;
|
margin-top: 10px;
|
overflow: hidden;
|
}
|
.pageBox {
|
width: 100%;
|
}
|
.noDataTxt {
|
margin: 50px auto;
|
text-align: center;
|
font-size: 22px;
|
color: #999;
|
}
|
.el-pagination button {
|
margin-left: 10px;
|
}
|
</style>
|
