<template>
|
<div class="wrap" v-loading="loading">
|
<el-empty
|
description="暂无数据"
|
class="empty"
|
:image-size="200"
|
v-if="orderList.length == 0"
|
></el-empty>
|
<template v-else>
|
<div class="bookItem" v-for="(item, index) in orderList" :key="index">
|
<div class="orderInformation">
|
<span class="primaryTxt" v-if="item.state == 'Normal'"
|
>审核状态：
|
<template>通过</template>
|
</span>
|
<span class="toBeReviewed" v-else-if="item.state == 'WaitAudit'"
|
>审核状态：
|
<template>审核中</template>
|
</span>
|
<span class="auditFailed" v-else-if="item.state == 'Reject'"
|
>审核状态：
|
<template>审核失败</template>
|
</span>
|
<span>
|
<span class="c999">申请日期：</span>
|
{{ item.createDate }}</span
|
>
|
<div class="reason" v-if="item.state == 'Reject'">
|
<p class="reasonIntroduction">
|
<span class="c999">理由：</span>
|
<span class="reasonContent">
|
{{ item.feedBack.reason ? item.feedBack.reason : "-" }}
|
</span>
|
</p>
|
</div>
|
<span v-if="item.state == 'Normal'">
|
<span class="c999">快递单号：</span>
|
{{ item.feedBack.mailNum || "-" }}</span
|
>
|
<span v-if="item.state == 'Normal'">
|
<span class="c999">快递公司：</span>
|
{{ item.feedBack.mailName || "-" }}</span
|
>
|
</div>
|
<div class="orderBookList">
|
<div
|
v-for="(itemBook, index) in item.content"
|
style="cursor: pointer"
|
class="orderBook"
|
:key="index"
|
@click="toDetail(itemBook)"
|
>
|
<div class="wrapImg">
|
<img class="autoImg" :src="itemBook.icon" alt="" />
|
</div>
|
<p style="width: 150px" class="ellipsis" :title="itemBook.title">
|
{{ itemBook.title }}
|
</p>
|
<p style="width: 150px" class="c999 ellipsis">{{ itemBook.author }}</p>
|
</div>
|
</div>
|
<div v-if="item.state == 'Reject'" @click="deleteItem(item)">
|
<i class="el-icon-delete-solid red"></i>
|
</div>
|
</div>
|
<!-- 分页 -->
|
<div class="pageinateBox" v-if="orderList.length > 0">
|
<el-pagination
|
@size-change="
|
(val) => {
|
paginationData.limit = val;
|
getData();
|
}
|
"
|
@current-change="
|
(val) => {
|
paginationData.page = val;
|
getData();
|
}
|
"
|
background=""
|
:current-page="paginationData.page - 0"
|
:page-size="paginationData.limit"
|
prev-text="上一页"
|
next-text="下一页"
|
layout="total, prev, pager, next, slot, jumper"
|
:total="paginationData.totalCount"
|
>
|
</el-pagination>
|
</div>
|
</template>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
orderList: [],
|
orderBookList: [],
|
loading: true,
|
paginationData: {
|
page: 1,
|
totalCount: 0,
|
limit: 5,
|
totalPage: 0,
|
},
|
};
|
},
|
created() {
|
this.getData();
|
},
|
methods: {
|
getData() {
|
this.loading = true;
|
let { limit, page } = this.paginationData;
|
|
const data = {
|
start: limit * page - limit,
|
size: limit,
|
sort: {
|
field: "createDate",
|
type: "Desc",
|
},
|
appRefCode: this.config.appRefCode,
|
topicIdOrRefCode: this.config.refCodes.applyEntityBook,
|
};
|
this.MG.ugc.getTopicMessageList(data).then((res) => {
|
this.loading = false;
|
try {
|
this.paginationData.totalCount = res.totalSize;
|
|
if (res && res.datas.length > 0) {
|
let list = [];
|
for (let i = 0; i < res.datas.length; i++) {
|
const ele = res.datas[i];
|
ele.createDate = ele.createDate.split("T")[0];
|
if (ele.content) {
|
ele.content = JSON.parse(ele.content);
|
}
|
if (ele.feedBack) {
|
ele.feedBack = JSON.parse(ele.feedBack);
|
}
|
list.push(ele);
|
}
|
this.orderList = list;
|
}
|
} catch (error) {
|
this.orderList = [];
|
}
|
});
|
},
|
toDetail(row) {
|
console.log(row);
|
if (row.id && row.cmsPath) {
|
let url = this.$router.resolve({
|
name: "teachingServices-detail",
|
query: {
|
id: row.id,
|
cmsPath: row.cmsPath,
|
},
|
});
|
window.open(url.href, "_blank");
|
}
|
},
|
deleteItem(item) {
|
this.$confirm("确定移除吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
const data = {
|
messageIds: [item.id],
|
};
|
this.MG.ugc.delTopicMessage(data).then((res) => {
|
if (res) {
|
this.$message({
|
type: "success",
|
message: "已移除该纸质样书!",
|
});
|
this.getData();
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "fail",
|
message: "取消操作!",
|
});
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.wrap {
|
padding: 40px;
|
.tips {
|
padding: 20px;
|
background: #f2f7f4;
|
border-radius: 4px;
|
font-size: 14px;
|
color: #666666;
|
}
|
.bookItem {
|
border-bottom: 1px solid #eeeeee;
|
padding-bottom: 40px;
|
// margin-bottom: 40px;
|
.spaceBetween {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-end;
|
font-size: 18px;
|
font-weight: 700;
|
line-height: 24px;
|
}
|
.orderInformation {
|
background: #f2f7f4;
|
border-radius: 4px;
|
padding: 20px;
|
font-size: 16px;
|
color: #333333;
|
margin: 30px 0;
|
.auditFailed {
|
color: #e50021;
|
}
|
.toBeReviewed {
|
color: #d18252;
|
}
|
span {
|
display: inline-block;
|
width: 330px;
|
line-height: 40px;
|
}
|
.c999 {
|
display: inline;
|
color: #999;
|
}
|
.reason {
|
display: flex;
|
line-height: 28px;
|
padding: 20px 0;
|
.reasonIntroduction {
|
width: 590px;
|
display: inline-block;
|
line-height: 22px;
|
.reasonContent {
|
display: inline;
|
width: 100%;
|
line-height: 30px;
|
}
|
}
|
}
|
}
|
.orderBookList {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
font-size: 16px;
|
color: #333;
|
.orderBook {
|
margin: 0 15px;
|
}
|
.wrapImg {
|
position: relative;
|
width: 150px;
|
height: 200px;
|
background-color: #f2f2f2;
|
border: 1px solid #e6e6e6;
|
}
|
> div > p {
|
margin: 10px 0;
|
}
|
.c999 {
|
color: #999;
|
}
|
}
|
.red {
|
font-size: 16px;
|
color: #e50021;
|
float: right;
|
cursor: pointer;
|
}
|
}
|
.pageinateBox {
|
text-align: center;
|
padding: 40px 0;
|
:deep(.el-pagination.is-background .btn-next) {
|
padding: 0 10px;
|
}
|
:deep(.el-pagination.is-background .btn-prev) {
|
padding: 0 10px;
|
}
|
}
|
}
|
</style>
|
