Explorar o código

ajuste validacao carteirinha para exibir foto e data da validade

Gustavo Zanatta hai 1 mes
pai
achega
df53b0f832

+ 3 - 1
src/i18n/locales/en.json

@@ -699,7 +699,9 @@
     "associate_found":     "Associate Found",
     "name":                "Name",
     "cpf":                 "CPF",
-    "registration":        "Registration"
+    "registration":        "Registration",
+    "expiry_date":         "Expiry Date",
+    "no_photo":            "No photo"
   },
   "relatorio": {
     "exportar_excel":    "Export Excel",

+ 3 - 1
src/i18n/locales/es.json

@@ -699,7 +699,9 @@
     "associate_found":     "Asociado Encontrado",
     "name":                "Nombre",
     "cpf":                 "CPF",
-    "registration":        "Matrícula"
+    "registration":        "Matrícula",
+    "expiry_date":         "Vencimiento",
+    "no_photo":            "Sin foto"
   },
   "relatorio": {
     "exportar_excel":    "Exportar Excel",

+ 3 - 1
src/i18n/locales/pt.json

@@ -700,7 +700,9 @@
     "associate_found":     "Associado Encontrado",
     "name":                "Nome",
     "cpf":                 "CPF",
-    "registration":        "Matrícula"
+    "registration":        "Matrícula",
+    "expiry_date":         "Validade",
+    "no_photo":            "Sem foto"
   },
   "relatorio": {
     "exportar_excel":    "Exportar Excel",

+ 68 - 24
src/pages/parceiros-convenios/ValidarCarteirinhaPage.vue

@@ -68,36 +68,66 @@
            {{ $t("associate_validation.associate_found") }}
           </div>
 
-          <div class="q-mt-md">
+          <div class="result-body q-mt-md">
+
+            <div class="result-photo">
+              <q-avatar size="80px" color="purple-2">
+                <img
+                  v-if="associate.photo_url"
+                  :src="associate.photo_url"
+                  style="object-fit: cover; width: 100%; height: 100%;"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-account"
+                  size="48px"
+                  color="purple-6"
+                />
+              </q-avatar>
+            </div>
 
-            <div class="result-row">
-              <span class="result-label">
-              {{ $t("associate_validation.name") }}
-              </span>
+            <div class="result-info">
 
-              <span class="result-value">
-                {{ associate.name }}
-              </span>
-            </div>
+              <div class="result-row">
+                <span class="result-label">
+                {{ $t("associate_validation.name") }}
+                </span>
 
-            <div class="result-row">
-              <span class="result-label">
-              {{ $t("associate_validation.cpf") }}
-              </span>
+                <span class="result-value">
+                  {{ associate.name }}
+                </span>
+              </div>
 
-              <span class="result-value">
-                {{ associate.cpf }}
-              </span>
-            </div>
+              <div class="result-row">
+                <span class="result-label">
+                {{ $t("associate_validation.cpf") }}
+                </span>
+
+                <span class="result-value">
+                  {{ associate.cpf }}
+                </span>
+              </div>
+
+              <div class="result-row">
+                <span class="result-label">
+                  {{ $t("associate_validation.registration") }}
+                </span>
+
+                <span class="result-value">
+                  {{ associate.registration }}
+                </span>
+              </div>
+
+              <div class="result-row">
+                <span class="result-label">
+                  {{ $t("associate_validation.expiry_date") }}
+                </span>
 
-            <div class="result-row">
-              <span class="result-label">
-                {{ $t("associate_validation.registration") }}
-              </span>
+                <span class="result-value">
+                  {{ associate.expiry_date || "—" }}
+                </span>
+              </div>
 
-              <span class="result-value">
-                {{ associate.registration }}
-              </span>
             </div>
 
           </div>
@@ -208,6 +238,20 @@ const onValidate = async () => {
   color: #702082;
 }
 
+.result-body {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.result-photo {
+  flex-shrink: 0;
+}
+
+.result-info {
+  flex: 1;
+}
+
 .result-row {
   display: flex;
   gap: 6px;