hospital-accompaniment-wechat/pages/mine/agreement.vue

<template>
	<view class="agreement">
		<u-navbar :title="title" leftIconColor="#1a1a1a" titleStyle="color:#1a1a1a" :autoBack="true"
			placeholder></u-navbar>
			<!-- <video class="ql-video" src="http://192.168.0.70:8181/path/2025-09-25/动态数据展示114542895.mp4" controls style="width: 100%; height: 200px;"></video> -->
		<view class="top ql-editor-box" v-html="$utils.richTextImg(agreement)">
		</view>
	</view>
</template>

<script>
	import {
		protocolInfo,
		problemInfo
	} from '@/api/user.js'
	var app = getApp()
	export default {
		data() {
			return {
				title: "协议",
				agreement: '',
				balance: [],
				parmas: {
					page: 1,
					limit: 20,
					title: ''
				},
				noData: false,
				tabTop: 0,
				status: 'more', //more|loading|noMore
			}
		},

		onLoad(options) {
			if (options.type) {
				this.agreementInfo(options.type);
				if (options.type == 'user_protocol') {
					this.title = '用户协议';
				} else if (options.type == 'service_protocol') {
					this.title = '服务协议';
				} else if (options.type == 'privacy_protocol') {
					this.title = '隐私协议';
				} else if (options.type == 'about_us') {
					this.title = '关于我们';
				}
			}
			if (options.helpId) {
				this.title = '帮助中心';
				this.helpCenterInfo(options.helpId)
			}
		},
		methods: {
			agreementInfo(type) {
				protocolInfo({
					code: type
				}).then(res => {
					let data = this.replaceIframeWithVideo(res.data.protocolContent)
					console.log('data',data);
					this.agreement = data
				})
			},
			replaceIframeWithVideo(html) {
				return html.replace(
					/<iframe[^>]+?src=(["'])(https?:\/\/[^"']+?\.mp4)\1[^>]*?>\s*<\/iframe>/gi,
					(match, quote, src) => {
						return `<video src="${src}" controls style="width: 100px; height: 200px;"></video>`;
					}
				);
			},
			// 获取帮助中心详情
			helpCenterInfo(id) {
				problemInfo(id).then(res => {
					this.agreement = res.data.replyContent
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-navbar__content,
	::v-deep .u-status-bar {
		background-color: #fff !important;
		color: #1a1a1a;
	}

	.agreement {
		width: 100%;
		overflow: hidden;
	}

	.topsearch {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 2;
		box-sizing: border-box;
		background-color: #fff;
	}

	.topsbox {
		padding: 80rpx 30rpx 0;
	}

	.leftbox {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #e6e6e6;
		border-radius: 30rpx;
	}

	.u-p30s {
		padding: 10rpx 30rpx;
	}

	.uptop {
		padding: 30rpx 0;
		width: 100%;
		position: relative;
	}

	.turn {
		transform: rotate(90deg);
	}

	.top {
		padding: 20rpx;
	}

	::v-deep .hxicon {
		color: #1a1a1a !important;
	}

	// 富文本展示
	.ql-editor-box {
		text-align: justify;
		font-family: auto !important;

		::v-deep .ql-indent-1 {
			margin-left: 96rpx;
		}

		::v-deep .ql-indent-2 {
			margin-left: 192rpx;
		}

		::v-deep .ql-indent-3 {
			margin-left: 288rpx;
		}

		::v-deep .ql-indent-4 {
			margin-left: 384rpx;
		}

		::v-deep .ql-indent-5 {
			margin-left: 480rpx;
		}

		::v-deep .ql-indent-6 {
			margin-left: 576rpx;
		}

		::v-deep .ql-indent-7 {
			margin-left: 672rpx;
		}

		::v-deep .ql-indent-8 {
			margin-left: 768rpx;
		}

		::v-deep img {
			max-width: 100%;
		}

		::v-deep .ql-align-center {
			text-align: center;
		}

		::v-deep .ql-align-right {
			text-align: right;
		}

		::v-deep blockquote {
			display: block;
			border-left: 8px solid #d0e5f2;
			padding: 5px 10px;
			margin: 10px 0;
			line-height: 1.4;
			font-size: 100%;
			background-color: #f1f1f1;
		}

		::v-deep .ql-indent-1 {
			margin-left: 60rpx;
		}

		::v-deep .ql-indent-2 {
			margin-left: 120rpx;
		}

		::v-deep .ql-indent-3 {
			margin-left: 180rpx;
		}

		::v-deep .ql-indent-4 {
			margin-left: 240rpx;
		}

		::v-deep .ql-indent-5 {
			margin-left: 300rpx;
		}

		::v-deep .ql-size-huge {
			font-size: 80rpx;
			display: inline-block;
			line-height: 90rpx;
		}

		::v-deep .ql-size-large {
			font-size: 48rpx;
			display: inline-block;
			line-height: 50rpx;
		}

		::v-deep .ql-size-small {
			font-size: 24rpx;
			display: inline-block;
			line-height: 30rpx;
		}

		::v-deep .ql-font-serif {
			font-family: Georgia, Times New Roman, serif;
		}

		::v-deep .ql-font-monospace {
			font-family: Monaco, Courier New, monospace;
		}
	}
</style>