FE_IASF_client/src/pages/article/index.vue

<template>
  <div v-show="loaded"
       class="wrap">
    <div v-if="form.articleTemplate !== 23"
         class="banner"
         :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
      {{ form.columnName }}
    </div>
    <div class="content">
      <Breadcrumb ref="breadcrumb"
                  :data.sync="routes" />
      <div class="article">
        <div class="left">
          <h2>{{ form.title }}</h2>
          <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} {{$t('column.views')}} | {{ form.releaseTime }}</div>
          <div class="meta">{{ form.edit && $t('column.edit') + '：' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + '：' + form.audit }} {{ form.label && ' | ' + $t('column.label') + '：' + form.label }}</div>
          <p class="brief">{{ form.summary }}</p>
          <div class="des"
               v-html="form.mainBody"></div>
          <div v-if="form.fileList && form.fileList.length"
               class="annex">
            <h6>{{$t('column.attachmentDownload')}}</h6>
            <ul class="files">
              <li v-for="(file, i) in form.fileList"
                  :key="i">
                <span class="name">{{ file.fileName }}</span>
                <span class="download"
                      @click="download(file)">{{$t('column.download')}}</span>
              </li>
            </ul>
          </div>
        </div>
        <RightColumns ref="right" />
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import RightColumns from '@/components/rightColumns'
import mixins from '@/mixins/article'
export default {
  mixins: [mixins],
  data () {
    return {
      id: this.$route.query.articleId,
      loaded: false,
      routes: [],
      columnId: '',
      form: {},
      columnBanner: '',
    }
  },
  components: {
    Breadcrumb,
    RightColumns
  },
  watch: {
    '$route' () {
      this.id = this.$route.query.articleId
      this.getInfo()
    }
  },
  mounted () {

  },
  methods: {
    // 获取文章详情
    getInfo () {
      this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
        // 设置面包屑
        const { columnName, path, id } = this.$route.query
        this.routes = [
          {
            name: columnName || data.columnName,
            path: path ? '/' + path : '',
            query: {
              id: id || data.columnId
            }
          },
          {
            name: data.title
          }
        ]
        // 文章被禁用了就直接返回
        if (data.isDisable) {
          this.$router.back()
        } else {
          const temId = data.articleTemplate
          let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
          if (temId === 25 || temId === 26) { // 会议活动/期刊详情
            this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
          } else {
            data.releaseTime = data.releaseTime.split(' ')[0]
            this.form = data
            this.columnId = data.columnId
            // 如果没上传banner
            if (!data.bannerImg) {
              this.getBanner(this.$refs.right.columns)
              this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png')
            }
            this.loaded = true
          }
        }
      }).catch(err => { })

      // 浏览量+1
      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
    },
    // 获取banner 规则：当前文章有上传的，用上传的，没有上传的话，如果栏目有图片，读取栏目的（上级没有读上上级，以此类推）都没有的读取默认的
    getBanner (data) {
      for (const e of data) {
        if (e.columnBanner) this.columnBanner = e.columnBanner
        if (e.id == this.columnId) {
          break
        } else {
          this.getBanner(e.children)
        }
      }
    },
    // 下载附件
    download (e) {
      Util.downloadFile(e.fileName, e.filePath)
    },
  }
};
</script>

<style lang="scss" scoped>
@import './editor.css';
.content {
    width: 1200px;
    /deep/ .el-breadcrumb {
        font-size: 0.98rem;
    }
}
.banner {
    height: 21.6rem;
    padding: 14.68rem 0 0 22.1875rem;
    font-size: 2.16rem;
    font-weight: 600;
    color: #fff;
    background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
}
.article {
    display: flex;
    justify-content: space-between;
    .left {
        width: 70%;
    }
    h2 {
        font-size: 1.9rem;
        color: #1c1c1c;
    }
    .meta {
        margin: 1rem 0;
        font-size: 0.88rem;
        color: #9b9b9b;
    }
    .brief {
        padding-bottom: 1.5rem;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        line-height: 1.33;
        color: #606060;
        border-bottom: 1px solid #d8d8d8;
    }
    /deep/.des {
        img {
            max-width: 100%;
        }
    }
    .annex {
        margin-top: 30px;
        h6 {
            padding-left: 8px;
            margin-bottom: 20px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 1;
            color: #333;
            border-left: 4px solid #1583ff;
        }
        li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .name {
            margin-right: 8px;
            font-size: 14px;
        }
        .download {
            color: #1583ff;
            cursor: pointer;
        }
    }
}
@media (max-width: 1420px) {
    .content {
        width: 98%;
    }
}
@media (max-width: 1200px) {
    .article {
        /deep/.des {
            img {
                max-width: 100%;
                height: 15rem;
            }
        }
    }
    .banner {
        font-size: 1.5rem;
    }
    .article {
        flex-direction: column;
        .left {
            width: 100%;
            h2 {
                font-size: 1.5rem;
            }
        }
    }
    .article {
        .des {
            img {
                height: 15rem !important;
            }
        }
    }
}

@media (max-width: 480px) {
    .wrap {
        .banner {
            padding: 8rem 0 0 10rem;
            height: 17rem;
        }
    }
}
@media (min-width: 480px) and (max-width: 640px) {
    .wrap {
        .banner {
            padding: 12rem 0 0 10rem;
            height: 20rem;
        }
    }
}
@media (min-width: 640px) and (max-width: 768px) {
    .wrap {
        .banner {
            padding: 14rem 0 0 10rem;
            height: 22rem;
        }
    }
}
@media (min-width: 768px) and (max-width: 980px) {
    .wrap {
        .banner {
            padding: 16rem 0 0 10rem;
            height: 26rem;
        }
    }
}
@media (min-width: 980px) and (max-width: 1200px) {
    .wrap {
        .banner {
            padding: 18rem 0 0 10rem;
            height: 30rem;
        }
    }
}
</style>