<template>
|
<div class="collect article">
|
<van-nav-bar
|
title="我的收藏"
|
left-text=""
|
right-text=""
|
left-arrow
|
@click-left="onClickLeft"
|
/>
|
<!-- 列表 -->
|
<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, index)"
|
>
|
<img :src="item.icon" alt="" class="bookImg" />
|
<div class="centerContent">
|
<p class="bookName">{{ item.name }}</p>
|
<p class="sameTitle">
|
作者 : {{ item.tourism_author || "-" }}
|
</p>
|
<p class="sameTitle">
|
出版时间 :
|
{{
|
item.tourism_publicationDate
|
? moment(
|
item.tourism_publicationDate.split(" ")[0]
|
).format("YYYY-MM")
|
: "-"
|
}}
|
</p>
|
<p class="sameTitle">ISBN : {{ item.tourism_ISBN || "-" }}</p>
|
<p :class="item.price && item.price > 0 ? 'red' : 'free'">
|
<span>{{
|
item.price && item.price > 0
|
? "￥" + tool.toDecimal2(item.price)
|
: "免费"
|
}}</span>
|
</p>
|
</div>
|
<div
|
class="starSection"
|
v-if="isCollect"
|
@click.stop="addCollect(item, index)"
|
>
|
<div style="text-align: center">
|
<img
|
:src="collectIcon.selected_star"
|
alt=""
|
class="stars"
|
/>
|
</div>
|
<p>已收藏</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 { Toast } from "vant";
|
// import List from "../bookList/bookList";
|
export default {
|
data() {
|
return {
|
form: this.$route.query.formMine,
|
refreshing: false,
|
loading: false,
|
finished: false,
|
finishedtext: "",
|
collectList: [],
|
// 收藏图片
|
collectIcon: {
|
star: require("@/assets/images/tab_collection.png"),
|
selected_star: require("@/assets/images/tab_collection_pre.png")
|
},
|
//收藏状态
|
isCollect: true,
|
linkType: this.config.refCodes.LinkType.FavoriteTextBook,
|
paginationData: {
|
page: 1,
|
limit: 10,
|
totalCount: 0,
|
totalPage: 0
|
}
|
};
|
},
|
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 = "加载中";
|
let { limit, page } = this.paginationData;
|
this.MG.store
|
.getProductList({
|
queryType: "AppUserProductLink",
|
linkType: this.linkType,
|
handelEBooK: true,
|
paging: {
|
start: limit * page - limit,
|
size: limit
|
},
|
fields: {
|
tourism_author: [],
|
tourism_paperPrice: [],
|
tourism_ISBN: [],
|
tourism_publicationDate: []
|
},
|
coverSize: {
|
width: 880
|
}
|
})
|
.then(res => {
|
if (isLode) {
|
that.collectList = res.datas;
|
} else {
|
that.collectList = [...that.collectList, ...res.datas];
|
}
|
//分页
|
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.total / 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++;
|
});
|
},
|
addCollect(item, index) {
|
var that = this;
|
const data = {
|
productIds: [item.id],
|
linkType: that.linkType
|
};
|
that.MG.store.delProductLink(data).then(res => {
|
if (res) {
|
Toast.success("取消收藏成功");
|
that.paginationData.page = 1;
|
that.collectList.splice(index, 1);
|
}
|
});
|
},
|
gotoDetails(item) {
|
this.$router.push({
|
path: "/bookDetail",
|
query: {
|
shopId: 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;
|
}
|
|
.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>
|
