driverSchool/pagesA/guideContent/index.vue

<template>
	<view class="container">
		<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="业务办理指南"></VNavigationBar>
		<view class="body">
			<view class="header">
				<view class="title line-clamp-3">{{ guideDetails.title }}</view>
				<view class="time" v-if="guideDetails.updateTime">{{ getCurrentDateTime(guideDetails.updateTime) }}
				</view>
			</view>
			<view class="content">
				<u-parse :content="guideDetails.guide"></u-parse>
				<!-- <u-parse :content="test"></u-parse> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getJSONData
	} from "@/utils/auth";
	import VNavigationBar from '@/components/tabbar/VNavigationBar.vue'
	import request from '@/utils/request.js'

	export default {
		name: "content",
		components: {
			VNavigationBar
		},
		filters: {
			formatRichText(html) {
				const nodes = parser.getRichTextJson(html)
				return nodes.children
			}
		},
		data() {
			return {
				richTextHtml: '',
				toUrl: null,
				tenantId: null,
				guideDetails: [],
			};
		},
		onLoad(data) {
			console.log('data', data.tenantId)
			this.tenantId = data.tenantId
			this.getGuideByTenantId()
		},
		methods: {
			getGuideByTenantId() {
				request({
					url: '/app-api/jx/driveSchool/smallProgram/guide/list',
					method: 'GET',
					params: {
						// tenantId: this.tenantId
						tenantId: '181'
					}
				}).then(res => {
					const list = res.data || []
					// 根据 updateTime 排序，时间新的排在前面
					list.sort((a, b) => new Date(b.updateTime) - new Date(a.updateTime))
					this.guideDetails = list.length > 0 ? list[0] : null
					console.log('最新指南 guideDetails', this.guideDetails)
					console.log('更新时间 guideDetails', this.guideDetails.updateTime)
				})
			},
			// 格式化时间
			getCurrentDateTime() {
				const now = new Date();

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
				// return now;
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;

		.body {
			flex: 1;
			padding: 24rpx 32rpx;
			overflow-y: auto;
			box-sizing: border-box;

			.header {
				margin-bottom: 40rpx;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
					line-height: 1.5;
					margin-bottom: 16rpx;
					word-break: break-word;
					white-space: normal;
				}

				.time {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.content {
				font-size: 30rpx;
				color: #333333;
				line-height: 1.8;

				/* 图片样式增强 */
				img {
					max-width: 100% !important;
					/* 确保图片不超过容器宽度 */
					height: auto !important;
					/* 保持图片原始比例 */
					display: block;
					/* 改为块级元素避免间隙 */
					margin: 32rpx auto;
					/* 增加上下边距 */
					border-radius: 12rpx;
					/* 圆角效果 */
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
					/* 轻微阴影提升层次感 */
					background-color: #f8f8f8;
					/* 加载时的背景色 */
				}

				/* 图片点击预览（可选） */
				img {
					cursor: pointer;
					transition: transform 0.2s;
				}

				img:active {
					transform: scale(0.98);
				}

				/* 其他富文本元素样式 */
				p {
					margin: 24rpx 0;
					word-break: break-word;
				}

				h1,
				h2,
				h3 {
					margin: 32rpx 0 24rpx;
					font-weight: 600;
				}

				a {
					color: #2979ff;
					text-decoration: none;
				}

				table {
					width: 100%;
					border-collapse: collapse;
					margin: 24rpx 0;
					font-size: 28rpx;
				}

				th,
				td {
					border: 1rpx solid #e0e0e0;
					padding: 16rpx;
					text-align: left;
				}
			}
		}
	}
</style>