<template>
|
<div class="relatedBox">
|
<div class="headBox">
|
<div class="titleBox">纸质样书</div>
|
<div class="inventory" @click="createList">
|
<i class="iconfont icon-tongxunlu"></i> 生成清单
|
</div>
|
</div>
|
<div class="bookBox" v-if="$store.state.paperCopiesList.length > 0">
|
<div
|
class="itemBox"
|
v-for="(item, index) in $store.state.paperCopiesList"
|
:key="index"
|
>
|
<div class="imgBox">
|
<img class="autoImg" :src="item.icon" alt="" />
|
</div>
|
<div class="rightBox">
|
<div class="bookName">
|
{{ item.name }}
|
</div>
|
<div class="authorBox1">
|
作者：
|
<div class="authorName">{{ item.caupress_author }}</div>
|
</div>
|
<div class="iconBox">
|
<i
|
class="iconfont icon-shanchu"
|
@click="deleteItem(item, index)"
|
></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="emptyBox" v-else>
|
<el-empty :image-size="100" description="暂无书籍"></el-empty>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
dataList: [
|
{
|
img: "@/assets/images/bookStore/testImg.png",
|
title: "柠条灌丛草地水分 动态及群落特征研究",
|
author: "徐荣/李生宝 余峰/蒋齐著",
|
},
|
{
|
img: "@/assets/images/bookStore/testImg.png",
|
title: "柠条灌丛草地水分 动态及群落特征研究",
|
author: "徐荣/李生宝 余峰/蒋齐著",
|
},
|
{
|
img: "@/assets/images/bookStore/testImg.png",
|
title: "柠条灌丛草地水分 动态及群落特征研究",
|
author: "徐荣/李生宝 余峰/蒋齐著",
|
},
|
{
|
img: "@/assets/images/bookStore/testImg.png",
|
title: "柠条灌丛草地水分 动态及群落特征研究",
|
author: "徐荣/李生宝 余峰/蒋齐著",
|
},
|
{
|
img: "@/assets/images/bookStore/testImg.png",
|
title: "柠条灌丛草地水分 动态及群落特征研究",
|
author: "徐荣/李生宝 余峰/蒋齐著",
|
},
|
],
|
};
|
},
|
created() {
|
},
|
methods: {
|
deleteItem(item, index) {
|
this.$confirm("是否删除当前样书?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.$store.commit("deletePbookList", index);
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
})
|
.catch(() => {});
|
},
|
createList() {
|
if (this.$store.state.userInfo.role !== "Teacher") {
|
this.$message({
|
showClose: true,
|
message: "请先进行教师认证",
|
type: "warning",
|
});
|
return;
|
}
|
if (this.$store.state.paperCopiesList.length == 0) {
|
this.$message.error("请添加纸质样书后生成清单！");
|
return;
|
} else {
|
this.$router.push("applyBook-paper");
|
}
|
// this.$store.commit("addPbookList", this.dataList[0]);
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.relatedBox {
|
width: 377px;
|
margin-top: 10px;
|
border-top: 1px solid #00873c;
|
}
|
.titleBox {
|
height: 60px;
|
background: #d8f7e6;
|
line-height: 60px;
|
padding: 0 40px;
|
font-weight: 700;
|
color: #00873c;
|
font-size: 18px;
|
}
|
.bookBox {
|
background-color: #fff;
|
padding: 10px;
|
}
|
.imgBox {
|
width: 100px;
|
height: 150px;
|
position: relative;
|
padding: 10px;
|
border: 1px solid #ccc;
|
}
|
.rightBox {
|
position: relative;
|
margin-left: 10px;
|
flex: 1;
|
overflow: hidden;
|
}
|
.itemBox {
|
display: flex;
|
border-bottom: 1px solid #eeeeee;
|
padding: 10px;
|
}
|
.bookName {
|
font-size: 16px !important;
|
line-height: 20px;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
|
overflow: hidden;
|
}
|
.authorBox1 {
|
margin-top: 10px;
|
color: #666666;
|
position: relative;
|
}
|
.toDetail {
|
margin-top: 50px;
|
color: #00873c;
|
}
|
.authorName {
|
position: absolute;
|
line-height: 20px;
|
top: -4px;
|
left: 44px;
|
}
|
.headBox {
|
display: flex;
|
justify-content: space-between;
|
background: #d8f7e6;
|
}
|
.inventory {
|
cursor: pointer;
|
padding: 20px;
|
color: #999;
|
}
|
.iconBox {
|
position: absolute;
|
bottom: 20px;
|
right: 20px;
|
display: none;
|
cursor: pointer;
|
color: red;
|
}
|
.itemBox:hover .iconBox {
|
display: block;
|
}
|
.emptyBox {
|
background-color: #fff;
|
}
|
</style>
|
