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

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

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

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

          <view class="mode-meta">
            <view class="meta-row">
              <text class="meta-label">{{ t('statusLabel') }}</text>
              <text class="meta-value">{{ statusText }}</text>
            </view>
            <view class="meta-row">
              <text class="meta-label">{{ t('sceneLabel') }}</text>
              <text class="meta-value">{{ sceneText }}</text>
            </view>
          </view>

          <view class="mode-options">
            <view
              class="secondary-btn"
              :class="{ 'secondary-btn-active': state.selectedMode === 'business' }"
              @click="handleSelect('business')"
            >
              <text class="secondary-btn-text">{{ t('business') }}</text>
            </view>
            <view
              class="secondary-btn"
              :class="{ 'secondary-btn-active': state.selectedMode === 'social' }"
              @click="handleSelect('social')"
            >
              <text class="secondary-btn-text">{{ t('social') }}</text>
            </view>
          </view>
        </view>

        <view class="mode-bottom-spacer"></view>
      </view>
    </scroll-view>

    <view class="mode-cta-bar">
      <button
        class="primary-cta-btn"
        :class="{ 'primary-cta-btn-disabled': state.submitting }"
        :disabled="state.submitting"
        @click="handleApply"
      >
        <text class="primary-cta-btn-text">{{ applyLabel }}</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 {
  createModeState,
  applyModeOptions,
  selectSceneMode,
  submitApplyScene,
  resolveModeText,
  formatStatusLabel,
  formatSceneLabel,
  ModeCopyKey,
  ModePageOptions,
} from './useMode.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(createModeState());

function t(key: ModeCopyKey): string {
  if (key === 'apply') {
    return resolveModeText('apply');
  }
  return resolveModeText(key);
}

const statusText = computed((): string => {
  return formatStatusLabel(state.status);
});

const sceneText = computed((): string => {
  return formatSceneLabel(state.sceneMode);
});

const applyLabel = computed((): string => {
  if (state.submitting) {
    return getOmniText(getCurrentLocale(), 'common.loading');
  }
  return t('apply');
});

function handleSelect(mode: string): void {
  selectSceneMode(state, mode);
}

async function handleApply(): Promise<void> {
  await submitApplyScene(state);
}

onLoad((options: ModePageOptions) => {
  applyModeOptions(state, options);
});
</script>

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

.mode-scroll {
  flex: 1;
}

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

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

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

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

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

.mode-meta {
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-btn, 12px);
  padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
  margin-bottom: var(--oc-space-16, 16px);
  background-color: var(--oc-surface, #F7F8FA);
}

.meta-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-block: 4px;
}

.meta-label {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
}

.meta-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--oc-text, #101828);
}

.mode-options {
  display: flex;
  flex-direction: column;
}

.secondary-btn {
  height: 44px;
  background-color: var(--oc-bg, #FFFFFF);
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-btn, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--oc-space-12, 12px);
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.secondary-btn:active {
  opacity: 0.7;
}

.secondary-btn-active {
  background-color: var(--oc-primary-soft, #EAF1FF);
  border-color: var(--oc-primary, #0B5CFF);
}

.secondary-btn-text {
  color: var(--oc-text, #101828);
  font-size: 14px;
  font-weight: 600;
}

.secondary-btn-active .secondary-btn-text {
  color: var(--oc-primary, #0B5CFF);
}

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

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