更新项目

pages/curriculum/order/index.vue

@@ -18,7 +18,7 @@
 					<image style="width: 100%" :src="curriculumData.image" mode="widthFix"></image>
 				</view>
 				
-				<view class="containerBg1" :style="`${curriculumData.content && curriculumData.content != ''? 'padding:10rpx 0;': ''}`">
+				<view class="containerBg1">
 					<view class="course_info_box">
 						<view class="course_info">
 							<view class="flexbox course_title" v-if="curriculumData.id">
@@ -30,13 +30,18 @@
 							<view class="containerBg" v-if="curriculumData.content && curriculumData.content != ''">
 								<view class="prof">
 									<view style="padding: 0 20rpx; position: relative;">
-										<view :class="`${isHideCourseInfo ? 'hidden2' : ''}`" v-html="curriculumData.content">
+										<view :class="`${isHideCourseInfo ? 'hidden2' : ''}`" 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>
-										<br/>
 										<text @click="isHideCourseInfo = !isHideCourseInfo" style="
 											font-size: 24rpx;
 											position: absolute;
-											bottom: 0;
+											bottom: -40rpx;
 											right: 20rpx;
 											color: #838588;
 											">
@@ -250,6 +255,9 @@
 				userVip: null,  //是否是vip
 				courseVipModule: [],  //该课程需要什么类型的vip
 				textList: [],  //转化文字集合
+				//存储解析后的内容
+				parsedContent: '',
+				images: []
 			};
 		},
 		onLoad(options) {
@@ -278,6 +286,33 @@
 			});
 		},
 		methods: {
+			//删除文本里的图片
+			removeImagesFromHTML() {
+				const cleanText = this.curriculumData.content.replace(/<img[^>]*>/g, '');
+				this.parsedContent = cleanText; // 更新去除图片后的文本
+				this.extractImagesFromHTML();
+			},
+			//把文本里的图片另存起来
+			extractImagesFromHTML() {
+				const imgUrls = [];
+				// 使用正则表达式从 HTML 中提取所有图片的 src 属性
+				const regex = /<img[^>]+src="([^"]+)"[^>]*>/g;
+				let match;
+				while ((match = regex.exec(this.curriculumData.content)) !== null) {
+					imgUrls.push(match[1]);
+				}
+				this.images = imgUrls; // 更新 images 数组
+			},
+				
+			// 处理图片点击事件
+			handleImageClick(image, index) {
+				uni.previewImage({
+					current: image,  // 当前点击的图片
+					urls: this.images,  // 所有图片的 URL 列表
+					currentIndex: index  // 当前图片的索引
+				});
+			},
+			
 			//点击顶部按钮
 			handleClickGetVip() {
 				uni.navigateTo({
@@ -522,6 +557,8 @@
 							courseList: [...list],
 						};
 					}
+					//获取的数据解析
+					this.removeImagesFromHTML();
 
 					setTimeout(() => {
 						that.$refs.commonAnchorLink.getDistanceArr();
@@ -1087,10 +1124,6 @@
 	}
 	.course_info_box {
 		
-		.course_info {
-			overflow: hidden;
-			padding-bottom: 10rpx;
-		}
 	}
 
 	.catalogue_title {
@@ -1140,8 +1173,6 @@
 
 	.containerBg2 {
 		width: 100%;
-		// padding-top: 40rpx;
-		// margin-top: 100rpx;
 
 		.shiting {
 			line-height: 100rpx;
@@ -1278,10 +1309,13 @@
 		width: 100%;
 	}
 
+	.containerBg{
+		padding-bottom: 30rpx;
+	}
 	.containerBg1 {
+		padding: 20rpx 0;
 		background: #fff;
 		border-top: 1px solid #fff;
-		margin-top: -4rpx;
 	}
 
 	.courseTitle {