yunshengtai-uniapp/pages/life/articleDetail/index.vue

<template>
  <view class="article-box">
    <view class="article-header">
      <view class="headline">{{ detail.title }}</view>
      <view class="acea-row">
        <view class="header-img"><image :src="detail.authorLogo"></image></view>
        <view class="">
          <view class="release-auth">{{ detail.author }}</view>
          <view class="acea-row">
            <view class="fz24 acea-row row-middle">
              <image
                src="../../../static/images/eye.png"
                class="eye-icon"
              ></image>
              <text>{{ detail.visit }}</text>
            </view>
            <view class="fz24">{{ detail.formatTime }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="explain-box"
        >转载声明：本文由云快讯收录，观点仅代表作者本人。不代表云快讯立场，云快讯不对所包含的准确性，可靠性或完整性提供任何明示，请自行承担任何责任。</view
      >
      <rich-text :nodes="detail.content"></rich-text>
    </view>
  </view>
</template>

<script>
import { getArticleDetail } from "@/api/home";
export default {
  data() {
    return {
      id: this.id,
      detail: {},
    };
  },
  onShareAppMessage() {
    return {
      title: this.detail.title,
      imageUrl: this.detail.imageInput,
      path: "/pages/life/articleDetail/index?id=" + this.detail.id,
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  methods: {
    getArticleDetail() {
      getArticleDetail({ id: this.id }).then((res) => {
        res.data.content = this.formatRichText(res.data.content);
        this.detail = res.data;
      });
    },
    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,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      return newContent;
    },
  },
  onLoad: function (option) {
    this.id = this.$yroute.query.id;
    this.getArticleDetail();
  },
};
</script>

<style lang="less">
.article-box {
  width: 100%;
  min-height: 100vh;
  .article-header {
    padding: 0 40rpx;
  }
  .headline {
    font-size: 32rpx;
    color: #333333;
    padding-top: 20rpx;
    margin-bottom: 30rpx;
    font-weight: 500;
  }
  .header-img {
    width: 72rpx;
    height: 72rpx;
    margin-right: 20rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 25px;
    }
  }
  .release-auth {
    font-size: 32rpx;
    color: #333;
    line-height: 44rpx;
    margin-bottom: 6rpx;
  }
  .fz24 {
    font-size: 24rpx;
    color: #707070;
    margin-right: 20rpx;
  }
  .eye-icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 8rpx;
  }
  .content {
    width: 100%;
    padding: 24rpx;
    overflow: hidden;
  }
  .explain-box {
    width: 100%;
    padding: 12rpx 34rpx;
    background: #e3e3e3;
    color: #999;
    font-size: 24rpx;
    line-height: 38rpx;
    border-radius: 12rpx;
    margin-bottom: 12rpx;
  }
}
</style>