feat: 学习平台优化
This commit is contained in:
@@ -47,21 +47,8 @@ layout("/layouts/platform.html"){
|
||||
<el-option v-for="item in courseOptions" :key="item.id" :label="item.courseName" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="课程类型">
|
||||
<el-select v-model="courseQuery.courseTypeId" clearable filterable placeholder="请选择课程类型" style="width: 100%">
|
||||
<el-option v-for="item in courseTypeOptions" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="授课讲师">
|
||||
<el-input v-model="courseQuery.lecturerName" clearable placeholder="请输入授课讲师" style="width: 100%" @keyup.enter.native="loadCourses"></el-input>
|
||||
</search-item>
|
||||
<search-item label="课程状态">
|
||||
<el-select v-model="courseQuery.status" clearable placeholder="请选择课程状态" style="width: 100%">
|
||||
<el-option v-for="item in statusOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button size="medium" type="primary" icon="el-icon-search" @click="loadCourses">搜索</el-button>
|
||||
<el-button size="medium" type="primary" @click="loadCourses">搜索</el-button>
|
||||
<el-button size="medium" @click="resetCourseQuery">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
@@ -100,7 +87,7 @@ layout("/layouts/platform.html"){
|
||||
<el-card shadow="never" style="height: 100%; overflow: auto">
|
||||
<el-empty v-if="!selectedNode.id" description="请选择左侧章/节节点"></el-empty>
|
||||
<el-tabs v-else v-model="activeTab">
|
||||
<el-tab-pane label="基础信息" name="basic">
|
||||
<el-tab-pane label="基础信息" name="basic" style="padding-top: 12px">
|
||||
<el-form :model="nodeForm" ref="nodeForm" label-width="110px" :rules="nodeRules">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
@@ -179,7 +166,7 @@ layout("/layouts/platform.html"){
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="完成规则" name="rule">
|
||||
<el-tab-pane label="完成规则" name="rule" style="padding-top: 12px">
|
||||
<el-form :model="ruleForm" label-width="150px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
@@ -215,6 +202,7 @@ layout("/layouts/platform.html"){
|
||||
<el-input-number v-model="ruleForm.minStudyMinutes" :min="0" :precision="0" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!--
|
||||
<el-col :span="12">
|
||||
<el-form-item label="解锁规则">
|
||||
<el-select v-model="ruleForm.unlockRule" style="width: 100%">
|
||||
@@ -222,7 +210,9 @@ layout("/layouts/platform.html"){
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
-->
|
||||
</el-row>
|
||||
<!--
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><el-form-item label="允许跳过"><el-switch v-model="ruleForm.allowSkip"></el-switch></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="允许拖动"><el-switch v-model="ruleForm.allowDrag"></el-switch></el-form-item></el-col>
|
||||
@@ -232,13 +222,14 @@ layout("/layouts/platform.html"){
|
||||
<el-col :span="8"><el-form-item label="隐藏计时"><el-switch v-model="ruleForm.hiddenCountTime"></el-switch></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="无操作计时"><el-switch v-model="ruleForm.inactiveCountTime"></el-switch></el-form-item></el-col>
|
||||
</el-row>
|
||||
-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveRule">保存完成规则</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="状态设置" name="status">
|
||||
<el-tab-pane label="状态设置" name="status" style="padding-top: 12px">
|
||||
<el-form :model="nodeForm" label-width="110px">
|
||||
<el-form-item label="节点状态">
|
||||
<el-radio-group v-model="nodeForm.status">
|
||||
@@ -345,8 +336,8 @@ layout("/layouts/platform.html"){
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><el-form-item label="是否必学"><el-switch v-model="resourceForm.required"></el-switch></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="允许预览"><el-switch v-model="resourceForm.allowPreview"></el-switch></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="是否必学"><el-switch v-model="resourceForm.required" @change="resourceRequiredChange"></el-switch></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="允许预览"><el-switch :value="resourceForm.allowPreview" @input="resourcePreviewChange"></el-switch></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="允许下载"><el-switch v-model="resourceForm.allowDownload"></el-switch></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-form-item label="附件" prop="fileData">
|
||||
@@ -433,7 +424,7 @@ layout("/layouts/platform.html"){
|
||||
{ name: "混合资料", code: "mixed" }
|
||||
],
|
||||
completionRuleOptions: [
|
||||
{ name: "完成所有必学资料", code: "all_required_resource" },
|
||||
{ name: "完成全部学习资料", code: "all_required_resource" },
|
||||
{ name: "按资料学习进度", code: "resource_progress" },
|
||||
{ name: "达到最少学习时长", code: "min_study_time" },
|
||||
{ name: "管理员手动确认", code: "manual" }
|
||||
@@ -727,10 +718,22 @@ layout("/layouts/platform.html"){
|
||||
status: "enabled"
|
||||
}
|
||||
}
|
||||
if (this.resourceForm.required) this.$set(this.resourceForm, "allowPreview", true)
|
||||
this.resourceTypeChange(this.resourceForm.resourceType)
|
||||
this.resourceDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.resourceForm && this.$refs.resourceForm.clearValidate())
|
||||
},
|
||||
resourceRequiredChange(required) {
|
||||
if (required) this.$set(this.resourceForm, "allowPreview", true)
|
||||
},
|
||||
resourcePreviewChange(allowPreview) {
|
||||
if (!allowPreview && this.resourceForm.required) {
|
||||
this.$set(this.resourceForm, "allowPreview", true)
|
||||
this.$message.warning("必学资料必须允许预览，请先关闭“是否必学”")
|
||||
return
|
||||
}
|
||||
this.$set(this.resourceForm, "allowPreview", allowPreview)
|
||||
},
|
||||
resourceTypeChange(val) {
|
||||
const type = this.resourceTypeOptions.find(v => v.code === val)
|
||||
this.fileAccept = type ? type.accept : ""
|
||||
@@ -842,7 +845,9 @@ layout("/layouts/platform.html"){
|
||||
media.onerror = () => {
|
||||
window.URL.revokeObjectURL(media.src)
|
||||
}
|
||||
media.src = url
|
||||
const fileId = url.match(/[?&]id=([^&]+)/)
|
||||
media.src = this.resourceForm.resourceType === "audio" && fileId
|
||||
? "/platform/sys/file/preview?id=" + fileId[1] : url
|
||||
},
|
||||
validResourceExt(resourceType, fileExt) {
|
||||
const item = this.resourceTypeOptions.find(v => v.code === resourceType)
|
||||
|
||||
@@ -27,9 +27,9 @@ layout("/layouts/platform.html"){
|
||||
.course-list { display: flex; flex-direction: column; gap: 16px; }
|
||||
.course-card { min-height: 160px; display: grid; grid-template-columns: 236px minmax(0, 1fr) 112px; overflow: hidden; background: #fff; border: 0; border-radius: 10px; box-shadow: 0 5px 18px rgba(30, 66, 115, .08); transition: box-shadow .2s, transform .2s; }
|
||||
.course-card:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(30, 67, 119, .12); }
|
||||
.course-cover { position: relative; min-height: 160px; overflow: hidden; background: #eaf5ee; }
|
||||
.course-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
|
||||
.course-cover-empty { width: 100%; height: 100%; min-height: 160px; display: flex; align-items: center; justify-content: center; color: #77a28a; font-size: 18px; background: linear-gradient(135deg, #e5f5ea, #f3faf6); }
|
||||
.course-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; align-self: center; overflow: hidden; background: #eaf5ee; }
|
||||
.course-cover img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
|
||||
.course-cover-empty { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #77a28a; font-size: 18px; background: linear-gradient(135deg, #e5f5ea, #f3faf6); }
|
||||
.course-cover-empty i { margin-right: 8px; font-size: 32px; }
|
||||
.course-card:nth-child(3n+2) .course-cover-empty { color: #7188ae; background: linear-gradient(135deg, #e7effc, #f3f7fe); }
|
||||
.course-card:nth-child(3n) .course-cover-empty { color: #bc8768; background: linear-gradient(135deg, #fff0e7, #fff8f3); }
|
||||
@@ -198,7 +198,7 @@ layout("/layouts/platform.html"){
|
||||
return minutes ? hours + "小时" + minutes + "分钟" : hours + "小时"
|
||||
},
|
||||
startStudy(course) {
|
||||
window.location.href = loc() + "/study?id=" + encodeURIComponent(course.id || "")
|
||||
pjaxReplace("/platform/learning/course/display/study?id=" + encodeURIComponent(course.id || ""))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -108,11 +108,12 @@ layout("/layouts/platform.html"){
|
||||
<section class="study-main">
|
||||
<div class="player-card">
|
||||
<template v-if="selectedResource.id">
|
||||
<video v-if="selectedResource.resourceType === 'video'" ref="mediaPlayer" class="media-player" :src="mediaUrl" controls controlslist="nodownload" @play="mediaPlay" @ended="mediaEnded" @timeupdate="saveProgress" @loadedmetadata="mediaReady" @seeking="handleMediaSeeking" @seeked="handleMediaSeeked"></video>
|
||||
<div v-else-if="selectedResource.resourceType === 'audio'" class="audio-panel"><i class="el-icon-headset"></i><div class="mb20">{{selectedResource.title}}</div><audio ref="mediaPlayer" :src="fileUrl" controls controlslist="nodownload" @play="mediaPlay" @ended="mediaEnded" @timeupdate="saveProgress" @loadedmetadata="mediaReady" @seeking="handleMediaSeeking" @seeked="handleMediaSeeked"></audio></div>
|
||||
<div v-if="!canPreview" class="empty-resource">该资料不允许预览</div>
|
||||
<video v-else-if="selectedResource.resourceType === 'video'" ref="mediaPlayer" class="media-player" :src="mediaUrl" controls :controlslist="canDownload ? null : 'nodownload'" @play="mediaPlay" @ended="mediaEnded" @timeupdate="saveProgress" @loadedmetadata="mediaReady" @seeking="handleMediaSeeking" @seeked="handleMediaSeeked"></video>
|
||||
<div v-else-if="selectedResource.resourceType === 'audio'" class="audio-panel"><i class="el-icon-headset"></i><div class="mb20">{{selectedResource.title}}</div><audio ref="mediaPlayer" :src="fileUrl" preload="metadata" controls :controlslist="canDownload ? null : 'nodownload'" @play="mediaPlay" @ended="mediaEnded" @timeupdate="saveProgress" @loadedmetadata="mediaReady" @seeking="handleMediaSeeking" @seeked="handleMediaSeeked"></audio></div>
|
||||
<img v-else-if="selectedResource.resourceType === 'image'" class="image-preview" :src="fileUrl" :alt="selectedResource.title">
|
||||
<iframe v-else-if="canInlinePreview(selectedResource)" class="doc-frame" :src="inlinePreviewUrl"></iframe>
|
||||
<div v-else class="file-fallback"><file-preview :files="selectedResource.fileData" complete_result></file-preview><el-button v-if="fileUrl" class="mt20" type="primary" icon="el-icon-view" @click="openFile">打开学习资料</el-button></div>
|
||||
<div v-else class="file-fallback">该资料暂不支持在线预览</div>
|
||||
</template>
|
||||
<div v-else class="empty-resource"><i class="el-icon-reading"></i><div>请从左侧目录选择需要学习的资料</div></div>
|
||||
</div>
|
||||
@@ -121,7 +122,8 @@ layout("/layouts/platform.html"){
|
||||
<div class="course-detail-head">
|
||||
<div><div><span class="detail-course-title">{{course.courseName}}</span><span class="detail-course-type">{{course.courseTypeName || '课程'}}</span></div><div class="detail-learning-state">正在学习：{{selectedResource.title || '请选择课节'}}</div></div>
|
||||
<div class="detail-actions">
|
||||
<el-button v-if="fileUrl" size="mini" icon="el-icon-share" @click="openFile">打开资料</el-button>
|
||||
<el-button v-if="canPreview && (isMediaResource || selectedResource.resourceType === 'image' || canInlinePreview(selectedResource))" size="mini" icon="el-icon-view" @click="openFile">预览资料</el-button>
|
||||
<el-button v-if="canDownload" size="mini" icon="el-icon-download" @click="downloadFile">下载资料</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-statistics"><span><i class="el-icon-collection"></i> 共 {{resourceCount}} 课节</span><span><i class="el-icon-time"></i> 总时长 {{formatCourseDuration(course.totalDurationSeconds)}}</span><span><i class="el-icon-view"></i> {{course.viewCount || 0}} 次观看</span></div>
|
||||
@@ -130,7 +132,7 @@ layout("/layouts/platform.html"){
|
||||
<div class="study-bottom">
|
||||
<span>{{studying ? '正在记录有效学习时长：' + recordStudyTime : '播放课程后，系统将自动记录有效学习时长。'}}</span>
|
||||
<div>
|
||||
<el-button v-if="!studying && selectedResource.id && !isMediaResource" size="small" type="primary" plain :loading="startingStudy" @click="startStudy">开始学习</el-button>
|
||||
<el-button v-if="!studying && canPreview && !isMediaResource" size="small" type="primary" plain :loading="startingStudy" @click="startStudy">开始学习</el-button>
|
||||
<el-button v-if="studying" size="small" type="danger" plain @click="finishStudy(false)">结束学习</el-button>
|
||||
<el-button v-if="hasNextResource" size="small" type="primary" @click="nextResource">下一节 <i class="el-icon-arrow-right"></i></el-button>
|
||||
</div>
|
||||
@@ -143,24 +145,36 @@ layout("/layouts/platform.html"){
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
components: {"file-preview": httpVueLoader("/components/plugins/sysFilePreview/index.vue")},
|
||||
data() {
|
||||
return { courseId: "", preferredResourceId: "", apiBase: "/platform/learning/course/display", recordApi: "/platform/learning/study/record", course: {}, treeData: [], selectedResource: {}, studying: false, startingStudy: false, currentSegmentId: "", recordProgress: 0, recordStudyTime: "0秒", pendingSeconds: 0, heartbeatTimer: null, autoResumeKey: "", lastPositionSyncAt: 0, lastActiveAt: Date.now(), inactiveLimit: 60000, lastAllowedPositionSeconds: 0, restoringMediaPosition: false, pageLoading: true, loadingCount: 0 }
|
||||
},
|
||||
computed: {
|
||||
fileUrl() { return this.getFileUrl(this.selectedResource.fileData) },
|
||||
canPreview() { return !!this.selectedResource.id && this.selectedResource.allowPreview !== false },
|
||||
canDownload() { return !!this.selectedResource.id && this.selectedResource.allowDownload === true },
|
||||
fileUrl() {
|
||||
if (!this.canPreview) return ""
|
||||
const id = this.getFileId(this.selectedResource.fileData)
|
||||
return id ? "/platform/sys/file/preview?id=" + encodeURIComponent(id) : this.getFileUrl(this.selectedResource.fileData)
|
||||
},
|
||||
downloadUrl() {
|
||||
if (!this.canDownload) return ""
|
||||
const id = this.getFileId(this.selectedResource.fileData)
|
||||
return id ? "/platform/sys/file/download?id=" + encodeURIComponent(id) : this.getFileUrl(this.selectedResource.fileData)
|
||||
},
|
||||
mediaUrl() {
|
||||
if (!this.canPreview) return ""
|
||||
if (this.selectedResource.resourceType !== "video") return this.fileUrl
|
||||
const fileId = this.getFileId(this.selectedResource.fileData)
|
||||
// 视频续播和手动拖动依赖 Range 请求，普通文件地址会导致 currentTime 定位被浏览器重置。
|
||||
return fileId ? "/platform/sys/file/videoPlay?id=" + encodeURIComponent(fileId) : this.fileUrl
|
||||
},
|
||||
inlinePreviewUrl() { const id = this.getFileId(this.selectedResource.fileData); return id ? this.apiBase + "/pdfPreview?id=" + encodeURIComponent(id) : this.fileUrl },
|
||||
inlinePreviewUrl() { if (!this.canPreview) return ""; const id = this.getFileId(this.selectedResource.fileData); const url = id ? this.apiBase + "/pdfPreview?id=" + encodeURIComponent(id) : this.fileUrl; return this.canDownload ? url : url + "#toolbar=0" },
|
||||
resourceTypeText() { const names = {video: "视频资料", audio: "音频资料", image: "图片资料", pdf: "文档资料", word: "文档资料", ppt: "演示资料"}; return names[this.selectedResource.resourceType] || "课程资料" },
|
||||
resourceList() { return this.collectResources(this.treeData) },
|
||||
resourceCount() { return this.resourceList.length },
|
||||
completedCount() { return this.resourceList.filter((item) => item.completeStatus === "completed" || Number(item.progressPercent || 0) >= 100).length },
|
||||
courseProgress() { if (!this.resourceCount) return 0; return Math.round(this.resourceList.reduce((total, item) => total + Number(item.progressPercent || 0), 0) / this.resourceCount) },
|
||||
learnableResources() { return this.resourceList.filter(item => item.allowPreview !== false) },
|
||||
resourceCount() { return this.learnableResources.length },
|
||||
completedCount() { return this.learnableResources.filter((item) => item.completeStatus === "completed" || Number(item.progressPercent || 0) >= 100).length },
|
||||
courseProgress() { return Number(this.course.progressPercent || 0) },
|
||||
currentResourceIndex() { return this.resourceList.findIndex((item) => item.id === this.selectedResource.id) },
|
||||
hasNextResource() { return this.currentResourceIndex >= 0 && this.currentResourceIndex < this.resourceList.length - 1 },
|
||||
isMediaResource() { return ["video", "audio"].includes(this.selectedResource.resourceType) }
|
||||
@@ -230,15 +244,16 @@ layout("/layouts/platform.html"){
|
||||
pauseSelectedMedia() { if (!["video", "audio"].includes(this.selectedResource.resourceType)) return; const player = this.$refs.mediaPlayer; if (player && !player.paused) player.pause() },
|
||||
startHeartbeatTimer() { this.stopHeartbeatTimer(); this.heartbeatTimer = setInterval(() => { if (!this.studying) return; if (this.isEffectiveLearning()) this.pendingSeconds += 1; if (this.pendingSeconds >= 15) this.heartbeat() }, 1000) },
|
||||
stopHeartbeatTimer() { if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); this.heartbeatTimer = null } },
|
||||
isEffectiveLearning() { if (document.hidden || Date.now() - this.lastActiveAt > this.inactiveLimit) return false; if (["video", "audio"].includes(this.selectedResource.resourceType)) { const player = this.$refs.mediaPlayer; return !!player && !player.paused && !player.ended } return true },
|
||||
isEffectiveLearning() { if (document.hidden) return false; if (["video", "audio"].includes(this.selectedResource.resourceType)) { const player = this.$refs.mediaPlayer; return !!player && !player.paused && !player.ended } return true },
|
||||
markActive() { this.lastActiveAt = Date.now() },
|
||||
applyRecordState(data) { this.recordProgress = Number(data.progressPercent || 0); this.recordStudyTime = data.studyTimeText || this.formatSeconds(Number(data.studySeconds || 0)); if (this.selectedResource.id && data.lastPositionSeconds !== undefined) this.$set(this.selectedResource, "lastPositionSeconds", Number(data.lastPositionSeconds || 0)); if (this.selectedResource.id && data.maxPositionSeconds !== undefined) { const maxPositionSeconds = Number(data.maxPositionSeconds || 0); this.$set(this.selectedResource, "maxPositionSeconds", maxPositionSeconds); this.lastAllowedPositionSeconds = Math.max(Number(this.lastAllowedPositionSeconds || 0), maxPositionSeconds) } const resource = this.resourceList.find(item => item.id === this.selectedResource.id); if (resource) { this.$set(resource, "progressPercent", this.recordProgress); this.$set(resource, "studySeconds", Number(data.studySeconds || 0)); this.$set(resource, "completeStatus", data.completeStatus || "studying"); if (data.maxPositionSeconds !== undefined) this.$set(resource, "maxPositionSeconds", Number(data.maxPositionSeconds || 0)) } },
|
||||
applyRecordState(data) { if (data && data.courseProgress) Object.keys(data.courseProgress).forEach(key => this.$set(this.course, key, data.courseProgress[key])); if (!data || data.resourceId !== this.selectedResource.id) return; this.recordProgress = Number(data.progressPercent || 0); this.recordStudyTime = data.studyTimeText || this.formatSeconds(Number(data.studySeconds || 0)); if (this.selectedResource.id && data.lastPositionSeconds !== undefined) this.$set(this.selectedResource, "lastPositionSeconds", Number(data.lastPositionSeconds || 0)); if (this.selectedResource.id && data.maxPositionSeconds !== undefined) { const maxPositionSeconds = Number(data.maxPositionSeconds || 0); this.$set(this.selectedResource, "maxPositionSeconds", maxPositionSeconds); this.lastAllowedPositionSeconds = Math.max(Number(this.lastAllowedPositionSeconds || 0), maxPositionSeconds) } const resource = this.resourceList.find(item => item.id === this.selectedResource.id); if (resource) { this.$set(resource, "progressPercent", this.recordProgress); this.$set(resource, "studySeconds", Number(data.studySeconds || 0)); this.$set(resource, "completeStatus", data.completeStatus || "studying"); if (data.maxPositionSeconds !== undefined) this.$set(resource, "maxPositionSeconds", Number(data.maxPositionSeconds || 0)) } },
|
||||
getMediaPosition() { if (!["video", "audio"].includes(this.selectedResource.resourceType)) return 0; const player = this.$refs.mediaPlayer; return player ? Math.floor(player.currentTime || 0) : Number(this.selectedResource.lastPositionSeconds || 0) },
|
||||
formatSeconds(seconds) { const hour = Math.floor(seconds / 3600); const minute = Math.floor(seconds % 3600 / 60); const second = Math.floor(seconds % 60); if (hour > 0) return hour + "小时" + minute + "分" + second + "秒"; if (minute > 0) return minute + "分" + second + "秒"; return second + "秒" },
|
||||
formatShortDuration(seconds) { const total = Number(seconds) || 0; if (!total) return ""; const minute = Math.floor(total / 60); const second = total % 60; return String(minute).padStart(2, "0") + ":" + String(second).padStart(2, "0") },
|
||||
formatCourseDuration(seconds) { const total = Number(seconds) || 0; if (total < 3600) return Math.max(1, Math.ceil(total / 60)) + "分钟"; const hour = Math.floor(total / 3600); const minute = Math.ceil(total % 3600 / 60); return minute ? hour + "小时" + minute + "分钟" : hour + "小时" },
|
||||
nextResource() { if (!this.hasNextResource) return; const next = this.resourceList[this.currentResourceIndex + 1]; const changeResource = () => { this.selectResource(next); this.$nextTick(() => { if (this.$refs.studyTree) this.$refs.studyTree.setCurrentKey(next.id) }) }; if (this.studying) { this.finishStudy(false, {silent: true}).then(changeResource) } else { changeResource() } },
|
||||
openFile() { if (this.fileUrl) window.open(this.fileUrl) },
|
||||
openFile() { if (!this.canPreview) return; const url = this.canInlinePreview(this.selectedResource) ? this.inlinePreviewUrl : this.mediaUrl; if (url) window.open(url) },
|
||||
downloadFile() { if (this.canDownload && this.downloadUrl) window.open(this.downloadUrl) },
|
||||
collapseAll() { const nodesMap = this.$refs.studyTree && this.$refs.studyTree.store.nodesMap; Object.keys(nodesMap || {}).forEach(key => { nodesMap[key].expanded = false }) },
|
||||
goBack() { this.saveServerPosition(this.getMediaPosition()); this.finishStudy(false, {silent: true}).then(() => { window.location.href = this.apiBase }) }
|
||||
},
|
||||
|
||||
@@ -38,7 +38,7 @@ layout("/layouts/platform.html"){
|
||||
</el-select>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button size="medium" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" type="primary" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
|
||||
@@ -15,7 +15,7 @@ layout("/layouts/platform.html"){
|
||||
</el-input>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button size="medium" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" type="primary" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
|
||||
@@ -5,20 +5,6 @@ layout("/layouts/platform.html"){
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<search :is-search-button="false">
|
||||
<search-item label="工号/姓名">
|
||||
<el-input
|
||||
v-model="pageForm.keyword"
|
||||
clearable
|
||||
placeholder="请输入工号或姓名"
|
||||
style="width: 100%"
|
||||
@keyup.enter.native="doSearch">
|
||||
</el-input>
|
||||
</search-item>
|
||||
<search-item label="所属分工会" v-if="unionOptions.length">
|
||||
<el-select v-model="pageForm.unionId" clearable filterable placeholder="请选择所属分工会" style="width: 100%">
|
||||
<el-option v-for="item in unionOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="课程名称">
|
||||
<el-select v-model="pageForm.courseId" clearable filterable placeholder="请选择课程" style="width: 100%">
|
||||
<el-option v-for="item in courseOptions" :key="item.id" :label="item.courseName" :value="item.id"></el-option>
|
||||
@@ -30,7 +16,7 @@ layout("/layouts/platform.html"){
|
||||
</el-select>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button size="medium" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" type="primary" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
@@ -88,7 +74,7 @@ layout("/layouts/platform.html"){
|
||||
return {
|
||||
apiBase: "/platform/learning/study/record",
|
||||
courseOptions: [],
|
||||
unionOptions: [],
|
||||
|
||||
statusOptions: [
|
||||
{ name: "未开始", code: "not_started", type: "info" },
|
||||
{ name: "学习中", code: "studying", type: "warning" },
|
||||
@@ -121,8 +107,6 @@ layout("/layouts/platform.html"){
|
||||
this.pageData()
|
||||
},
|
||||
resetSearch() {
|
||||
this.pageForm.keyword = ""
|
||||
this.pageForm.unionId = ""
|
||||
this.pageForm.courseId = ""
|
||||
this.pageForm.completeStatus = ""
|
||||
this.pageForm.pageNumber = 1
|
||||
@@ -133,10 +117,6 @@ layout("/layouts/platform.html"){
|
||||
if (courseResp.code === 0) {
|
||||
this.courseOptions = courseResp.data || []
|
||||
}
|
||||
const unionResp = await this.$axios.post(this.apiBase + "/unionOptions")
|
||||
if (unionResp.code === 0) {
|
||||
this.unionOptions = unionResp.data || []
|
||||
}
|
||||
},
|
||||
statusName(code) {
|
||||
const item = this.statusOptions.find(v => v.code === code)
|
||||
@@ -166,8 +146,6 @@ layout("/layouts/platform.html"){
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.$set(this.pageForm, "keyword", "")
|
||||
this.$set(this.pageForm, "unionId", "")
|
||||
this.$set(this.pageForm, "courseId", "")
|
||||
this.$set(this.pageForm, "completeStatus", "")
|
||||
await this.loadOptions()
|
||||
|
||||
@@ -4,7 +4,7 @@ layout("/layouts/platform.html"){
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<search :is-search-button="false">
|
||||
<div class="search">
|
||||
<search-item label="课程名称">
|
||||
<el-select
|
||||
v-model="pageForm.courseId"
|
||||
@@ -22,22 +22,36 @@ layout("/layouts/platform.html"){
|
||||
<el-option v-for="item in unionOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="工号" v-if="activeTab === 'records'">
|
||||
<el-input v-model="pageForm.loginName" clearable placeholder="请输入工号" @keyup.enter.native="doSearch"></el-input>
|
||||
</search-item>
|
||||
<search-item label="姓名" v-if="activeTab === 'records'">
|
||||
<el-input v-model="pageForm.userName" clearable placeholder="请输入姓名" @keyup.enter.native="doSearch"></el-input>
|
||||
</search-item>
|
||||
<search-item label="是否完成" v-if="activeTab === 'records'">
|
||||
<el-select v-model="pageForm.completeStatus" clearable placeholder="请选择完成状态" style="width: 100%">
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
<el-option label="未完成" value="incomplete"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button size="medium" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" type="primary" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<el-tabs v-model="activeTab" @tab-click="tabChange">
|
||||
<el-tabs v-model="activeTab" @tab-click="tabChange" style="margin-bottom: 12px">
|
||||
<el-tab-pane label="课程统计" name="course"></el-tab-pane>
|
||||
<el-tab-pane label="分工会统计" name="union"></el-tab-pane>
|
||||
<el-tab-pane label="学习列表" name="records"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<table-tool :app="this" :label="activeTab === 'course' ? '课程统计' : '分工会统计'"></table-tool>
|
||||
<table-tool :app="this" :label="activeTab === 'course' ? '课程统计' : activeTab === 'union' ? '分工会统计' : '学习列表'"></table-tool>
|
||||
<el-table
|
||||
v-if="activeTab === 'course'"
|
||||
key="course-statistics"
|
||||
v-loading="tableLoading"
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@@ -47,13 +61,15 @@ layout("/layouts/platform.html"){
|
||||
<el-table-column align="center" header-align="center" label="课程名称" prop="courseName" sortable="custom" show-overflow-tooltip min-width="220" ></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="学习人数" prop="learnerCount" sortable="custom" width="130"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="完成人数" prop="completedCount" sortable="custom" width="130"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="完成率" prop="completeRate" sortable="custom" width="130"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="平均学习时长" prop="avgStudySeconds" sortable="custom" width="170">
|
||||
<template slot-scope="{row}">{{row.avgStudyTimeText}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-table
|
||||
v-else
|
||||
v-else-if="activeTab === 'union'"
|
||||
key="union-statistics"
|
||||
v-loading="tableLoading"
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@@ -63,11 +79,35 @@ layout("/layouts/platform.html"){
|
||||
<el-table-column align="center" header-align="center" label="课程名称" prop="courseName" sortable="custom" show-overflow-tooltip min-width="220"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="分工会名称" prop="unionName" sortable="custom" show-overflow-tooltip min-width="170"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="学习人数" prop="learnerCount" sortable="custom" width="130"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="完成人数" prop="completedCount" sortable="custom" width="130"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="学习时长" prop="studySeconds" sortable="custom" width="160">
|
||||
<template slot-scope="{row}">{{row.studyTimeText}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="完成率" prop="completeRate" sortable="custom" width="130"></el-table-column>
|
||||
</el-table>
|
||||
<el-table v-else key="learning-records" v-loading="tableLoading" :data="tableData" :size="tableSize" border @sort-change="pageOrder">
|
||||
<el-table-column :index="indexMethod" align="center" label="序号" type="index" width="70"></el-table-column>
|
||||
<el-table-column align="center" label="工号" prop="loginName" sortable="custom" show-overflow-tooltip width="120"></el-table-column>
|
||||
<el-table-column align="center" label="姓名" prop="userName" sortable="custom" show-overflow-tooltip width="110"></el-table-column>
|
||||
<el-table-column align="center" label="所属分工会" prop="unionName" sortable="custom" show-overflow-tooltip min-width="150"></el-table-column>
|
||||
<el-table-column align="center" label="课程名称" prop="courseName" sortable="custom" show-overflow-tooltip min-width="180"></el-table-column>
|
||||
<el-table-column align="center" label="章节名称" prop="outlineName" sortable="custom" show-overflow-tooltip min-width="160"></el-table-column>
|
||||
<el-table-column align="center" label="学习开始时间" prop="firstStudyTime" sortable="custom" width="170">
|
||||
<template slot-scope="{row}">{{formatTime(row.firstStudyTime)}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="最近学习时间" prop="latestStudyTime" sortable="custom" width="170">
|
||||
<template slot-scope="{row}">{{formatTime(row.latestStudyTime)}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="学习时长" prop="studySeconds" sortable="custom" width="130">
|
||||
<template slot-scope="{row}">{{row.studyTimeText}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="学习进度" prop="progressPercent" sortable="custom" width="180">
|
||||
<template slot-scope="{row}"><el-progress :percentage="Number(row.progressPercent || 0)" :stroke-width="8"></el-progress></template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否完成" prop="completeStatus" sortable="custom" width="110">
|
||||
<template slot-scope="{row}"><el-tag :type="row.completeStatus === 'completed' ? 'success' : 'warning'" size="mini">{{row.completeStatus === 'completed' ? '已完成' : '未完成'}}</el-tag></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</guava>
|
||||
@@ -82,15 +122,17 @@ layout("/layouts/platform.html"){
|
||||
apiBase: "/platform/learning/statistics",
|
||||
activeTab: "course",
|
||||
courseOptions: [],
|
||||
unionOptions: []
|
||||
unionOptions: [],
|
||||
requestSeq: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
const url = this.activeTab === "course" ? "/coursePageData" : "/unionPageData"
|
||||
this.$axios.post(this.apiBase + url, this.pageForm).then(resp => {
|
||||
this.tableLoading = false
|
||||
const requestSeq = ++this.requestSeq
|
||||
const urls = { course: "/coursePageData", union: "/unionPageData", records: "/recordPageData" }
|
||||
this.$axios.post(this.apiBase + urls[this.activeTab], this.pageForm).then(resp => {
|
||||
if (requestSeq !== this.requestSeq) return
|
||||
if (resp.code === 0) {
|
||||
this.tableData = resp.data.list || []
|
||||
this.pageForm.totalCount = resp.data.totalCount
|
||||
@@ -98,9 +140,14 @@ layout("/layouts/platform.html"){
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.tableLoading = false
|
||||
if (requestSeq === this.requestSeq) this.$message.warning("查询失败")
|
||||
}).finally(() => {
|
||||
if (requestSeq === this.requestSeq) this.tableLoading = false
|
||||
})
|
||||
},
|
||||
formatTime(value) {
|
||||
return value ? this.$moment(value).format("YYYY-MM-DD HH:mm:ss") : ""
|
||||
},
|
||||
pageOrder(column) {
|
||||
this.pageForm.pageOrderName = column.prop
|
||||
this.pageForm.pageOrderBy = column.order
|
||||
@@ -114,6 +161,9 @@ layout("/layouts/platform.html"){
|
||||
async resetSearch() {
|
||||
this.pageForm.courseId = ""
|
||||
this.pageForm.unionId = ""
|
||||
this.pageForm.loginName = ""
|
||||
this.pageForm.userName = ""
|
||||
this.pageForm.completeStatus = ""
|
||||
this.pageForm.pageOrderName = ""
|
||||
this.pageForm.pageOrderBy = ""
|
||||
this.pageForm.pageNumber = 1
|
||||
@@ -122,7 +172,9 @@ layout("/layouts/platform.html"){
|
||||
this.pageData()
|
||||
},
|
||||
async tabChange() {
|
||||
this.requestSeq += 1
|
||||
this.tableData = []
|
||||
this.pageForm.totalCount = 0
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.pageOrderName = ""
|
||||
this.pageForm.pageOrderBy = ""
|
||||
@@ -156,6 +208,9 @@ layout("/layouts/platform.html"){
|
||||
async created() {
|
||||
this.$set(this.pageForm, "courseId", "")
|
||||
this.$set(this.pageForm, "unionId", "")
|
||||
this.$set(this.pageForm, "loginName", "")
|
||||
this.$set(this.pageForm, "userName", "")
|
||||
this.$set(this.pageForm, "completeStatus", "")
|
||||
await this.queryCourseOptions("")
|
||||
await this.loadUnionOptions()
|
||||
this.pageData()
|
||||
|
||||
@@ -15,58 +15,6 @@ layout("/layouts/platform_h5.html"){
|
||||
.learning-course-page .van-nav-bar {
|
||||
background: #f4f7fb;
|
||||
}
|
||||
.learning-banner-wrap {
|
||||
flex-shrink: 0;
|
||||
padding: 10px 14px 0;
|
||||
}
|
||||
.learning-banner {
|
||||
height: 128px;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: #dce7f5;
|
||||
}
|
||||
.learning-banner-item {
|
||||
position: relative;
|
||||
height: 128px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0b75bd, #33b3a6);
|
||||
}
|
||||
.learning-banner-item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.learning-banner-fallback {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 22px;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 14% 20%, rgba(255,255,255,.26), transparent 22%),
|
||||
linear-gradient(135deg, #0b75bd, #35b6a8 55%, #f6b24d);
|
||||
}
|
||||
.learning-banner-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 28px 14px 12px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
background: linear-gradient(to top, rgba(15, 23, 42, .64), transparent);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.learning-banner-fallback .learning-banner-title {
|
||||
position: static;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.learning-filter-card {
|
||||
flex-shrink: 0;
|
||||
margin: 10px 10px 0;
|
||||
@@ -101,8 +49,7 @@ layout("/layouts/platform_h5.html"){
|
||||
color: #26354c;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.learning-filter-category-main,
|
||||
.learning-filter-category-actions {
|
||||
.learning-filter-category-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -116,48 +63,39 @@ layout("/layouts/platform_h5.html"){
|
||||
color: #1677ff;
|
||||
font-size: 17px;
|
||||
}
|
||||
.learning-filter-selected-count {
|
||||
color: #97a4b7;
|
||||
font-size: 11px;
|
||||
}
|
||||
.learning-filter-reset,
|
||||
.learning-filter-collapse {
|
||||
margin-left: 12px;
|
||||
color: #4d92ec;
|
||||
font-size: 11px;
|
||||
}
|
||||
.learning-filter-collapse .van-icon {
|
||||
margin-left: 2px;
|
||||
font-size: 11px;
|
||||
vertical-align: -1px;
|
||||
}
|
||||
.learning-filter-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px 9px;
|
||||
padding: 0 1px 10px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
gap: 6px;
|
||||
padding: 4px 1px 10px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.learning-filter-options::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.learning-filter-item {
|
||||
flex: 1 0 calc((100% - 18px) / 3);
|
||||
min-width: 0;
|
||||
height: 22px;
|
||||
padding: 0 7px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 62px;
|
||||
height: 26px;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dce5f1;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e8f2ff;
|
||||
border-radius: 999px;
|
||||
background: #f0f7ff;
|
||||
text-align: center;
|
||||
color: #718096;
|
||||
font-size: 11px;
|
||||
color: #7c899c;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.learning-filter-item.active {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
background: #287ff0;
|
||||
border-color: #287ff0;
|
||||
box-shadow: 0 2px 5px rgba(40, 127, 240, .2);
|
||||
font-weight: 400;
|
||||
background: #1989fa;
|
||||
border-color: #1989fa;
|
||||
}
|
||||
.learning-filter-name {
|
||||
overflow: hidden;
|
||||
@@ -185,30 +123,35 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
.learning-course-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
min-height: 104px;
|
||||
margin-bottom: 12px;
|
||||
padding: 14px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.learning-course-cover {
|
||||
position: relative;
|
||||
flex: 0 0 142px;
|
||||
width: 142px;
|
||||
height: 82px;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #e6edf6;
|
||||
}
|
||||
.learning-course-cover img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.learning-course-cover-empty {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -228,6 +171,7 @@ layout("/layouts/platform_h5.html"){
|
||||
.learning-course-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -278,37 +222,12 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
@media (max-width: 360px) {
|
||||
.learning-filter-card { margin-left: 8px; margin-right: 8px; padding-left: 8px; padding-right: 8px; }
|
||||
.learning-filter-reset, .learning-filter-collapse { margin-left: 8px; }
|
||||
.learning-filter-item { padding-left: 4px; padding-right: 4px; }
|
||||
.learning-course-cover {
|
||||
flex-basis: 120px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" class="learning-course-page" v-cloak>
|
||||
<van-nav-bar title="学习教育" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<div class="learning-banner-wrap">
|
||||
<van-swipe class="learning-banner" :autoplay="3500" indicator-color="#ffffff">
|
||||
<van-swipe-item v-for="course in bannerCourses" :key="course.id" @click="openCourse(course)">
|
||||
<div class="learning-banner-item">
|
||||
<img v-if="getCoverUrl(course.cover)" :src="getCoverUrl(course.cover)" :alt="course.courseName">
|
||||
<div v-else class="learning-banner-fallback">
|
||||
<div class="learning-banner-title">{{ course.courseName || '学习教育' }}</div>
|
||||
</div>
|
||||
<div v-if="getCoverUrl(course.cover)" class="learning-banner-title">{{ course.courseName || '学习教育' }}</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
<van-swipe-item v-if="!bannerCourses.length">
|
||||
<div class="learning-banner-item learning-banner-fallback">
|
||||
<div class="learning-banner-title">学习教育</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
|
||||
<div class="learning-filter-card">
|
||||
<div class="learning-filter-group" v-for="group in filterGroups" :key="group.key">
|
||||
<div class="learning-filter-category">
|
||||
@@ -316,13 +235,8 @@ layout("/layouts/platform_h5.html"){
|
||||
<van-icon :name="group.icon"></van-icon>
|
||||
<div class="learning-filter-category-title">{{ group.name }}</div>
|
||||
</div>
|
||||
<div class="learning-filter-category-actions">
|
||||
<span class="learning-filter-selected-count">已选{{ selectedFilterCount(group) }}项</span>
|
||||
<span class="learning-filter-reset" @click.stop="resetGroupFilter(group)">重置</span>
|
||||
<span class="learning-filter-collapse" @click.stop="toggleFilterGroup(group.key)">{{ filterCollapsed[group.key] ? '展开' : '收起' }}<van-icon :name="filterCollapsed[group.key] ? 'arrow-down' : 'arrow-up'"></van-icon></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!filterCollapsed[group.key]" class="learning-filter-options">
|
||||
<div class="learning-filter-options">
|
||||
<div
|
||||
v-for="item in group.items"
|
||||
:key="item.key"
|
||||
@@ -346,7 +260,7 @@ layout("/layouts/platform_h5.html"){
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
:immediate-check="false"
|
||||
finished-text="没有更多了"
|
||||
:finished-text="courseList.length ? '没有更多了' : ''"
|
||||
@load="onLoad">
|
||||
<div class="learning-course-list">
|
||||
<div
|
||||
@@ -396,14 +310,12 @@ layout("/layouts/platform_h5.html"){
|
||||
totalCount: 0
|
||||
},
|
||||
courseList: [],
|
||||
bannerCourses: [],
|
||||
courseTypeOptions: [],
|
||||
recommendOptions: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
requestSeq: 0,
|
||||
filterCollapsed: { recommend: false, type: false }
|
||||
requestSeq: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -494,7 +406,6 @@ layout("/layouts/platform_h5.html"){
|
||||
this.pageForm.totalCount = data.totalCount || 0
|
||||
this.pageForm.pageNumber += 1
|
||||
this.finished = this.courseList.length >= this.pageForm.totalCount
|
||||
this.syncBannerCourses()
|
||||
} else {
|
||||
this.finished = true
|
||||
this.$toast(res.msg || "查询失败")
|
||||
@@ -523,26 +434,6 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
this.doSearch()
|
||||
},
|
||||
// 切换指定筛选组的展开状态，不改变该组已选择的查询条件。
|
||||
toggleFilterGroup(groupKey) {
|
||||
this.$set(this.filterCollapsed, groupKey, !this.filterCollapsed[groupKey])
|
||||
},
|
||||
// 重置指定筛选组并重新查询；推荐标识和课程类型可独立恢复为全部。
|
||||
resetGroupFilter(group) {
|
||||
if (!group) return
|
||||
if (group.key === "recommend") {
|
||||
this.query.recommendFlag = ""
|
||||
} else if (group.key === "type") {
|
||||
this.query.courseTypeId = ""
|
||||
}
|
||||
this.doSearch()
|
||||
},
|
||||
selectedFilterCount(group) {
|
||||
if (!group) return 0
|
||||
if (group.key === "recommend") return this.query.recommendFlag ? 1 : 0
|
||||
if (group.key === "type") return this.query.courseTypeId ? 1 : 0
|
||||
return 0
|
||||
},
|
||||
isFilterActive(item) {
|
||||
if (!item) return false
|
||||
if (item.type === "recommend") {
|
||||
@@ -553,10 +444,6 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
return false
|
||||
},
|
||||
syncBannerCourses() {
|
||||
const withCover = this.courseList.filter(item => this.getCoverUrl(item.cover)).slice(0, 5)
|
||||
this.bannerCourses = (withCover.length ? withCover : this.courseList.slice(0, 5))
|
||||
},
|
||||
getCoverUrl(cover) {
|
||||
if (!cover) return ""
|
||||
if (Array.isArray(cover)) {
|
||||
|
||||
@@ -3,202 +3,89 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.learning-study-page {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
.study-hero {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 195px;
|
||||
background: linear-gradient(135deg, #7554e8, #48b7f0);
|
||||
overflow: hidden;
|
||||
}
|
||||
.study-hero img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.study-hero-empty {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
color: #ffffff;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.study-back {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 8px;
|
||||
z-index: 2;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
background: rgba(15, 23, 42, .22);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.study-title-block {
|
||||
flex-shrink: 0;
|
||||
padding: 16px 18px 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.study-title {
|
||||
color: #202733;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.study-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-top: 14px;
|
||||
color: #8a93a3;
|
||||
font-size: 14px;
|
||||
}
|
||||
.study-meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.study-tabs {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
}
|
||||
.study-tabs .van-tabs__content {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.study-tabs .van-tabs__wrap {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.study-tabs .van-tabs__track {
|
||||
height: 100%;
|
||||
}
|
||||
.study-tabs .van-tab__pane {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.study-intro-scroll,
|
||||
.study-catalog-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
.study-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 18px;
|
||||
color: #8b94a3;
|
||||
font-size: 16px;
|
||||
}
|
||||
.study-summary strong {
|
||||
color: #202733;
|
||||
font-size: 20px;
|
||||
}
|
||||
.study-card {
|
||||
margin: 18px;
|
||||
padding: 14px 0;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
|
||||
overflow: hidden;
|
||||
}
|
||||
.study-chapter {
|
||||
padding: 0 18px;
|
||||
}
|
||||
.study-chapter-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0 16px;
|
||||
color: #202733;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.study-chapter-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #ff9b2f;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.study-resource {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 14px 0 12px 18px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
.study-resource-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-top: 2px;
|
||||
border-radius: 3px;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.study-resource-icon.video {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
.study-resource-icon.audio {
|
||||
background: #33b3a6;
|
||||
}
|
||||
.study-resource-icon.image {
|
||||
background: #5a94f2;
|
||||
}
|
||||
.study-resource-icon.doc {
|
||||
background: #ff6868;
|
||||
}
|
||||
.study-resource-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.study-resource-title {
|
||||
color: #5c6470;
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.study-resource-status {
|
||||
margin-top: 8px;
|
||||
color: #a2a9b5;
|
||||
font-size: 15px;
|
||||
}
|
||||
.study-intro {
|
||||
padding: 18px;
|
||||
color: #4e5969;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
background: #ffffff;
|
||||
min-height: 180px;
|
||||
}
|
||||
.learning-study-page { height: 100vh; height: 100dvh; overflow-y: auto; background: #f5f8fd; color: #152238; -webkit-overflow-scrolling: touch; }
|
||||
.study-hero { position: relative; min-height: 240px; background: linear-gradient(135deg, #172a49, #427ac2); overflow: hidden; }
|
||||
.study-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
||||
.study-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 19, 37, .86), rgba(10, 19, 37, .15)), linear-gradient(0deg, rgba(10, 19, 37, .75), transparent); }
|
||||
.study-back { position: absolute; top: 12px; left: 14px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; }
|
||||
.study-title-block { position: relative; z-index: 1; padding: 65px 16px 30px; color: #fff; }
|
||||
.study-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; margin-bottom: 9px; border-radius: 12px; background: rgba(154, 91, 0, .72); color: #fff4d8; font-size: 12px; }
|
||||
.study-title { font-size: 23px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
|
||||
.study-subtitle { margin-top: 7px; color: #d4deed; font-size: 13px; line-height: 1.6; }
|
||||
.study-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; color: #d4deed; font-size: 12px; }
|
||||
.study-meta-item { display: inline-flex; align-items: center; gap: 5px; }
|
||||
.study-content { position: relative; z-index: 1; margin-top: -16px; padding: 8px 14px 24px; border-radius: 20px 20px 0 0; background: #f5f8fd; }
|
||||
.study-navigation { display: flex; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: #fff; }
|
||||
.study-navigation button { position: relative; flex: 1; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: #667b9a; font-size: 12px; }
|
||||
.study-navigation .van-icon { display: block; margin-bottom: 4px; font-size: 20px; }
|
||||
.study-navigation .active { color: #1677ff; background: #f2f7ff; font-weight: 700; }
|
||||
.study-navigation .active::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 12px); width: 24px; height: 3px; border-radius: 2px; background: #1677ff; }
|
||||
.study-progress-card, .study-card { padding: 16px; margin-bottom: 14px; border-radius: 16px; background: #fff; }
|
||||
.study-progress-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; }
|
||||
.study-progress-main { flex: 1; min-width: 0; }
|
||||
.study-progress-title { margin-bottom: 4px; font-size: 13px; font-weight: 700; line-height: 1.4; }
|
||||
.study-progress-line { display: flex; align-items: center; gap: 8px; color: #1677ff; font-size: 16px; font-weight: 700; line-height: 1.2; }
|
||||
.study-progress-line .van-progress { flex: 1; min-width: 0; overflow: hidden; }
|
||||
.study-progress-line > span { flex: 0 0 3.5em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.study-progress-note { margin-top: 4px; color: #7a8ca6; font-size: 10px; line-height: 1.4; }
|
||||
.study-action { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border: 1px solid #dbe9ff; border-radius: 20px; background: #f6faff; color: #1677ff; font-size: 12px; white-space: nowrap; }
|
||||
.study-action:disabled { color: #a3afbf; background: #f5f6f8; }
|
||||
.study-continue { padding: 9px 12px; border: 0; background: #e8f1ff; font-size: 12px; font-weight: 700; line-height: 1.5; }
|
||||
.study-section-head { display: flex; align-items: center; gap: 8px; margin: 20px 0 14px; }
|
||||
.study-section-head strong { font-size: 20px; }
|
||||
.study-section-head small { color: #7a8ca6; font-size: 12px; }
|
||||
.study-text-button { margin-left: auto; border: 0; padding: 4px 0; background: transparent; color: #7a8ca6; font-size: 12px; white-space: nowrap; }
|
||||
.study-chapter-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; border: 0; background: transparent; color: #152238; text-align: left; font-size: 16px; font-weight: 700; }
|
||||
.study-chapter-head > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
|
||||
.study-chapter-dot { flex-shrink: 0; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #1677ff; border-radius: 50%; box-shadow: 0 0 0 6px #edf5ff; margin: 0 4px; }
|
||||
.study-chapter-description { margin: 12px 0 4px 27px; color: #7a8ca6; font-size: 13px; line-height: 1.7; white-space: pre-line; }
|
||||
.study-resource { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid #edf1f7; }
|
||||
.study-resource:last-child { padding-bottom: 0; border-bottom: 0; }
|
||||
.study-resource-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 34px; border-radius: 7px; color: #fff; font-size: 23px; }
|
||||
.study-resource-icon.video { background: #ffb723; }
|
||||
.study-resource-icon.audio { background: #33b3a6; }
|
||||
.study-resource-icon.image { background: #5a94f2; }
|
||||
.study-resource-icon.word { background: transparent; font-size: 34px; }
|
||||
.study-resource-icon.doc { background: #ff6868; }
|
||||
.study-resource-main { flex: 1; min-width: 0; }
|
||||
.study-resource-title { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
|
||||
.study-resource-status { margin-top: 5px; color: #7a8ca6; font-size: 11px; line-height: 1.6; }
|
||||
.study-resource-status .completed { color: #2fc78c; }
|
||||
.study-download-list { padding: 0 12px; border-radius: 12px; background: #fff; }
|
||||
.study-download-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 0; box-sizing: border-box; border-bottom: 1px solid #edf1f7; }
|
||||
.study-download-row:last-child { border-bottom: 0; }
|
||||
.study-download-icon { flex-shrink: 0; width: 34px; height: 38px; object-fit: contain; }
|
||||
.study-download-info { flex: 1; min-width: 0; }
|
||||
.study-download-name { color: #26364c; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
|
||||
.study-download-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; color: #8b9ab0; font-size: 12px; line-height: 1.5; }
|
||||
.study-download-meta:empty { display: none; }
|
||||
.study-download-button { flex-shrink: 0; min-width: 54px; padding: 5px 12px; border: 1px solid #cce2ff; border-radius: 18px; background: #f5faff; color: #1989fa; font-size: 12px; line-height: 1.5; }
|
||||
.study-catalog-card { padding: 14px 12px; }
|
||||
.study-catalog-card .study-chapter-head { gap: 10px; font-size: 15px; line-height: 1.5; }
|
||||
.study-catalog-card .study-chapter-head > .van-icon { color: #7a8ca6; font-size: 14px; }
|
||||
.study-chapter-body { position: relative; padding-left: 26px; }
|
||||
.study-chapter-body::before { content: ""; position: absolute; top: 5px; bottom: 24px; left: 9px; width: 1px; transform: translateX(-50%); background: #e8eef7; }
|
||||
.study-catalog-card .study-chapter-description { margin: 8px 0 4px; color: #8293ad; font-size: 12px; line-height: 1.6; }
|
||||
.study-catalog-card .study-resource { position: relative; gap: 9px; padding: 14px 0; }
|
||||
.study-catalog-card .study-resource::before { content: ""; position: absolute; top: 50%; left: -17px; width: 8px; height: 8px; box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid #96aaca; border-radius: 50%; background: #fff; }
|
||||
.study-catalog-card .study-resource:last-child { padding-bottom: 10px; }
|
||||
.study-catalog-card .study-resource-title { font-size: 13px; font-weight: 600; line-height: 1.5; }
|
||||
.study-catalog-card .study-resource-status { margin-top: 3px; font-size: 10px; }
|
||||
.study-catalog-card .study-resource-icon { width: 28px; height: 32px; font-size: 21px; }
|
||||
.study-catalog-card .study-resource-icon.word, .study-catalog-card .study-resource-icon.pdf { background: transparent; font-size: 30px; }
|
||||
.study-catalog-card .study-action { padding: 5px 9px; font-size: 11px; }
|
||||
.study-catalog-card .completed .van-icon { margin-right: 3px; vertical-align: -1px; }
|
||||
.study-intro { padding: 14px; margin-bottom: 10px; border-radius: 12px; background: #fff; color: #7a8ca6; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
|
||||
.study-intro h3 { margin: 0 0 7px; color: #26364c; font-size: 14px; line-height: 1.5; font-weight: 700; }
|
||||
.study-intro-text { white-space: pre-line; }
|
||||
.study-goals { margin: 0; padding: 0; list-style: none; }
|
||||
.study-goals li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
|
||||
.study-goals li:last-child { margin-bottom: 0; }
|
||||
.study-goals .van-icon { flex-shrink: 0; margin-top: 3px; color: #1989fa; font-size: 14px; }
|
||||
.study-audience { display: flex; align-items: flex-start; gap: 10px; }
|
||||
.study-audience > .van-icon { flex-shrink: 0; padding: 4px; border-radius: 6px; color: #1989fa; background: #edf6ff; font-size: 22px; }
|
||||
.study-audience > span { padding-top: 4px; white-space: pre-line; }
|
||||
@media (max-width: 359px) { .study-action { padding: 6px 8px; } }
|
||||
.study-player-popup {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
@@ -297,75 +184,106 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
<div id="app" class="learning-study-page" v-cloak>
|
||||
<div class="study-hero">
|
||||
<div class="study-back" @click="goBack"><van-icon name="arrow-left"></van-icon></div>
|
||||
<button type="button" class="study-back" aria-label="返回" @click="goBack"><van-icon name="arrow-left"></van-icon></button>
|
||||
<img v-if="coverUrl" :src="coverUrl" :alt="course.courseName">
|
||||
<div v-else class="study-hero-empty">{{ course.courseName || '课程学习' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="study-title-block">
|
||||
<div class="study-title">{{ course.courseName || '课程学习' }}</div>
|
||||
<div class="study-meta">
|
||||
<span class="study-meta-item"><van-icon name="eye-o"></van-icon>{{ studyCountText }}</span>
|
||||
<span class="study-meta-item"><van-icon name="bookmark-o"></van-icon>收藏</span>
|
||||
<span class="study-meta-item"><van-icon name="share-o"></van-icon>分享</span>
|
||||
<div class="study-title-block">
|
||||
<div v-if="courseBadge" class="study-badge"><van-icon name="fire"></van-icon>{{ courseBadge }}</div>
|
||||
<div class="study-title">{{ course.courseName || '课程学习' }}</div>
|
||||
<div v-if="course.courseTags" class="study-subtitle">{{ course.courseTags }}</div>
|
||||
<div v-if="course.lecturerName" class="study-meta">
|
||||
<span v-if="course.lecturerName" class="study-meta-item"><van-icon name="manager"></van-icon>{{ course.lecturerName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-tabs v-model="activeTab" class="study-tabs" color="#2d9cff" line-width="34px" title-active-color="#202733">
|
||||
<van-tab title="课程介绍" name="intro">
|
||||
<div class="study-intro-scroll">
|
||||
<div class="study-intro">{{ course.courseIntro || '暂无课程介绍' }}</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab title="课程目录" name="catalog">
|
||||
<div class="study-catalog-scroll">
|
||||
<div class="study-summary">
|
||||
<div>共 <strong>{{ chapterCount }}</strong> 个章节，<strong>{{ totalMinutes }}</strong> 分钟</div>
|
||||
<div>总学习进度 <strong>{{ totalProgress }}%</strong></div>
|
||||
<div class="study-content">
|
||||
<nav class="study-navigation" aria-label="课程详情">
|
||||
<button v-for="tab in detailTabs" :key="tab.name" type="button" :class="{ active: activeTab === tab.name }" :aria-pressed="activeTab === tab.name" @click="activeTab = tab.name">
|
||||
<van-icon :name="tab.icon"></van-icon>{{ tab.title }}
|
||||
</button>
|
||||
</nav>
|
||||
<div v-if="activeTab === 'intro'" class="study-introduction">
|
||||
<section class="study-intro">
|
||||
<h3>课程简介</h3>
|
||||
<div class="study-intro-text">{{ course.courseIntro || '暂无课程简介' }}</div>
|
||||
</section>
|
||||
<section class="study-intro">
|
||||
<h3>学习目标</h3>
|
||||
<ul v-if="learningGoals.length" class="study-goals">
|
||||
<li v-for="(goal, index) in learningGoals" :key="index"><van-icon name="checked"></van-icon><span>{{ goal }}</span></li>
|
||||
</ul>
|
||||
<div v-else class="study-intro-text">暂无学习目标</div>
|
||||
</section>
|
||||
<section class="study-intro">
|
||||
<h3>适用人群</h3>
|
||||
<div class="study-audience"><van-icon name="manager"></van-icon><span>{{ course.suitablePeople || '暂无适用人群说明' }}</span></div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-if="activeTab === 'catalog'">
|
||||
<div v-if="Number(course.outlineCount || 0) > 0" class="study-progress-card">
|
||||
<div class="study-progress-main">
|
||||
<div class="study-progress-title">学习进度</div>
|
||||
<div class="study-progress-line"><van-progress :percentage="totalProgress" :show-pivot="false" stroke-width="8" color="#1989fa"></van-progress><span>{{ totalProgress }}%</span></div>
|
||||
<div class="study-progress-note">已完成 {{ completedChapterCount }} 个章节，共 {{ totalMinutes }} 分钟</div>
|
||||
</div>
|
||||
|
||||
<div v-for="chapter in catalogList" :key="chapter.id" class="study-card">
|
||||
<div class="study-chapter">
|
||||
<div class="study-chapter-head" @click="selectChapter(chapter)">
|
||||
<span class="study-chapter-dot"></span>
|
||||
<span>{{ chapter.title }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="resource in chapter.resources"
|
||||
:key="resource.id"
|
||||
class="study-resource"
|
||||
@click="openResource(resource)">
|
||||
<div class="study-resource-icon" :class="resourceIconClass(resource)">
|
||||
<van-icon :name="resourceIcon(resource)"></van-icon>
|
||||
</div>
|
||||
<div class="study-resource-main">
|
||||
<div class="study-resource-title">{{ resource.title }}</div>
|
||||
<div class="study-resource-status">{{ statusText(resource) }}</div>
|
||||
</div>
|
||||
<button type="button" class="study-action study-continue" :disabled="!learnableResources.length" @click="continueStudy"><van-icon name="play"></van-icon>{{ totalProgress ? '继续学习' : '开始学习' }}</button>
|
||||
</div>
|
||||
<div class="study-section-head">
|
||||
<strong>课程目录</strong><small>共 {{ chapterCount }} 个章节</small>
|
||||
<button v-if="chapterCount" type="button" class="study-text-button" @click="toggleAllChapters">{{ allChaptersCollapsed ? '展开全部' : '收起全部' }} <van-icon :name="allChaptersCollapsed ? 'arrow-down' : 'arrow-up'"></van-icon></button>
|
||||
</div>
|
||||
<div v-for="chapter in catalogList" :key="chapter.id" class="study-card study-catalog-card">
|
||||
<button type="button" class="study-chapter-head" :aria-expanded="!collapsedChapters[chapter.id]" @click="toggleChapter(chapter.id)">
|
||||
<span class="study-chapter-dot"></span><span>{{ chapter.title }}</span><van-icon :name="collapsedChapters[chapter.id] ? 'arrow-down' : 'arrow-up'"></van-icon>
|
||||
</button>
|
||||
<div v-show="!collapsedChapters[chapter.id]" class="study-chapter-body">
|
||||
<div v-if="chapter.description" class="study-chapter-description">{{ chapter.description }}</div>
|
||||
<div v-for="resource in chapter.resources" :key="resource.id" class="study-resource">
|
||||
<div class="study-resource-icon" :class="resourceIconClass(resource)"><van-icon :name="resourceIcon(resource)"></van-icon></div>
|
||||
<div class="study-resource-main">
|
||||
<div class="study-resource-title">{{ resource.title }}</div>
|
||||
<div class="study-resource-status">{{ resourceMeta(resource) }} · <span :class="{ completed: resource.studied && resource.completeStatus === 'completed' }"><van-icon v-if="resource.completeStatus === 'completed'" name="checked"></van-icon>{{ statusText(resource) }}</span></div>
|
||||
</div>
|
||||
<button type="button" class="study-action" :disabled="resource.allowPreview === false" @click="openResource(resource)"><van-icon name="play"></van-icon>{{ resource.allowPreview === false ? '不可学习' : resource.studied ? '再次学习' : '学习' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-empty v-if="!catalogList.length" description="暂无课程目录"></van-empty>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<van-empty v-if="!catalogList.length" description="暂无课程目录"></van-empty>
|
||||
</div>
|
||||
<div v-if="activeTab === 'downloads'" class="study-downloads">
|
||||
<div v-if="downloadableResources.length" class="study-download-list">
|
||||
<div v-for="resource in downloadableResources" :key="resource.id" class="study-download-row">
|
||||
<img class="study-download-icon" :src="downloadIcon(resource)" alt="">
|
||||
<div class="study-download-info">
|
||||
<div class="study-download-name">{{ downloadFileInfo(resource).name || resource.title }}</div>
|
||||
<div class="study-download-meta">
|
||||
<span v-if="downloadSize(resource)">{{ downloadSize(resource) }}</span>
|
||||
<span v-if="downloadDate(resource)">{{ downloadDate(resource) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="study-download-button" @click="downloadResource(resource)">下载</button>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty v-else description="暂无可下载资料"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="playerVisible" position="bottom" class="study-player-popup" :overlay="false">
|
||||
<div class="study-player-head">
|
||||
<div class="study-player-title">{{ selectedResource.title || '学习资料' }}</div>
|
||||
<div class="study-player-actions">
|
||||
<span v-if="selectedResource.resourceType === 'video'" @click="enterVideoFullscreen">横屏</span>
|
||||
<span v-if="canPreview && selectedResource.resourceType === 'video'" @click="enterVideoFullscreen">横屏</span>
|
||||
<span @click="closePlayer">退出</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="study-player-body">
|
||||
<div v-if="!canPreview" class="study-file-fallback">该资料不允许预览</div>
|
||||
<video
|
||||
v-if="selectedResource.resourceType === 'video'"
|
||||
v-else-if="selectedResource.resourceType === 'video'"
|
||||
ref="mediaPlayer"
|
||||
class="study-media"
|
||||
:src="mediaUrl"
|
||||
controls
|
||||
:controlslist="canDownload ? null : 'nodownload'"
|
||||
playsinline
|
||||
webkit-playsinline
|
||||
x5-video-player-type="h5"
|
||||
@@ -383,7 +301,9 @@ layout("/layouts/platform_h5.html"){
|
||||
<audio
|
||||
ref="mediaPlayer"
|
||||
:src="fileUrl"
|
||||
preload="metadata"
|
||||
controls
|
||||
:controlslist="canDownload ? null : 'nodownload'"
|
||||
@loadedmetadata="restoreMediaPosition"
|
||||
@seeked="handleMediaSeeked"
|
||||
@seeking="handleMediaSeeking"
|
||||
@@ -397,7 +317,6 @@ layout("/layouts/platform_h5.html"){
|
||||
<iframe v-else-if="canInlinePreview(selectedResource)" class="study-doc-frame" :src="inlinePreviewUrl"></iframe>
|
||||
<div v-else class="study-file-fallback">
|
||||
<p>该资料暂不支持内嵌预览</p>
|
||||
<van-button type="info" size="small" @click="openFile">打开资料</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
@@ -412,10 +331,19 @@ layout("/layouts/platform_h5.html"){
|
||||
apiBase: "/platform/learning/course/display",
|
||||
recordApi: "/platform/learning/study/record",
|
||||
activeTab: "catalog",
|
||||
detailTabs: [
|
||||
{ name: "intro", title: "课程介绍", icon: "description" },
|
||||
{ name: "catalog", title: "课程目录", icon: "orders-o" },
|
||||
{ name: "downloads", title: "资料下载", icon: "down" }
|
||||
],
|
||||
collapsedChapters: {},
|
||||
course: {},
|
||||
treeData: [],
|
||||
downloadFiles: {},
|
||||
selectedResource: {},
|
||||
playerVisible: false,
|
||||
startingStudy: false,
|
||||
switchingResource: false,
|
||||
currentSegmentId: "",
|
||||
studying: false,
|
||||
pendingSeconds: 0,
|
||||
@@ -435,42 +363,67 @@ layout("/layouts/platform_h5.html"){
|
||||
coverUrl() {
|
||||
return this.getFileUrl(this.course.cover)
|
||||
},
|
||||
canPreview() { return !!this.selectedResource.id && this.selectedResource.allowPreview !== false },
|
||||
canDownload() { return !!this.selectedResource.id && this.selectedResource.allowDownload === true },
|
||||
fileUrl() {
|
||||
return this.getFileUrl(this.selectedResource.fileData)
|
||||
if (!this.canPreview) return ""
|
||||
const id = this.getFileId(this.selectedResource.fileData)
|
||||
return id ? "/platform/sys/file/preview?id=" + encodeURIComponent(id) : this.getFileUrl(this.selectedResource.fileData)
|
||||
},
|
||||
downloadUrl() {
|
||||
if (!this.canDownload) return ""
|
||||
const id = this.getFileId(this.selectedResource.fileData)
|
||||
return id ? "/platform/sys/file/download?id=" + encodeURIComponent(id) : this.getFileUrl(this.selectedResource.fileData)
|
||||
},
|
||||
mediaUrl() {
|
||||
if (!this.canPreview) return ""
|
||||
if (this.selectedResource.resourceType !== "video") return this.fileUrl
|
||||
const fileId = this.getFileId(this.selectedResource.fileData)
|
||||
// 视频必须使用支持 Range 的播放接口，否则手动拖动和历史位置恢复都会失效。
|
||||
return fileId ? "/platform/sys/file/videoPlay?id=" + encodeURIComponent(fileId) : this.fileUrl
|
||||
},
|
||||
inlinePreviewUrl() {
|
||||
if (!this.canPreview) return ""
|
||||
const id = this.getFileId(this.selectedResource.fileData)
|
||||
return id ? this.apiBase + "/pdfPreview?id=" + encodeURIComponent(id) : this.fileUrl
|
||||
const url = id ? this.apiBase + "/pdfPreview?id=" + encodeURIComponent(id) : this.fileUrl
|
||||
return this.canDownload ? url : url + "#toolbar=0"
|
||||
},
|
||||
catalogList() {
|
||||
const result = []
|
||||
;(this.treeData || []).forEach(node => this.appendCatalogNode(node, result))
|
||||
return result
|
||||
},
|
||||
courseBadge() {
|
||||
const flags = this.course.recommendFlags || ""
|
||||
return Array.isArray(flags) ? flags[0] : String(flags).split(",")[0]
|
||||
},
|
||||
allResources() {
|
||||
return this.collectResources(this.treeData)
|
||||
},
|
||||
learnableResources() {
|
||||
return this.allResources.filter(resource => resource.allowPreview !== false)
|
||||
},
|
||||
downloadableResources() {
|
||||
return this.allResources.filter(resource => resource.allowDownload === true && this.getFileUrl(resource.fileData))
|
||||
},
|
||||
completedChapterCount() {
|
||||
return Number(this.course.completedOutlineCount || 0)
|
||||
},
|
||||
allChaptersCollapsed() {
|
||||
return this.catalogList.length > 0 && this.catalogList.every(chapter => this.collapsedChapters[chapter.id])
|
||||
},
|
||||
chapterCount() {
|
||||
return this.catalogList.length
|
||||
return this.catalogList.filter(chapter => chapter.resources.some(resource => resource.allowPreview !== false)).length
|
||||
},
|
||||
totalMinutes() {
|
||||
const seconds = this.catalogList.reduce((sum, chapter) => {
|
||||
return sum + chapter.resources.reduce((value, item) => value + Number(item.durationSeconds || 0), 0)
|
||||
}, 0)
|
||||
const seconds = this.learnableResources.reduce((sum, item) => sum + Number(item.durationSeconds || 0), 0)
|
||||
return Math.max(0, Math.ceil(seconds / 60))
|
||||
},
|
||||
totalProgress() {
|
||||
const resources = []
|
||||
this.catalogList.forEach(chapter => resources.push.apply(resources, chapter.resources))
|
||||
if (!resources.length) return 0
|
||||
const total = resources.reduce((sum, item) => sum + Number(item.progressPercent || 0), 0)
|
||||
return Math.floor(total / resources.length)
|
||||
return Number(this.course.progressPercent || 0)
|
||||
},
|
||||
studyCountText() {
|
||||
return this.course.lecturerName ? this.course.lecturerName : "开始学习"
|
||||
learningGoals() {
|
||||
return String(this.course.learningGoal || "").split(/[\r\n；;]+/).map(goal => goal.trim()).filter(Boolean)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -489,6 +442,7 @@ layout("/layouts/platform_h5.html"){
|
||||
const resp = await this.$axios.post(this.apiBase + "/studyTree", { courseId: this.courseId })
|
||||
if (resp.code === 0) {
|
||||
this.treeData = resp.data || []
|
||||
this.loadDownloadFiles()
|
||||
}
|
||||
},
|
||||
appendCatalogNode(node, result) {
|
||||
@@ -499,6 +453,7 @@ layout("/layouts/platform_h5.html"){
|
||||
result.push({
|
||||
id: node.id,
|
||||
title: node.title,
|
||||
description: node.description,
|
||||
resources: resources
|
||||
})
|
||||
}
|
||||
@@ -519,11 +474,75 @@ layout("/layouts/platform_h5.html"){
|
||||
})
|
||||
return resources
|
||||
},
|
||||
selectChapter(chapter) {
|
||||
if (chapter && chapter.resources && chapter.resources.length) {
|
||||
this.openResource(chapter.resources[0])
|
||||
toggleChapter(id) {
|
||||
this.$set(this.collapsedChapters, id, !this.collapsedChapters[id])
|
||||
},
|
||||
toggleAllChapters() {
|
||||
const collapsed = !this.allChaptersCollapsed
|
||||
this.catalogList.forEach(chapter => this.$set(this.collapsedChapters, chapter.id, collapsed))
|
||||
},
|
||||
continueStudy() {
|
||||
const resources = this.learnableResources
|
||||
const resource = resources.find(item => item.studied && item.completeStatus !== "completed")
|
||||
|| resources.find(item => !item.studied)
|
||||
|| resources.find(item => item.completeStatus !== "completed")
|
||||
|| resources[0]
|
||||
if (resource) this.openResource(resource)
|
||||
},
|
||||
resourceMeta(resource) {
|
||||
const types = { video: "视频", audio: "音频", image: "图片", word: "Word文档", pdf: "PDF文档", ppt: "演示文稿" }
|
||||
const type = types[resource.resourceType] || ((resource.fileExt || "").toUpperCase() + " 文档").trim()
|
||||
const seconds = Number(resource.durationSeconds || 0)
|
||||
if (seconds > 0) return type + " · " + Math.floor(seconds / 60) + ":" + String(seconds % 60).padStart(2, "0")
|
||||
return type
|
||||
},
|
||||
async loadDownloadFiles() {
|
||||
const ids = [...new Set(this.downloadableResources.map(resource => this.getFileId(resource.fileData)).filter(id => id && !this.downloadFiles[id]))]
|
||||
if (!ids.length) return
|
||||
try {
|
||||
const resp = await this.$axios.post("/platform/sys/file/previewFileData", { ids: JSON.stringify(ids) })
|
||||
if (resp.code === 0) {
|
||||
;(resp.data || []).forEach(file => this.$set(this.downloadFiles, file.id, file))
|
||||
}
|
||||
} catch (e) {
|
||||
this.$toast("文件信息加载失败")
|
||||
}
|
||||
},
|
||||
downloadFileInfo(resource) {
|
||||
const file = this.downloadFiles[this.getFileId(resource.fileData)]
|
||||
if (file) return file
|
||||
const attachment = this.getFileEntry(resource.fileData)
|
||||
return attachment && typeof attachment === "object" ? attachment : {}
|
||||
},
|
||||
downloadIcon(resource) {
|
||||
const file = this.downloadFileInfo(resource)
|
||||
const ext = (file.suffix || resource.fileExt || (file.name || "").split(".").pop() || resource.resourceType || "").toLowerCase()
|
||||
const icons = { pdf: "pdf", doc: "docx", docx: "docx", word: "docx", xls: "xlsx", xlsx: "xlsx", csv: "xlsx", ppt: "pptx", pptx: "pptx", zip: "zip", rar: "zip", "7z": "zip", mp3: "mp3", audio: "mp3", mp4: "mp4", video: "mp4" }
|
||||
return "/assets/platform/img/svg/" + (icons[ext] || "txt") + ".svg"
|
||||
},
|
||||
downloadSize(resource) {
|
||||
const file = this.downloadFileInfo(resource)
|
||||
if (file.sizeInfo) return file.sizeInfo
|
||||
const bytes = file.size != null ? Number(file.size) : file.sizeKb != null ? Number(file.sizeKb) * 1024 : NaN
|
||||
if (!Number.isFinite(bytes) || bytes < 0) return ""
|
||||
if (bytes < 1024) return bytes + "B"
|
||||
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + "KB"
|
||||
if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + "MB"
|
||||
return (bytes / 1073741824).toFixed(1) + "GB"
|
||||
},
|
||||
downloadDate(resource) {
|
||||
const value = this.downloadFileInfo(resource).createdAt
|
||||
if (!value) return ""
|
||||
const date = new Date(/^\d+$/.test(String(value)) ? Number(value) : value)
|
||||
if (Number.isNaN(date.getTime())) return ""
|
||||
return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0")
|
||||
},
|
||||
downloadResource(resource) {
|
||||
if (resource.allowDownload !== true) return
|
||||
const id = this.getFileId(resource.fileData)
|
||||
const url = id ? "/platform/sys/file/download?id=" + encodeURIComponent(id) : this.getFileUrl(resource.fileData)
|
||||
if (url) window.open(url)
|
||||
},
|
||||
progressKey(resource) {
|
||||
const target = resource || this.selectedResource
|
||||
return "learning-progress-" + this.courseId + "-" + (target.id || "")
|
||||
@@ -533,23 +552,30 @@ layout("/layouts/platform_h5.html"){
|
||||
const serverPosition = Number(resource.lastPositionSeconds || 0)
|
||||
return Math.max(0, serverPosition)
|
||||
},
|
||||
openResource(resource) {
|
||||
if (!resource || !resource.id) return
|
||||
this.pauseMedia()
|
||||
this.finishStudy(false)
|
||||
this.selectedResource = resource
|
||||
this.resumePositionSeconds = this.getResumePosition(resource)
|
||||
this.resumeSeekRetryCount = 0
|
||||
this.resumePositionRestored = this.resumePositionSeconds <= 0
|
||||
this.lastSavedPositionSeconds = 0
|
||||
this.lastPositionSyncAt = 0
|
||||
this.lastAllowedPositionSeconds = Number(resource.maxPositionSeconds || 0)
|
||||
this.restoringMediaPosition = false
|
||||
this.playerVisible = true
|
||||
if (!["video", "audio"].includes(resource.resourceType)) {
|
||||
this.$nextTick(() => this.startStudy())
|
||||
} else {
|
||||
this.$nextTick(() => this.restoreMediaPosition())
|
||||
async openResource(resource) {
|
||||
if (!resource || !resource.id || this.switchingResource || this.startingStudy) return
|
||||
this.switchingResource = true
|
||||
try {
|
||||
this.pauseMedia()
|
||||
await this.finishStudy(false)
|
||||
resource = this.allResources.find(item => item.id === resource.id) || resource
|
||||
this.selectedResource = resource
|
||||
this.resumePositionSeconds = this.getResumePosition(resource)
|
||||
this.resumeSeekRetryCount = 0
|
||||
this.resumePositionRestored = this.resumePositionSeconds <= 0
|
||||
this.lastSavedPositionSeconds = 0
|
||||
this.lastPositionSyncAt = 0
|
||||
this.lastAllowedPositionSeconds = Number(resource.maxPositionSeconds || 0)
|
||||
this.restoringMediaPosition = false
|
||||
this.playerVisible = true
|
||||
if (!this.canPreview) return
|
||||
if (!["video", "audio"].includes(resource.resourceType)) {
|
||||
this.$nextTick(() => this.startStudy())
|
||||
} else {
|
||||
this.$nextTick(() => this.restoreMediaPosition())
|
||||
}
|
||||
} finally {
|
||||
this.switchingResource = false
|
||||
}
|
||||
},
|
||||
restoreMediaPosition() {
|
||||
@@ -612,21 +638,31 @@ layout("/layouts/platform_h5.html"){
|
||||
this.verifyMediaPosition()
|
||||
},
|
||||
async startStudy() {
|
||||
if (!this.selectedResource.id || this.studying) return
|
||||
const resp = await this.$axios.post(this.recordApi + "/start", {
|
||||
courseId: this.courseId,
|
||||
resourceId: this.selectedResource.id,
|
||||
positionSeconds: this.resumePositionRestored ? this.getMediaPosition() : this.resumePositionSeconds
|
||||
})
|
||||
if (resp.code !== 0) {
|
||||
this.$toast(resp.msg || "开始学习失败")
|
||||
return
|
||||
if (!this.canPreview || this.studying || this.startingStudy) return
|
||||
this.startingStudy = true
|
||||
const resourceId = this.selectedResource.id
|
||||
try {
|
||||
const resp = await this.$axios.post(this.recordApi + "/start", {
|
||||
courseId: this.courseId,
|
||||
resourceId: resourceId,
|
||||
positionSeconds: this.resumePositionRestored ? this.getMediaPosition() : this.resumePositionSeconds
|
||||
})
|
||||
if (resp.code !== 0) {
|
||||
this.$toast(resp.msg || "开始学习失败")
|
||||
return
|
||||
}
|
||||
if (!this.playerVisible || this.selectedResource.id !== resourceId) {
|
||||
await this.$axios.post(this.recordApi + "/finish", { segmentId: resp.data.segmentId, activeSeconds: 0 })
|
||||
return
|
||||
}
|
||||
this.currentSegmentId = resp.data.segmentId
|
||||
this.studying = true
|
||||
this.pendingSeconds = 0
|
||||
this.applyRecordState(resp.data)
|
||||
this.startHeartbeatTimer()
|
||||
} finally {
|
||||
this.startingStudy = false
|
||||
}
|
||||
this.currentSegmentId = resp.data.segmentId
|
||||
this.studying = true
|
||||
this.pendingSeconds = 0
|
||||
this.applyRecordState(resp.data)
|
||||
this.startHeartbeatTimer()
|
||||
},
|
||||
async heartbeat() {
|
||||
if (!this.currentSegmentId || this.pendingSeconds <= 0) return
|
||||
@@ -651,14 +687,15 @@ layout("/layouts/platform_h5.html"){
|
||||
this.stopHeartbeatTimer()
|
||||
this.studying = false
|
||||
this.currentSegmentId = ""
|
||||
await this.$axios.post(this.recordApi + "/finish", {
|
||||
const resp = await this.$axios.post(this.recordApi + "/finish", {
|
||||
segmentId: segmentId,
|
||||
activeSeconds: seconds,
|
||||
positionSeconds: this.getMediaPosition(),
|
||||
completed: !!completed
|
||||
})
|
||||
if (resp.code === 0) this.applyRecordState(resp.data)
|
||||
if (force) return
|
||||
this.loadTree()
|
||||
await this.loadTree()
|
||||
},
|
||||
startHeartbeatTimer() {
|
||||
this.stopHeartbeatTimer()
|
||||
@@ -734,17 +771,20 @@ layout("/layouts/platform_h5.html"){
|
||||
})
|
||||
},
|
||||
applyRecordState(data) {
|
||||
if (!this.selectedResource.id || !data) return
|
||||
this.$set(this.selectedResource, "progressPercent", Number(data.progressPercent || 0))
|
||||
this.$set(this.selectedResource, "studySeconds", Number(data.studySeconds || 0))
|
||||
this.$set(this.selectedResource, "completeStatus", data.completeStatus || "studying")
|
||||
if (data.lastPositionSeconds !== undefined) {
|
||||
this.$set(this.selectedResource, "lastPositionSeconds", Number(data.lastPositionSeconds || 0))
|
||||
}
|
||||
if (data.maxPositionSeconds !== undefined) {
|
||||
const maxPositionSeconds = Number(data.maxPositionSeconds || 0)
|
||||
this.$set(this.selectedResource, "maxPositionSeconds", maxPositionSeconds)
|
||||
this.lastAllowedPositionSeconds = Math.max(Number(this.lastAllowedPositionSeconds || 0), maxPositionSeconds)
|
||||
if (data && data.courseProgress) Object.keys(data.courseProgress).forEach(key => this.$set(this.course, key, data.courseProgress[key]))
|
||||
if (!data || !data.resourceId) return
|
||||
const resources = this.allResources.filter(item => item.id === data.resourceId)
|
||||
if (this.selectedResource.id === data.resourceId && !resources.includes(this.selectedResource)) resources.push(this.selectedResource)
|
||||
resources.forEach(resource => {
|
||||
this.$set(resource, "studied", data.studied !== false)
|
||||
this.$set(resource, "progressPercent", Number(data.progressPercent || 0))
|
||||
this.$set(resource, "studySeconds", Number(data.studySeconds || 0))
|
||||
this.$set(resource, "completeStatus", data.completeStatus || "studying")
|
||||
if (data.lastPositionSeconds !== undefined) this.$set(resource, "lastPositionSeconds", Number(data.lastPositionSeconds || 0))
|
||||
if (data.maxPositionSeconds !== undefined) this.$set(resource, "maxPositionSeconds", Number(data.maxPositionSeconds || 0))
|
||||
})
|
||||
if (this.selectedResource.id === data.resourceId && data.maxPositionSeconds !== undefined) {
|
||||
this.lastAllowedPositionSeconds = Math.max(Number(this.lastAllowedPositionSeconds || 0), Number(data.maxPositionSeconds || 0))
|
||||
}
|
||||
},
|
||||
getMediaPosition() {
|
||||
@@ -753,41 +793,52 @@ layout("/layouts/platform_h5.html"){
|
||||
return player ? Math.floor(player.currentTime || 0) : Number(this.selectedResource.lastPositionSeconds || 0)
|
||||
},
|
||||
statusText(resource) {
|
||||
if (!resource || resource.completeStatus === "not_started") return "未学习"
|
||||
if (!resource || !resource.studied) return "未学习"
|
||||
if (resource.completeStatus === "completed") return "已完成"
|
||||
return "学习中 " + Number(resource.progressPercent || 0) + "%"
|
||||
},
|
||||
resourceIcon(resource) {
|
||||
if (resource.resourceType === "pdf" || (resource.fileExt || "").toLowerCase() === "pdf") return "/assets/platform/img/svg/pdf.svg"
|
||||
if (resource.resourceType === "word" || ["doc", "docx"].includes((resource.fileExt || "").toLowerCase())) return "/assets/platform/img/svg/docx.svg"
|
||||
if (resource.resourceType === "video") return "video"
|
||||
if (resource.resourceType === "audio") return "music-o"
|
||||
if (resource.resourceType === "image") return "photo-o"
|
||||
return "description"
|
||||
},
|
||||
resourceIconClass(resource) {
|
||||
if (resource.resourceType === "pdf" || (resource.fileExt || "").toLowerCase() === "pdf") return "pdf"
|
||||
if (resource.resourceType === "word" || ["doc", "docx"].includes((resource.fileExt || "").toLowerCase())) return "word"
|
||||
if (resource.resourceType === "video") return "video"
|
||||
if (resource.resourceType === "audio") return "audio"
|
||||
if (resource.resourceType === "image") return "image"
|
||||
return "doc"
|
||||
},
|
||||
getFileUrl(value) {
|
||||
if (!value) return ""
|
||||
if (Array.isArray(value)) {
|
||||
return value.length ? (value[0].url || (value[0].response && value[0].response.data) || value[0].data || "") : ""
|
||||
}
|
||||
getFileEntry(value) {
|
||||
if (!value) return null
|
||||
if (typeof value === "string") {
|
||||
const text = value.trim()
|
||||
if (!text) return ""
|
||||
if (text.startsWith("[")) {
|
||||
try {
|
||||
const files = JSON.parse(text)
|
||||
return files.length ? (files[0].url || (files[0].response && files[0].response.data) || files[0].data || "") : ""
|
||||
} catch (e) {
|
||||
return ""
|
||||
}
|
||||
if (!text) return null
|
||||
if (["[", "{", '"'].includes(text.charAt(0))) {
|
||||
try { return this.getFileEntry(JSON.parse(text)) } catch (e) { return null }
|
||||
}
|
||||
return text
|
||||
}
|
||||
return ""
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(item => this.getFileEntry(item)).find(item => this.getFileUrl(item)) || null
|
||||
}
|
||||
return typeof value === "object" ? value : null
|
||||
},
|
||||
getFileUrl(value) {
|
||||
const file = this.getFileEntry(value)
|
||||
if (!file) return ""
|
||||
if (typeof file === "string") {
|
||||
return /^[a-zA-Z0-9_-]+$/.test(file) ? "/platform/sys/file/download?id=" + encodeURIComponent(file) : file
|
||||
}
|
||||
return this.getFileUrl(file.url)
|
||||
|| this.getFileUrl(file.downloadPath)
|
||||
|| this.getFileUrl(file.response && file.response.data)
|
||||
|| this.getFileUrl(file.data)
|
||||
|| this.getFileUrl(file.id || file.fileId)
|
||||
},
|
||||
getFileId(value) {
|
||||
const url = this.getFileUrl(value)
|
||||
@@ -803,9 +854,12 @@ layout("/layouts/platform_h5.html"){
|
||||
return ["pdf", "ppt", "word"].includes(type) || ["pdf", "ppt", "pptx", "doc", "docx"].includes(ext)
|
||||
},
|
||||
openFile() {
|
||||
if (this.fileUrl) {
|
||||
window.open(this.fileUrl)
|
||||
}
|
||||
if (!this.canPreview) return
|
||||
const url = this.canInlinePreview(this.selectedResource) ? this.inlinePreviewUrl : this.mediaUrl
|
||||
if (url) window.open(url)
|
||||
},
|
||||
downloadFile() {
|
||||
if (this.canDownload && this.downloadUrl) window.open(this.downloadUrl)
|
||||
},
|
||||
pauseMedia() {
|
||||
const player = this.$refs.mediaPlayer
|
||||
|
||||
@@ -3,294 +3,105 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.my-study-page {
|
||||
min-height: 100vh;
|
||||
background: #f3f7fb;
|
||||
color: #202733;
|
||||
}
|
||||
.my-study-hero {
|
||||
position: relative;
|
||||
padding: 86px 20px 72px;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #0ca7dd 0%, #0699d6 58%, #0f8fd7 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-study-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -74px;
|
||||
bottom: -108px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .08);
|
||||
}
|
||||
.my-study-status {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.my-study-time {
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, .82);
|
||||
}
|
||||
.my-study-time strong {
|
||||
margin: 0 3px;
|
||||
color: #ffffff;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.my-study-stats {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0;
|
||||
margin-top: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
.my-study-stat-value {
|
||||
font-size: 23px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.my-study-stat-label {
|
||||
margin-top: 7px;
|
||||
color: rgba(255, 255, 255, .78);
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.my-study-main {
|
||||
position: relative;
|
||||
margin-top: -36px;
|
||||
padding: 0 20px 28px;
|
||||
z-index: 2;
|
||||
}
|
||||
.my-study-assistant {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-height: 70px;
|
||||
padding: 13px 14px;
|
||||
border-radius: 8px;
|
||||
background: #eef6ff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 8px 18px rgba(17, 101, 166, .08);
|
||||
}
|
||||
.my-study-ai {
|
||||
flex-shrink: 0;
|
||||
font-size: 27px;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
color: #1a75ff;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.my-study-ai span {
|
||||
color: #6b46ff;
|
||||
}
|
||||
.my-study-assistant-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #30445c;
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.my-study-assistant-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 7px 16px;
|
||||
border-radius: 18px;
|
||||
color: #5d8fd8;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #ffffff;
|
||||
}
|
||||
.my-study-section {
|
||||
margin-top: 20px;
|
||||
padding: 16px 0;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.my-study-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 14px 14px;
|
||||
}
|
||||
.my-study-section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.my-study-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #9aa3b1;
|
||||
font-size: 13px;
|
||||
}
|
||||
.my-study-course-scroll {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0 14px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.my-study-course-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.my-study-course-card {
|
||||
flex: 0 0 154px;
|
||||
width: 154px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
background: #f7fbff;
|
||||
}
|
||||
.my-study-cover {
|
||||
width: 154px;
|
||||
height: 88px;
|
||||
background: linear-gradient(135deg, #8657f2, #56c4ec);
|
||||
}
|
||||
.my-study-cover img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.my-study-cover-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.my-study-course-name {
|
||||
height: 48px;
|
||||
padding: 8px 10px 0;
|
||||
color: #293241;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-study-course-foot {
|
||||
padding: 8px 10px 10px;
|
||||
color: #b5bdc8;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
}
|
||||
.my-study-list {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.my-study-list-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.my-study-list-cover {
|
||||
flex: 0 0 108px;
|
||||
width: 108px;
|
||||
height: 66px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #8657f2, #56c4ec);
|
||||
}
|
||||
.my-study-list-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.my-study-list-info {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.my-study-list-title {
|
||||
color: #202733;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-study-list-meta {
|
||||
margin-top: 10px;
|
||||
color: #8f99a8;
|
||||
font-size: 13px;
|
||||
}
|
||||
#app.my-study-page { min-height: 100%; height: auto; box-sizing: border-box; padding-bottom: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: #f7fbff linear-gradient(180deg, #cfe8ff 0, #e5f3ff 160px, #f1f8ff 320px, #f7fbff 480px) no-repeat; color: #26364c; }
|
||||
.my-study-hero { padding: 24px 16px 18px; background: transparent; }
|
||||
.my-study-head { display: flex; align-items: center; gap: 8px; }
|
||||
.my-study-back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1989fa; font-size: 20px; }
|
||||
.my-study-heading { margin: 0 0 0 auto; text-align: right; font-size: 22px; line-height: 1.5; font-weight: 700; }
|
||||
.my-study-subtitle { margin: 4px 0 18px; text-align: right; color: #8192a9; font-size: 12px; }
|
||||
.my-study-overview { padding: 18px 16px 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(45, 111, 188, .04); }
|
||||
.my-study-time-heading { position: relative; min-height: 80px; padding-right: 100px; }
|
||||
.my-study-book { position: absolute; top: 0; right: 0; width: 92px; height: 80px; background-color: #c9e5ff; -webkit-mask: url("${base!}/assets/platform/img/svg/ant-design_read-filled.svg") center / contain no-repeat; mask: url("${base!}/assets/platform/img/svg/ant-design_read-filled.svg") center / contain no-repeat; transform: rotate(-15deg); pointer-events: none; }
|
||||
.my-study-time-heading .my-study-time { flex-wrap: wrap; }
|
||||
.my-study-time-label { display: flex; align-items: center; gap: 6px; color: #7a8ca6; font-size: 12px; }
|
||||
.my-study-time-label .van-icon { color: #1989fa; font-size: 16px; }
|
||||
.my-study-time { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; color: #8192a9; font-size: 12px; }
|
||||
.my-study-time strong { color: #1989fa; font-size: 30px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
|
||||
.my-study-time strong:not(:first-child) { margin-left: 8px; }
|
||||
.my-study-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 16px; margin-top: 16px; border-top: 1px solid #edf2f8; text-align: center; }
|
||||
.my-study-stat + .my-study-stat { border-left: 1px solid #edf2f8; }
|
||||
.my-study-stat-value { font-size: 20px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.my-study-stat-label { margin-top: 4px; color: #8192a9; font-size: 11px; }
|
||||
.my-study-main { padding: 0 16px; }
|
||||
.my-study-list-header { position: sticky; top: 0; z-index: 10; margin: 0 -16px; padding: 12px 16px 14px; background: #f7fbff; }
|
||||
.my-study-list-header .my-study-tabs { margin-bottom: 0; }
|
||||
.my-study-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 12px; }
|
||||
.my-study-section-title { margin: 0; font-size: 17px; font-weight: 700; }
|
||||
.my-study-section-count { color: #8b9ab0; font-size: 12px; }
|
||||
.my-study-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.my-study-tab { flex: 1; padding: 8px 4px; border: 0; border-radius: 9px; background: #eaf1fa; color: #7a8ca6; font-size: 12px; line-height: 1.5; }
|
||||
.my-study-tab.active { background: #1989fa; color: #fff; font-weight: 600; }
|
||||
.my-study-list-card { margin-bottom: 12px; padding: 12px; border-radius: 14px; background: #fff; }
|
||||
.my-study-list-card:last-child { margin-bottom: 0; }
|
||||
.my-study-course-top { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; }
|
||||
.my-study-list-cover { position: relative; flex: 0 0 112px; width: 112px; height: 84px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #edf5ff; }
|
||||
.my-study-list-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
.my-study-cover-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #98bde9; font-size: 30px; }
|
||||
.my-study-list-info { min-width: 0; flex: 1; }
|
||||
.my-study-list-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: #26364c; font-size: 14px; font-weight: 600; line-height: 1.5; }
|
||||
.my-study-status { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 2px 6px; border-radius: 5px; color: #1989fa; background: #edf6ff; font-size: 10px; }
|
||||
.my-study-status.completed { color: #28b583; background: #eafaf3; }
|
||||
.my-study-progress { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
|
||||
.my-study-progress .van-progress { flex: 1; }
|
||||
.my-study-progress-value { flex-shrink: 0; color: #1989fa; font-size: 12px; font-weight: 600; }
|
||||
.my-study-course-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
|
||||
.my-study-list-meta { min-width: 0; color: #8b9ab0; font-size: 11px; line-height: 1.7; }
|
||||
.my-study-list-meta span { display: block; }
|
||||
.my-study-continue { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 7px 12px; border: 0; border-radius: 16px; background: #edf6ff; color: #1989fa; font-size: 12px; line-height: 1.5; }
|
||||
.my-study-loading { padding: 40px 0; text-align: center; }
|
||||
.my-study-page button:focus-visible { outline: 2px solid #1989fa; outline-offset: 2px; }
|
||||
@media (max-width: 359px) { .my-study-main { padding: 0 12px; } .my-study-list-header { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; } .my-study-list-cover { flex-basis: 96px; width: 96px; height: 72px; } .my-study-course-top { gap: 9px; } }
|
||||
</style>
|
||||
|
||||
<div id="app" class="my-study-page" v-cloak>
|
||||
<div class="my-study-hero">
|
||||
<div class="my-study-status">
|
||||
<div class="my-study-time">
|
||||
累计学习时长 <strong>{{ summary.studyHour || 0 }}</strong> 小时 <strong>{{ summary.studyMinute || 0 }}</strong> 分钟
|
||||
</div>
|
||||
<div class="my-study-head">
|
||||
<button type="button" class="my-study-back" aria-label="返回" @click="goBack"><van-icon name="arrow-left"></van-icon></button>
|
||||
<h1 class="my-study-heading">我的学习</h1>
|
||||
</div>
|
||||
<div class="my-study-stats">
|
||||
<div v-for="item in statItems" :key="item.label">
|
||||
<div class="my-study-stat-value">{{ item.value }}</div>
|
||||
<div class="my-study-stat-label">{{ item.label }}</div>
|
||||
<p class="my-study-subtitle">记录学习点滴，见证每一次进步</p>
|
||||
<div class="my-study-overview">
|
||||
<div class="my-study-time-heading">
|
||||
<div class="my-study-time-label"><van-icon name="clock-o"></van-icon>累计学习时长</div>
|
||||
<div class="my-study-time"><strong>{{ summary.studyHour || 0 }}</strong>小时<strong>{{ summary.studyMinute || 0 }}</strong>分钟</div>
|
||||
<span class="my-study-book" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="my-study-stats">
|
||||
<div v-for="item in statItems" :key="item.label" class="my-study-stat">
|
||||
<div class="my-study-stat-value">{{ item.value }}</div>
|
||||
<div class="my-study-stat-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-study-main">
|
||||
<div class="my-study-assistant">
|
||||
<div class="my-study-ai"><span>AI</span>学助手</div>
|
||||
<div class="my-study-assistant-text">来问问AI学习助手，获取专属学习计划</div>
|
||||
<div class="my-study-assistant-btn">查看</div>
|
||||
<div class="my-study-list-header">
|
||||
<div class="my-study-section-head"><h2 class="my-study-section-title">我学习的课程</h2><span class="my-study-section-count">共 {{ courses.length }} 门</span></div>
|
||||
<nav class="my-study-tabs" aria-label="学习状态">
|
||||
<button v-for="tab in statusTabs" :key="tab.value" type="button" class="my-study-tab" :class="{ active: activeStatus === tab.value }" :aria-pressed="activeStatus === tab.value" @click="activeStatus = tab.value">{{ tab.label }}</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-study-section">
|
||||
<div class="my-study-section-head">
|
||||
<div class="my-study-section-title">我学习的课程</div>
|
||||
<div class="my-study-all" @click="scrollToList">全部 <van-icon name="arrow"></van-icon></div>
|
||||
</div>
|
||||
<div class="my-study-course-scroll">
|
||||
<div
|
||||
v-for="course in courses"
|
||||
:key="course.courseId"
|
||||
class="my-study-course-card"
|
||||
@click="openCourse(course)">
|
||||
<div class="my-study-cover">
|
||||
<div v-if="loading" class="my-study-loading"><van-loading size="22px" color="#1989fa">加载中…</van-loading></div>
|
||||
<van-empty v-else-if="loadError" description="学习记录加载失败"><van-button round size="small" type="info" @click="loadData">重新加载</van-button></van-empty>
|
||||
<div v-else class="my-study-list">
|
||||
<article v-for="course in visibleCourses" :key="course.courseId" class="my-study-list-card">
|
||||
<button type="button" class="my-study-course-top" @click="openCourse(course)">
|
||||
<div class="my-study-list-cover">
|
||||
<img v-if="getCoverUrl(course.cover)" :src="getCoverUrl(course.cover)" :alt="course.courseName">
|
||||
<div v-else class="my-study-cover-empty">{{ course.courseName || '课程' }}</div>
|
||||
<div v-else class="my-study-cover-empty"><van-icon name="description"></van-icon></div>
|
||||
</div>
|
||||
<div class="my-study-course-name">{{ course.courseName || '未命名课程' }}</div>
|
||||
<div class="my-study-course-foot">已学完{{ course.completedOutlineCount || 0 }}讲</div>
|
||||
<div class="my-study-list-info">
|
||||
<div class="my-study-list-title">{{ course.courseName || '未命名课程' }}</div>
|
||||
<span class="my-study-status" :class="{ completed: isCompleted(course) }"><van-icon :name="isCompleted(course) ? 'checked' : 'clock-o'"></van-icon>{{ isCompleted(course) ? '已完成' : '学习中' }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<div v-if="Number(course.outlineCount || 0) > 0" class="my-study-progress"><van-progress :percentage="courseProgress(course)" :show-pivot="false" stroke-width="5" :color="isCompleted(course) ? '#2fc78c' : '#1989fa'"></van-progress><span class="my-study-progress-value">{{ courseProgress(course) }}%</span></div>
|
||||
<div class="my-study-course-foot">
|
||||
<div class="my-study-list-meta"><span>已完成 {{ course.completedOutlineCount || 0 }} 个章节 · 已学 {{ course.studyTimeText || '0秒' }}</span><span v-if="studyDate(course.latestStudyTime)">最近学习 {{ studyDate(course.latestStudyTime) }}</span></div>
|
||||
<button type="button" class="my-study-continue" @click="openCourse(course)"><van-icon name="play"></van-icon>{{ isCompleted(course) ? '再次学习' : '继续学习' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty v-if="!loading && !courses.length" description="暂无学习课程"></van-empty>
|
||||
</div>
|
||||
|
||||
<div ref="courseList" class="my-study-list">
|
||||
<div
|
||||
v-for="course in courses"
|
||||
:key="'list_' + course.courseId"
|
||||
class="my-study-list-card"
|
||||
@click="openCourse(course)">
|
||||
<div class="my-study-list-cover">
|
||||
<img v-if="getCoverUrl(course.cover)" :src="getCoverUrl(course.cover)" :alt="course.courseName">
|
||||
<div v-else class="my-study-cover-empty">{{ course.courseName || '课程' }}</div>
|
||||
</div>
|
||||
<div class="my-study-list-info">
|
||||
<div class="my-study-list-title">{{ course.courseName || '未命名课程' }}</div>
|
||||
<div class="my-study-list-meta">学习进度 {{ course.progressPercent || 0 }}% · {{ course.studyTimeText || '0秒' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<van-empty v-if="!visibleCourses.length" :description="activeStatus === 'completed' ? '暂无已完成课程' : activeStatus === 'studying' ? '暂无学习中的课程' : '暂无学习课程'"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -303,35 +114,75 @@ layout("/layouts/platform_h5.html"){
|
||||
apiBase: "/platform/learning/study/record",
|
||||
summary: {},
|
||||
courses: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statItems() {
|
||||
return [
|
||||
{ label: "已学完课程", value: this.summary.completedCourseCount || 0 },
|
||||
{ label: "学习专题", value: 0 }
|
||||
loading: false,
|
||||
loadError: false,
|
||||
activeStatus: "all",
|
||||
statusTabs: [
|
||||
{ value: "all", label: "全部" },
|
||||
{ value: "studying", label: "学习中" },
|
||||
{ value: "completed", label: "已完成" }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
completedCount() {
|
||||
return this.courses.filter(course => this.isCompleted(course)).length
|
||||
},
|
||||
statItems() {
|
||||
return [
|
||||
{ label: "已学课程", value: this.courses.length },
|
||||
{ label: "学习中", value: this.courses.length - this.completedCount },
|
||||
{ label: "已完成", value: this.completedCount }
|
||||
]
|
||||
},
|
||||
visibleCourses() {
|
||||
if (this.activeStatus === "completed") return this.courses.filter(course => this.isCompleted(course))
|
||||
if (this.activeStatus === "studying") return this.courses.filter(course => !this.isCompleted(course))
|
||||
return this.courses
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
if (window.history.length > 1) {
|
||||
window.history.back()
|
||||
return
|
||||
}
|
||||
pjaxReplace("/platform/learning/course/h5")
|
||||
},
|
||||
async loadData() {
|
||||
this.loading = true
|
||||
this.loadError = false
|
||||
try {
|
||||
const [summaryResp, courseResp] = await Promise.all([
|
||||
this.$axios.post(this.apiBase + "/h5Summary"),
|
||||
this.$axios.post(this.apiBase + "/h5Courses")
|
||||
])
|
||||
if (summaryResp.code === 0) {
|
||||
this.summary = summaryResp.data || {}
|
||||
}
|
||||
if (courseResp.code === 0) {
|
||||
this.courses = courseResp.data || []
|
||||
if (summaryResp.code !== 0 || courseResp.code !== 0) {
|
||||
this.loadError = true
|
||||
return
|
||||
}
|
||||
this.summary = summaryResp.data || {}
|
||||
this.courses = courseResp.data || []
|
||||
} catch (e) {
|
||||
this.loadError = true
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
courseProgress(course) {
|
||||
const value = Number(course.progressPercent || 0)
|
||||
return Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : 0
|
||||
},
|
||||
isCompleted(course) {
|
||||
return this.courseProgress(course) === 100 && Number(course.outlineCount || 0) > 0
|
||||
&& Number(course.completedOutlineCount || 0) >= Number(course.outlineCount)
|
||||
},
|
||||
studyDate(value) {
|
||||
if (!value) return ""
|
||||
const date = new Date(/^\d+$/.test(String(value)) ? Number(value) : String(value).replace(/-/g, "/"))
|
||||
if (Number.isNaN(date.getTime())) return ""
|
||||
return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0")
|
||||
},
|
||||
getCoverUrl(cover) {
|
||||
if (!cover) return ""
|
||||
if (Array.isArray(cover)) {
|
||||
@@ -354,10 +205,7 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
openCourse(course) {
|
||||
if (!course || !course.courseId) return
|
||||
pjaxReplace("/platform/learning/course/h5/study?id=" + course.courseId)
|
||||
},
|
||||
scrollToList() {
|
||||
this.$refs.courseList && this.$refs.courseList.scrollIntoView({ behavior: "smooth", block: "start" })
|
||||
pjaxReplace("/platform/learning/course/h5/study?id=" + encodeURIComponent(course.courseId))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
Reference in New Issue
Block a user