468 lines
17 KiB
Vue
468 lines
17 KiB
Vue
<template>
|
|
<div class="container" style="padding-top: 20px; padding-bottom: 20px">
|
|
<p
|
|
style="
|
|
background-color: #f0f9eb;
|
|
color: #67c23a;
|
|
padding: 8px 16px;
|
|
color: #67c23a;
|
|
display: flex;
|
|
align-items: center;
|
|
/* justify-content: space-between; */
|
|
"
|
|
>
|
|
<i class="el-icon-success" style="margin-right: 10px"></i>
|
|
<span
|
|
>Dear {{ user_name }} , Congratulations! You manuscript has been pre-accepted for publication in
|
|
<b>{{ journalInfo.title }}</b
|
|
>. Please review and complete the necessary information of your manuscript.
|
|
{{ isFree ? '' : 'Kindly note that an article processing charge is required for final publication.' }}</span
|
|
>
|
|
</p>
|
|
|
|
<!-- <p
|
|
style="
|
|
margin-top: 10px;
|
|
color: #409eff;
|
|
background: #ecf5ff;
|
|
border-color: #b3d8ff;
|
|
color: #505050;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
"
|
|
|
|
>
|
|
<i class="el-icon-warning" style="color: #517fd5; margin-right: 10px"></i>
|
|
This manuscript does not require payment
|
|
</p> -->
|
|
<!-- <el-steps :active="active" finish-status="success" simple style="margin-top: 10px">
|
|
<el-step :title="`${$t('PreAccept.step')} ${i + 1} ${v.title} `" v-for="(v, i) in stepList"> </el-step>
|
|
</el-steps> -->
|
|
<!-- 内容 -->
|
|
|
|
<!-- <div class="content_box mt20 stepbox" v-if="active == 0">
|
|
<div class="con">
|
|
<h4 class="con-title">{{ this.$t('PreAccept.step1') }}</h4>
|
|
<template v-if="articleInfo && articleInfo.is_buy == 0">
|
|
<OrderConfirmation
|
|
type="component"
|
|
@paySuccess="paySuccess"
|
|
ref="OrderConfirmation"
|
|
style="padding: 0 20px; box-sizing: border-box"
|
|
></OrderConfirmation>
|
|
</template>
|
|
|
|
|
|
</div>
|
|
</div> -->
|
|
<div class="content_box mt20 stepbox">
|
|
<!-- 文章引用 -->
|
|
<div class="con">
|
|
<h4 class="con-title">{{ this.$t('PreAccept.step1') }}</h4>
|
|
|
|
<div style="padding: 20px; box-sizing: border-box" v-loading="tableData.length == 0">
|
|
<div v-if="tableData.length > 0">
|
|
<div v-if="isFree" style="display: flex; align-items: center">
|
|
<svg
|
|
style="margin-right: 10px"
|
|
t="1763705729388"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="6912"
|
|
width="20"
|
|
height="20"
|
|
>
|
|
<path
|
|
d="M383.2 512H320v-64h127.2l16-16-130.4-129.6 45.6-45.6 130.4 130.4 249.6-249.6C688 91.2 604 64 512.8 64c-247.2 0-448 200.8-448 448 0 90.4 27.2 174.4 73.6 245.6L383.2 512zM115.2 872l45.6 45.6 63.2-63.2C301.6 920 403.2 960 512.8 960c247.2 0 448-200.8 448-448 0-110.4-40-211.2-106.4-289.6l58.4-58.4-45.6-45.6M704 640H545.6v193.6h-64V640h-44l108-108V576H704v64z m0-128H565.6l64-64H704v64z"
|
|
p-id="6913"
|
|
fill="#67c23a"
|
|
></path>
|
|
</svg>
|
|
The article processing charges for your manuscript have been waived.
|
|
</div>
|
|
<div v-else>
|
|
<p
|
|
style="color: #505050; font-size: 14px; box-sizing: border-box; margin-bottom: 20px"
|
|
v-if="tableData.length > 0 && tableData[0].is_buy == 0"
|
|
>
|
|
<i class="el-icon-warning" style="color: #517fd5; margin-right: 8px"></i> How to apply for a discount?
|
|
Please see our discount policy here:
|
|
<a
|
|
style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
|
|
href="https://www.tmrjournals.com/tmr/free-application/"
|
|
target="_blank"
|
|
>https://www.tmrjournals.com/tmr/free-application/</a
|
|
>.
|
|
</p>
|
|
<el-card class="box-card" style="width: 100%"
|
|
><el-table :data="tableData" style="width: 100%" align="center">
|
|
<el-table-column prop="fee" :label="$t('pendingPayment.total')">
|
|
<template slot-scope="scope"> {{ scope.row.original_price }} USD </template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" :label="$t('pendingPayment.discountprice')">
|
|
<template slot-scope="scope"> {{ scope.row.fee }} USD </template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="" :label="$t('pendingPayment.Paymentstatus')">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.is_buy == 1" style="color: #67c23a"
|
|
><b>{{ $t('pendingPayment.Paymentsuccessfully') }}</b></span
|
|
>
|
|
<span v-if="scope.row.is_buy == 0" style="color: #f56c6c"
|
|
><b>{{ $t('pendingPayment.pendingpayment') }}</b></span
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<p style="text-align: right; margin: 20px 0 0" v-if="tableData.length > 0 && tableData[0].is_buy == 0">
|
|
<span
|
|
@click="goOrderConfirmation(articleInfo)"
|
|
style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
|
|
>Click here</span
|
|
>
|
|
to access the payment page.
|
|
</p></el-card
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <p style="text-align: right;">Click here to request an invoice.</p> -->
|
|
</div>
|
|
|
|
<!-- <div v-else style="padding: 20px; box-sizing: border-box"></div> -->
|
|
</div>
|
|
</div>
|
|
<div class="content_box mt20 stepbox">
|
|
<!-- 文章引用 -->
|
|
<div class="con">
|
|
<h4 class="con-title">{{ this.$t('PreAccept.step2') }}</h4>
|
|
<p style="color: #505050; font-size: 14px; padding: 20px; box-sizing: border-box">
|
|
<el-button @click="goGenerateCharts(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button>
|
|
</p>
|
|
<!-- <div v-else style="padding: 20px; box-sizing: border-box"></div> -->
|
|
</div>
|
|
</div>
|
|
<div class="content_box mt20 stepbox">
|
|
<!-- 文章引用 -->
|
|
<div class="con">
|
|
<h4 class="con-title" style="overflow: hidden">
|
|
{{ this.$t('PreAccept.step3') }}
|
|
<b>
|
|
<span v-if="Ainfo.refer_state.state" style="float: right" class="el-icon-check pass status"> Complete</span>
|
|
<span v-else class="el-icon-pie-chart notPass status" style="float: right"> Pending</span></b
|
|
>
|
|
</h4>
|
|
<p style="color: #505050; font-size: 14px; padding: 20px; box-sizing: border-box">
|
|
<i class="el-icon-warning" style="color: #517fd5; margin-right: 8px"></i> A total of
|
|
<i class="tip">{{ Ainfo.refer_state.num }}</i> references in this manuscript is identified.
|
|
</p>
|
|
|
|
<p style="color: #505050; font-size: 14px; padding: 0 20px 20px; box-sizing: border-box">
|
|
<el-button @click="goAddReferences(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button>
|
|
</p>
|
|
<!-- <div v-else style="padding: 20px; box-sizing: border-box"></div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 答疑 -->
|
|
<div class="mt20 helpcontent">
|
|
<div class="flexbox">
|
|
<span class="el-icon-info help"></span>
|
|
<div>
|
|
<h4>Any questions/Help</h4>
|
|
<p class="mt20">Should you encounter any issues, please feel free to contact us at {{ journalInfo.email }}.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import OrderConfirmation from '../page/components/pendingPayment/OrderConfirmation.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
isFree: false,
|
|
tableData: [],
|
|
articleInfo: {},
|
|
journalInfo: {},
|
|
urlList: {
|
|
detail: 'api/Order/preOrderDetail',
|
|
getPreacceptPayment: 'api/Preaccept/getPreacceptPayment'
|
|
},
|
|
active: 0,
|
|
stepList: [
|
|
{
|
|
title: this.$t('PreAccept.step1'),
|
|
value: 1
|
|
},
|
|
{
|
|
title: this.$t('PreAccept.Information'),
|
|
value: 2
|
|
}
|
|
// {
|
|
// title: this.$t('PreAccept.step3'),
|
|
// value: 3
|
|
// }
|
|
],
|
|
|
|
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();
|
|
this.getDetail();
|
|
// this.getPreacceptPayment();
|
|
},
|
|
activated() {
|
|
this.getInfoStatu();
|
|
this.hideAlert();
|
|
this.getDetail();
|
|
// this.getPreacceptPayment();
|
|
},
|
|
components: {
|
|
OrderConfirmation
|
|
},
|
|
methods: {
|
|
paySuccess() {
|
|
this.active = 1;
|
|
},
|
|
goOrderConfirmation(data) {
|
|
this.$router.push({
|
|
path: '/OrderConfirmation',
|
|
query: {
|
|
id: this.$route.query.id
|
|
}
|
|
});
|
|
},
|
|
getPreacceptPayment() {
|
|
this.$api
|
|
.post(this.urlList.getPreacceptPayment, {
|
|
article_id: this.$route.query.id
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.tableData = [{ ...res.data }];
|
|
}
|
|
});
|
|
},
|
|
getDetail() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
this.$api
|
|
.post(this.urlList.detail, {
|
|
article_id: this.$route.query.id
|
|
})
|
|
.then((res) => {
|
|
loading.close();
|
|
if (res.code == 0) {
|
|
this.articleInfo = res.data.article_detail;
|
|
this.journalInfo = res.data.journal_detail;
|
|
this.tableData = [
|
|
{
|
|
original_price: this.journalInfo.fee ? this.journalInfo.fee : 0,
|
|
fee: this.journalInfo.fee ? this.articleInfo.fee : 0,
|
|
is_buy: this.articleInfo.is_buy
|
|
}
|
|
];
|
|
|
|
if (this.tableData[0].is_buy == 1 && Number(this.tableData[0].fee) == 0) {
|
|
this.isFree = true;
|
|
} else {
|
|
this.isFree = false;
|
|
}
|
|
if (this.articleInfo.is_buy == 1 || (this.articleInfo.is_buy == 0 && this.journalInfo.fee == '0.00')) {
|
|
this.active = 1;
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
loading.close();
|
|
});
|
|
},
|
|
handleClickStep(e) {
|
|
console.log('e at line 127:', e);
|
|
this.active = e.value;
|
|
this.$forceUpdate();
|
|
},
|
|
// 跳转到引用编辑页面
|
|
goAddReferences(id) {
|
|
this.$router.push({
|
|
path: 'ReferenceEditor',
|
|
query: {
|
|
id: id
|
|
}
|
|
});
|
|
},
|
|
// 跳转到图表编辑页面
|
|
goGenerateCharts(id) {
|
|
window.open(
|
|
this.$router.resolve({
|
|
path: '/GenerateCharts',
|
|
query: {
|
|
id: id
|
|
}
|
|
}).href,
|
|
'_blank'
|
|
);
|
|
// this.$router.push({
|
|
// path: 'GenerateCharts',
|
|
// 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;
|
|
}
|
|
.pass {
|
|
color: #67c23a !important;
|
|
}
|
|
.notPass {
|
|
color: #e6a23c !important;
|
|
}
|
|
.flexbox {
|
|
display: flex;
|
|
}
|
|
p {
|
|
color: #333;
|
|
}
|
|
.mt10 {
|
|
margin-top: 10px;
|
|
}
|
|
.more {
|
|
font-weight: bold;
|
|
}
|
|
.helpcontent {
|
|
color: #888;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 2px solid #f1f1f1;
|
|
}
|
|
.helpcontent p {
|
|
color: inherit;
|
|
font-size: 12px;
|
|
}
|
|
.stepbox {
|
|
border: 1px solid #006699;
|
|
}
|
|
.con-title {
|
|
color: #fff;
|
|
background-color: #006699;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
::v-deep .el-table th {
|
|
background-color: #f0f0f0 !important;
|
|
/* border-top: 1px solid #b0b0b0 !important; */
|
|
|
|
color: #333 !important;
|
|
}
|
|
::v-deep .el-table td.el-table__cell,
|
|
.el-table th.el-table__cell.is-leaf {
|
|
border-bottom: 1px solid #b0b0b0 !important;
|
|
}
|
|
</style>
|