huimv-baqing/ruoyi-ui-app/package-a/news-detail/index.vue

<template>
  <!-- 资讯详情：展示列表接口返回的全部字段 -->
  <view :class="pageRootClass" class="tab-page news-detail-page">
    <scroll-view scroll-y class="news-detail-scroll" enable-back-to-top>
      <view class="news-detail-inner">
        <text class="news-detail-title">{{ resolvedTitle }}</text>

        <view class="news-detail-meta">
          <text v-if="displayTypeLabel" class="news-detail-meta__tag text-body">{{ displayTypeLabel }}</text>
          <text class="text-body news-detail-date">{{ displayDate }}</text>
        </view>

        <view class="news-detail-section">
          <text class="news-detail-section__label text-title">{{ $t('newsDetailPage.coverTitle') }}</text>
          <image
            v-if="hasCover"
            class="news-detail-cover"
            :src="coverFullUrl"
            mode="widthFix"
            role="button"
            @click="previewCover"
          />
          <text v-else class="text-body news-detail-muted">{{ $t('newsDetailPage.noCover') }}</text>
        </view>

        <view class="news-detail-section">
          <text class="news-detail-section__label text-title">{{ $t('newsDetailPage.introTitle') }}</text>
          <text class="text-body news-detail-intro">{{ displayIntro || $t('newsDetailPage.noIntro') }}</text>
        </view>

        <view v-if="showContentAttachment" class="news-detail-section">
          <text class="news-detail-section__label text-title">{{ $t('newsDetailPage.attachmentTitle') }}</text>

          <image
            v-if="attachmentKind === 'image'"
            class="news-detail-attach-img"
            :src="contentFullUrl"
            mode="widthFix"
            role="button"
            @click="previewImageAttachment"
          />

          <view v-else-if="attachmentKind === 'video'" class="news-detail-video-wrap">
            <video
              class="news-detail-video"
              :src="contentFullUrl"
              controls
              object-fit="contain"
              :enable-progress-gesture="true"
              :show-center-play-btn="true"
            />
          </view>

          <view v-else-if="attachmentKind === 'pdf'" class="news-detail-pdf-wrap">
            <!-- #ifdef H5 -->
            <iframe
              class="news-detail-pdf-frame"
              :src="contentFullUrl"
              frameborder="0"
            />
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <view class="news-detail-attach-card" role="button" @click="openOnlineAttachment">
              <up-icon name="file-text" color="#15803d" :size="28" />
              <view class="news-detail-attach-card__mid">
                <text class="news-detail-attach-card__name">{{ attachmentFileName }}</text>
                <text class="text-body news-detail-attach-card__hint">{{ $t('newsDetailPage.viewOnline') }}</text>
              </view>
              <up-icon name="arrow-right" color="#9ca3af" :size="16" />
            </view>
            <!-- #endif -->
          </view>

          <view
            v-else
            class="news-detail-attach-card"
            role="button"
            @click="openOnlineAttachment"
          >
            <up-icon name="file-text" color="#15803d" :size="28" />
            <view class="news-detail-attach-card__mid">
              <text class="news-detail-attach-card__name">{{ attachmentFileName }}</text>
              <text class="text-body news-detail-attach-card__hint">{{ $t('newsDetailPage.viewOnline') }}</text>
            </view>
            <up-icon name="arrow-right" color="#9ca3af" :size="16" />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import UIcon from 'uview-plus/components/u-icon/u-icon.vue'
import tabPage from '@/mixins/tabPage'
import { resolveResourceUrl } from '@/utils/resourceUrl'
import { fileNameFromPath, openOnlinePreview, resolveMediaKind } from '@/utils/filePreview'
import { takeNewsDetailPayload } from '@/utils/newsDetailCache'

function decodeQuery(val) {
  if (val == null || val === '') {
    return ''
  }
  try {
    return decodeURIComponent(String(val))
  } catch (e) {
    return String(val)
  }
}

function normPath(url) {
  return String(url || '')
    .trim()
    .replace(/\\/g, '/')
    .split('?')[0]
    .toLowerCase()
}

