144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
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> |