<template>
|
<div class="relatedBox">
|
<div class="headBox">
|
<div class="titleBox">{{ title }}</div>
|
</div>
|
<div class="bookBox" v-if="dataList.length > 0">
|
<div class="itemBox" v-for="(item, index) in dataList" :key="index">
|
<div class="checkBox">
|
<el-checkbox
|
@change="selectBook(item)"
|
v-model="item.checked"
|
label
|
></el-checkbox>
|
</div>
|
<div class="imgBox">
|
<img class="autoImg" :src="item.icon" alt="" />
|
</div>
|
<div class="rightBox">
|
<div class="bookName">
|
{{ item.name }}
|
</div>
|
<div class="authorBox">作者：{{ item.caupress_author }}</div>
|
<div class="authorBox">
|
出版时间：{{
|
item.caupress_publicationDate
|
? moment(item.caupress_publicationDate).format("YYYY-MM-DD")
|
: "-"
|
}}
|
</div>
|
<div class="authorBox">ISBN：{{ item.caupress_ISBN }}</div>
|
</div>
|
<div class="iconBox" @click="deleteItem(item, index)">
|
<i class="iconfont icon-shanchu"></i>
|
</div>
|
</div>
|
</div>
|
<el-empty :image-size="100" description="暂无资源" v-else></el-empty>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
dataList: [],
|
detailRoute: "bookStore-detail",
|
};
|
},
|
created() {
|
this.getData("caupress_teachingResource");
|
},
|
props: {
|
title: {
|
type: String,
|
},
|
},
|
methods: {
|
getData(channel) {
|
if (this.$route.name == "teachingServices-applyBook-paper") {
|
this.dataList = this.$store.state.paperCopiesList;
|
} else {
|
this.dataList = this.$store.state.electronicBookList;
|
}
|
this.dataList.forEach((item) => {
|
this.$set(item,"checked",false)
|
// item.checked = false;
|
});
|
// this.dataList = res.datas;
|
// this.$emit("getList", this.dataList);
|
},
|
selectBook(val) {
|
this.$emit("getList", this.dataList);
|
},
|
toDetail(row) {
|
this.$emit("reloadPage", row);
|
},
|
deleteItem(item, index) {
|
this.$confirm("是否删除当前样书?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
if (this.$route.name == "teachingServices-applyBook-paper") {
|
this.$store.commit("deletePbookList", index);
|
} else {
|
this.$store.commit("deleteEbookList", index);
|
}
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
if (this.dataList.length == 0) {
|
this.$router.push("/teachingServices");
|
}
|
})
|
.catch(() => {});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.relatedBox {
|
width: 100%;
|
background-color: #fff;
|
margin: 10px 0 0 0px;
|
border-top: 1px solid #00873c;
|
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 #eee;
|
}
|
.rightBox {
|
flex: 1;
|
overflow: hidden;
|
margin-left: 10px;
|
}
|
.itemBox {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
padding: 10px;
|
position: relative;
|
border: 1px solid #ccc;
|
margin: 0 5px;
|
}
|
.bookName {
|
font-size: 16px !important;
|
line-height: 20px;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
|
overflow: hidden;
|
}
|
.authorBox {
|
margin-top: 20px;
|
color: #666666;
|
position: relative;
|
}
|
.iconBox {
|
cursor: pointer;
|
color: red;
|
margin-left: 10px;
|
}
|
.toDetail {
|
margin-top: 50px;
|
color: #00873c;
|
}
|
.authorName {
|
max-width: 86px;
|
position: absolute;
|
line-height: 20px;
|
top: -4px;
|
left: 44px;
|
}
|
.headBox {
|
display: flex;
|
background: #d8f7e6;
|
justify-content: space-between;
|
}
|
.viewMore {
|
cursor: pointer;
|
padding: 20px;
|
color: #999;
|
}
|
.checkBox {
|
margin-right: 10px;
|
line-height: 150px;
|
}
|
</style>
|
