<template>
|
<div class="relatedBox">
|
<div class="headBox">
|
<div class="titleBox">相关推荐</div>
|
</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>
|
<el-empty
|
:image-size="100"
|
description="暂无资源"
|
v-if="dataList.length == 0 && !loading"
|
></el-empty>
|
</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_teachingResource", // 书城相关推荐
|
queryType: "*",
|
paging: {
|
start: 0,
|
size: 7 // 多获取一条，防止随机到自身
|
},
|
sort: { Random: "Asc" },
|
fields: {
|
caupress_author: [],
|
"caupress_catalogue*": val ? val : [],
|
},
|
coverSize: {
|
height: 200
|
}
|
};
|
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);
|
this.loading = false;
|
});
|
},
|
toDetail(row) {
|
this.$router.replace({
|
name: "teachingServices-detail",
|
query: { id: row.id, cmsPath: row.rootCmsItemId }
|
});
|
this.$emit("reloadPage", row);
|
},
|
},
|
watch: {
|
recommendKey(key) {
|
if (key === "null") {
|
this.loading = false;
|
} else if (key) {
|
// this.getData();
|
}
|
},
|
bookInfo(key) {
|
// this.getData();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.relatedBox {
|
width: 813px;
|
background-color: #fff;
|
margin: 10px 0 0 10px;
|
border-top: 1px solid #00873c;
|
margin-bottom: 20px;
|
box-sizing: border-box;
|
}
|
.titleBox {
|
height: 60px;
|
background: #d8f7e6;
|
line-height: 60px;
|
padding: 0 40px;
|
font-weight: 700;
|
color: #00873c;
|
font-size: 18px;
|
}
|
.bookBox {
|
display: flex;
|
flex-wrap: wrap;
|
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 {
|
width: 50%;
|
display: flex;
|
padding: 10px;
|
box-sizing: border-box;
|
}
|
.bookName {
|
font-size: 16px !important;
|
line-height: 20px;
|
text-overflow: ellipsis;
|
}
|
.authorBox {
|
margin-top: 10px;
|
color: #666666;
|
position: relative;
|
display: flex;
|
line-height: 20px;
|
}
|
.toDetail {
|
cursor: pointer;
|
margin-top: 40px;
|
color: #00873c;
|
}
|
.authorName {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
.headBox {
|
display: flex;
|
background: #d8f7e6;
|
justify-content: space-between;
|
}
|
.viewMore {
|
cursor: pointer;
|
padding: 20px;
|
color: #999;
|
}
|
</style>
|
