21
This commit is contained in:
zpc
parent
992a463bc1
commit
d47cd5ca1e
|
|
@ -32,22 +32,6 @@ const MAX_POLL_COUNT = 100
|
|||
// 当前轮询次数
|
||||
const pollCount = ref(0)
|
||||
|
||||
// 加载提示文字列表
|
||||
const loadingTips = [
|
||||
'正在分析您的测评数据...',
|
||||
'正在生成智能分析报告...',
|
||||
'正在整理八大智能评估...',
|
||||
'正在计算个人特质分析...',
|
||||
'正在生成细分能力报告...',
|
||||
'报告即将生成完成...'
|
||||
]
|
||||
|
||||
// 当前提示文字索引
|
||||
const currentTipIndex = ref(0)
|
||||
|
||||
// 提示文字切换定时器
|
||||
let tipTimer = null
|
||||
|
||||
/**
|
||||
* 开始轮询查询状态
|
||||
*/
|
||||
|
|
@ -110,7 +94,6 @@ async function checkStatus() {
|
|||
if (status === 4) {
|
||||
// 生成完成，跳转结果页
|
||||
stopPolling()
|
||||
stopTipRotation()
|
||||
|
||||
// 携带 reportUrl 参数
|
||||
const reportUrl = res.data.reportUrl || ''
|
||||
|
|
@ -120,7 +103,6 @@ async function checkStatus() {
|
|||
} else if (status === 5) {
|
||||
// 生成失败
|
||||
stopPolling()
|
||||
stopTipRotation()
|
||||
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
|
|
@ -141,25 +123,6 @@ async function checkStatus() {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始提示文字轮换
|
||||
*/
|
||||
function startTipRotation() {
|
||||
tipTimer = setInterval(() => {
|
||||
currentTipIndex.value = (currentTipIndex.value + 1) % loadingTips.length
|
||||
}, 2500)
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止提示文字轮换
|
||||
*/
|
||||
function stopTipRotation() {
|
||||
if (tipTimer) {
|
||||
clearInterval(tipTimer)
|
||||
tipTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面加载
|
||||
*/
|
||||
|
|
@ -171,9 +134,6 @@ onLoad((options) => {
|
|||
|
||||
// 开始轮询
|
||||
startPolling()
|
||||
|
||||
// 开始提示文字轮换
|
||||
startTipRotation()
|
||||
})
|
||||
|
||||
/**
|
||||
|
|
@ -181,65 +141,23 @@ onLoad((options) => {
|
|||
*/
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
stopTipRotation()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="assessment-loading-page">
|
||||
<!-- 导航栏 -->
|
||||
<Navbar title="生成报告" :showBack="false" />
|
||||
<Navbar title="多元智能测评" :showBack="true" />
|
||||
|
||||
<!-- 加载内容区域 -->
|
||||
<view class="loading-content">
|
||||
<!-- 加载动画 -->
|
||||
<view class="loading-animation">
|
||||
<!-- 外圈旋转 -->
|
||||
<view class="loading-circle loading-circle--outer">
|
||||
<view class="circle-dot circle-dot--1"></view>
|
||||
<view class="circle-dot circle-dot--2"></view>
|
||||
<view class="circle-dot circle-dot--3"></view>
|
||||
<view class="circle-dot circle-dot--4"></view>
|
||||
</view>
|
||||
|
||||
<!-- 内圈旋转 -->
|
||||
<view class="loading-circle loading-circle--inner">
|
||||
<view class="circle-dot circle-dot--1"></view>
|
||||
<view class="circle-dot circle-dot--2"></view>
|
||||
<view class="circle-dot circle-dot--3"></view>
|
||||
</view>
|
||||
|
||||
<!-- 中心图标 -->
|
||||
<view class="loading-center">
|
||||
<view class="center-icon">
|
||||
<view class="icon-bar icon-bar--1"></view>
|
||||
<view class="icon-bar icon-bar--2"></view>
|
||||
<view class="icon-bar icon-bar--3"></view>
|
||||
<view class="icon-bar icon-bar--4"></view>
|
||||
<view class="icon-bar icon-bar--5"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 加载图片 -->
|
||||
<image class="loading-image" src="/static/cepingzhong.png" mode="aspectFit" />
|
||||
|
||||
<!-- 加载文字 -->
|
||||
<!-- 提示文字 -->
|
||||
<view class="loading-text">
|
||||
<text class="loading-title">报告生成中</text>
|
||||
<text class="loading-tip">{{ loadingTips[currentTipIndex] }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 进度提示 -->
|
||||
<view class="loading-progress">
|
||||
<view class="progress-dots">
|
||||
<view class="progress-dot progress-dot--1"></view>
|
||||
<view class="progress-dot progress-dot--2"></view>
|
||||
<view class="progress-dot progress-dot--3"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<view class="loading-footer">
|
||||
<text class="footer-text">请耐心等待，报告生成需要一点时间</text>
|
||||
<text class="footer-subtext">生成完成后将自动跳转</text>
|
||||
<text class="loading-title">测评生成中，请耐心等待</text>
|
||||
<text class="loading-tip">可在往期测评中查看测评结果</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -251,7 +169,7 @@ onUnmounted(() => {
|
|||
|
||||
.assessment-loading-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #F8FAFF 0%, #EEF4FF 100%);
|
||||
background-color: $bg-white;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
|
|
@ -263,260 +181,28 @@ onUnmounted(() => {
|
|||
padding: $spacing-xl;
|
||||
}
|
||||
|
||||
// 加载动画容器
|
||||
.loading-animation {
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
// 加载图片
|
||||
.loading-image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
// 旋转圆圈
|
||||
.loading-circle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
|
||||
&--outer {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
animation: rotate 3s linear infinite;
|
||||
}
|
||||
|
||||
&--inner {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
animation: rotate-reverse 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// 圆点
|
||||
.circle-dot {
|
||||
position: absolute;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
||||
border-radius: 50%;
|
||||
|
||||
&--1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&--3 {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&--4 {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-circle--inner .circle-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
|
||||
|
||||
&--1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
bottom: 25%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
bottom: 25%;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
// 中心区域
|
||||
.loading-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background-color: $bg-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 中心图标（音频波形效果）
|
||||
.center-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.icon-bar {
|
||||
width: 8rpx;
|
||||
background: linear-gradient(180deg, $primary-color 0%, $primary-light 100%);
|
||||
border-radius: 4rpx;
|
||||
animation: wave 1s ease-in-out infinite;
|
||||
|
||||
&--1 {
|
||||
height: 24rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
height: 36rpx;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 48rpx;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&--4 {
|
||||
height: 36rpx;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&--5 {
|
||||
height: 24rpx;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载文字
|
||||
// 提示文字
|
||||
.loading-text {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
display: block;
|
||||
font-size: $font-size-xxl;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-color;
|
||||
margin-bottom: $spacing-md;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-secondary;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.loading-tip {
|
||||
display: block;
|
||||
font-size: $font-size-md;
|
||||
color: $text-secondary;
|
||||
min-height: 40rpx;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
// 进度点
|
||||
.loading-progress {
|
||||
margin-bottom: $spacing-xl * 2;
|
||||
}
|
||||
|
||||
.progress-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.progress-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: $primary-color;
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.4s ease-in-out infinite;
|
||||
|
||||
&--1 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部提示
|
||||
.loading-footer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 120rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 $spacing-xl;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-placeholder;
|
||||
margin-bottom: $spacing-xs;
|
||||
}
|
||||
|
||||
.footer-subtext {
|
||||
display: block;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-disabled;
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-reverse {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%, 100% {
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -353,13 +353,7 @@ onLoad((options) => {
|
|||
<template>
|
||||
<view class="assessment-result-page">
|
||||
<!-- 导航栏 -->
|
||||
<Navbar title="测评报告" :showBack="true">
|
||||
<template #right>
|
||||
<view class="save-btn" @click="handleSaveToLocal">
|
||||
<text>{{ saving ? '下载中...' : '下载PDF' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</Navbar>
|
||||
<Navbar title="测评报告" :showBack="true" />
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="pageLoading" class="loading-container">
|
||||
|
|
@ -648,6 +642,13 @@ onLoad((options) => {
|
|||
<view class="footer-tips">本报告仅供参考，建议结合专业指导进行学业规划</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
<view v-if="!pageLoading" class="bottom-action">
|
||||
<view class="save-btn" :class="{ 'save-btn--disabled': saving }" @click="handleSaveToLocal">
|
||||
<text>{{ saving ? '保存中...' : '保存到本地' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -657,22 +658,43 @@ onLoad((options) => {
|
|||
.assessment-result-page {
|
||||
min-height: 100vh;
|
||||
background-color: $bg-color;
|
||||
padding-bottom: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
// 底部操作栏
|
||||
.bottom-action {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: $spacing-lg $spacing-xl;
|
||||
padding-bottom: calc(#{$spacing-lg} + env(safe-area-inset-bottom));
|
||||
background-color: transparent;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
// 保存按钮
|
||||
.save-btn {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
background-color: $primary-color;
|
||||
border-radius: $border-radius-sm;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #FF8A6B 0%, #FF6B6B 100%);
|
||||
border-radius: $border-radius-round;
|
||||
|
||||
text {
|
||||
font-size: $font-size-xs;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-white;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
uniapp/static/cepingzhong.png
Normal file
BIN
uniapp/static/cepingzhong.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Loading…
Reference in New Issue
Block a user