kboss/f/web-kboss/src/views/homePage/news/NewsDetail.vue

<template>
  <div class="news-detail-page">
    <div class="news-detail-layout">
      <button type="button" class="back-btn" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        返回动态
      </button>
      <div class="news-detail-shell">
        <article v-loading="loading" class="detail-card">
          <div v-if="article.id" class="detail-content">
            <div class="detail-meta">
              <span class="detail-tag">{{ article.articleType }}</span>
              <time>{{ article.publishTime }}</time>
            </div>

            <h1>{{ article.title }}</h1>
            <!-- <p v-if="article.summary" class="summary">{{ article.summary }}</p> -->
            <!--
            <div v-if="article.coverImg" class="cover-wrap">
              <img :src="article.coverImg" :alt="article.title">
            </div> -->

            <div class="article-body" v-html="article.content"></div>
          </div>

          <div v-else-if="!loading" class="empty-state">
            <i class="el-icon-document"></i>
            <p>暂无新闻详情</p>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import { reqNewsDetail } from '@/api/newsapi/newsapi'

export default {
  name: 'NewsDetail',
  data() {
    return {
      loading: false,
      fallbackNewsImage: require('@/assets/image/news.jpg'),
      article: {
        id: '',
        title: '',
        summary: '',
        articleType: '',
        publishTime: '',
        coverImg: '',
        content: ''
      }
    }
  },
  created() {
    this.getNewsDetail()
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollToTop()
      window.setTimeout(this.scrollToTop, 0)
    })
  },
  methods: {
    scrollToTop() {
      window.scrollTo(0, 0)
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      const scrollContainers = [
        document.querySelector('.homeOut'),
        document.querySelector('.home-router-view'),
        document.querySelector('#app')
      ].filter(Boolean)
      scrollContainers.forEach((container) => {
        container.scrollTop = 0
      })
    },
    goBack() {
      this.$router.push('/homePage/news')
    },
    normalizeImageUrl(url) {
      if (!url) return ''
      if (/^(https?:|blob:|data:|\/\/)/.test(url)) return url
      return `${window.location.origin}/idfile?path=${url}`
    },
    getResponseDetail(res) {
      if (res.data && res.data.data && !Array.isArray(res.data.data)) return res.data.data
      if (res.data && !Array.isArray(res.data)) return res.data
      if (Array.isArray(res.data) && res.data[0]) return res.data[0]
      if (res.detail) return res.detail
      return {}
    },
    normalizeArticle(row) {
      return {
        id: row.id || this.$route.params.id,
        title: row.title || '未命名文章',
        summary: row.summary || '',
        articleType: row.article_type || row.type || '企业动态',
        publishTime: row.publish_time || row.publishTime || '',
        coverImg: this.normalizeImageUrl(row.cover_img || row.coverImg || ''),
        content: row.content || ''
      }
    },
    async getNewsDetail() {
      const id = this.$route.params.id || this.$route.query.id
      if (!id) {
        this.$message.warning('缺少新闻ID')
        return
      }

      this.loading = true
      try {
        const res = await reqNewsDetail({
          id,
          url_link: window.location.href
        })
        if (res && (res.status === true || res.status === 'true')) {
          this.article = this.normalizeArticle(this.getResponseDetail(res))
          this.$nextTick(() => {
            this.bindArticleImageFallback()
          })
          return
        }
        this.$message.error((res && (res.message || res.msg)) || '新闻详情加载失败')
      } catch (error) {
        this.$message.error('新闻详情加载失败')
      } finally {
        this.loading = false
      }
    },
    bindArticleImageFallback() {
      const images = this.$el.querySelectorAll('.article-body img, .cover-wrap img')
      images.forEach((image) => {
        image.onerror = () => {
          if (image.src !== this.fallbackNewsImage) {
            image.src = this.fallbackNewsImage
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.news-detail-page {
  min-height: 100vh;
  padding: 96px 24px 64px;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 55%, #f8fbff 100%);
}

.news-detail-layout {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 132px minmax(0, 677px);
  column-gap: 12px;
  align-items: start;
  margin: 0 auto;
}

.news-detail-shell {
  width: 100%;
  max-width: 677px;
  margin: 0;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  margin-top: 0;
  padding: 5px 8px;
  color: #2563eb;
  font-size: 17px;
  font-weight: 500;
  // background: #fff;
  // border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.detail-card {
  min-height: 420px;
  padding-left: 44px;
  padding-right: 44px;
  padding-bottom: 44px;
  // background: rgba(255, 255, 255, 0.92);
  // border: 1px solid rgba(226, 232, 240, 0.9);
  // border-radius: 24px;
  // box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #64748b;
  font-size: 14px;
}

.detail-tag {
  padding: 4px 10px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  border-radius: 999px;
}

h1 {
  margin: 0;
  color: #0f172a;
  font-size: 38px;
  line-height: 1.35;
}

.summary {
  margin: 18px 0 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.9;
}

.cover-wrap {
  margin: 32px 0;
  overflow: hidden;
  border-radius: 18px;
}

.cover-wrap img {
  display: block;
  width: 100%;
}

.article-body {
  color: #334155;
  font-size: 16px;
  line-height: 1.95;
}

.article-body ::v-deep img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 18px auto;
  border-radius: 12px;
  object-fit: contain;
}

.empty-state {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 16px;
}

.empty-state i {
  margin-bottom: 12px;
  font-size: 42px;
}

@media (max-width: 768px) {
  .news-detail-page {
    padding: 80px 14px 40px;
  }

  .news-detail-layout {
    display: block;
  }

  .back-btn {
    margin-bottom: 16px;
  }

  .detail-card {
    padding: 24px;
  }

  h1 {
    font-size: 28px;
  }
}
</style>