图片点击放大,调整样式

This commit is contained in:
liuyuan
2025-03-20 16:08:08 +08:00
parent 520383e8be
commit c3270673eb
5 changed files with 60 additions and 68 deletions

View File

@@ -12,8 +12,8 @@
"src" : "图片路径" "src" : "图片路径"
} }
], ],
"versionName" : "1.0.61", "versionName" : "1.0.62",
"versionCode" : 1061, "versionCode" : 1062,
"app-plus" : { "app-plus" : {
"nvueCompiler" : "uni-app", "nvueCompiler" : "uni-app",
"compatible" : { "compatible" : {

View File

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

View File

@@ -55,7 +55,7 @@
{{formatContent(v.title)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text> {{formatContent(v.title)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
</text> </text>
<text v-if="item.courseCatalogueEntityList[0].halfFee==0" style="padding-left: 20rpx;">免费</text> <text v-if="item.courseCatalogueEntityList[0].halfFee==0" style="padding-left: 20rpx;">免费</text>
<text v-else style="margin-left: 20rpx;">¥{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text> <text v-else style="margin-left: 20rpx;">{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
</view> </view>
<text class="btn_box_btn">了解课程</text> <text class="btn_box_btn">了解课程</text>
</view> </view>

View File

@@ -488,7 +488,7 @@
</view> </view>
<!-- 应对华为审核去掉app跳转 --> <!-- 应对华为审核去掉app跳转 -->
<view class="appJump"> <view class="appJump">
<view class="soulspace item flexbox" @click="appjumpfun('soulspace')"> <view class="soulspace item flexbox" @click="appjumpfun('soulspace')" v-if="$platform != 'ios'">
<view class="img"> <view class="img">
<image src="@/static/xlkj.png"></image> <image src="@/static/xlkj.png"></image>
</view> </view>

View File

@@ -1,5 +1,5 @@
<template> <template>
<view> <view style=" height: 100vh; background: #f7faf9;">
<z-nav-bar> <z-nav-bar>
<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName" <u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName"
@custom='souBook' @clear="clear"></u-search> @custom='souBook' @clear="clear"></u-search>
@@ -12,16 +12,6 @@
<text v-for="item in historyList" @click="serkeyWord(item)">{{item}}</text> <text v-for="item in historyList" @click="serkeyWord(item)">{{item}}</text>
</view> </view>
</view> </view>
<!-- <view class="sear_class" v-if="this.show==1">
<view class="sc_xuan">
<view class="sc_con" v-for="(item,index) in classFen" @click="FenBook(item)"
:class="bookScreen.type == item.id ? 'sc_con sc_con_style' : 'sc_con'">{{item.sort}}</view>
</view>
<view class="sc_xuan">
<view class="sc_con" v-for="(item,index) in classMian" @click="MianBook(item)"
:class="bookScreen.is_charge == item.id ? 'sc_con sc_con_style' : 'sc_con'">{{item.sort}}</view>
</view>
</view> -->
<view class="sear_list" v-if="this.show==1"> <view class="sear_list" v-if="this.show==1">
<view class="flexbox" style="display: flex; flex-wrap: wrap;"> <view class="flexbox" style="display: flex; flex-wrap: wrap;">