lanan-repair/pages/home/content.vue

<template>
  <view class="container">
<!--    <web-view :src="richTextHtml"></web-view>-->
    <VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="活动内容"></VNavigationBar>
    <!--    &lt;!&ndash; #ifdef MP-WEIXIN &ndash;&gt;-->
    <!--    <v-navigation-bar background-color="rgba(255,255,255,1)" title-color="rgba(0,0,0,0)" title="活动内容"></v-navigation-bar>-->
    <!--    &lt;!&ndash; #endif &ndash;&gt;-->
    <!--    <web-view :src="richTextHtml"></web-view>-->
    <div class="body">
      <rich-text style="width: 100%" :nodes="richTextHtml | formatRichText" />
    </div>
    <view class="fixed-button" @click="toActivity">参与<br/>活动</view>
  </view>
</template>

<script>
import request from "../../utils/request";
import config from '@/config'
import parser from 'rich-text-parser'
import VNavigationBar from "../../components/VNavigationBar.vue";

export default {
  name: "content",
  components: {VNavigationBar},
  filters: {
    formatRichText(html) { // 控制小程序中图片大小
      // console.log(html)
      const nodes = parser.getRichTextJson(html)
      return nodes.children
    }
  },
  data() {
    return {
      richTextHtml: ''
    };
  },
  onLoad(data) {
    const id = data.id;
    this.getRichTextHtml(id)
  },
  methods:{
    async getRichTextHtml(id){
      try {
        const res = await request({
          url: '/userClient/banner/getById?id=' + id,
          method: 'get'
        })
        const data = res.data
        this.richTextHtml = data.content
        // this.richTextHtml = data.content.replace(/(<img[^>]+src=")([^":]*?)(")/g, (match, p1, p2, p3) => {
        //   return `${p1}${config.baseImageUrl}/${p2}${p3}`;
        // });
        // this.richTextHtml = `data:text/html;charset=utf-8,${encodeURIComponent(this.richTextHtml)}`
      }catch {}
    },
    toActivity(){
      uni.navigateTo({
        url: '/pages/home/active'
      })
    }
  }
}
</script>

<style scoped lang="scss">
img{
  width: 100%;
  height: auto;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .body{
    flex: 1;
    height: 0;
    overflow: auto;
  }
}
.fixed-button {
  position: fixed;
  bottom: 3rem; /* 距离底部的距离 */
  right: 2rem; /* 距离右边的距离 */
  z-index: 1000; /* 确保按钮在其他元素之上 */
  width: 80px; /* 按钮直径 */
  height: 80px; /* 按钮直径 */
  background-color: #f00; /* 按钮背景颜色 */
  color: #fff; /* 文字颜色 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
  font-size: 18px; /* 字体大小 */
  text-align: center; /* 文字水平居中 */
  line-height: normal; /* 使用默认行高 */
  font-family: 'Arial', sans-serif; /* 选择字体 */
}

/* 为了确保文本垂直居中并且分行 */
.fixed-button br {
  content: '';
  display: block;
}
</style>