You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
335 lines
9.4 KiB
335 lines
9.4 KiB
4 days ago
|
<template>
|
||
|
|
<view class="wrap">
|
||
|
|
<view class="banner-wrap bg-wh">
|
||
|
|
<image class="pic" :src="form.mall.coverDrawing" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="detail">
|
||
|
|
<ul class="tabs">
|
||
|
|
<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- 课程介绍 -->
|
||
|
|
<view v-show="!curTab" class="des">
|
||
|
|
<mp-html class="des-html" :tag-style="mpStyle" :content="briefIntroduction"/>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 课程目录 -->
|
||
|
|
<view v-show="curTab === 1">
|
||
|
|
<uni-search-bar class="search" radius="30" placeholder="请输入章节名称" v-model="keyword" clearButton="auto" cancelButton="none" />
|
||
|
|
|
||
|
|
<view v-if="chapterList.length" class="chapters">
|
||
|
|
<view class="chapter" v-for="(item, i) in chapterList" :key="i">
|
||
|
|
<view class="chapterName">
|
||
|
|
{{ item.name }}
|
||
|
|
<uni-icons class="arrow" type="bottom" color="#909090"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="section" v-if="item.subsectionList.length">
|
||
|
|
<view class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }"
|
||
|
|
v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
|
||
|
|
<image v-if="section.fileType === 'pptx'" class="ext" src="https://izhixinyun.com/images/exts/ppt.png" alt="">
|
||
|
|
<image v-else-if="section.fileType === 'mp4'" class="ext" src="https://izhixinyun.com/images/exts/video.png" alt="">
|
||
|
|
<image v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" class="ext"
|
||
|
|
src="https://izhixinyun.com/images/exts/word.png" alt="">
|
||
|
|
<image v-else-if="section.fileType === 'txt'" class="ext" src="https://izhixinyun.com/images/exts/txt.png" alt="">
|
||
|
|
<image v-else-if="section.fileType === 'pdf'" class="ext" src="https://izhixinyun.com/images/exts/pdf.png" alt="">
|
||
|
|
<image v-else class="ext" src="https://izhixinyun.com/images/exts/pic.png" alt="">
|
||
|
|
{{ section.name }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 练习成绩 -->
|
||
|
|
<view v-show="curTab === 2 && practices.length" class="list">
|
||
|
|
<view v-for="(item, i) in practices" :key="i" class="item" @click="toPrac(item)">
|
||
|
|
<view class="c-name">{{ item.projectName }}</view>
|
||
|
|
<view class="line">最高分：{{ item.hightScore }}  练习次数：{{ item.practiceNum }}</view>
|
||
|
|
<view class="line">累计练习时长（小时）：{{ item.hightScore }}</view>
|
||
|
|
<view class="line">最近练习时间：{{ item.lastTime }}</view>
|
||
|
|
<view class="btn">练习情况</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 考核成绩 -->
|
||
|
|
<view v-show="curTab === 3 && ass.length" class="list">
|
||
|
|
<view v-for="(item, i) in ass" :key="i" class="item" @click="toDetail(item)">
|
||
|
|
<view class="c-name">{{ item.experimentalName }}</view>
|
||
|
|
<view class="line">得分：{{ item.score }}  耗时：{{ item.timeSum }}min</view>
|
||
|
|
<view class="line">考核开始时间：{{ item.startTime }}</view>
|
||
|
|
<view class="line">考核结束时间：{{ item.lastTime }}</view>
|
||
|
|
<view class="btn">成绩报告</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { queryChaptersAndSubsections, curriculumDetail, queryPracticeByStudent, queryAssessmentByStudent } from '@/apis/modules/course.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
cid: '',
|
||
|
|
mallId: '',
|
||
|
|
curTab: 1,
|
||
|
|
tabs: [
|
||
|
|
{
|
||
|
|
name: '课程介绍',
|
||
|
|
id: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '课程目录',
|
||
|
|
id: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '练习成绩',
|
||
|
|
id: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '考核成绩',
|
||
|
|
id: 3
|
||
|
|
}
|
||
|
|
],
|
||
|
|
searchTimer: null,
|
||
|
|
keyword: '',
|
||
|
|
chapterList: [],
|
||
|
|
briefIntroduction: '',
|
||
|
|
|
||
|
|
practices: [],
|
||
|
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
|
||
|
|
status: 'more', // 上拉加载状态 more|loading|noMore
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
|
||
|
|
ass: [],
|
||
|
|
reachBottomAss: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
|
||
|
|
statusAss: 'more', // 上拉加载状态 more|loading|noMore
|
||
|
|
pageAss: 1,
|
||
|
|
pageSizeAss: 10,
|
||
|
|
|
||
|
|
dotsStyles: {
|
||
|
|
backgroundColor: 'rgba(83, 200, 249,0.3)',
|
||
|
|
border: '1px rgba(83, 200, 249,0.3) solid',
|
||
|
|
color: '#fff',
|
||
|
|
selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
|
||
|
|
selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
|
||
|
|
},
|
||
|
|
mpStyle: {
|
||
|
|
p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;',
|
||
|
|
span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
keyword () {
|
||
|
|
clearTimeout(this.searchTimer)
|
||
|
|
this.searchTimer = setTimeout(() => {
|
||
|
|
this.getChapter()
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onPullDownRefresh() {
|
||
|
|
this.curTab === 2 && this.initPrac()
|
||
|
|
this.curTab === 3 && this.initAss()
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
}, 1500)
|
||
|
|
},
|
||
|
|
// 上拉加载
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.curTab === 2) {
|
||
|
|
// 练习
|
||
|
|
if (this.reachBottom >= 0) {
|
||
|
|
this.reachBottom = 1
|
||
|
|
this.status = 'loading'
|
||
|
|
this.getPractices()
|
||
|
|
}
|
||
|
|
} else if (this.curTab === 3) {
|
||
|
|
// 练习
|
||
|
|
if (this.reachBottomAss >= 0) {
|
||
|
|
this.reachBottomAss = 1
|
||
|
|
this.statusAss = 'loading'
|
||
|
|
this.getAss()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
const { options } = pages[pages.length - 1]
|
||
|
|
this.cid = options.cid
|
||
|
|
this.mallId = options.mallId
|
||
|
|
this.getChapter()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取章节小节
|
||
|
|
async getChapter () {
|
||
|
|
if (this.cid) {
|
||
|
|
const res = await queryChaptersAndSubsections(this.cid)
|
||
|
|
this.chapterList = res.chapterList
|
||
|
|
// if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length && !this.commentId) {
|
||
|
|
// this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1);
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取介绍
|
||
|
|
async getInfo () {
|
||
|
|
if (this.cid && this.mallId) {
|
||
|
|
const { data } = await curriculumDetail(this.cid, this.mallId)
|
||
|
|
this.briefIntroduction = data.briefIntroduction
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 练习成绩
|
||
|
|
async getPractices () {
|
||
|
|
const { page } = await queryPracticeByStudent({
|
||
|
|
pageNum: this.page,
|
||
|
|
pageSize: this.pageSize,
|
||
|
|
mallId: this.mallId,
|
||
|
|
curriculumId: this.cid
|
||
|
|
})
|
||
|
|
this.practices = this.reachBottom > 0 ? [...this.practices, ...page.records] : page.records
|
||
|
|
this.page++ // 每次获取了数据后page+1
|
||
|
|
const noMore = this.practices.length === page.total // 是否加载完所有数据
|
||
|
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
|
||
|
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
|
||
|
|
},
|
||
|
|
// 考核成绩
|
||
|
|
async getAss () {
|
||
|
|
const { page } = await queryAssessmentByStudent({
|
||
|
|
pageNum: this.pageAss,
|
||
|
|
pageSize: this.pageSizeAss,
|
||
|
|
mallId: this.mallId,
|
||
|
|
curriculumId: this.cid
|
||
|
|
})
|
||
|
|
this.ass = this.reachBottom > 0 ? [...this.ass, ...page.records] : page.records
|
||
|
|
this.pageAss++ // 每次获取了数据后page+1
|
||
|
|
const noMore = this.ass.length === page.total // 是否加载完所有数据
|
||
|
|
this.statusAss = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
|
||
|
|
this.reachBottomAss = noMore ? -1 : 0 // 加载完了则设置为-1
|
||
|
|
},
|
||
|
|
initPrac() {
|
||
|
|
this.page = 1
|
||
|
|
this.reachBottom = 0
|
||
|
|
this.getPractices()
|
||
|
|
},
|
||
|
|
initAss() {
|
||
|
|
this.pageAss = 1
|
||
|
|
this.reachBottomAss = 0
|
||
|
|
this.getAss()
|
||
|
|
},
|
||
|
|
// tab切换
|
||
|
|
tabChange(id) {
|
||
|
|
this.curTab = id
|
||
|
|
!id && !this.briefIntroduction && this.getInfo()
|
||
|
|
id === 2 && !this.practices.length && this.initPrac()
|
||
|
|
id === 3 && !this.ass.length && this.initAss()
|
||
|
|
},
|
||
|
|
// 练习跳转
|
||
|
|
toPrac(row) {
|
||
|
|
this.$util.to(`../practiceDetail/practiceDetail?cid=${this.cid}&projectId=${row.projectId || ''}&paperId=${row.paperId || ''}`)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.wrap {
|
||
|
|
padding-bottom: 140rpx;
|
||
|
|
}
|
||
|
|
.banner-wrap {
|
||
|
|
width: 100%;
|
||
|
|
.pic {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tabs {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 32rpx;
|
||
|
|
li {
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
color: #007EFF;
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -12rpx;
|
||
|
|
left: 50%;
|
||
|
|
width: 116%;
|
||
|
|
height: 4rpx;
|
||
|
|
margin: 10rpx auto 0;
|
||
|
|
background-color: #007EFF;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.detail {
|
||
|
|
padding: 34rpx 32rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
.chapters {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.chapter {
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
.chapterName {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.arrow {
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
.section {
|
||
|
|
margin: 20rpx 0;
|
||
|
|
}
|
||
|
|
.sectionName {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 20rpx 0;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.ext {
|
||
|
|
width: 36rpx;
|
||
|
|
height: 36rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list {
|
||
|
|
.item {
|
||
|
|
position: relative;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
border-bottom: 1px solid #e6e6e6;
|
||
|
|
}
|
||
|
|
.c-name {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.line {
|
||
|
|
margin-top: 14rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #828282;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 20rpx;
|
||
|
|
right: 0;
|
||
|
|
padding: 10rpx 30rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #007EFF;
|
||
|
|
border-radius: 36rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|