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

<template>
    <view class="user-agreement">
        <view class="agreement-title">{{ agreementData.title }}</view>
        <view class="agreement-content">
            <u-parse
                v-if="articleHtml"
                :html="articleHtml"
                :autoscroll="true"
                :autoset-title="false"
                :tag-style="articleTagStyle"
                class="agreement-parse"
            />
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            articleCode: ARTICLE_CODE.orderAgreement,
            agreementData: {
                title: '',
                content: '',
            },
            articleHtml: '',
            articleTagStyle: ARTICLE_TAG_STYLE,
        }
    },
    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
                        this.articleHtml = formatArticleHtml(res.data.content || '')
                    } 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;
        width: 100%;
        overflow: hidden;
    }

    .agreement-parse {
        width: 100%;
    }
}

/* u-parse 表格外层滚动容器（autoscroll 生成的 div） */
::v-deep .agreement-parse {
    .interlayer {
        width: 100%;
        max-width: 100%;
    }

    .article-table-scroll,
    view[style*='overflow'] {
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}
</style>