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

<template>
  <ContentModuleCard title="公告正文" class="content-main-text-container" :class="{ 'mask-content': showMask }">
    <template v-if="showMask">
      <div class="content-text-mask-container">
        <img src="@/assets/image/mask/bg/article-content-mask-card@2x.png" alt="">
        <div class="click-to-get" @click="toUnlockContent"></div>
        <div class="mask-feedback" @click="feedback"></div>
      </div>
    </template>
    <template v-else>
      <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>
    </template>
  </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: {
    showMask: {
      type: Boolean,
      default: false
    },
    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: {
    toUnlockContent() {
      console.log('tounlockcontent')
    },
    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;
  }
}
.mask-content {
  ::v-deep {
    .content-module-main {
      padding: 0;
    }
  }
}

.content-text-mask-container {
  position: relative;
  .click-to-get {
    position: absolute;
    width: 134px;
    height: 36px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 126px;
  }
  .mask-feedback {
    position: absolute;
    width: 60px;
    height: 24px;
    right: 16px;
    bottom: 12px;
  }
}

.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;
        white-space: nowrap;
      }
    }

    // 第三方认证服务插入样式
    .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>