OmniCard/mpuniapp/pages/owner/nfc/scan.uvue

<template>
  <view class="scan-page" :style="pageTheme">
    <view class="scan-content">
      <view class="scan-card">
        <text class="scan-title">{{ pageTitle }}</text>
        <text class="scan-desc">{{ t('desc') }}</text>

        <view v-if="statusLine !== ''" class="scan-status">
          <text class="scan-status-text">{{ statusLine }}</text>
        </view>

        <view class="field">
          <text class="field-label">{{ t('uidLabel') }}</text>
          <input
            class="field-input"
            type="text"
            v-model="state.uid"
            :placeholder="t('uidPlaceholder')"
            :disabled="state.submitting"
          />
        </view>

        <view class="field">
          <text class="field-label">{{ t('cardIdLabel') }}</text>
          <input
            class="field-input"
            type="number"
            v-model="state.cardIdRaw"
            :placeholder="t('cardIdPlaceholder')"
            :disabled="state.submitting"
          />
        </view>
      </view>
    </view>

    <view class="scan-cta-bar">
      <button
        class="primary-cta-btn"
        :class="{ 'primary-cta-btn-disabled': state.submitting }"
        :disabled="state.submitting"
        @click="handleActivate"
      >
        <text class="primary-cta-btn-text">{{ t('cta') }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { getCurrentLocale, getOmniText } from '../../../common/locale.uts';
import { utsLightColors, utsRadius, utsSpacing } from '../../../common/tokens.uts';
import {
  applyScanOptions,
  createScanState,
  resolveScanText,
  resolveStatusLine,
  startScan,
  submitScan,
  ScanCopyKey,
  ScanPageOptions,
} from './useScan.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(createScanState());
const pageTitle = ref(getOmniText(getCurrentLocale(), 'card.scan_nfc'));
const statusLine = computed((): string => {
  return resolveStatusLine(state);
});

function t(key: ScanCopyKey): string {
  return resolveScanText(key);
}

function handleActivate(): void {
  submitScan(state);
}

onLoad((options: ScanPageOptions) => {
  applyScanOptions(state, options);
  // #ifdef H5
  state.manualInput = true;
  // #endif
  // #ifdef APP
  startScan(state);
  // #endif
});
</script>

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

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

.scan-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;
}

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

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

.scan-status {
  margin-bottom: var(--oc-space-16, 16px);
}

.scan-status-text {
  font-size: 14px;
  color: var(--oc-text, #101828);
  line-height: 1.6;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--oc-space-16, 16px);
}

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

.field-input {
  height: 44px;
  padding-inline: 12px;
  background-color: var(--oc-surface, #F7F8FA);
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-btn, 12px);
  font-size: 16px;
  color: var(--oc-text, #101828);
}

.scan-cta-bar {
  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;
}

.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>