book-hi/pages-home/pages/user-agreement.vue

<template>
    <view class="user-agreement">
        <view class="agreement-title">{{ agreementData.title }}</view>
        <view class="agreement-content">
            <rich-text :nodes="agreementData.content"></rich-text>
        </view>
    </view>
</template>

<script>
import { ARTICLE_CODE, ARTICLE_TITLE } from '@/utils/policy-config.js'

export default {
    data() {
        return {
            articleCode: ARTICLE_CODE.orderAgreement,
            agreementData: {
                title: "",
                content: "",
            },
        };
    },
    onLoad(options) {
        const code = options.code || ARTICLE_CODE.orderAgreement
        let title = ARTICLE_TITLE.orderAgreement
        if (options.title) {
            title = decodeURIComponent(options.title)
        } else {
            Object.keys(ARTICLE_CODE).forEach((key) => {
                if (ARTICLE_CODE[key] === code && ARTICLE_TITLE[key]) {
                    title = ARTICLE_TITLE[key]
                }
            })
        }

        this.articleCode = code
        uni.setNavigationBarTitle({ title })
        this.fetchAgreement()
    },
    methods: {
        fetchAgreement() {
            uni.showLoading({
                title: "加载中...",
            });
            uni.$u.http
                .get(`/token/getArticleOne?code=${this.articleCode}`)
                .then((res) => {
                    if (res.code === 200) {
                        this.agreementData = res.data;
                    } else {
                        this.$u.toast(res.msg || "获取协议内容失败");
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.user-agreement {
    min-height: 100vh;
    background-color: $app-theme-bg-color;
    padding: 30rpx;
    padding-bottom: 50px;

    .agreement-title {
        font-size: 36rpx;
        font-weight: bold;
        color: $app-theme-text-color;
        text-align: center;
        margin-bottom: 40rpx;
    }

    .agreement-content {
        font-size: 28rpx;
        color: $app-theme-text-color;
        line-height: 1.8;

        :deep(rich-text) {
            width: 100%;
        }
    }
}
</style>