pet-system-merchant-app/pages/my/agreement/detail/index.vue

<template>
	<view class="agreement-detail-page">
		<nav-bar :title="title"></nav-bar>
		<view class="content-card" v-if="!loading">
			<text class="title">{{ agreementData.title || title }}</text>
			<rich-text :nodes="contentHtml" class="rich-content"></rich-text>
		</view>
		<view v-else class="loading-state">
			<text>协议内容加载中...</text>
		</view>
	</view>
</template>

<script setup>
// @Author: Antigravity
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getAgreement } from '@/api/system/agreement'
import navBar from '@/components/nav-bar/index.vue'

const title = ref('协议详情')
const agreementData = ref({})
const contentHtml = ref('')
const loading = ref(true)

onLoad(async (options) => {
	if (options.title) title.value = decodeURIComponent(options.title)
	if (options.id) {
		fetchAgreement(options.id)
	}
})

const fetchAgreement = async (id) => {
	loading.value = true
	try {
		const res = await getAgreement(id)
		if (res) {
			agreementData.value = res
			// 解码 Base64 内容 (Admin端采用 btoa(unescape(encodeURIComponent(content))) 编码)
			if (res.content) {
				try {
					contentHtml.value = decodeURIComponent(escape(atob(res.content)))
				} catch (e) {
					// 如果解码失败，回显原始内容
					contentHtml.value = res.content
				}
			} else {
				contentHtml.value = '暂无协议内容'
			}
		}
	} catch (error) {
		console.error('获取协议详情失败', error)
	} finally {
		loading.value = false
	}
}
</script>

<style lang="scss" scoped>
.agreement-detail-page { min-height: 100vh; background: #f7f8fa; padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); }
.content-card { background: #fff; margin: 24rpx; border-radius: 24rpx; padding: 40rpx 32rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03); }
.title { display: block; font-size: 36rpx; font-weight: 800; color: #333; margin-bottom: 32rpx; position: relative; padding-bottom: 24rpx; border-bottom: 2rpx solid #EEEEEE; }
.rich-content { display: block; font-size: 28rpx; color: #555; line-height: 1.8; word-break: break-all; }
.loading-state { text-align: center; padding: 100rpx 0; color: #999; font-size: 28rpx; }
</style>