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">
        <image :src="detail.authorLogo || detail.imageInput" class="header-img"></image>
        <view class="">
          <view class="release-auth line1">{{ 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";
import { formatRichText } from "@/utils/util.js"
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 = formatRichText(res.data.content);
        this.detail = res.data;
      });
    },
  },
  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: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
		border-radius: 25px;
  }
  .release-auth {
		width: 550rpx;
    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>