mrr.sj.front/pages/agreement/agreement.vue

<template>
	<view>
		<!-- 顶部导航栏 -->
		<custom-navbar :title="title" :show-back="true" title-color="#000" background-color="#FFFFFF"></custom-navbar>
		<view class="content">
			<!-- 按顺序渲染文本和图片 -->
			<block v-for="(item, index) in contentList" :key="index">
				<!-- 文本片段 -->
				<rich-text v-if="item.type === 'text'" :nodes="item.content"></rich-text>
				<!-- 图片 -->
				<view v-else-if="item.type === 'image'" class="image-container" @tap="previewImage(item.src, index)">
					<image :src="item.src" mode="widthFix" class="clickable-image"></image>
				</view>
			</block>
		</view>
		<!-- <view class="content">
			<rich-text :nodes="text"></rich-text>
		</view> -->
	</view>
</template>

<script>
	import request from '@/utils/request';
	export default {
		data() {
			return {
				title: '',
				textData: {},
				// text: ''
				contentList: [] // 存储按顺序排列的文本和图片
			}
		},
		onLoad(options) {
			if (options.type) {
				this.title = options.type == 28 ? '用户注册协议' : options.type == 26 ? '隐私政策' : '';
				this.getXieyi(options.type)
			}
			if (options.title) {
				this.title = options.title;
			}
		},
		methods: {
			getXieyi(type) {
				request.post('/user/getsystemtext', {
					type
				}).then(res => {
					console.log(res, '======')
					this.textData = res.data;
					this.processContent(this.textData.text);
				})
			},
			
			// 处理内容
			processContent(content) {
				if (!content) return;
				
				this.contentList = [];
				let remainingContent = content;
				
				// 使用正则表达式匹配图片标签
				const imgRegex = /<img[^>]+src="([^">]+)"[^>]*>/g;
				let match;
				let lastIndex = 0;
				
				// 找到所有图片并分割内容
				while ((match = imgRegex.exec(remainingContent)) !== null) {
					const imgStart = match.index;
					const imgEnd = imgRegex.lastIndex;
					const imgSrc = match[1];
					
					// 添加图片前的文本
					if (imgStart > lastIndex) {
						const textContent = remainingContent.substring(lastIndex, imgStart);
						if (textContent.trim()) {
							this.contentList.push({
								type: 'text',
								content: textContent
							});
						}
					}
					
					// 添加图片
					this.contentList.push({
						type: 'image',
						src: imgSrc
					});
					
					lastIndex = imgEnd;
				}
				
				// 添加最后一段文本
				if (lastIndex < remainingContent.length) {
					const textContent = remainingContent.substring(lastIndex);
					if (textContent.trim()) {
						this.contentList.push({
							type: 'text',
							content: textContent
						});
					}
				}
				
				console.log('处理后的内容列表:', this.contentList);
			},
			
			// 预览图片
			previewImage(current, currentIndex) {
				// 收集所有图片URL用于预览
				const imageUrls = this.contentList
					.filter(item => item.type === 'image')
					.map(item => item.src);
				
				// 找到当前图片在预览数组中的索引
				const previewIndex = this.contentList
					.slice(0, currentIndex + 1)
					.filter(item => item.type === 'image')
					.length - 1;
				
				uni.previewImage({
					urls: imageUrls,
					current: imageUrls[previewIndex],
					indicator: 'default',
					loop: true
				});
			}
		}
	}
</script>

<style>
	.content {
		padding: 24rpx 32rpx;
	}

	.text-p {
		text-indent: 2em;
	}

	.text-weight {
		font-weight: 700;
	}

	.you {
		margin: 20rpx 0 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		text-align: right;
	}
	
	.image-container {
		margin: 20rpx 0;
	}
	
	.clickable-image {
		width: 100%;
		height: auto;
		border-radius: 8rpx;
	}
</style>