export default {
  components: {
    'up-icon': UIcon
  },
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'newsDetailPage.navTitle',
      displayTitle: '',
      displayDate: '',
      displayIntro: '',
      displayType: '',
      displayTypeLabel: '',
      coverFileUrl: '',
      contentFileUrl: '',
      titleN: 1,
      openingAttachment: false,
      /** breeding：养殖资讯；livestock：畜牧资源 */
      listKind: 'breeding'
    }
  },
  computed: {
    resolvedTitle() {
      if (this.displayTitle) {
        return this.displayTitle
      }
      if (this.listKind === 'livestock') {
        return this.$t('livestockResourcesPage.titleTpl', { n: this.titleN })
      }
      return this.$t('breedingNewsPage.titleTpl', { n: this.titleN })
    },
    hasCover() {
      return !!(this.coverFileUrl || '').trim()
    },
    hasAttachment() {
      return !!(this.contentFileUrl || '').trim()
    },
    coverFullUrl() {
      return resolveResourceUrl(this.coverFileUrl)
    },
    contentFullUrl() {
      return resolveResourceUrl(this.contentFileUrl)
    },
    attachmentKind() {
      return resolveMediaKind(this.contentFileUrl)
    },
    attachmentFileName() {
      return fileNameFromPath(this.contentFileUrl)
    },
    /** 正文附件与封面为同一张图时，封面区已展示，不再重复 */
    showContentAttachment() {
      if (!this.hasAttachment) {
        return false
      }
      if (!this.hasCover) {
        return true
      }
      if (normPath(this.coverFileUrl) !== normPath(this.contentFileUrl)) {
        return true
      }
      return this.attachmentKind !== 'image'
    }
  },
  onLoad(query) {
    this.listKind = query.kind === 'livestock' ? 'livestock' : 'breeding'
    const n = parseInt(query.n, 10)
    this.titleN = Number.isFinite(n) && n > 0 ? n : 1

    const cacheKey = decodeQuery(query.cacheKey)
    const cached = takeNewsDetailPayload(cacheKey)
    if (cached) {
      this.applyArticle(cached)
      return
    }

    this.applyArticle({
      title: decodeQuery(query.title),
      publishTime: decodeQuery(query.date),
      introduction: decodeQuery(query.introduction),
      type: decodeQuery(query.type),
      typeLabel: decodeQuery(query.typeLabel),
      coverFileUrl: decodeQuery(query.coverFileUrl),
      contentFileUrl: decodeQuery(query.contentFileUrl),
      listKind: this.listKind
    })
  },
  methods: {
    applyArticle(data) {
      if (!data || typeof data !== 'object') {
        return
      }
      this.displayTitle = data.title || ''
      this.displayIntro = data.introduction || ''
      this.displayType = data.type || ''
      this.displayTypeLabel = data.typeLabel || data.typeName || ''
      this.coverFileUrl = data.coverFileUrl || ''
      this.contentFileUrl = data.contentFileUrl || ''
      this.displayDate = data.publishTime || ''
      if (data.listKind === 'livestock' || data.listKind === 'breeding') {
        this.listKind = data.listKind
      }
      if (!this.displayDate) {
        const d = new Date()
        const y = d.getFullYear()
        const m = `${d.getMonth() + 1}`.padStart(2, '0')
        const day = `${d.getDate()}`.padStart(2, '0')
        this.displayDate = `${y}-${m}-${day}`
      }
    },
    previewCover() {
      if (!this.coverFullUrl) {
        return
      }
      uni.previewImage({
        urls: [this.coverFullUrl],
        current: 0
      })
    },
    previewImageAttachment() {
      if (!this.contentFullUrl) {
        return
      }
      uni.previewImage({
        urls: [this.contentFullUrl],
        current: 0
      })
    },
    openOnlineAttachment() {
      if (!this.contentFileUrl || this.openingAttachment) {
        return
      }
      if (this.attachmentKind === 'image') {
        this.previewImageAttachment()
        return
      }
      this.openingAttachment = true
      openOnlinePreview(this.contentFileUrl, { title: this.attachmentFileName })
        .catch(() => {
          uni.showToast({
            title: this.$t('newsDetailPage.previewFail'),
            icon: 'none'
          })
        })
        .finally(() => {
          this.openingAttachment = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/morandi.scss';
@import '@/styles/tab-page.scss';

.news-detail-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
  background: $morandi-bg-page;
}

.news-detail-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.news-detail-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28rpx;
  min-width: 0;
  padding: 40rpx 32rpx 48rpx;
  box-sizing: border-box;
}

.news-detail-title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 38rpx;
  font-weight: 700;
  line-height: 1.45;
  color: #111827;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.news-detail-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12rpx 20rpx;
  width: 100%;
}

.news-detail-meta__tag {
  padding: 6rpx 16rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  line-height: 1.4;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border: 1rpx solid rgba(34, 197, 94, 0.25);
}

.news-detail-date {
  font-size: 24rpx;
  line-height: 1.5;
  color: $morandi-text-muted;
}

.news-detail-section {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  min-width: 0;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  background: $morandi-bg-card;
  border: 1rpx solid $morandi-border;
}

.news-detail-section__label {
  font-size: 30rpx;
  font-weight: 600;
  color: $morandi-text;
}

.news-detail-muted {
  font-size: 26rpx;
  line-height: 1.5;
  color: $morandi-text-muted;
}

.news-detail-intro {
  font-size: 28rpx;
  line-height: 1.6;
  color: $morandi-text-secondary;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.news-detail-cover,
.news-detail-attach-img {
  display: block;
  width: 100%;
  border-radius: 12rpx;
  background: $morandi-bg-card-inner;
}

.news-detail-video-wrap {
  width: 100%;
  min-width: 0;
  border-radius: 12rpx;
  overflow: hidden;
  background: #1a1a1a;
  border: 1rpx solid $morandi-border-soft;
}

.news-detail-video {
  display: block;
  width: 100%;
  height: 400rpx;
  background: #1a1a1a;
}

.news-detail-pdf-wrap {
  width: 100%;
  min-width: 0;
}

.news-detail-pdf-frame {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 480rpx;
  border: none;
  border-radius: 12rpx;
  background: $morandi-bg-card-inner;
}

.news-detail-attach-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  min-width: 0;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: $morandi-bg-card-inner;
  border: 1rpx solid $morandi-border-soft;
}

.news-detail-attach-card__mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.news-detail-attach-card__name {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.45;
  color: $morandi-text;
  word-break: break-all;
}

.news-detail-attach-card__hint {
  font-size: 24rpx;
  color: $morandi-accent-soft;
}

.news-detail-page.lang-bo {
  .news-detail-title {
    font-size: 34rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  .news-detail-date,
  .news-detail-intro,
  .news-detail-muted {
    font-size: 22rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  .news-detail-section__label {
    font-size: 28rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  .news-detail-attach-card__name {
    font-size: 26rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }
}
</style>