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

<template>
	<view class="agreement">
		<!-- 顶部导航栏 -->
		<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="agreement-footer">
			<view class="agreement-btn" @click="addWe">加入我们</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				title: "",
				textData: {},
				// text: ''
				contentList: [], // 存储按顺序排列的文本和图片
			};
		},
		onLoad(options) {
			if (options.type) {
				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);
					});
			},
			addWe() {
				uni.navigateTo({
					url: "/pages/selfOperated/addWe",
				});
			},

			// 处理内容
			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 lang="less">
	.agreement {
		padding-bottom: 200rpx;
	}

	.content {
		padding: 24rpx 32rpx;
		margin-bottom: 200rpx;
	}

	.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;
	}

	.agreement-footer {
		padding: 60rpx 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;

		.agreement-btn {
			width: 690rpx;
			height: 78rpx;
			background: #FF4767;
			border-radius: 798rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>