@@ -17,7 +17,6 @@
< image v-if = "!course.image" src="/static/nobg.jpg" mode="widthFix" > < / image >
< image v-else :src = "course.image" mode = "widthFix" > < / image >
< / view >
< view class = "containerBg1" >
< view class = "course_info_box" >
< view class = "course_info" >
@@ -33,14 +32,16 @@
< / view >
< view class = "containerBg" v-if = "course.content && course.content != ''" >
< view class = "prof" >
< view style = "
position: relative;
display: flex;
align-items: center;
" >
< view style = " position: relative;" >
< view : class = "`${isHideCourseInfo ? 'hidden2' : ''}`"
style = "font-size: 30rpx; text-align: justify;" >
< rich-text :nodes = "parsedContent" @tap ="handleImageClick" > < / rich -text >
style = "font-size: 30rpx; text-align: justify;" v-html = "parsedContent" >
< / view >
< view v-for = "(image, index) in images" :key="index" style=" width: 100%; margin-top: 10rpx;" >
< image
style = " width: 100%;"
:src = "image" mode = "widthFix"
@tap ="handleImageClick(image, index)"
/ >
< / view >
< text @click ="isHideCourseInfo = !isHideCourseInfo" style = "
position: absolute;
@@ -65,9 +66,9 @@
v-if = "selfStudyCertificate.length > 0 || selfStudyPaperList.length > 0 || selfStudyCertificate.length == 0 && (!classInfo.id || classInfo.state == '2')" >
< view class = "" >
< view class = "" style = "line-height: 40 rpx; font-size: 28 rpx;"
< view class = "" style = "line-height: 36 rpx; font-size: 26 rpx;"
v-if = "selfStudyCertificate.length == 0" >
< text > 课程学习进度大于等于70 % 时 ， 您可以参与本门课程的自考考试 ， 考试成绩大于60分即可获得本门课程的自考证书 ， 如 您想获得本门课程的A级或B级证书 可参加小班教学< / text >
< text > 课程（ 上 + 下部或上 + 中 + 下部 ） 总 学习进度大于等于70 % 时 ， 您才 可以参与本门课程的自考考试 ， 考试成绩大于60分即可获得本门课程的自考证书 ， 若 您想获得本门课程的A证 / B证 可参加小班教学< / text >
< / view >
< view :class = "['testRecode',!zhedieTestRecode?'zhedie':'']"
v-if = "selfStudyPaperList.length > 0 && !testingPaper.id" >
@@ -136,14 +137,15 @@
@click ="onPageJump('/pages/certificate/certificate')" > 前往查看 < / button >
< / view >
< template v-else >
< view class = "classEntrance" v-if = "linkClassList.length > 0 " >
< view class = "classEntrance" v-if = "linkClassList.length > 0" >
< view class = "flex_box" style = "justify-content: space-between;" >
< view class = "flex_box classTitleBox" >
< image src = "../../static/icon/class.png" mode = "" style = "width: 6 4rpx; height: 64r px;" >
< image src = "../../static/icon/class.png" mode = "" style = "width: 40 rpx; height: 40rpx; margin-right: 3 px;" >
< / image >
< text class = "mainTxt" >
< span style = "font-weight: bold; padding: 0 16rpx;" > < / span >
加入班级开始更加系统的学习 < / text >
< view class = "mainTxt" style = "font-size: 15px; line-height: 40rpx;" >
加入班级开始更加系统的学习
< view style = " font-size: 12px; color: #999; line-height: 18px;" > ( 若课程含有上下部或上中下部 ， 需要全部开通才可进入小班班级 ) < / view >
< / view >
< / view >
< view class = "btntext" >
< text @click ="goClassLIst('/pages/miniClass/courseClassList', course.id,course.title)" > 查看 > > < / text >
@@ -167,11 +169,12 @@
< view class = "classEntrance" v-if = "linkClassList.length == 0 && !classInfo.id" >
< view class = "flex_box" style = "justify-content: space-between;" >
< view class = "flex_box classTitleBox" >
< image src = "../../static/icon/class.png" mode = "" style = "width: 6 4rpx; height: 64r px;" >
< image src = "../../static/icon/class.png" mode = "" style = "width: 40 rpx; height: 40rpx; margin-right: 3 px;" >
< / image >
< text class = "mainTxt" >
< span style = "font-weight: bold; padding: 0 16rpx;" > < / span >
暂无可加入的小班 < / text >
< view class = "mainTxt" style = "font-size: 15px; line-height: 40rpx;" >
暂无可加入的小班
< view style = " font-size: 12px; color: #999; line-height: 18px;" > ( 若课程含有上下部或上中下部 ， 需要全部开通才可进入小班班级 ) < / view >
< / view >
< / view >
< / view >
< / view >
@@ -604,8 +607,8 @@
courseVipModule: [], //该课程需要什么类型的vip
textList: [], //转化文字集合
//存储解析后的内容
parsedContent: [] ,
imgUrl s: []
parsedContent: '' ,
image s: []
};
},
//第一次加载
@@ -629,7 +632,7 @@
}
},
computed: {
...mapState(["userInfo"]),
...mapState(["userInfo"])
},
//页面显示
async onShow() {
@@ -665,43 +668,42 @@
}
},
components: {
// musicPlay
emotion,
commentsList,
},
//方法
methods: {
//解析内容，将图片链接提取出来并添加点击事件
parseContent () {
let conten t = this.course.content;
let imgUrls = [];
// 用正则匹配所有的图片并提取图片链接
content = content.replace(/<img[^>]+src="([^"]+)"[^>]*>/g, (match, src) => {
imgUrls.push(src); // 将图片链接加入数组
// 为图片添加自定义的 data-src 属性，便于后续点击获取图片链接
return `<img src="${src}" style="max-width:100%;height:auto;display:block;" class="preview-img" data-src="${src}" data-index="${imgUrls.length - 1}">`;
});
// 存储解析后的 HTML 内容
this.parsedContent = content;
// 存储所有图片的链接
this.imgUrls = imgUrls;
//删除文本里的图片
removeImagesFromHTML () {
const cleanTex t = this.course.content.replace(/<img[^>]*>/g, '') ;
this.parsedContent = cleanText; // 更新去除图片后的文本
this.extractImagesFromHTML();
},
//处理点击图片事件
handleImageClick(enevt ) {
let target = event.target ;
// 如果找到图片元素
if (target && target.tagName === 'IMG') {
const src = target.dataset.src || target.src ;
if (src ) {
// 使用 uni.previewImage 展示图片放大效果
uni.previewImage({
current: src, // 当前图片的地址
urls: this.imgUrls // 图片列表
});
}
//把文本里的图片另存起来
extractImagesFromHTML( ) {
const imgUrls = [] ;
// 使用正则表达式从 HTML 中提取所有图片的 src 属性
const regex = /<img[^>]+src="([^"]+)"[^>]*>/g;
let match ;
while ((match = regex.exec(this.course.content)) !== null ) {
imgUrls.push(match[1]);
}
this.images = imgUrls; // 更新 images 数组
},
// 处理图片点击事件
handleImageClick(image, index) {
uni.previewImage({
current: image, // 当前点击的图片
urls: this.images, // 所有图片的 URL 列表
currentIndex: index // 当前图片的索引
});
},
async request(){
var newCertificate = await this.getCertificateInfo()
this.selfStudyCertificate = []
@@ -1759,7 +1761,7 @@
}
}
//解析数据
this.parseContent ();
this.removeImagesFromHTML ();
}
})
.catch((e) => {
@@ -1972,7 +1974,7 @@
. classEntrance {
background - color : # d0ecc1 ;
padding : 20 rpx ;
padding : 30 rpx rpx ;
box - shadow : 0 2 px 12 px 0 rgba ( 0 , 0 , 0 , 0.1 ) ;
. flex _box {
liuyuan