OmniCard/mpuniapp/pages/portal/article-detail.uvue

<template>
  <view class="article-page" :style="pageTheme">
    <view v-if="state.loading" class="article-skeleton">
      <view class="skeleton-cover"></view>
      <view class="skeleton-line skeleton-title"></view>
      <view class="skeleton-line"></view>
      <view class="skeleton-line skeleton-short"></view>
    </view>

    <view v-else-if="state.empty" class="article-empty">
      <text class="article-empty-text">{{ emptyMessage }}</text>
      <button class="primary-cta-btn" @click="handleBack">
        <text class="primary-cta-btn-text">{{ backLabel }}</text>
      </button>
    </view>

    <scroll-view v-else class="article-scroll" :scroll-y="true">
      <view class="article-content">
        <image
          v-if="state.mediaUrl !== ''"
          class="article-cover"
          :src="state.mediaUrl"
          mode="aspectFill"
        />
        <text class="article-kicker">{{ articleKicker }}</text>
        <text class="article-title">{{ state.title }}</text>
        <rich-text
          v-if="state.isHtmlContent"
          class="article-rich"
          :nodes="state.content"
        ></rich-text>
        <text v-else class="article-body">{{ state.content }}</text>
        <view class="article-bottom-spacer"></view>
      </view>
    </scroll-view>

    <view v-if="!state.loading && !state.empty" class="article-cta-bar">
      <button class="primary-cta-btn" @click="handleCopy">
        <text class="primary-cta-btn-text">{{ shareCtaLabel }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
import { getCurrentLocale, getOmniText } from '../../common/locale.uts';
import {
  createArticleDetailState,
  applyArticleDetailOptions,
  loadArticleDetail,
  copyArticleShareLink,
  goBackFromArticle,
  getArticleShareFields,
  getArticleBackLabel,
  getArticleEmptyMessage,
  getCurrentPageUrl,
  ArticleDetailPageOptions,
} from './useArticleDetail.uts';

const pageTheme: Record<string, string> = {
  '--oc-primary': utsLightColors.primary,
  '--oc-primary-soft': utsLightColors.primarySoft,
  '--oc-bg': utsLightColors.bg,
  '--oc-surface': utsLightColors.surface,
  '--oc-border': utsLightColors.border,
  '--oc-text': utsLightColors.text,
  '--oc-text-2': utsLightColors.text2,
  '--oc-radius-btn': utsRadius.button,
  '--oc-radius-card': utsRadius.card,
  '--oc-space-8': utsSpacing.space8,
  '--oc-space-12': utsSpacing.space12,
  '--oc-space-16': utsSpacing.space16,
  '--oc-space-24': utsSpacing.space24,
};

const state = reactive(createArticleDetailState());
const shareCtaLabel = ref(getArticleShareFields(state, '').ctaLabel);
const backLabel = ref(getArticleBackLabel());
const emptyMessage = ref(getArticleEmptyMessage());
const articleKicker = ref(getOmniText(getCurrentLocale(), 'portal.article'));

async function handleCopy(): Promise<void> {
  copyArticleShareLink(state, getCurrentPageUrl(state));
}

function handleBack(): void {
  goBackFromArticle(state);
}

onLoad((options: ArticleDetailPageOptions) => {
  const ready = applyArticleDetailOptions(state, options);
  if (ready) {
    loadArticleDetail(state);
  }
});
</script>

<style scoped>
.article-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--oc-surface, #F7F8FA);
}

.article-skeleton {
  display: flex;
  flex-direction: column;
  padding: var(--oc-space-16, 16px);
}

.skeleton-cover {
  height: 200px;
  border-radius: var(--oc-radius-card, 16px);
  background-color: var(--oc-border, #E3E7ED);
  margin-bottom: var(--oc-space-24, 24px);
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background-color: var(--oc-border, #E3E7ED);
  margin-bottom: var(--oc-space-12, 12px);
}

.skeleton-title {
  height: 24px;
  width: 72%;
}

.skeleton-short {
  width: 48%;
}

.article-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: var(--oc-space-24, 24px);
}

.article-empty-text {
  font-size: 16px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
  margin-bottom: var(--oc-space-24, 24px);
}

.article-scroll {
  flex: 1;
}

.article-content {
  display: flex;
  flex-direction: column;
  padding: var(--oc-space-16, 16px);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.article-cover {
  width: 100%;
  height: 200px;
  border-radius: var(--oc-radius-card, 16px);
  border: 1px solid var(--oc-border, #E3E7ED);
  margin-bottom: var(--oc-space-24, 24px);
}

.article-kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--oc-primary, #0B5CFF);
  margin-bottom: var(--oc-space-8, 8px);
  line-height: 1.25;
  letter-spacing: 0.5px;
}

.article-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--oc-text, #101828);
  line-height: 1.25;
  margin-bottom: var(--oc-space-16, 16px);
}

.article-rich {
  font-size: 16px;
  color: var(--oc-text, #101828);
  line-height: 1.7;
}

.article-body {
  font-size: 16px;
  color: var(--oc-text, #101828);
  line-height: 1.7;
}

.article-bottom-spacer {
  height: calc(88px + env(safe-area-inset-bottom, 0px));
}

.article-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px var(--oc-space-16, 16px) calc(16px + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
  background-color: var(--oc-bg, #FFFFFF);
  border-top: 1px solid var(--oc-border, #E3E7ED);
  box-sizing: border-box;
  z-index: 100;
}

.primary-cta-btn {
  height: 48px;
  min-height: 44px;
  background-color: var(--oc-primary, #0B5CFF);
  border-radius: var(--oc-radius-btn, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-width: 0;
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.primary-cta-btn:active {
  opacity: 0.85;
}

.primary-cta-btn-text {
  color: var(--oc-bg, #FFFFFF);
  font-size: 15px;
  font-weight: 600;
}
</style>