209 lines
4.2 KiB
Vue
209 lines
4.2 KiB
Vue
<script setup>
|
||
/**
|
||
* 测评生成中页面
|
||
*
|
||
* 功能：
|
||
* - 显示加载动画
|
||
* - 显示提示文字
|
||
* - 轮询查询报告生成状态（3秒间隔）
|
||
* - 生成完成自动跳转结果页
|
||
*/
|
||
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { useUserStore } from '@/store/user.js'
|
||
import { getResultStatus } from '@/api/assessment.js'
|
||
import Navbar from '@/components/Navbar/index.vue'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
// 页面参数
|
||
const recordId = ref('')
|
||
|
||
// 轮询定时器
|
||
let pollTimer = null
|
||
|
||
// 轮询间隔（毫秒）
|
||
const POLL_INTERVAL = 3000
|
||
|
||
// 最大轮询次数（防止无限轮询）
|
||
const MAX_POLL_COUNT = 100
|
||
|
||
// 当前轮询次数
|
||
const pollCount = ref(0)
|
||
|
||
/**
|
||
* 开始轮询查询状态
|
||
*/
|
||
function startPolling() {
|
||
// 清除已有定时器
|
||
stopPolling()
|
||
|
||
// 立即查询一次
|
||
checkStatus()
|
||
|
||
// 设置轮询定时器
|
||
pollTimer = setInterval(() => {
|
||
checkStatus()
|
||
}, POLL_INTERVAL)
|
||
}
|
||
|
||
/**
|
||
* 停止轮询
|
||
*/
|
||
function stopPolling() {
|
||
if (pollTimer) {
|
||
clearInterval(pollTimer)
|
||
pollTimer = null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 查询报告生成状态
|
||
*/
|
||
async function checkStatus() {
|
||
if (!recordId.value) {
|
||
console.error('缺少测评记录ID')
|
||
return
|
||
}
|
||
|
||
// 检查轮询次数
|
||
pollCount.value++
|
||
if (pollCount.value > MAX_POLL_COUNT) {
|
||
stopPolling()
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '报告生成时间较长，请稍后在"往期测评"中查看',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.switchTab({
|
||
url: '/pages/mine/index'
|
||
})
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
try {
|
||
const res = await getResultStatus(recordId.value)
|
||
|
||
if (res && res.code === 0 && res.data) {
|
||
const status = res.data.status
|
||
|
||
// 状态：3-生成中 4-已完成 5-失败
|
||
if (status === 4) {
|
||
// 生成完成，跳转结果页
|
||
stopPolling()
|
||
|
||
// 携带 reportUrl 参数
|
||
const reportUrl = res.data.reportUrl || ''
|
||
uni.redirectTo({
|
||
url: `/pages/assessment/result/index?recordId=${recordId.value}&reportUrl=${encodeURIComponent(reportUrl)}`
|
||
})
|
||
} else if (status === 5) {
|
||
// 生成失败
|
||
stopPolling()
|
||
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.data.message || '报告生成失败，请联系客服',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
// status === 3 继续轮询
|
||
}
|
||
} catch (error) {
|
||
console.error('查询状态失败:', error)
|
||
// 网络错误不停止轮询，继续尝试
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 页面加载
|
||
*/
|
||
onLoad((options) => {
|
||
recordId.value = options.recordId || ''
|
||
|
||
// 恢复用户登录状态
|
||
userStore.restoreFromStorage()
|
||
|
||
// 开始轮询
|
||
startPolling()
|
||
})
|
||
|
||
/**
|
||
* 页面卸载时清理定时器
|
||
*/
|
||
onUnmounted(() => {
|
||
stopPolling()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="assessment-loading-page">
|
||
<!-- 导航栏 -->
|
||
<Navbar title="多元智能测评" :showBack="true" />
|
||
|
||
<!-- 加载内容区域 -->
|
||
<view class="loading-content">
|
||
<!-- 加载图片 -->
|
||
<image class="loading-image" src="/static/cepingzhong.png" mode="aspectFit" />
|
||
|
||
<!-- 提示文字 -->
|
||
<view class="loading-text">
|
||
<text class="loading-title">测评生成中，请耐心等待</text>
|
||
<text class="loading-tip">可在往期测评中查看测评结果</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/variables.scss';
|
||
|
||
.assessment-loading-page {
|
||
min-height: 100vh;
|
||
background-color: $bg-white;
|
||
}
|
||
|
||
.loading-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: calc(100vh - 200rpx);
|
||
padding: $spacing-xl;
|
||
}
|
||
|
||
// 加载图片
|
||
.loading-image {
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
margin-bottom: $spacing-xl;
|
||
}
|
||
|
||
// 提示文字
|
||
.loading-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.loading-title {
|
||
display: block;
|
||
font-size: $font-size-lg;
|
||
color: $text-secondary;
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
|
||
.loading-tip {
|
||
display: block;
|
||
font-size: $font-size-md;
|
||
color: $text-placeholder;
|
||
}
|
||
</style>
|