book-hi/pages-mine/pages/partner/partner-rule.vue

<template>
    <view class="partner-container">
        <!-- 自定义导航栏 -->
        <u-navbar
            :is-back="true"
            title="合伙人"
            back-icon-color="#ffffff"
            title-color="#ffffff"
            :background="{ background: '#38C148' }"
            :border-bottom="false"
        >
        </u-navbar>

        <!-- 内容区域 -->
        <view class="content-wrap">
            <!-- <view v-html="content"></view> -->
            <rich-text :nodes="content"></rich-text>
            <!-- <u-parse :html="content" @imgtap="handleImageTap" :tag-style="tagStyle"></u-parse> -->
        </view>

        <!-- 底部按钮 -->
        <view class="bottom-btn-wrap">
            <image
                v-if="baseInfo.status == -1"
                src="/pages-mine/static/partner-rule.png"
                mode="aspectFit"
                style="width: 100%; height: 120rpx"
                @click="applyPartner"
            ></image>
            <image
                v-else
                src="/pages-mine/static/partner-rule-disabled.png"
                mode="aspectFit"
                style="width: 100%; height: 120rpx"
            ></image>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            content: "", // 富文本内容
            baseInfo: "",
            tagStyle: {
                img: "width: 100%; height: auto;",
                p: "margin: 0; padding: 0; display: block;",
                ".interlayer": "display: grid",
            },
        };
    },
    onLoad() {
        this.getPartnerInfo();
        this.getPartnerRule();
    },
    methods: {
        async getPartnerInfo() {
            try {
                const res = await uni.$u.http.get("/token/getUserPartnerInfo");
                if (res.code === 200) {
                    this.baseInfo = res.data;
                }
            } catch (e) {
                console.error(e);
            }
        },
        //获取合伙人规则
        async getPartnerRule() {
            try {
                const res = await uni.$u.http.get("/token/getUserPartnerRule");
                if (res.code === 200) {
                    this.content = res.data.content.replace(
                        /<img/g,
                        '<img style="width: 100%; height: auto;display: block;vertical-align: top"'
                    );
                }
            } catch (e) {
                console.error(e);
            }
        },

        //跳转至合伙人申请页面
        applyPartner() {
            uni.navigateTo({
                url: "/pages-mine/pages/partner/partner-apply",
            });
        },
        //图片点击事件
        handleImageTap(e) {
            return e.ignore();
        },
    },
};
</script>
<style>
/* 设置富文本中段落的样式 */
rich-text img {
    width: 100% !important;
    height: auto !important;
}
</style>
<style lang="scss" scoped>
.partner-container {
    min-height: 100vh;
    background-color: #ffffff;
}

/* 富文本内容样式 */
.content-wrap {
    font-size: 0; /* 消除图片间的空白间隙 */
}

.content-wrap rich-text {
    font-size: 28rpx; /* 恢复文字的正常大小 */
}

rich-text img {
    width: 100% !important;
    height: auto !important;
    display: block; /* 防止图片之间的间隙 */
    margin: 0; /* 移除可能的外边距 */
    padding: 0; /* 移除可能的内边距 */
    vertical-align: top; /* 防止图片底部的间隙 */
}

// .bottom-btn-wrap {
//     position: fixed;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     background-color: #ffffff;
//     display: flex;
//     justify-content: center;
//     box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
// }
</style>