sociology_app/pages/homePage/index/noticeDetail.vue

<template>
   
  <view class="container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar
      :title="prescriptDetail.title"
      bgColor="#3AB3AE"
      fontColor="#fff"
    ></z-nav-bar>
    <view class="contentBox" v-if="prescriptDetail.type == 0">
      <view class="content">
        <!-- <uni-section class="mb-10" titleFontSize="18px" title="标题" type="line"> -->
        <view class="item title-center">
          {{ prescriptDetail.title }}
        </view>
        <!-- </uni-section> -->
        <!-- <uni-section class="mb-10" titleFontSize="18px" title="内容" type="line"> -->

        <rich-text
          v-if="prescriptDetail.content"
          class="item"
          :nodes="formatRichText(prescriptDetail.content)"
        ></rich-text>

        <!-- </uni-section> -->
        <!-- <view class="item" v-html="prescriptDetail.content">
				</view> -->
      </view>
    </view>
    <view class="fullscreen-webview" v-else>
      <!-- <z-nav-bar :title="prescriptDetail.title" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar> -->
      <web-view :src="prescriptDetail.url"> </web-view>
    </view>
    <music-play :playData="playData"></music-play>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
export default {
  data() {
    return {
      options: {},
      playData: {},
      prescriptDetail: {
        images: [],
      },
      id: null,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.options = options;
  },
  onShow() {
    this.getDetail();
  },
  methods: {
    formatRichText(html) {
      //控制图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        },
      );
      // newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
      // 	match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
      // 	return match;
      // });
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"',
      );
      return newContent;
    },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // 方剂详情
    getDetail() {
      $http
        .request({
          url:
            this.options.type == "taihu"
              ? "common/taihuWelfare/getTaihuWelfareArticleDetail"
              : "common/message/getMessageById?id=" + this.id,
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data:
            this.options.type == "taihu"
              ? {
                  id: this.options.id,
                }
              : {
                  // loadAnimate: 'none', // 请求加载动画
                  // 'prescriptId': this.prescriptId
                },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log(res, "内容获取成功");
          if (res.code == 0) {
            this.prescriptDetail = res.result;
            if (
              this.prescriptDetail.content &&
              this.prescriptDetail.contentType == 1
            ) {
              this.prescriptDetail.content = res.result.content;

              //.replace(
              //   /<img/g,
              //   '<img style="max-width: 100%;"'
              // );
            }
            // if (this.prescriptDetail.image) {
            // 	this.prescriptDetail.images = this.prescriptDetail.image.split(';');
            // }
          }
        })
        .catch((e) => {
          // this.titleList = []
          console.log(e);
        });
    },
  },
  components: {
    musicPlay,
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  padding-bottom: 20rpx;
}
.contentBoxwebwiew {
  height: 100%;
  // .webwiew{
  // 	height: 100%;
  // }
}
.fullscreen-webview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.content {
  font-size: 28rpx;
}

.swiper-item {
  image {
    margin: 0 auto;
    height: 250rpx;
  }
}

.uni-margin-wrap {
  margin-bottom: 20rpx;
  padding-top: 20rpx;
  background-color: #fff;
}

.container {
  padding: 10rpx;

  // background-color: #fff;
  .item {
    // color: #666;
    padding: 10rpx 20rpx;
    padding-bottom: 20rpx;
    line-height: 46rpx;
  }
  .title-center {
    text-align: center;
    font-size: 32rpx;
    font-weight: 700 !important;
  }
}

.flexbox {
  display: flex;
}

/deep/ .uni-section-header__decoration.line {
  background-color: #18bc37;
}
</style>