137 lines
5.1 KiB
Vue
137 lines
5.1 KiB
Vue
<template>
|
|
<div class="container" >
|
|
<el-row :gutter="20" >
|
|
<el-alert v-if="alertShow"
|
|
:title="'Dear '+ user_name + ' Congratulations! , The information will be hidden after ' + hideSec + ' seconds'"
|
|
type="success"
|
|
show-icon>
|
|
|
|
</el-alert>
|
|
<el-col class="mt20">
|
|
<p>Now your article has entered the pre-inclusion state, and the platform also needs you to improve the following content for the final publication of the article.</p>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 内容 -->
|
|
<el-row :gutter="20" class="content_box mt20">
|
|
<!-- 文章引用 -->
|
|
<el-col :class="['item', 'borderBottom', Ainfo.refer_state.state? 'passborder' : 'notPassborder']">
|
|
<h5 :class="['statusTop', Ainfo.refer_state.state? 'passStatus' : 'notPassStatus']">
|
|
<span v-if="Ainfo.refer_state.state" class="el-icon-check pass status"> Complete</span>
|
|
<span v-else class="el-icon-pie-chart notPass status"> Pending</span>
|
|
</h5>
|
|
<div class="con">
|
|
<h4>References </h4>
|
|
<p class="mt20">The references for this article have been compiled <i class="tip">{{Ainfo.refer_state.num}}</i> entries recorded in total.</p>
|
|
<!-- <p class="mt10"><img src="../../assets/img/icon_9.png" alt="" class="icon_img"> <el-link @click="goAddReferences(thisArtcleId)" type="primary" > Click here to edit</el-link> </p> -->
|
|
<p class="mt10"><el-button @click="goAddReferences(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button></p>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 答疑 -->
|
|
<div class="mt20 helpcontent">
|
|
<div class="flexbox">
|
|
<span class="el-icon-info help"></span>
|
|
<div>
|
|
<h4>Any questions/Help</h4>
|
|
<p class="mt20">If you experience any problems, please contact us by publisher@tmrjournals.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
user_name: localStorage.getItem('U_relname'),
|
|
thisArtcleId: this.$route.query.id,
|
|
alertShow:true,
|
|
dingshi:null,
|
|
hideSec:5,
|
|
// 引用表单数据
|
|
ReferenceList:[],
|
|
Ainfo:{
|
|
refer_state:{
|
|
state:null,
|
|
num: null
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getInfoStatu()
|
|
this.hideAlert()
|
|
},
|
|
methods:{
|
|
// 跳转到引用编辑页面
|
|
goAddReferences(id){
|
|
this.$router.push({
|
|
path: 'ReferenceEditor',
|
|
query: {
|
|
id: id
|
|
}
|
|
});
|
|
},
|
|
|
|
// 隐藏alert
|
|
hideAlert(){
|
|
this.dingshi = setInterval(()=>{
|
|
this.hideSec -= 1
|
|
// console.log(this.hideSec)
|
|
if(this.hideSec == 0){
|
|
this.alertShow = false
|
|
clearInterval(this.dingshi)
|
|
}
|
|
},1000)
|
|
|
|
},
|
|
// 获取资料状态
|
|
getInfoStatu(){
|
|
this.$api
|
|
.post('/api/Article/getPreacceptStatus', {
|
|
'article_id': this.$route.query.id
|
|
})
|
|
.then(res => {
|
|
if(res.code == 0){
|
|
// console.log(res, 'res')
|
|
this.Ainfo = {
|
|
refer_state:{
|
|
state: res.data.refer_state.state,
|
|
num:res.data.refer_state.num
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tip{background: #e6effb; padding: 4px; font-style: normal; border-radius:10px ;}
|
|
.passborder{border:1px solid #f0f9eb;}
|
|
.notPassborder{border:1px solid #fdf6ec;}
|
|
.con{padding: 20px;}
|
|
.statusTop{height:30px;}
|
|
.borderBottom{ border-bottom:1px solid #f1f1f1; margin-bottom: 20px; }
|
|
.help{font-size: 22px; margin-right: 10px;}
|
|
.el-alert__title{font-size: 26px;}
|
|
.mt20{margin-top: 20px;}
|
|
/* .content_box{padding:15px 10px; border:3px dashed #eff6ff; } */
|
|
.content_box .item{padding: 0 !important; border-radius: 20px 20px 0 0; overflow: hidden;}
|
|
.passStatus{ background: #f0f9eb;}
|
|
.notPassStatus{background: #fdf6ec;}
|
|
.content_box .item .status{ font-size: 16px; padding:0 10px; line-height: 30px; }
|
|
.content_box .item .status.pass{ color: #67c23a;}
|
|
.content_box .item .status.notPass{ color: #e6a23c;}
|
|
.flexbox{display: flex;}
|
|
p{color: #333;}
|
|
.mt10{margin-top: 10px;}
|
|
.more{font-weight: bold;}
|
|
.helpcontent{color: #888; margin-top: 150px; padding-top: 30px; border-top: 2px solid #f1f1f1;}
|
|
.helpcontent p{color: inherit; font-size: 12px;}
|
|
</style> |