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>
export default {
    data() {
        return {
            agreementData: {
                title: "",
                content: "",
            },
        };
    },
    onLoad() {
        this.getOrderAgreement();
    },
    methods: {
        // 获取下单协议
        getOrderAgreement() {
            uni.showLoading({
                title: "加载中...",
            });
            uni.$u.http
                .get("/token/getArticleOne?code=orderAgreement")
                .then((res) => {
                    console.log(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>