zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片点击放大，调整样式

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
manifest.json
View File

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

108
pages/course/courseDetail.vue
View File

@@ -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: 40rpx; font-size: 28rpx;"
<view class="" style="line-height: 36rpx; font-size: 26rpx;"
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: 64rpx; height: 64rpx;">
<image src="../../static/icon/class.png" mode="" style="width: 40rpx; height: 40rpx; margin-right: 3px;">
</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: 64rpx; height: 64rpx;">
<image src="../../static/icon/class.png" mode="" style="width: 40rpx; height: 40rpx; margin-right: 3px;">
</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: [],
imgUrls: []
parsedContent: '',
images: []
};
},
//第一次加载
@@ -629,7 +632,7 @@
}
},
computed: {
...mapState(["userInfo"]),
...mapState(["userInfo"])
},
//页面显示
async onShow() {
@@ -665,43 +668,42 @@
}
},
components: {
// musicPlay
emotion,
commentsList,
},
//方法
methods: {
//解析内容，将图片链接提取出来并添加点击事件
parseContent() {
let content = 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 cleanText = 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: 20rpx;
padding: 30rpx 20rpx;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.flex_box {

2
pages/course/index.vue
View File

@@ -55,7 +55,7 @@
{{formatContent(v.title)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
</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>
<text class="btn_box_btn">了解课程</text>
</view>

2
pages/peanut/home.vue
View File

@@ -488,7 +488,7 @@
</view>
<!-- 应对华为审核，去掉app跳转 -->
<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">
<image src="@/static/xlkj.png"></image>
</view>

12
pages/peanut/searchFor.vue
View File

@@ -1,5 +1,5 @@
<template>
<view>
<view style=" height: 100vh; background: #f7faf9;">
<z-nav-bar>
<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName"
@custom='souBook' @clear="clear"></u-search>
@@ -12,16 +12,6 @@
<text v-for="item in historyList" @click="serkeyWord(item)">{{item}}</text>
</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="flexbox" style="display: flex; flex-wrap: wrap;">