rtliveDoctor/pages_user/serviceAgreementDetail.vue

<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon"><</text>
			</view>
			<view class="nav-title">{{ agreementTitle }}</view>
			<view class="nav-right">
				<text class="more-icon">...</text>
				<text class="eye-icon">O</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<view class="agreement-content" v-html="agreementContent"></view>
		</scroll-view>
	</view>
</template>

<script>
import { getServiceAgreementDetail } from '@/api-js/serviceAgreement'
export default {
	data() {
		return {
			agreementType: '',
			agreementId: '',
			agreementTitle: '服务协议',
			agreementContent: ''
		}
	},
	onLoad(options) {
		if (options.type) {
			this.agreementType = options.type
		}
		if (options.id) {
			this.agreementId = options.id
		}
		this.setTitle()
		this.loadAgreementDetail()
	},
	methods: {
		setTitle() {
			const titleMap = {
				'userService': '用户服务协议',
				'userRegister': '用户注册协议',
				'privacy': '隐私政策保护'
			}
			this.agreementTitle = titleMap[this.agreementType] || '服务协议'
		},
		async loadAgreementDetail() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getServiceAgreementDetail({
					type: this.agreementType,
					id: this.agreementId
				})
				uni.hideLoading()
				
				if (res.code === 200 && res.data) {
					this.agreementContent = res.data.content || '暂无内容'
					if (res.data.title) {
						this.agreementTitle = res.data.title
					}
				} else {
					this.agreementContent = '暂无内容，请稍后再试'
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载协议详情失败', e)
				this.agreementContent = '加载失败，请稍后再试'
			}
		},
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

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

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.nav-left {
		width: 60rpx;
		
		.back-icon {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
		width: 60rpx;
		justify-content: flex-end;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
		
		.eye-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
}

.agreement-content {
	padding: 32rpx 24rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.8;
	word-wrap: break-word;
	
	::v-deep p {
		margin-bottom: 16rpx;
	}
	
	::v-deep h1,
	::v-deep h2,
	::v-deep h3 {
		font-weight: bold;
		margin: 24rpx 0 16rpx;
	}
	
	::v-deep ul,
	::v-deep ol {
		padding-left: 40rpx;
		margin-bottom: 16rpx;
	}
}
</style>