dvcp_v2_wxcp_app/src/pending/party/AppPartyHistory/detail.vue

<template>
  <div class="page">
    <div>
      <div v-if="!showCommentList" class="detail">
        <!-- 文章标题 -->
        <div class="created-unit">
          <div class="artical-title break-word">{{ affairs.title }}</div>
          <div class="artical-unit">
            <span> 发布党组织 ：{{ affairs.organizationName || "-" }}</span>
          </div>
          <div class="artical-unit">
            <text>发布时间：{{ affairs.createDate }}</text>
            <text />
          </div>
        </div>
        <!-- 文章内容 -->
        <div class="artical-content break-word">
          <u-parse :html="affairs.content" class="content" v-if="affairs.content"></u-parse>
        </div>
        <!-- 语音播报-->
        <AiTransSpeech :src="affairs.speech" v-if="affairs.speech"/>
      </div>
      <commentList v-else :detail="affairs"></commentList>
      <AiComment
        :comment-count="commentCount"
        @submitComment="submitComment"
        @showCommentList="showCommentList = true"
      />
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import commentList from './commentList'
export default {
  name: "policyDetail",
  components: {commentList},
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      affairs: {},
      showCommentList: false,
      commentCount: 0,
    };
  },
  onLoad(options) {
    this.$dict.load("policyPromotionType");
    this.id = options.id;
    this.getPartyAffairsDetail(this.id);
    this.getCount();
  },
  methods: {
    getCount() {
      this.$http.post(`/app/apppartyhistorycomment/list?partyHistoryId=${this.id}`).then((res) => {
        if (res && res.data) {
          this.commentCount = res.data.total;
        }
      });
    },
    getPartyAffairsDetail(id) {
      this.$http.post(`/app/apppartyhistory/queryDetailByIdWeChat?id=${id}`).then((res) => {
          if (res && res.data) {
            res.data.createDate = res.data.createDate.substring(0, 10);
            const regex = new RegExp("<img", "gi");
            res.data.content = res.data.content
              .replace(
                regex,
                `<img style="max-width:100%!important;" calss="img"`
              )
              .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/gi, "<p")
              .replace(/<p>/gi, '<p class="p_class">')
              .replace(/style=""/g, 'style="max-width:100%!important;"');
            res.data.content = res.data.content.replace(
              /<img[^>]*>/gi,
              function (match) {
                return match.replace(
                  /style\s*?=\s*?([‘"])[\s\S]*?\1/gi,
                  'style="max-width:100%;"'
                ); // 替换style
              }
            );

            if (res.data.files && res.data.files.length) {
              res.data.files.map(item => {
                var size = item.size / 1024;
                item.fileSize = size.toFixed(0);
                return item
              })
            }

            this.affairs = { ...res.data };
          }
        });
    },
    back() {
      if (getCurrentPages().length === 1) {
        uni.switchTab({
          url: "/pages/home/home",
        });
        return false;
      }
      this.showCommentList
        ? (this.showCommentList = false)
        : uni.navigateBack();
    },
    submitComment(content) {
      this.$http
        .post("/app/apppartyhistorycomment/addOrUpdate", {
          partyHistoryId: this.affairs.id,
          content: content,
          name: this.user.nickName,
          avatar: this.user.avatarUrl,
          organizationId: this.affairs.organizationId
        })
        .then((res) => {
          if (res && res.code == 0) {
            uni.showToast({ icon: "success", title: "评论成功" });
            this.showCommentList = true
            this.getCount()
          } else {
            uni.showToast({ icon: "none", title: res.msg });
          }
        })
        .catch((err) => {
          uni.showToast({ icon: "none", title: err });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../common/common.css";

.page {
  .navHeadBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #135ab8;
    color: #fff;
    font-size: 13px;
    height: 40px;
  }

  .detail {
    width: 100%;
    overflow-y: auto;

    .created-unit {
      width: 100%;
      padding: 32px;
      box-sizing: border-box;
      background-color: #D40A05;
      color: #fff;

      .artical-title {
        font-size: 40px;
      }

      .artical-unit {
        font-size: 28px;
        margin-top: 16px;
        opacity: 0.8;
      }
    }

    .artical-content {
      color: #666666;
      font-size: 32px;
      padding: 32px 32px 128px 32px;
      box-sizing: border-box;
      background-color: #fff;

      .p_class {
        margin-top: 40px;
        font-size: 32px;
        color: #333;
        text-indent: 0;
        width: 100%;
      }

      .img {
        width: 100% !important;
      }
    }

    .attachment {
      width: 100%;
      padding: 32px 32px 96px 32px;
      box-sizing: border-box;
      background-color: #ffffff;
      margin-top: 16px;

      .attachment-title {
        font-size: 32px;
        color: #333333;
        font-weight: 500;

        image {
          width: 48px;
          height: 48px;
          vertical-align: middle;
        }
      }
    }
  }
}

.p_class {
  margin-top: 40px;
  font-size: 32px;
  color: #333;
  text-indent: 0;
  width: 100%;
}

.img {
  max-width: 100% !important;
}
  .attachment {
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-top: 16px;

    .attachment-title {
      font-size: 32px;
      color: #333333;
      font-weight: 500;

      image {
        width: 48px;
        height: 48px;
        vertical-align: middle;
      }
    }

    .attachment-item {
      border: 1px solid rgba(204, 204, 204, 1);
      padding: 16px;
      box-sizing: border-box;
      margin-top: 34px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-radius: 8px;

      .file-name {
        justify-content: flex-start;
        align-items: center;

        image {
          width: 96px;
          height: 96px;
          vertical-align: middle;
        }

        .title {
          color: #333333;
          font-size: 32px;
          word-break: break-all;
          flex: 1;
        }
      }

      .size {
        color: #999;
        font-size: 28px;
        display: flex;
        justify-content: cemter;
        align-items: center;
      }
    }
  }
</style>