OmniCard/mpuniapp/pages/owner/card/qrcode.uvue

<template>
  <view class="qrcode-page" :style="pageTheme">
    <scroll-view class="qrcode-scroll" :scroll-y="true">
      <view class="qrcode-content">
        <view v-if="state.loading" class="qrcode-skeleton">
          <view class="skeleton-line"></view>
          <view class="skeleton-card"></view>
        </view>

        <view v-else-if="state.errorMessage !== ''" class="qrcode-feedback">
          <text class="feedback-title">{{ t('error') }}</text>
          <text class="feedback-desc">{{ state.errorMessage }}</text>
        </view>

        <view v-else-if="state.empty" class="qrcode-feedback">
          <text class="feedback-title">{{ t('empty') }}</text>
          <text class="feedback-desc">{{ t('urlLabel') }}</text>
        </view>

        <view v-else class="qrcode-card">
          <text class="qrcode-title">{{ t('title') }}</text>
          <text class="qrcode-label">{{ t('urlLabel') }}</text>
          <text class="qrcode-url">{{ state.url }}</text>
          <text v-if="state.svg !== ''" class="qrcode-ready">{{ t('generated') }}</text>
        </view>
      </view>
    </scroll-view>

    <view class="qrcode-cta-bar">
      <button
        class="primary-cta-btn"
        :class="{ 'primary-cta-btn-disabled': !canCopy }"
        :disabled="!canCopy"
        @click="handleCopy"
      >
        <text class="primary-cta-btn-text">{{ t('copyCta') }}</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 {
  applyQrcodeOptions,
  copyPosterUrl,
  createQrcodeState,
  loadPosterIntoState,
  resolveQrcodeText,
  QrcodeCopyKey,
  QrcodeQuery,
} from './useCardQrcode.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(createQrcodeState());

const canCopy = computed((): boolean => {
  return state.url !== '' && !state.loading;
});

function t(key: QrcodeCopyKey): string {
  if (key === 'title') {
    return getOmniText(getCurrentLocale(), 'card.share');
  }
  return resolveQrcodeText(key);
}

function handleCopy(): void {
  copyPosterUrl(state.url);
}

onLoad((options: QrcodeQuery) => {
  const slugOrId = applyQrcodeOptions(state, options);
  loadPosterIntoState(state, slugOrId);
});
</script>

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

.qrcode-scroll {
  flex: 1;
}

.qrcode-content {
  display: flex;
  flex-direction: column;
  padding-inline: var(--oc-space-16, 16px);
  padding-block: var(--oc-space-16, 16px);
}

.qrcode-skeleton {
  display: flex;
  flex-direction: column;
}

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

.skeleton-card {
  height: 160px;
  background-color: var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-card, 16px);
}

.qrcode-feedback {
  background-color: var(--oc-bg, #FFFFFF);
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-card, 16px);
  padding: var(--oc-space-24, 24px) 20px;
  display: flex;
  flex-direction: column;
}

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

.feedback-desc {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
}

.qrcode-card {
  background-color: var(--oc-bg, #FFFFFF);
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-card, 16px);
  padding: var(--oc-space-24, 24px) 20px;
  display: flex;
  flex-direction: column;
}

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

.qrcode-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  margin-bottom: var(--oc-space-8, 8px);
}

.qrcode-url {
  font-size: 16px;
  color: var(--oc-text, #101828);
  line-height: 1.6;
  margin-bottom: var(--oc-space-12, 12px);
  word-break: break-all;
}

.qrcode-ready {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
}

.qrcode-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-disabled {
  background-color: var(--oc-border, #E3E7ED);
}

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

.primary-cta-btn-disabled .primary-cta-btn-text {
  color: var(--oc-text-2, #667085);
}
</style>