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 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> -->
		<u-parse class="top ql-editor-box" :content="$utils.richTextImg(agreement)" ></u-parse> 
	</view>
</template>

<script>
	// import uParse from '@/components/u-parse/u-parse.vue'
	import {
		protocolInfo,
		problemInfo
	} from '@/api/user.js'
	var app = getApp()
	export default {
		components: {
		    // uParse
		  },
		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 class="ql-video" src="${src}" controls style="width:100%;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;
		padding: 0 20rpx;
		box-sizing: border-box;
		min-height: 100vh;
		// background-color: #fff;
	}

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

	</style>