hujun
71b3c25695
- 增加账户状态监听定时器，页面切换时自动校验账户归属，避免跨账户操作 - 新增登录回跳路径校验函数，限制仅允许指定页面回跳，防止非法跳转 - 课程页改为整篇连续阅读，底部仅一次标记已读，兼容历史记录 - 完善助手、对比页、资料填写页等多处的账户状态校验逻辑，防止错版数据提交 - 优化账户资料请求逻辑，增加版本校验，避免旧请求覆盖新数据
126 lines
8.4 KiB
Plaintext
126 lines
8.4 KiB
Plaintext
<template>
|
|
<view class="page page-white" :style="pageStyle()">
|
|
<AppHeader title="课程详情" />
|
|
<scroll-view scroll-y :style="contentStyle(96, false)">
|
|
<view v-if="loading" class="empty-content"><text class="empty-copy">正在加载课程…</text></view>
|
|
<view v-else-if="error.length > 0" class="empty-content"><text class="empty-title">{{ error }}</text><button class="primary-button empty-button" @click="reload">重新加载</button></view>
|
|
<view v-else-if="available" class="lesson-detail-content">
|
|
<image class="lesson-cover" :src="lesson.image" mode="aspectFill"></image>
|
|
<text class="lesson-detail-title">{{ lesson.title }}</text>
|
|
<view class="lesson-detail-meta"><text class="lesson-tag">{{ lesson.tag }}</text><text class="lesson-duration">{{ lesson.duration }}阅读</text></view>
|
|
<text class="lesson-intro">{{ lesson.intro }}</text>
|
|
<view v-for="item in lesson.chapters" :key="item.id" class="reading-section">
|
|
<text class="reading-heading">{{ item.title }}</text>
|
|
<text class="reading-body">{{ item.body }}</text>
|
|
</view>
|
|
<view class="reading-footer">
|
|
<text class="reading-note">内容仅供信息参考，具体申请条件以相关机构官方说明为准。</text>
|
|
<view v-if="progressError.length > 0" class="progress-error"><text>{{ progressError }}</text><text class="progress-retry" @click="reload">重新加载</text></view>
|
|
<button :class="isRead ? 'read-button already-read' : 'read-button'" :disabled="isRead || saving || progressLoading" @click="markRead">{{ isRead ? '已读完' : (saving ? '正在保存…' : (progressLoading ? '正在读取状态…' : (loggedIn ? '我已读完' : '登录后标记已读'))) }}</button>
|
|
</view>
|
|
</view>
|
|
<view v-else class="empty-content"><text class="empty-title">暂未找到这门课程</text><text class="empty-copy">返回融资课堂，选择其他课程。</text><button class="primary-button empty-button" @click="goClassroom">返回课堂</button></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getSession } from '@/services/api.uts'
|
|
import { usePageLayout } from '@/services/layout.uts'
|
|
import { fetchLesson, fetchLessonProgress, completeLessonChapter, emptyLesson, FinanceLesson, validateLessonState } from '@/services/content.uts'
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
|
const { contentStyle, pageStyle } = usePageLayout()
|
|
const lesson = ref<FinanceLesson>(emptyLesson()); const available = ref(false); const loading = ref(false); const error = ref('')
|
|
const completedIds = ref<string[]>([])
|
|
const progressError = ref(''); const loggedIn = ref(false); const saving = ref(false); const progressLoading = ref(false)
|
|
let id = ''; let visible = false; let generation = 0; let owner = ''; let accountTimer = 0
|
|
let reloadAfterAccountChange: () => void = () => {}
|
|
const tokenNow = (): string => getSession()?.getString('token') ?? ''
|
|
const stopAccountTimer = () => { if (accountTimer != 0) clearInterval(accountTimer); accountTimer = 0 }
|
|
function ensureAccount(): boolean {
|
|
if (!visible) return false
|
|
if (tokenNow() == owner) return true
|
|
// 旧课程页不能用新账户提交完成记录；可见期也及时移除旧账户进度。
|
|
completedIds.value = []; saving.value = false; reloadAfterAccountChange()
|
|
return false
|
|
}
|
|
function current(request: number, token: string): boolean {
|
|
if (!visible || request != generation) return false
|
|
if (tokenNow() == token) return true
|
|
ensureAccount()
|
|
return false
|
|
}
|
|
async function reload() {
|
|
if (!visible) return
|
|
const request = ++generation; const token = tokenNow()
|
|
owner = token; stopAccountTimer(); accountTimer = setInterval(() => { ensureAccount() }, 1000)
|
|
loading.value = true; available.value = false; error.value = ''; progressError.value = ''; completedIds.value = []; saving.value = false
|
|
loggedIn.value = token.length > 0; progressLoading.value = false
|
|
try {
|
|
const result = await fetchLesson(id)
|
|
if (!current(request, token)) return
|
|
lesson.value = result; available.value = true; loading.value = false
|
|
if (token.length > 0) {
|
|
progressLoading.value = true
|
|
try {
|
|
const state = await fetchLessonProgress(id)
|
|
if (!current(request, token)) return
|
|
validateLessonState(result, state)
|
|
completedIds.value = state.completedChapterIds
|
|
} catch (err) { if (current(request, token)) progressError.value = err instanceof Error ? err.message : '进度加载失败，请重试' }
|
|
}
|
|
} catch (err) { if (current(request, token)) error.value = err instanceof Error ? err.message : '课程加载失败，请重试' }
|
|
finally { if (request == generation) { loading.value = false; progressLoading.value = false } }
|
|
}
|
|
reloadAfterAccountChange = () => { reload() }
|
|
const isRead = computed((): boolean => lesson.value.chapters.length > 0 && lesson.value.chapters.every((item): boolean => completedIds.value.includes(item.id)))
|
|
const markRead = async () => {
|
|
if (!ensureAccount() || !available.value || loading.value || progressLoading.value || saving.value || isRead.value) return
|
|
const token = tokenNow()
|
|
if (token.length == 0) { uni.navigateTo({ url: '/packages/account/login/login?resumeLesson=1&lessonId=' + id }); return }
|
|
if (progressError.value.length > 0) { uni.showToast({ title: '请先重新加载已读状态', icon: 'none' }); return }
|
|
const request = generation; saving.value = true; progressError.value = ''
|
|
try {
|
|
// 沿用已上线的记录接口；一次操作补齐未完成段落，失败后可从已有记录继续。
|
|
const content = lesson.value
|
|
for (let index = 0; index < content.chapters.length; index++) {
|
|
if (!current(request, token)) return
|
|
if (completedIds.value.includes(content.chapters[index].id)) continue
|
|
const state = await completeLessonChapter(id, content.chapters[index].id, content.lessonVersion)
|
|
if (!current(request, token)) return
|
|
validateLessonState(content, state); completedIds.value = state.completedChapterIds
|
|
}
|
|
if (!isRead.value) throw new Error('已读状态保存不完整，请重新加载后重试')
|
|
} catch (err) { if (current(request, token)) progressError.value = err instanceof Error ? err.message : '已读状态保存失败，请重试' }
|
|
finally { if (request == generation) saving.value = false }
|
|
}
|
|
const goClassroom = () => { uni.redirectTo({ url: '/packages/content/classroom/classroom' }) }
|
|
onLoad((options) => { id = options?.['id'] ?? '' })
|
|
onShow(() => { visible = true; reload() })
|
|
onHide(() => { visible = false; stopAccountTimer(); generation++; completedIds.value = []; saving.value = false; progressLoading.value = false })
|
|
onUnload(() => { visible = false; stopAccountTimer(); generation++; completedIds.value = []; saving.value = false; progressLoading.value = false })
|
|
</script>
|
|
|
|
<style>
|
|
.progress-error { color: #b64d35; font-size: 24rpx; line-height: 40rpx; margin-top: 16rpx; }
|
|
.progress-retry { color: #0868f7; padding: 14rpx 0; }
|
|
.lesson-detail-content { padding: 24rpx 30rpx 64rpx; }
|
|
.lesson-cover { width: 100%; height: 260rpx; border-radius: 18rpx; }
|
|
.lesson-detail-title { color: #172640; font-size: 36rpx; line-height: 50rpx; font-weight: 700; margin-top: 24rpx; }
|
|
.lesson-detail-meta { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 14rpx; }
|
|
.lesson-tag { color: #0868f7; font-size: 24rpx; }
|
|
.lesson-duration { color: #66758a; font-size: 23rpx; }
|
|
.lesson-intro { color: #66758a; font-size: 26rpx; line-height: 44rpx; margin-top: 22rpx; }
|
|
.reading-section { margin-top: 32rpx; }
|
|
.reading-heading { color: #172640; font-size: 30rpx; line-height: 46rpx; font-weight: 600; }
|
|
.reading-body { color: #4d5e75; font-size: 28rpx; line-height: 52rpx; margin-top: 12rpx; }
|
|
.reading-footer { border-top: 1rpx solid #e8eef6; padding-top: 24rpx; margin-top: 40rpx; }
|
|
.reading-note { color: #66758a; font-size: 22rpx; line-height: 36rpx; }
|
|
.read-button { margin-top: 28rpx; width: 100%; height: 88rpx; line-height: 88rpx; border-radius: 12rpx; background-color: #eaf2ff; color: #0868f7; font-size: 28rpx; font-weight: 600; }
|
|
.already-read { color: #168454; background-color: #edf8f1; }
|
|
.empty-content { padding: 100rpx 40rpx; align-items: center; }
|
|
.empty-title { color: #172640; font-size: 32rpx; font-weight: 700; }
|
|
.empty-copy { color: #66758a; font-size: 26rpx; margin-top: 20rpx; }
|
|
.empty-button { width: 100%; margin-top: 38rpx; }
|
|
</style>
|