<!-- 基本信息 -->
|
<template>
|
<div class="personalPage-box">
|
<div class="personalPage-title">我的申请</div>
|
<div class="personalPage-content">
|
<div class="tipsText">
|
<div>
|
如您在教材试用申请过程中遇到问题，请于工作时间联系我们。<span class="phone">
|
QQ号：3565269931 / 咨询电话010-65778403（工作时间：9:00～17:00）
|
</span>
|
</div>
|
</div>
|
<div class="stageBtm" v-for="(item, index) in listData" :key="index">
|
<div class="infor">
|
<div class="infoBox">
|
<div>
|
审核状态:
|
<span
|
:class="{
|
reviewstatus: true,
|
reviewstatusRed: item.state == 'Reject',
|
reviewstatusWait: item.state == 'WaitAudit',
|
}"
|
>{{
|
item.state == "WaitAudit"
|
? "审核中"
|
: item.state == "Normal"
|
? "通过"
|
: "拒绝"
|
}}</span
|
>
|
</div>
|
<div
|
style="color: orangered"
|
v-if="item.state == 'Normal' && item.feedBack && !item.isExpiry"
|
>
|
试用期限：<span>{{ item.updateDate }}</span> --
|
<span>{{ item.feedBack.endDate }}</span>
|
</div>
|
<div style="color: orangered" v-if="item.isExpiry">
|
阅读期限：<span>已过期</span>
|
</div>
|
<div class="time">申请时间：{{ item.updateDate }}</div>
|
</div>
|
<div
|
class="reasonForFailure"
|
style="margin: 10px 0"
|
v-if="item.state == 'Reject'"
|
>
|
<div class="centerVertically">未通过原因:</div>
|
<div
|
style="flex: 1"
|
class="ellipsis-3"
|
:title="item.feedBack.reason ? item.feedBack.reason : ' - '"
|
>
|
{{ item.feedBack.reason ? item.feedBack.reason : " - " }}
|
</div>
|
</div>
|
</div>
|
<div class="contentInfoBox">
|
<div class="listImg">
|
<img @click.stop="toDetail(item.content)" :src="item.content.icon" alt="" />
|
<div class="name" :title="item.content.title">
|
{{ item.content.title }}
|
</div>
|
<el-button
|
size="mini"
|
v-if="item.state == 'Normal' && !item.isExpiry"
|
@click="read(item.content)"
|
>开始阅读</el-button
|
>
|
</div>
|
</div>
|
</div>
|
<div
|
style="min-height: 100px"
|
v-if="listData && listData.length > 0"
|
v-loading="loading"
|
></div>
|
</div>
|
<div v-if="listData && listData.length == 0 && !loading">
|
<el-empty :image-size="200" description="暂无内容"></el-empty>
|
</div>
|
<div class="pageBox" v-if="listData && listData.length > 0">
|
<!-- 分页 -->
|
<el-pagination
|
background
|
:current-page="paginationData.page - 0"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-size="paginationData.limit"
|
layout="total, prev, pager, next, slot"
|
:total="paginationData.totalCount"
|
>
|
<div style="display: inline-block">
|
<span class="el-pagination__jump"
|
>前往
|
<div class="el-input el-pagination__editor is-in-pagination">
|
<input
|
type="number"
|
autocomplete="off"
|
min="1"
|
:max="paginationData.totalPage"
|
v-model="inputPage"
|
class="el-input__inner"
|
@keyup.enter="jumpFun($event)"
|
/>
|
</div>
|
页
|
</span>
|
<el-button type="primary" class="toBtn" @click="jumpFun">确定</el-button>
|
</div>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject } from "vue";
|
import { getPublicImage } from "@/assets/js/middleGround/tool";
|
const MG: any = inject("MG");
|
const config: any = inject("config");
|
const crumbStore = inject("crumbStore");
|
const router = inject("router");
|
let listData = ref([]);
|
let loading = ref(false);
|
let paginationData = reactive({
|
page: 1,
|
limit: 10,
|
totalCount: 0,
|
totalPage: 0,
|
});
|
let inputPage = ref(1);
|
|
const getTextBookList = () => {
|
loading.value = true;
|
let { page, limit } = paginationData;
|
const data = {
|
start: limit * page - limit,
|
size: limit,
|
topicIdOrRefCode: "applyDigitalBook",
|
appRefCode: config.appRefCode,
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
};
|
MG.ugc.getTopicMessageList(data).then((res) => {
|
loading.value = false;
|
res.datas.forEach((item) => {
|
item.icon = item.icon ? item.icon : getPublicImage(null);
|
item.updateDate = item.updateDate.split("T")[0];
|
if (item.feedBack) {
|
item.feedBack = JSON.parse(item.feedBack);
|
if (item.feedBack.endDate) {
|
let times = new Date(item.feedBack.endDate + " 23:59:59").getTime();
|
if (times < sessionStorage.currentDate) {
|
item.isExpiry = true;
|
}
|
}
|
}
|
if (item.content) {
|
item.content = JSON.parse(item.content)[0] ?? {};
|
if (!item.content?.icon) {
|
item.content.icon = require("@/assets/images/default-book-img.png");
|
}
|
}
|
});
|
paginationData.totalCount = res.totalSize;
|
paginationData.totalPage = Math.ceil(res.totalSize / limit);
|
listData.value = res.datas;
|
});
|
};
|
onMounted(() => {
|
getTextBookList();
|
});
|
|
const toDetail = (item: any) => {
|
const thisCrumbs = [{ name: "书籍详情", pathName: "digitalTextbooks-textbooksDetail" }];
|
MG.store.dispatch("setCrumbs", {
|
type: "textbooks",
|
data: thisCrumbs,
|
callback: (key: string) => {
|
MG.router.push({
|
name: "digitalTextbooks-textbooksDetail",
|
query: {
|
id: item.id,
|
rootCmsItemId: item.rootCmsItemId,
|
crumbsKey: key,
|
},
|
});
|
},
|
});
|
};
|
const read = (pItem: any) => {
|
let token = MG.tool.getCookie(config.tokenKey);
|
window.open(config.textReaderUrl + "?bookId=" + pItem.refCode + "&token=" + token);
|
};
|
const handleSizeChange = (val: number) => {
|
paginationData.limit = val;
|
getTextBookList();
|
};
|
const handleCurrentChange = (val: number) => {
|
paginationData.page = val;
|
getTextBookList();
|
};
|
const jumpFun = (event: any) => {
|
event.target.blur();
|
if (inputPage.value <= 0) {
|
inputPage.value = 1;
|
}
|
if (inputPage.value > paginationData.totalPage) {
|
inputPage.value = paginationData.totalPage;
|
}
|
paginationData.page = inputPage.value;
|
getTextBookList();
|
};
|
</script>
|
<style scoped lang="less">
|
.myCarTopPage {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10px 15px;
|
box-sizing: border-box;
|
background-color: #fff;
|
border-bottom: 1px solid #dcdcdc;
|
}
|
.tipsText {
|
padding: 10px 15px;
|
line-height: 20px;
|
box-sizing: border-box;
|
border: 1px solid #ccc;
|
.phone {
|
color: #019e58;
|
}
|
margin-bottom: 10px;
|
}
|
|
.pageBox {
|
background-color: #fff;
|
margin-top: 50px;
|
}
|
.stageBtm {
|
border: 1px solid #dcdcdc;
|
.infor {
|
border-bottom: 1px solid #dcdcdc;
|
padding: 0 15px;
|
.infoBox {
|
line-height: 45px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.time {
|
color: #999;
|
}
|
}
|
.reasonForFailure {
|
display: flex;
|
margin: 10px 0;
|
line-height: 1.5;
|
.centerVertically {
|
width: 80px;
|
}
|
/* 双行省略 */
|
.ellipsis-3 {
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
}
|
}
|
.contentInfoBox {
|
padding: 15px;
|
box-sizing: border-box;
|
.listImg {
|
display: inline-block;
|
margin-right: 60px;
|
width: 120px;
|
img {
|
width: 120px;
|
cursor: pointer;
|
}
|
.name {
|
line-height: 27px;
|
font-size: 15px;
|
color: #333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
|
.reviewstatus {
|
color: #0bc266;
|
}
|
.reviewstatusWait {
|
color: #ffbe00;
|
}
|
.reviewstatusRed {
|
color: red;
|
}
|
|
.timer {
|
color: rgb(240, 67, 67);
|
}
|
</style>
|
<style>
|
.el-pagination {
|
text-align: center;
|
margin-top: 15px;
|
}
|
</style>
|
