pet-system-fulfiller-app/pages/mine/settings/about/agreement-detail.vue

<template>
    <view class="container">
        <!-- 自定义头部 -->
        <view class="custom-header">
            <view class="header-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);"></image>
            </view>
            <text class="header-title">{{ title || '协议详情' }}</text>
            <view class="header-right"></view>
        </view>
        <view class="header-placeholder"></view>

        <!-- 内容区域 -->
        <scroll-view scroll-y class="content-scroll">
            <view class="content-card">
                <rich-text :nodes="content" class="rich-text"></rich-text>
            </view>
            <view class="safe-area-inset-bottom"></view>
        </scroll-view>
    </view>
</template>

<script>
import { getAgreement } from '@/api/system/agreement'

export default {
    data() {
        return {
            id: null,
            title: '',
            content: '',
            loading: false
        }
    },
    onLoad(options) {
        if (options.id) {
            this.id = options.id;
            this.loadDetail();
        }
    },
    methods: {
        async loadDetail() {
            if (!this.id) return;
            uni.showLoading({ title: '加载中...' });
            try {
                const res = await getAgreement(this.id);
                if (res.code === 200 && res.data) {
                    this.title = res.data.title;
                    this.content = res.data.content;
                    // 设置原生导航栏标题（作为兜底）
                    uni.setNavigationBarTitle({ title: this.title });
                } else {
                    uni.showToast({ title: res.msg || '获取失败', icon: 'none' });
                }
            } catch (err) {
                console.error('获取协议详情失败:', err);
                uni.showToast({ title: '网络错误', icon: 'none' });
            } finally {
                uni.hideLoading();
            }
        },
        navBack() {
            uni.navigateBack({ delta: 1 });
        }
    }
}
</script>

<style>
page {
    background-color: #fff;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 自定义头部统一风格 */
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: content-box;
    z-index: 100;
    border-bottom: 1rpx solid #f5f5f5;
}
.header-placeholder {
    height: calc(88rpx + var(--status-bar-height));
    flex-shrink: 0;
}
.back-icon {
    width: 40rpx;
    height: 40rpx;
}
.header-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}
.header-right {
    width: 40rpx;
}

.content-scroll {
    flex: 1;
    overflow: hidden;
}

.content-card {
    padding: 30rpx 40rpx;
    line-height: 1.6;
}

.rich-text {
    font-size: 28rpx;
    color: #333;
}

.safe-area-inset-bottom {
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
}
</style>