tougao_web/src/components/page/YouthBoardSubmitSuccess.vue

<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>