<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) => {
|
console.log(res,'初始');
|
|
if (res.code == 200) {
|
console.log(res.msg);
|
window.location.href = res.msg;
|
console.log("window后");
|
} 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>
|
