<template>
|
<div>
|
<div class="wrap bookList" v-loading="reLoading">
|
<el-empty
|
description="暂无数据"
|
class="empty"
|
:image-size="200"
|
v-if="bookList.length == 0 && !reLoading"
|
></el-empty>
|
<template v-if="bookList.length > 0 && !reLoading">
|
<div
|
class="bookListItem"
|
v-for="(item, index) in bookList"
|
:key="index"
|
@click="toDetail(item)"
|
>
|
<div class="wrapImg">
|
<img class="autoImg" :src="item.icon" alt="" />
|
</div>
|
<div class="ellipsis" :title="item.name">
|
{{ item.name }}
|
</div>
|
<!-- <p>
|
<span style="font-size: 12px">￥</span>
|
{{ item.price }}
|
</p> -->
|
<div class="priceBox">
|
<span class="price" v-if="item.price && item.price > 0"
|
>¥
|
<span>{{ tool.toDecimal2(item.price) }}</span>
|
</span>
|
<span class="price" v-else>
|
<span class="freePrice">免费</span>
|
</span>
|
<span class="oldPrice" v-if="item.oldPrice"
|
>原价：¥{{ tool.toDecimal2(item.oldPrice) }}</span
|
>
|
</div>
|
</div>
|
</template>
|
</div>
|
<!-- 分页 -->
|
<div class="pageinateBox" v-if="bookList.length > 0">
|
<el-pagination
|
@size-change="
|
(val) => {
|
paginationData.limit = val;
|
getData();
|
}
|
"
|
@current-change="
|
(val) => {
|
paginationData.page = val;
|
getData();
|
}
|
"
|
background=""
|
:current-page="paginationData.page - 0"
|
:page-size="paginationData.limit"
|
prev-text="上一页"
|
next-text="下一页"
|
layout="total, prev, pager, next, slot, jumper"
|
:total="paginationData.totalCount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
reLoading: true,
|
tabLoading: true,
|
paginationData: {
|
page: 1,
|
totalCount: 0,
|
limit: 20,
|
totalPage: 0,
|
},
|
bookList: [],
|
};
|
},
|
props: {
|
channel: {
|
type: String,
|
},
|
selectListKey: {
|
type: Array,
|
defaultValue: [],
|
},
|
searchFields: {
|
type: String,
|
defaultValue: "",
|
},
|
searchValue: {
|
type: String,
|
defaultValue: "",
|
},
|
detailRoute: {
|
type: String,
|
defaultValue: "",
|
},
|
},
|
created() {
|
this.getData();
|
},
|
watch: {
|
searchValue: {
|
handler: function (val, oldVal) {
|
this.paginationData.page = 1;
|
this.getData();
|
},
|
// 深度观察监听
|
deep: true,
|
},
|
channel: {
|
handler: function (val, oldVal) {
|
this.paginationData.page = 1;
|
this.getData();
|
},
|
// 深度观察监听
|
deep: true,
|
},
|
searchFields: {
|
handler: function (val, oldVal) {
|
this.paginationData.page = 1;
|
this.getData();
|
},
|
// 深度观察监听
|
deep: true,
|
},
|
},
|
methods: {
|
toDetail(row) {
|
this.$router.push({
|
name: this.detailRoute,
|
query: { id: row.id, cmsPath: row.rootCmsItemId },
|
});
|
},
|
getData() {
|
this.reLoading = true;
|
let { limit, page } = this.paginationData;
|
let query = {
|
path: this.channel,
|
queryType: this.channel == "*" ? "*" : "",
|
paging: {
|
start: limit * page - limit,
|
size: limit,
|
},
|
fields: {
|
caupress_catalogue: [],
|
caupress_projectTitle: [],
|
caupress_ISBN: [],
|
caupress_author: [],
|
},
|
filterList: {},
|
coverSize: {
|
height: 200,
|
},
|
};
|
// 添加筛选条件
|
if (this.selectListKey) {
|
console.log(this.selectListKey[0] == "All", "isTru");
|
if (this.selectListKey[0] != "All") {
|
Object.assign(query.filterList, {
|
"caupress_catalogue*": this.selectListKey[0],
|
});
|
}
|
if (this.selectListKey[1] != "arrangementAll") {
|
if (this.selectListKey[0] != "All") {
|
Object.assign(query.filterList, {
|
"caupress_catalogue*": [
|
this.selectListKey[0],
|
"&" + this.selectListKey[1],
|
],
|
});
|
} else {
|
Object.assign(query.filterList, {
|
"caupress_catalogue*": [this.selectListKey[1]],
|
});
|
}
|
}
|
if (this.selectListKey[2] != "projectTitleAll") {
|
Object.assign(query.filterList, {
|
"caupress_projectTitle*": [this.selectListKey[2]],
|
});
|
}
|
}
|
|
// 增加头部搜索条件
|
if (this.searchFields) {
|
Object.assign(query.filterList, {
|
[this.searchFields + "*"]: this.searchValue,
|
});
|
}
|
console.log(this.selectListKey, "this.selectListKey");
|
|
console.log(query, "query");
|
this.MG.store.getProductList(query).then((res) => {
|
this.bookList = res.datas;
|
this.paginationData.totalCount = res.total;
|
// 父组件需要获取图书数量时调用
|
if (this.$listeners["gainTotalCount"]) {
|
this.$emit("gainTotalCount", res.total);
|
}
|
this.reLoading = false;
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.wrap {
|
padding: 20px;
|
margin-bottom: 10px;
|
background-color: #fff;
|
}
|
|
.bookList {
|
display: grid;
|
grid-template-columns: repeat(5, 150px);
|
grid-column-gap: 100px;
|
min-height: 400px;
|
|
.empty {
|
width: 1160px;
|
margin: 0 auto;
|
}
|
|
.bookListItem {
|
width: 150px;
|
height: 280px;
|
cursor: pointer;
|
|
.wrapImg {
|
width: 150px;
|
height: 200px;
|
position: relative;
|
border: 1px solid #e6e6e6;
|
background: #f2f2f2;
|
}
|
|
.ellipsis {
|
width: 150px;
|
line-height: 40px;
|
color: #333333;
|
font-size: 16px;
|
}
|
|
.priceBox {
|
.oldPrice {
|
font-size: 12px;
|
color: #444444;
|
text-decoration: line-through;
|
margin-left: 6px;
|
}
|
|
.price {
|
font-size: 12px;
|
color: #e50021;
|
|
span {
|
font-weight: bold;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
}
|
|
.pageinateBox {
|
text-align: center;
|
margin: 40px 0;
|
|
:deep(.el-pagination.is-background .btn-next) {
|
padding: 0 10px;
|
}
|
|
:deep(.el-pagination.is-background .btn-prev) {
|
padding: 0 10px;
|
}
|
}
|
</style>
|
