<template>
|
<div class="relay-container">
|
<div class="relay-card">
|
<!-- 加载动画 -->
|
<div class="loading-spinner">
|
<div class="spinner-dot"></div>
|
<div class="spinner-dot"></div>
|
<div class="spinner-dot"></div>
|
</div>
|
<!-- 标题 -->
|
<h1 class="relay-title">正在加载服务</h1>
|
<!-- 描述 -->
|
<p class="relay-desc">请稍候，即将为您跳转至问卷页面</p>
|
<!-- 进度条装饰 -->
|
<div class="progress-bar">
|
<div class="progress-fill"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { scanGenerateSubtask } from '@/api/AiCentre/index';
|
|
export default {
|
name: 'RelayPage',
|
created() {
|
this.handleRedirect();
|
},
|
methods: {
|
handleRedirect() {
|
const { taskid, deptcode, leaveldeptcodes } = this.$route.query;
|
if (!taskid) {
|
this.$message.error('缺少任务标识，请重新扫码');
|
return;
|
}
|
const params = {
|
taskid: taskid,
|
deptcode: deptcode ,
|
leaveldeptcodes: leaveldeptcodes
|
};
|
scanGenerateSubtask(params).then(res => {
|
return
|
if (res.code === 200 ) {
|
window.location.href = res.msg;
|
} else {
|
this.$message.error('获取问卷链接失败：' + (res.msg || '未知错误'));
|
}
|
}).catch(err => {
|
console.error(err);
|
this.$message.error('服务异常，请稍后重试');
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 全局重置 */
|
.relay-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 100vh;
|
margin: 0;
|
padding: 20px;
|
background: linear-gradient(145deg, #f5f9ff 0%, #e8f0fe 100%);
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
}
|
|
/* 卡片容器 */
|
.relay-card {
|
max-width: 420px;
|
width: 100%;
|
padding: 48px 36px 40px;
|
background: rgba(255, 255, 255, 0.85);
|
backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
border-radius: 32px;
|
box-shadow: 0 20px 60px rgba(64, 158, 255, 0.15),
|
0 8px 20px rgba(0, 0, 0, 0.04);
|
text-align: center;
|
transition: all 0.3s ease;
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
}
|
|
/* 加载动画 — 三点波浪 */
|
.loading-spinner {
|
display: flex;
|
justify-content: center;
|
gap: 8px;
|
margin-bottom: 28px;
|
}
|
|
.spinner-dot {
|
width: 14px;
|
height: 14px;
|
background: #409EFF;
|
border-radius: 50%;
|
animation: bounce 1.4s infinite ease-in-out both;
|
}
|
|
.spinner-dot:nth-child(1) {
|
animation-delay: -0.32s;
|
background: #409EFF;
|
}
|
|
.spinner-dot:nth-child(2) {
|
animation-delay: -0.16s;
|
background: #66b1ff;
|
}
|
|
.spinner-dot:nth-child(3) {
|
animation-delay: 0s;
|
background: #8cc5ff;
|
}
|
|
@keyframes bounce {
|
0%, 80%, 100% {
|
transform: scale(0.6);
|
opacity: 0.4;
|
}
|
40% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
/* 标题 */
|
.relay-title {
|
font-size: 24px;
|
font-weight: 600;
|
color: #2c3e50;
|
margin: 0 0 10px 0;
|
letter-spacing: 1px;
|
}
|
|
/* 描述文字 */
|
.relay-desc {
|
font-size: 16px;
|
color: #7f8c8d;
|
margin: 0 0 30px 0;
|
line-height: 1.6;
|
}
|
|
/* 进度条（装饰） */
|
.progress-bar {
|
width: 100%;
|
height: 4px;
|
background: #e0e7f1;
|
border-radius: 4px;
|
overflow: hidden;
|
margin-top: 8px;
|
}
|
|
.progress-fill {
|
width: 60%;
|
height: 100%;
|
background: linear-gradient(90deg, #409EFF, #79bbff);
|
border-radius: 4px;
|
animation: progressMove 1.8s ease-in-out infinite alternate;
|
}
|
|
@keyframes progressMove {
|
0% { transform: translateX(-10%); width: 40%; }
|
100% { transform: translateX(10%); width: 80%; }
|
}
|
|
/* 移动端适配 */
|
@media (max-width: 480px) {
|
.relay-card {
|
padding: 32px 20px 28px;
|
}
|
.relay-title {
|
font-size: 20px;
|
}
|
.relay-desc {
|
font-size: 14px;
|
}
|
}
|
</style>
|
