sfp_front_vue_serprati_associado_app/src/pages/associado/carteirinha/CarteirinhaPage.vue

<template>
  <div class="carteirinha-page">
    <DefaultHeaderPage class="q-px-sm"/>

    <div class="card-container">
      <q-card
        flat
        class="associado-card"
        :class="isVertical ? 'card-vertical' : 'card-horizontal'"
      >
        <div class="card-logo-row text-center">
          <img :src="LogoSerPratiParceiro" class="card-logo" alt="SerPrati" />
        </div>

        <div v-if="isOnLeave" class="on-leave-banner">
          <q-icon name="mdi-account-off-outline" size="16px" class="q-mr-xs" />
          {{ $t('associado.on_leave_carteirinha') }}
        </div>

        <div class="card-body" :class="isVertical ? 'card-body--vertical' : 'card-body--horizontal'">
          <q-avatar
            class="card-avatar"
            :size="isVertical ? '100px' : '76px'"
          >
            <img v-if="user?.photo_url" :src="user.photo_url" />
            <q-icon v-else name="mdi-account" color="white" :size="isVertical ? '64px' : '40px'" />
          </q-avatar>

          <template v-if="!isVertical">
            <div class="card-info">
              <div class="card-info__row">
                <span class="card-info__label">{{ $t('common.terms.name') }}</span>
                <span class="card-info__value">{{ user?.name ?? '—' }}</span>
              </div>
              <div class="card-info__row q-pt-sm">
                <span class="card-info__label">{{ $t('common.terms.cpf') }}</span>
                <span class="card-info__value">{{ user?.cpf ?? '—' }}</span>
              </div>
              <div class="card-info__row q-pt-sm">
                <span class="card-info__label">{{ $t('associado.registration') }}</span>
                <span class="card-info__value">{{ user?.registration ?? '—' }}</span>
              </div>
            </div>
            <div class="card-qr column">
              <canvas v-if="qrReady" ref="qrCanvas" />
              <q-spinner v-else color="white" size="48px" />
              <div v-if="user?.expiry_date" class="card-info__row q-pt-sm text-right">
                <span class="card-info__label text-right">{{ $t('associado.validity') }}</span>
                <span class="card-info__value">{{ user.expiry_date }}</span>
              </div>
            </div>
          </template>

          <div v-if="isVertical" class="card-body__vertical-content">
            <div class="card-info card-info--vertical">
              <div class="card-info__row">
                <span class="card-info__label">{{ $t('common.terms.name') }}</span>
                <span class="card-info__value">{{ user?.name ?? '—' }}</span>
              </div>
              <div class="card-info__row q-pt-xs">
                <span class="card-info__label">{{ $t('common.terms.cpf') }}</span>
                <span class="card-info__value">{{ user?.cpf ?? '—' }}</span>
              </div>
              <div class="card-info__row q-pt-xs">
                <span class="card-info__label">{{ $t('associado.registration') }}</span>
                <span class="card-info__value">{{ user?.registration ?? '—' }}</span>
              </div>
              <div class="card-info__row q-pt-xs">
                <span class="card-info__label">{{ $t('associado.validity') }}</span>
                <span class="card-info__value">{{ user?.expiry_date ?? '—' }}</span>
              </div>
            </div>
            <canvas v-if="qrReady" ref="qrCanvas" class="card-qr__canvas" />
            <q-spinner v-else color="white" size="48px" />
          </div>
        </div>
      </q-card>

      <q-btn
        round
        flat
        :icon="isVertical ? 'mdi-phone-rotate-landscape' : 'mdi-phone-rotate-portrait'"
        color="violet-normal"
        size="sm"
        :title="isVertical ? $t('associado.horizontal') : $t('associado.vertical')"
        @click="isVertical = !isVertical"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, useTemplateRef, watch, nextTick } from "vue";
import QRCode from "qrcode";
import { userStore } from "src/stores/user";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import LogoSerPratiParceiro from "src/assets/logo_serprati_parceiro.svg";

const store = userStore();
const user = ref(null);

const isOnLeave = computed(() => {
  const s = user.value?.status;
  return s === "on_leave" || s?.value === "on_leave";
});
const isVertical = ref(false);
const qrCanvas = useTemplateRef("qrCanvas");
const qrReady = ref(false);

const QR_SIZE_HORIZONTAL = 90;
const QR_SIZE_VERTICAL   = 110;

const generateQR = async () => {
  if (!user.value?.cpf && !user.value?.registration) return;
  await nextTick();
  const canvas = qrCanvas.value instanceof Array ? qrCanvas.value[0] : qrCanvas.value;
  if (!canvas) return;
  const qrData = `CPF:${user.value.cpf ?? ""}|MAT:${user.value.registration ?? ""}`;
  const size = isVertical.value ? QR_SIZE_VERTICAL : QR_SIZE_HORIZONTAL;
  await QRCode.toCanvas(canvas, qrData, { width: size, margin: 1, color: { dark: "#ffffff", light: "#661d75" } });
};

watch(isVertical, async () => {
  await nextTick();
  await generateQR();
});

onMounted(async () => {
  await store.fetchUser();
  user.value = store.user;
  qrReady.value = true;
  await generateQR();
});
</script>

<style lang="scss" scoped>
@use "src/css/quasar.variables.scss" as vars;

.associado-card {
  border-radius: 16px;
  background: linear-gradient(180deg, #661D75 0%, #BF36DB 100%);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(77, 22, 88, 0.35);
  color: vars.$neutral-light;

  .card-logo-row {
    .card-logo {
      height: 65px;
    }
  }

  .on-leave-banner {
    background: rgba(255, 152, 0, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .card-body {
    padding: 8px 16px 16px;
    display: flex;
    gap: 12px;

    &--horizontal {
      flex-direction: row;
      align-items: center;
    }

    &--vertical {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  .card-avatar {
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;

    .card-info__label {
      font-size: 11px;
      opacity: 0.8;
    }

    .card-info__value {
      font-size: 15px;
      font-weight: 600;
    }
    &--vertical {
      width: 100%;
      align-items: flex-start;
      text-align: left;

    }

    &__name {
      font-size: 14px;
      font-weight: 600;
      color: vars.$neutral-light;
      margin-bottom: 4px;
    }

    &__row {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    &__label {
      font-size: 9px;
      opacity: 0.75;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    &__value {
      font-size: 11px;
      font-weight: 500;
      color: vars.$neutral-light;
    }
  }

  .card-qr {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    canvas {
      border-radius: 6px;
    }
  }

  .card-body__vertical-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
  }

  .card-qr__canvas {
    border-radius: 6px;
    flex-shrink: 0;
  }

  &.card-horizontal {
    width: min(360px, 100%);
  }

  &.card-vertical {
    width: min(260px, 100%);
  }
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  overflow: hidden;
}

.carteirinha-page {
  background: vars.$violet-light;
  min-height: calc(100dvh - 68px);
  box-sizing: border-box;
  overflow-x: hidden;
}
</style>