<template>
|
<div class="relatedBox" v-loading="loading">
|
<div class="titleBox">推荐教材</div>
|
<div v-if="dataList.length == 0 && !loading" class="emptyBox">
|
<el-empty :image-size="100" description="暂无资源"></el-empty>
|
</div>
|
<div class="bookBox" v-if="dataList.length > 0 && !loading">
|
<div
|
class="itemBox"
|
v-for="(item, index) in dataList"
|
:key="index"
|
@click="toDetail(item)"
|
>
|
<div class="imgBox">
|
<img class="autoImg" :src="item.icon" alt="" />
|
</div>
|
<div class="rightBox">
|
<div class="bookName ellipsis" :title="item.name">
|
{{ item.name }}
|
</div>
|
<div class="authorBox">
|
<div>作者：</div>
|
<div class="authorName" :title="item.caupress_author">
|
{{ item.caupress_author }}
|
</div>
|
</div>
|
<div class="toDetail" @click="toDetail(item)">详情 >></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: ["recommendKey", "bookInfo"],
|
data() {
|
return {
|
dataList: [],
|
loading: true,
|
};
|
},
|
created() {
|
// this.getData();
|
},
|
methods: {
|
getData(val) {
|
console.log(val);
|
let query = {
|
path: "caupress_bookMall", // 书城相关推荐
|
queryType: "*",
|
paging: {
|
start: 0,
|
size: 7, // 多获取一条，防止随机到自身
|
},
|
sort: { Random: "Asc" },
|
fields: {
|
caupress_author: [],
|
"caupress_catalogue*": val ? val : [],
|
},
|
coverSize: {
|
height: 200,
|
},
|
};
|
console.log(query, "query");
|
this.MG.store.getProductList(query).then((res) => {
|
this.dataList = res.datas.filter((item) => item.id != this.bookInfo.id);
|
this.dataList = this.dataList.slice(0, 6);
|
console.log(this.dataList, "this.dataList");
|
this.loading = false;
|
});
|
},
|
toDetail(row) {
|
this.$router.replace({
|
name: "bookStore-detail",
|
query: { id: row.id, cmsPath: row.rootCmsItemId },
|
});
|
this.$emit("reloadPage", row);
|
},
|
},
|
watch: {
|
recommendKey(key) {
|
if (key === "null") {
|
this.loading = false;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.relatedBox {
|
width: 357px;
|
margin-top: 10px;
|
margin-left: 20px;
|
border-radius: 5%;
|
border: 1px solid #e4e7ed;
|
overflow: hidden;
|
}
|
.titleBox {
|
height: 60px;
|
line-height: 60px;
|
padding: 0 40px;
|
font-weight: 700;
|
font-size: 18px;
|
background-color: #fff;
|
color: #333333;
|
|
border-bottom: 1px solid #e4e7ed;
|
}
|
.bookBox {
|
background-color: #fff;
|
padding: 10px;
|
}
|
.imgBox {
|
width: 100px;
|
height: 150px;
|
position: relative;
|
border: 1px solid #e6e6e6;
|
}
|
.rightBox {
|
flex: 1;
|
overflow: hidden;
|
margin-left: 10px;
|
}
|
.itemBox {
|
display: flex;
|
border-bottom: 1px solid #eeeeee;
|
padding: 10px;
|
cursor: pointer;
|
}
|
.bookName {
|
font-size: 16px !important;
|
line-height: 20px;
|
}
|
.authorBox {
|
margin-top: 10px;
|
color: #666666;
|
position: relative;
|
display: flex;
|
line-height: 20px;
|
}
|
.toDetail {
|
margin-top: 40px;
|
color: #00873c;
|
cursor: pointer;
|
}
|
.authorName {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
.emptyBox {
|
background-color: #fff;
|
}
|
</style>
|
