traffic-eff-app/pasb/pages/detail/index.vue

<template>
  <view class="content-info-container">
    <view class="title-container">
      <view class="title-content-text">{{ title }}</view>
      <view class="title-content-date">{{ date }}</view>
    </view>
    <mp-html :content="content|formatRichText" selectable="true" show-img-menu="true" />
    <view class="content-like-col" v-if="CONTENT_TYPE.news === contentType">
      <view class="icon-wrap">
        <u-icon
            :name="`${likeFlag ? 'thumb-up-fill':'thumb-up'}`"
            class="icon-base"
            @click="$u.throttle(onLikeClick,500)"
        ></u-icon>
        {{ likeCnt && likeCnt }}
      </view>
      <view class="icon-wrap">
        <u-icon
            :name="`${collectFlag ? 'star-fill':'star' }`"
            class="icon-base"
            @click="$u.throttle(onCollectClick,500)"
        ></u-icon>
        {{ collectCnt && collectCnt }}
      </view>
    </view>
  </view>
</template>

<script>
import { fetchContentDetail, fetchUsrContent, usrCollect, usrLike, usrUnCollect, usrUnLike } from '@/common/api';
import { CONTENT_TYPE } from '@/common/EnumConst';
import { authLogin, getUserInfo } from '@/util';

export default {
  name: 'content',
  props: {},
  data() {
    return {
      CONTENT_TYPE,
      content: '',
      queryParams: {},
      title: '',
      date: '',
      contentType: '',
      likeCnt: 0,
      collectCnt: 0,
      likeFlag: false,
      collectFlag: false,
      id: '',
    };
  },
  created() {
  },
  onLoad(res) {
    // 登录返回之后的页面
    if (res) {
      this.queryParams = res;
    }
    this.getContentInfo();
    this.getUsrContent();
  },
  filters: {
    /**
     * 处理富文本里的图片宽度自适应
     * 1.去掉img标签里的style、width、height属性
     * 2.img标签添加style属性：max-width:100%;height:auto
     * 3.修改所有style里的width属性为max-width:100%
     * 4.去掉<br/>标签
     * @param html
     * @returns {void|string|*}
     *
     */
    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(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/<img src="\/dev-api/gi,
          `<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="${process.env.UNI_FILE_PREFIX}`);

      newContent = newContent.replace(/<iframe(([\s\S])*?)<\/iframe>/ig, function (match, capture) {
        match = match.replace('iframe', 'video');
        match = match.replace(/<video/gi,
            '<video style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"')
            .replace(/style='[^']+'/gi, 'style=\'max-width:100%;height:auto;display:inline-block;margin:10rpx auto;\'');
        match = match.replace(/src="/gi, `src="${process.env.UNI_FILE_PREFIX}`)
            .replace(/src='/gi, `src='${process.env.UNI_FILE_PREFIX}`);
        return match;
      });
      return newContent;
    },
  },
  methods: {
    async getContentInfo() {
      const {
        data: {
          content,
          title,
          createTime,
          contentType,
          id,
          likeCnt,
          collectedCnt,
        },
      } = await fetchContentDetail(this.queryParams.id);
      this.content = content;
      this.title = title;
      this.contentType = contentType;
      this.id = id;
      this.likeCnt = likeCnt;
      this.collectCnt = collectedCnt;
      uni.setNavigationBarTitle({
        title
      })
      this.date = uni.$u.timeFormat(createTime, 'yyyy-mm-dd');
    },
    async getUsrContent() {
      const contentId = this.queryParams.id;
      const usrInfo = getUserInfo();
      if (usrInfo && usrInfo.openId) {
        const { data } = await fetchUsrContent(contentId, usrInfo.openId);
        if (data) {
          this.collectFlag = data[0]?.collectFlag === '0';
          this.likeFlag = data[0]?.likeFlag === '0';
        }
      }
    },
    onCollectClick() {
      this.collectFlag = !this.collectFlag;
      authLogin(async (usr) => {
        if (this.collectFlag) {
          this.collectCnt += 1;
          await usrCollect({
            id: this.queryParams.id,
          });
          return;
        }
        this.collectCnt -= 1;
        await usrUnCollect({
          id: this.queryParams.id,
        });
      });
    },
    onLikeClick() {
      this.likeFlag = !this.likeFlag;
      authLogin(async (usr) => {
        if (this.likeFlag) {
          this.likeCnt += 1;
          await usrLike({
            id: this.queryParams.id,
          });
          return;
        }
        this.likeCnt -= 1;
        await usrUnLike({
          id: this.queryParams.id,
        });
      });
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;