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

<template>
  <!-- 课程详情（英文路径）：上视频、中标题、下日期+简介 -->
  <view :class="pageRootClass" class="tab-page course-detail-page">
    <scroll-view scroll-y class="course-detail-scroll" enable-back-to-top>
      <view class="course-detail-inner">
        <view class="course-detail-top">
          <video
            v-if="videoSrc"
            class="course-detail-video"
            :src="videoSrc"
            :poster="posterSrc"
            controls
            object-fit="contain"
            :enable-progress-gesture="true"
            :show-center-play-btn="true"
          />
          <view v-else class="course-detail-video course-detail-video--empty">
            <text class="text-body course-detail-video__ph">{{ $t('courseDetailPage.noVideo') }}</text>
          </view>
        </view>
        <text class="course-detail-title">{{ displayTitle }}</text>
        <view class="course-detail-bottom">
          <text class="text-body course-detail-date">{{ displayDate }}</text>
          <text class="text-body course-detail-intro">{{ introText }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import tabPage from '@/mixins/tabPage'
import { resolveResourceUrl } from '@/utils/resourceUrl'

const POSTER = '/static/ai/hero.png'

export default {
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'courseDetailPage.navTitle',
      courseId: '',
      displayTitleRaw: '',
      typeCode: '',
      displayDate: '',
      introduction: '',
      videoSrc: '',
      posterSrc: POSTER
    }
  },
  computed: {
    displayTitle() {
      return this.displayTitleRaw || this.$t('courseDetailPage.titleFallback')
    },
    introText() {
      return this.introduction || this.$t('courseDetailPage.noIntro')
    }
  },
  onLoad(query) {
    const q = query || {}
    this.courseId = this.decodeQuery(q, 'id')
    this.displayTitleRaw = this.decodeQuery(q, 'title')
    this.typeCode = this.decodeQuery(q, 'type')
    this.introduction = this.decodeQuery(q, 'introduction')
    this.displayDate = this.decodeQuery(q, 'date') || this.$t('courseDetailPage.noDate')

    const src = this.decodeQuery(q, 'src')
    this.videoSrc = src ? resolveResourceUrl(src) : ''

    const cover = this.decodeQuery(q, 'cover')
    this.posterSrc = cover ? resolveResourceUrl(cover) : POSTER
  },
  onShow() {
    const p = uni.setNavigationBarTitle({
      title: this.displayTitleRaw || this.$t(this.navTitleKey)
    })
    if (p && typeof p.catch === 'function') {
      p.catch(() => {})
    }
  },
  methods: {
    decodeQuery(q, key) {
      const raw = q && q[key]
      if (raw == null || raw === '') {
        return ''
      }
      try {
        return decodeURIComponent(String(raw))
      } catch (e) {
        return String(raw)
      }
    }
  }
}
</script>

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

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

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

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

.course-detail-top {
  width: 100%;
  min-width: 0;
  border-radius: 16rpx;
  overflow: hidden;
  background: #000;
  border: 1rpx solid $morandi-border;
}

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

.course-detail-video--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-detail-video__ph {
  color: $morandi-text-muted;
  text-align: center;
  padding: 24rpx;
}

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

.course-detail-bottom {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  min-width: 0;
  padding: 0 8rpx;
  box-sizing: border-box;
}

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

.course-detail-intro {
  font-size: 28rpx;
  line-height: 1.55;
  color: $morandi-text-secondary;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

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

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

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