mrr.sj.front/pages/selfOperated/components/imgAndText.vue

<template>
	<view class="container">
		<!-- uView组件适配：确保uv-divider在nvue中正常渲染（需确保uView已配置nvue支持） -->
		<uv-divider text="图文详情" lineColor="#E0E1E1" textColor="#3D3D3D" textSize="24rpx"></uv-divider>
		
		<!-- 列表渲染：修正为数组遍历（原代码初始为对象，会导致v-for报错） -->
		<!-- <view v-for="(item, index) in detailList" :key="index" class="detail-item">
			<image 
				:src="item.value" 
				v-if="item.type === 3" 
				class="detail-img" 
				mode="widthFix" 
			/>
			
			<view v-if="item.type === 2" class="detail-text-container">
				<text class="detail-text">{{ item.value }}</text>
			</view>
	
			<uv-divider dashed v-if="item.type === 1" ></uv-divider>
			<rich-text 
				:nodes="formatRichText(item.value)" 
				v-if="item.type === 1" 
				class="detail-rich-text" 
			/>
		</view> -->
		<view class="detail-item">
			<!-- <rich-text 
				:nodes="info" 
				class="detail-rich-text" 
			/> -->
			<uv-parse :content="info"></uv-parse>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: String,
				default: "[]" // 默认值设为空数组JSON，避免parse报错
			}
		},
		data() {
			return {
				detailList: [] // 修正初始类型为数组（原代码是对象，v-for无法遍历）
			};
		},
		mounted() {
			//this.parseInfoData();
		},
		methods: {
			// 解析传入的JSON字符串，确保生成数组
			parseInfoData() {
				try {
					// 防止info为空或格式错误导致崩溃
					const parsedData = JSON.parse(this.info);
					// 确保最终是数组（若后端返回对象，转为数组）
					this.detailList = Array.isArray(parsedData) ? parsedData : [];
				} catch (error) {
					console.error("解析图文详情数据失败：", error);
					this.detailList = [];
				}
			},
			// 处理富文本nodes：nvue中rich-text样式需内嵌（外部样式难穿透）
			formatRichText(nodes) {
				console.log(111111,nodes);
				// 若nodes是字符串（如HTML片段），转为标准rich-text nodes格式
				if (typeof nodes === "string") {
					return [{
						name: "div",
						attrs: {
							style: "font-size:26rpx;color:#3D3D3D;line-height:40rpx;margin:10rpx 0;"
						},
						children: [{
							type: "text",
							text: nodes
						}]
					}];
				}
				// 若已是nodes格式，补充基础样式（避免文字样式丢失）
				return JSON.parse(JSON.stringify(nodes)).map(node => {
					if (node.attrs && !node.attrs.style) {
						node.attrs.style = "font-size:26rpx;color:#3D3D3D;line-height:40rpx;";
					}
					return node;
				});
			}
		}
	};
</script>

<style>
	/* 1. 移除scoped和lang="less"（nvue不支持），样式全部平级写 */
	/* 容器基础样式：仅保留布局和背景，无字体样式 */
	.container {
		
		background-color: #fff;
		overflow: hidden;
		margin: 20rpx 24rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		/* nvue对box-shadow支持有限，建议移除（避免渲染异常） */
	}
	
	/* uView divider适配：调整间距（若组件默认样式不符合，手动覆盖） */
	.uv-divider {
		margin: 0 0 20rpx 0 !important; /* 强制调整分隔线与内容的间距 */
	}
	
	/* 列表项：垂直间距控制 */
	.detail-item {
		margin-bottom: 20rpx;
		width: 658rpx;
	}
	.detail-item:last-child {
		margin-bottom: 0;
	}
	
	/* 图片样式：widthFix确保宽度自适应，高度按比例 */
	.detail-img {
		width: 658rpx;
		border-radius: 16rpx;
		margin: 10rpx 0; /* 与上下内容的间距 */
	}
	
	/* 纯文本容器：仅控制布局，字体样式在text标签上 */
	.detail-text-container {
		margin: 10rpx 0;
	}
	/* 纯文本样式：直接写在text标签class上（nvue不继承） */
	.detail-text {
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height: 40rpx;
		text-align: left;
	}
	
	/* 富文本容器：控制整体间距，内部样式靠formatRichText内嵌 */
	.detail-rich-text {
		margin: 10rpx 0;
	}
</style>