web/apps/mobile/src/views/article/components/ContentMainText.vue

<template>
  <ContentModuleCard title="公告正文" class="content-main-text-container">
    <section class="content-main-text">
      <pre v-html="content.contentHighlighted"></pre>
    </section>
    <AttachmentDownloadCard class="attachment-download-section" />
    <div></div>
    <Reward
      :beforeLeavePage="beforeLeavePage"
      v-if="rewardShow"
      :id="content.id" />
    <section class="others-footer">
      <div class="origin-link-container">
        <OriginLink :id="content.id" v-if="content.originalShow" />
      </div>
      <button class="feedback-button clickable" @click="feedback">
        意见反馈
      </button>
    </section>
  </ContentModuleCard>
</template>
<script>
import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
import AttachmentDownloadCard from '@/views/article/components/AttachmentDownloadCard.vue'
import OriginLink from '@/views/article/components/OriginLink.vue'
import Reward from '@/views/article/components/Reward.vue'
import { mapState, mapGetters } from 'vuex'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'

export default {
  name: 'ContentMainText',
  components: {
    AttachmentDownloadCard,
    OriginLink,
    Reward,
    ContentModuleCard
  },
  props: {
    beforeLeavePage: Function
  },
  computed: {
    ...mapState({
      content: (state) => state.article.mainModel.content
    }),
    canRead() {
      return this.content.isCanRead
    },
    rewardShow() {
      return this.canRead && this.$envs.inWX
    },
    ...mapGetters('user', ['isLogin'])
  },
  methods: {
    async feedback() {
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.用户反馈, {
        query: {
          fkid: this.content.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .content-module-main {
    padding: 12px 16px;
    background-color: $white;
  }
}
.content-main-text {
  margin-bottom: 16px;
  ::v-deep {
    pre {
      display: inherit;
      padding: 0;
      margin: 0;
      font-size: 14px !important;
      word-break: break-word;
      white-space: pre-wrap;
      color: #333;
      background-color: #fff;
      border: 0px;
      border-radius: 4px;
      line-height: 25px;
      overflow-x: hidden;
    }

    .content-table-container {
      max-width: 100%;
      overflow-x: scroll;
    }

    table {
      border-collapse: collapse !important;
      white-space-collapse: collapse;
      border-spacing: 0px !important;
      line-height: 21px;
      background: transparent;
      max-width: 100%;

      th,
      tr td {
        border: 1px solid #ebebeb;
        padding: 2px 4px;
      }
    }

    // 第三方认证服务插入样式
    .third-party-verify-button {
      color: #2cb7ca;
    }
    .icon-third-party-verify-logo {
      display: inline-block;
      width: 18px;
      height: 18px;
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: sub;
    }
    .button-text {
      display: inline-block;
      margin-left: 2px;
      line-height: 18px;
      text-decoration: underline;
    }
  }
}

.attachment-download-section {
  margin-bottom: 10px;
}

.icon-data-download {
  width: 24px;
  height: 24px;
}
.others-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  line-height: 22px;
  .feedback-button {
    color: #9b9ca3;
    background: transparent;
  }
}
</style>