<template>
|
<div class="resourceBox">
|
<div>
|
<div class="itemTitle">
|
<div class="titleName">配套资源示例</div>
|
</div>
|
<div class="resourceItem" v-if="resourceSupportList.length > 0">
|
<div
|
class="itemBox"
|
v-for="(item, index) in resourceSupportList"
|
:key="index"
|
>
|
<div class="tag">
|
{{ item.caupress_fileType.split("_")[1] | fileType }}
|
</div>
|
<div class="countentBox">
|
{{ item.name }}
|
</div>
|
<div class="previewBox">
|
<div @click="preview(item)">
|
预览
|
<i class="iconfont icon-icon_yulan"></i>
|
</div>
|
<div @click="collectReource(item)" v-if="!item.isFavourite">
|
收藏
|
<i class="iconfont icon-shoucang"></i>
|
</div>
|
<div @click="collectReource(item)" v-else>
|
已收藏
|
<i class="iconfont icon-shoucang" style="color: red"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-empty :image-size="100" description="暂无资源" v-else></el-empty>
|
</div>
|
|
<div>
|
<div class="itemTitle allResource">
|
<div class="titleName">全部资源</div>
|
<span
|
v-if="
|
userInfo &&
|
userInfo.role == 'Teacher' &&
|
downloadState == undefined &&
|
allResource.length > 0
|
"
|
class="applyForDownload"
|
@click="applyForDownload"
|
>
|
申请下载
|
<i class="el-icon-download"></i>
|
</span>
|
<span
|
v-if="
|
userInfo &&
|
userInfo.role == 'Teacher' &&
|
downloadState == 'Normal' &&
|
allResource.length > 0
|
"
|
class="resoucename2btn"
|
>
|
结束时间：{{ downloadEndDate }}
|
</span>
|
<span
|
v-if="
|
userInfo &&
|
userInfo.role == 'Teacher' &&
|
downloadState == 'WaitAudit' &&
|
allResource.length > 0
|
"
|
class="resoucename3"
|
>
|
审核中..
|
</span>
|
<span
|
v-if="
|
userInfo &&
|
userInfo.role == 'Teacher' &&
|
downloadState == 'Reject' &&
|
allResource.length > 0
|
"
|
class="popoverItem"
|
>
|
<el-popover width="400" placement="top" trigger="hover">
|
<p class="reason">
|
<span> 拒绝原因： </span>
|
{{ popoverReasen }}
|
</p>
|
<el-button class="reApply" type="success" @click="applyForDownload"
|
>重新申请</el-button
|
>
|
<template slot="reference">
|
<span style="cursor: pointer"> 已拒绝 </span>
|
</template>
|
</el-popover>
|
</span>
|
</div>
|
<div class="resourceItem" v-if="allResource.length > 0">
|
<div class="itemBox" v-for="(item, index) in allResource" :key="index">
|
<div class="tag allTag">
|
{{ item.caupress_fileType.split("_")[1] }}
|
</div>
|
<div class="countentBox">
|
{{ item.name }}
|
</div>
|
<div class="previewBox allBox" v-if="downloadState == 'Normal'">
|
<div
|
@click="downloadResource(item)"
|
v-if="downloadState == 'Normal'"
|
>
|
下载
|
<i class="iconfont icon-xiazai"></i>
|
</div>
|
|
<!-- <div
|
@click="collectReource(item)"
|
v-if="!item.isFavourite"
|
>
|
收藏
|
<i class="iconfont icon-shoucang"></i>
|
</div>
|
<div
|
@click="collectReource(item)"
|
v-else
|
>
|
已收藏
|
<i
|
class="iconfont icon-shoucang"
|
style="color: #009a44"
|
></i>
|
</div> -->
|
</div>
|
<div class="previewBox allBox grey" v-else>
|
|
</div>
|
</div>
|
</div>
|
<el-empty :image-size="100" description="暂无资源" v-else></el-empty>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {
|
allResource: {
|
type: Array,
|
default: () => {},
|
},
|
resourceSupportList: {
|
type: Array,
|
default: () => {},
|
},
|
bookInfo: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
data() {
|
return {
|
resourceTypeList: {
|
caupress_audio: "音频",
|
caupress_video: "视频",
|
caupress_zip: "资源包",
|
caupress_pdf: "PDF",
|
caupress_img: "图片",
|
caupress_document: "文档",
|
},
|
downloadState: "WaitAudit", // 下载状态
|
popoverReasen: "", // 审核拒绝的原因
|
};
|
},
|
created() {
|
this.isPass();
|
},
|
filters: {
|
fileType: function (val) {
|
if (val == "audio") {
|
return "mp3";
|
} else if (val == "video") {
|
return "mp4";
|
} else {
|
return val;
|
}
|
},
|
},
|
methods: {
|
// 未购买点击收藏
|
|
toBuyBook() {
|
this.$alert("当前书籍尚未购买，请购买后操作！", "提示", {
|
confirmButtonText: "确定",
|
callback: (action) => {},
|
});
|
},
|
// 下载资源
|
downloadResource(item) {
|
let end = new Date(this.downloadEndDate + "T23:59:59").getTime();
|
let getEndNum = Number(sessionStorage.currentDate);
|
console.log();
|
console.log(end,"end");
|
console.log(getEndNum,"getEndNum");
|
|
if (end < getEndNum) {
|
this.$message({
|
type: "warning",
|
message: "允许资源可下载时间已到期，请联系管理员！",
|
});
|
return false;
|
}
|
// if (this.downloadState != "Normal") {
|
// this.$message({
|
// type: "warning",
|
// message: "未申请资源下载或申请未通过，请联系管理员！",
|
// });
|
// return false;
|
// }
|
let url =
|
this.config.requestCtx +
|
"/file/api/ApiDownload?md5=" +
|
item.caupress_file;
|
window.open(url, "_blank");
|
},
|
|
downloadSupport(item) {
|
if (item.caupress_file) {
|
let url =
|
this.config.requestCtx +
|
"/file/api/ApiDownload?md5=" +
|
item.caupress_file;
|
window.open(url, "_blank");
|
} else {
|
this.$message({
|
type: "warning",
|
message: "暂无可下载资源",
|
});
|
}
|
},
|
|
// 预览
|
preview(item) {
|
let previewType = item.caupress_fileType.split("_")[1];
|
console.log(previewType, "previewType");
|
if (previewType == "zip") {
|
this.$message({
|
type: "warning",
|
message: "此文件类型不支持预览",
|
});
|
} else {
|
this.$router.push({
|
name: `preview-${previewType}`,
|
query: {
|
md5: item.caupress_file,
|
titleName: item.name,
|
productLinkPath: item.productLinkInfo[0].LinkPath,
|
},
|
});
|
}
|
},
|
// 申请下载
|
applyForDownload() {
|
let obj = {
|
name: this.bookInfo.name, // 书名
|
icon: this.bookInfo.icon, // 封面
|
idPath: this.bookInfo.idPath, // 请求路径
|
rootCmsItemId: this.bookInfo.rootCmsItemId,
|
isdn: this.bookInfo.caupress_ISBN, // ISDN号
|
author: this.bookInfo.caupress_author, // 作者
|
id: this.bookInfo.id,
|
};
|
this.MG.ugc.delTopicMessage({ messageIds: [] }).then(() => {});
|
let data = {
|
topicIdOrRefCode: this.config.refCodes.productDownLoad,
|
name: this.bookInfo.name,
|
content: JSON.stringify(obj),
|
state: "WaitAudit",
|
type: "applyForDownload",
|
icon: this.bookInfo.icon,
|
cmsTypeRefCode: "",
|
newDataListRequest: [],
|
};
|
|
this.MG.ugc.newTopicMessage(data).then((res) => {
|
if (res) {
|
this.$message({
|
type: "success",
|
message: "申请成功，等待管理员审核!",
|
});
|
this.isPass();
|
}
|
});
|
},
|
|
//收藏
|
collectReource(item) {
|
if (item.isFavourite) {
|
this.MG.resource
|
.delCmsItemLink({
|
cmsItemIds: [item.id],
|
linkType: "Favorite",
|
})
|
.then((res) => {
|
this.$parent.getData();
|
});
|
} else {
|
this.MG.resource
|
.collectCmsItem({
|
cmsItemIds: [item.id],
|
linkType: "Favorite",
|
})
|
.then((res) => {
|
this.$parent.getData();
|
});
|
}
|
},
|
|
// 获取申请的下载状态
|
isPass() {
|
let data = {
|
start: 0,
|
size: 1,
|
topicIdOrRefCode: "productDownLoad",
|
appRefCode: this.config.appRefCode,
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
};
|
this.MG.ugc.getTopicMessageList(data).then((res) => {
|
// try {
|
console.log(res,"endTime");
|
if (res.datas.length > 0) {
|
this.downloadState = res.datas[0].state;
|
if (res.datas[0].feedBack) {
|
let feedBack = JSON.parse(res.datas[0].feedBack);
|
res.datas[0].endDate = feedBack.endDate ? feedBack.endDate : "";
|
this.popoverReasen = feedBack.reason ? feedBack.reason : "";
|
this.downloadEndDate = res.datas[0].endDate;
|
let end = new Date(this.downloadEndDate + "T23:59:59").getTime();
|
let getEndNum = Number(sessionStorage.currentDate);
|
if (end < getEndNum) {
|
this.downloadState = undefined;
|
}
|
}
|
} else {
|
this.downloadState = undefined;
|
}
|
console.log(this.downloadState,"downloadState");
|
// } catch (error) {
|
// this.downloadState = undefined;
|
// }
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.resourceBox {
|
width: 813px;
|
background-color: #fff;
|
margin: 10px 0 0 10px;
|
padding: 40px;
|
box-sizing: border-box;
|
}
|
.itemTitle {
|
height: 30px;
|
line-height: 30px;
|
padding: 0 10px;
|
background: #f8f8f8;
|
/* position: relative; */
|
}
|
.titleName {
|
font-size: 18px;
|
font-weight: 700;
|
/* position: absolute;
|
top: -10px; */
|
}
|
.applyForDownload {
|
font-size: 16px;
|
font-weight: 700;
|
color: #00873c;
|
cursor: pointer;
|
}
|
.resourceItem {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
.itemBox {
|
width: 350px;
|
height: 120px;
|
box-shadow: 2px 2px 10px #f2f2f2;
|
margin-top: 20px;
|
position: relative;
|
border-radius: 4px;
|
line-height: 80px;
|
}
|
.tag {
|
position: absolute;
|
width: 60px;
|
height: 20px;
|
background-color: #f2f2f2;
|
right: 0px;
|
text-align: center;
|
line-height: 20px;
|
border-radius: 0px 4px 0px 4px;
|
}
|
.previewBox {
|
width: 100%;
|
position: absolute;
|
height: 40px;
|
background-color: #d8f7e6;
|
bottom: 0px;
|
border-radius: 4px;
|
text-align: center;
|
line-height: 40px;
|
color: #00873c;
|
cursor: pointer;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.disable {
|
background-color: #ccc;
|
}
|
.countentBox {
|
height: 60px;
|
margin-top: 20px;
|
line-height: 30px;
|
padding: 0 20px;
|
color: #444444;
|
font-weight: 700;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
|
overflow: hidden;
|
}
|
.allResource {
|
margin-top: 40px;
|
display: flex;
|
justify-content: space-between;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
.allTag {
|
background-color: #d8f7e6;
|
color: #00873c;
|
}
|
.allBox {
|
background-color: #00873c;
|
color: #fff;
|
}
|
.resoucename2btn {
|
font-size: 14px;
|
color: #00873c;
|
}
|
.resoucename3 {
|
color: #8b4513;
|
font-size: 14px;
|
}
|
.popoverItem {
|
color: #ee0a24;
|
font-size: 14px;
|
}
|
.reApply {
|
float: right;
|
}
|
.reason {
|
display: inline-block;
|
padding-bottom: 20px;
|
}
|
.grey{
|
background-color: #ccc;
|
}
|
</style>
|
