自动化配置增加青年编委模块
This commit is contained in:
238
src/components/page/YouthBoardSubmitSuccess.vue
Normal file
238
src/components/page/YouthBoardSubmitSuccess.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="submission-page">
|
||||
<div class="container">
|
||||
<div class="success-icon">✔</div>
|
||||
<h2 class="success-title">Application submitted successfully!</h2>
|
||||
<p class="success-desc" v-if="isFromChina">
|
||||
We have a WeChat group for academic discussions. Please feel free to scan the QR code below to join.
|
||||
</p>
|
||||
<p class="success-desc" v-else>
|
||||
Your application is currently under review. We appreciate your patience, and our team will notify you of the final decision via email as soon as possible.
|
||||
</p>
|
||||
|
||||
<div v-if="isFromChina" class="qr-section">
|
||||
<div v-if="qrLoading" class="qr-loading">Loading...</div>
|
||||
<div v-else class="qr-code-box" v-if="qrCodeUrl">
|
||||
<img :src="qrCodeUrl" alt="WeChat Group QR" />
|
||||
</div>
|
||||
<!-- <p class="remark-tip">Please use the following format for group remark:</p>
|
||||
<div class="remark-box">Name - Research Field - Affiliation</div> -->
|
||||
</div>
|
||||
|
||||
<router-link to="/login" replace class="back-btn"> Login to the Submission System Now </router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'YouthBoardSubmitSuccess',
|
||||
data() {
|
||||
return {
|
||||
qrCodeUrl: '',
|
||||
qrLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isFromChina() {
|
||||
const s = String(this.$route.query.country || '').trim();
|
||||
if (!s) return false;
|
||||
// 兼容：1 / China / 中国 / CN / CHN
|
||||
if (s === '1') return true;
|
||||
if (s === 'China' || s === 'CN' || s === 'CHN') return true;
|
||||
if (s === '中国') return true;
|
||||
if (s === 'US' || s === 'United States' || s === '美国') return false;
|
||||
return s === 'China';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.isFromChina) this.loadApplyBaseInfo();
|
||||
},
|
||||
methods: {
|
||||
normalizeCountry(v) {
|
||||
const s = String(v || '').trim();
|
||||
if (!s) return '';
|
||||
if (s === '中国' || s === 'CN' || s === 'CHN') return 'China';
|
||||
if (s === '美国' || s === 'USA' || s === 'US') return 'United States';
|
||||
if (s === '英国' || s === 'UK' || s === 'GBR') return 'United Kingdom';
|
||||
return s;
|
||||
},
|
||||
buildMediaUrl(raw) {
|
||||
if (!raw) return '';
|
||||
if (/^https?:\/\//i.test(raw)) return raw;
|
||||
const mediaBase = (this.Common && this.Common.mediaUrl ? this.Common.mediaUrl : '').replace(/\/+$/, '');
|
||||
if (!mediaBase) return raw;
|
||||
const cleanPath = String(raw).replace(/^\/+/, '');
|
||||
// 与后台上传目录保持一致（JournalManagement/common.vue）
|
||||
return `${mediaBase}/journalyboardqrcode/${cleanPath}`;
|
||||
},
|
||||
loadApplyBaseInfo() {
|
||||
const journal_id = this.$route.query.journal_id || this.$route.query.journalId;
|
||||
const expert_id = this.$route.query.expert_id || this.$route.query.expertId;
|
||||
if (!journal_id || !expert_id) {
|
||||
return;
|
||||
}
|
||||
this.qrLoading = true;
|
||||
|
||||
this.$api
|
||||
.post('api/Ucenter/getApplyYboardForExpertBaseInfo', {
|
||||
journal_id,
|
||||
expert_id
|
||||
})
|
||||
.then((res) => {
|
||||
const data = (res && res.data) || {};
|
||||
const journal = data.journal || data.journal_info || data.journalInfo || null;
|
||||
const raw =
|
||||
(journal && (journal.wechat_yboard_qrcode || journal.yboard_qrcode || journal.qrcode_url)) || '';
|
||||
this.qrCodeUrl = this.buildMediaUrl(raw);
|
||||
})
|
||||
.catch(() => {
|
||||
this.qrCodeUrl = '';
|
||||
})
|
||||
.finally(() => {
|
||||
this.qrLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.submission-page {
|
||||
--primary-blue: #3a91d9;
|
||||
--text-main: #2c3e50;
|
||||
--bg-light: #f7f9fc;
|
||||
--success-green: #48bb78;
|
||||
--danger: #e53e3e;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: var(--bg-light);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
height: fit-content;
|
||||
padding: 60px 40px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 60px;
|
||||
color: var(--success-green);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 24px;
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-size: 16px;
|
||||
color: #718096;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
background-color: #f0f7ff;
|
||||
border: 1px solid #c3dafe;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.qr-header {
|
||||
color: #2b6cb0;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.qr-code-box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
margin: 15px auto;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qr-code-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.remark-tip {
|
||||
font-size: 14px;
|
||||
color: #4a5568;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.remark-box {
|
||||
background: #fff;
|
||||
border: 1px solid #feb2b2;
|
||||
color: var(--danger);
|
||||
font-weight: bold;
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-block;
|
||||
margin-top: 40px;
|
||||
color: #006699;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.qr-loading {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
margin: 15px auto;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user