<template>
|
<div class="collect article">
|
<van-nav-bar title="我的教材" left-text="" right-text="" />
|
<!-- 列表 -->
|
<div class="listBox">
|
<p class="line"></p>
|
<van-pull-refresh
|
class="refreshBox"
|
v-model="refreshing"
|
@refresh="onRefresh"
|
>
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:finished-text="finishedtext"
|
@load="onLoad"
|
>
|
<template slot="finished" name="finished">
|
<div v-if="collectList.length == 0">
|
<van-empty description="暂无数据" />
|
</div>
|
<div v-else>
|
没有更多了
|
</div>
|
</template>
|
<div class="collectBox">
|
<div v-if="collectList && collectList.length > 0">
|
<div
|
v-for="(item, index) in collectList"
|
:key="index"
|
class="list"
|
@click="gotoDetails(item.product, index)"
|
>
|
<img :src="item.product.icon" alt="" class="bookImg" />
|
<div class="centerContent">
|
<p class="bookName">{{ item.product.name }}</p>
|
<p class="sameTitle">
|
作者 :
|
{{
|
item.tourism_author.length != 0
|
? item.tourism_author
|
: "-"
|
}}
|
</p>
|
|
<p class="sameTitle">
|
ISBN :
|
{{
|
item.tourism_ISBN.length != 0 ? item.tourism_ISBN : "-"
|
}}
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
</div>
|
<Footer />
|
</div>
|
</template>
|
|
<script>
|
import Footer from "@/components/footer/footer";
|
import { mapState } from "vuex";
|
import { getPublicImage } from "@/assets/js/middleGround/tool";
|
export default {
|
data() {
|
return {
|
form: this.$route.query.formMine,
|
refreshing: false,
|
loading: false,
|
finished: false,
|
finishedtext: "",
|
collectList: [],
|
|
paginationData: {
|
page: 1,
|
limit: 10,
|
totalCount: 0,
|
totalPage: 0
|
},
|
keyQueryRequests: [
|
{
|
key: "tourism_author"
|
},
|
{
|
key: "tourism_ISBN"
|
}
|
]
|
};
|
},
|
computed: {
|
...mapState(["userInfo"])
|
},
|
created() {
|
this.getCollectList();
|
},
|
methods: {
|
onRefresh() {
|
// 清空列表数据
|
this.paginationData.page = 1;
|
this.finished = false;
|
this.loading = true;
|
this.refreshing = false;
|
this.getCollectList(true);
|
},
|
onLoad() {
|
this.getCollectList();
|
},
|
//获取列表
|
getCollectList(isLode) {
|
var that = this;
|
this.finished = false;
|
this.loading = true;
|
this.finishedtext = "加载中";
|
this.MG.store
|
.getPurchasedProductList({
|
sort: {
|
type: "Desc",
|
field: "CreateDate"
|
},
|
Size: that.paginationData.limit,
|
Start: (that.paginationData.page - 1) * that.paginationData.limit,
|
searchList: [
|
{
|
keywords: "tourism_digitalTextbooks",
|
field: "ProductType"
|
}
|
],
|
keyQueryRequests: this.keyQueryRequests,
|
coverSize: {
|
width: 880
|
}
|
})
|
.then(res => {
|
let list = that.handResultsChange(res.datas);
|
list.forEach(item => {
|
item.product.icon = getPublicImage(item.product.icon, 840);
|
});
|
if (isLode) {
|
that.collectList = list;
|
} else {
|
that.collectList = [...that.collectList, ...list];
|
}
|
//分页
|
that.paginationData.totalCount = res.total;
|
if (res.total > that.paginationData.limit) {
|
that.paginationData.totalPage = parseInt(
|
res.total / that.paginationData.limit
|
);
|
if (res.total % that.paginationData.limit > 0) {
|
that.paginationData.totalPage++;
|
}
|
} else {
|
that.paginationData.totalPage = 1;
|
}
|
that.sum = Number(
|
Math.ceil(res.totalSize / this.paginationData.limit)
|
);
|
// 加载状态结束
|
that.loading = false;
|
that.refreshing = false;
|
if (that.paginationData.page == this.sum) {
|
that.finished = true;
|
that.finishedtext = "没有更多了";
|
return false;
|
}
|
if (that.collectList.length < 1) {
|
that.loading = false;
|
that.finished = true;
|
that.finishedtext = "暂无数据";
|
}
|
that.paginationData.page++;
|
});
|
},
|
// 处理查询结果
|
handResultsChange(data) {
|
let fieldsData = [];
|
for (let i = 0; i < data.length; i++) {
|
const item = data[i];
|
for (const val in this.keyQueryRequests) {
|
fieldsData.push(this.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;
|
},
|
|
gotoDetails(item) {
|
this.$router.push({
|
path: "/bookDetail",
|
query: {
|
id: item.id
|
}
|
});
|
},
|
onClickLeft() {
|
var that = this;
|
that.$router.go(-1);
|
}
|
},
|
components: {
|
Footer
|
}
|
};
|
</script>
|
|
<style scoped>
|
.refreshBox {
|
flex: 1;
|
overflow: auto;
|
}
|
.collectBox {
|
padding: 0 15px;
|
}
|
.collect {
|
padding-bottom: 50px;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
|
.line {
|
height: 5px;
|
background-color: #eee;
|
}
|
.listBox {
|
padding-top: 40px;
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
/* 列表 */
|
.list {
|
display: flex;
|
position: relative;
|
padding: 15px 0 15px 0;
|
border-bottom: 1px solid #e8e8e8;
|
}
|
|
.bookImg {
|
width: 75px;
|
height: 100px;
|
display: inline-block;
|
box-shadow: 0 3px 6px 1px #00000029;
|
}
|
|
.centerContent {
|
margin-left: 14px;
|
}
|
|
.starSection {
|
min-width: 36px;
|
text-align: center;
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
}
|
|
.stars {
|
width: 15px;
|
height: 14px;
|
display: inline-block;
|
}
|
|
.bookName {
|
color: #333333;
|
font-size: 14px;
|
}
|
|
.sameTitle {
|
margin: 4px 0 5px 0;
|
color: #999;
|
}
|
|
.red {
|
color: #ef1b3a;
|
font-size: 12px;
|
font-weight: bold;
|
}
|
.free {
|
color: #0bc266;
|
font-size: 12px;
|
font-weight: bold;
|
}
|
</style>
|
|
<style>
|
.noData {
|
font-size: 14px;
|
font-weight: bold;
|
color: #999;
|
text-align: center;
|
}
|
.collect .van-nav-bar {
|
position: fixed;
|
width: 100%;
|
z-index: 999;
|
height: 40px;
|
line-height: 40px;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
.van-icon-arrow-left::before {
|
color: #010101;
|
font-size: 15px;
|
}
|
</style>
|
