Refactor QrCodeForm style
This commit is contained in:
enzoggqs
@@ -1,164 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { pix } from "../utils/QrCodePix";
|
||||
import { ref } from "vue";
|
||||
|
||||
const pixModel = ref({
|
||||
pixKey: "",
|
||||
name: "",
|
||||
city: "",
|
||||
transactionId: "",
|
||||
value: 0,
|
||||
message: "",
|
||||
qrCodePayload: "",
|
||||
});
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import CustomButton from "../components/CustomButton.vue";
|
||||
|
||||
const qrCode = ref<string>("");
|
||||
const qrCodePayload = ref<string>("");
|
||||
const toggleModal = ref<boolean>(false);
|
||||
const pixQrCode = pix({
|
||||
pixKey: "key_test123456789",
|
||||
value: 100,
|
||||
});
|
||||
const pixIsValid = ref<number>(0);
|
||||
const stateButton = ref(false);
|
||||
|
||||
const errors = ref({
|
||||
pixRequiredError: false,
|
||||
nameRequiredError: false,
|
||||
cityRequiredError: false,
|
||||
pixQrCode.base64QrCode().then((code: string) => {
|
||||
qrCode.value = code;
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
errors.value["pixRequiredError"] = pixModel.value["pixKey"] == "";
|
||||
qrCodePayload.value = pixQrCode.payload();
|
||||
|
||||
if (errors.value["pixRequiredError"]) return;
|
||||
const handleInputEvent = (event: any) => {
|
||||
const { value } = event.target;
|
||||
|
||||
const pixQrCode = pix({
|
||||
pixKey: pixModel.value.pixKey,
|
||||
merchantName: pixModel.value.name.trim() ? pixModel.value.name : "name",
|
||||
merchantCity: pixModel.value.city.trim() ? pixModel.value.city : "city",
|
||||
transactionId: pixModel.value.transactionId.trim()
|
||||
? pixModel.value.transactionId
|
||||
: "***",
|
||||
message: pixModel.value.message,
|
||||
value: pixModel.value["value"],
|
||||
});
|
||||
|
||||
pixQrCode.base64QrCode().then((code: string) => {
|
||||
qrCode.value = code;
|
||||
});
|
||||
|
||||
qrCodePayload.value = pixQrCode.payload();
|
||||
|
||||
toggleModal.value = true;
|
||||
validatePix(value);
|
||||
};
|
||||
|
||||
const validatePix = (value: any) => {
|
||||
if(value == '123456') {
|
||||
pixIsValid.value = 1;
|
||||
stateButton.value = true;
|
||||
} else if(value == '') {
|
||||
pixIsValid.value = 0;
|
||||
} else {
|
||||
pixIsValid.value = 2;
|
||||
}
|
||||
};
|
||||
|
||||
console.log(pixIsValid.value, stateButton.value)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">
|
||||
Utilize o QR Code ou copie o código
|
||||
</h2>
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">
|
||||
para realizar o Pix
|
||||
</h2>
|
||||
<h4 class="text-center">
|
||||
Após realizar o Pix no banco de sua preferência, insira o código de
|
||||
</h4>
|
||||
<h4 class="text-center">
|
||||
autenticação para enviar a transação para a rede.
|
||||
</h4>
|
||||
<div class="white-box-content">
|
||||
<div class="black-box-content"></div>
|
||||
<span class="text-center">
|
||||
Código pix
|
||||
<div class="page">
|
||||
<div class="text-container">
|
||||
<!-- <h2 class="text-center font-bold text-emerald-50 text-2xl"></h2> -->
|
||||
<span class="text font-extrabold text-2xl max-w-[30rem]">
|
||||
Utilize o QR Code ou copie o código para realizar o Pix
|
||||
</span>
|
||||
<!-- <h4 class="text-center"> -->
|
||||
<span class="text font-medium text-md max-w-[28rem]">
|
||||
Após realizar o Pix no banco de sua preferência, insira o código de
|
||||
autenticação para enviar a transação para a rede.
|
||||
</span>
|
||||
<span2 class="text-center">
|
||||
c02942far7047f6shri5ifh371908973
|
||||
</span2>
|
||||
<span3 class="text-center">
|
||||
<strong>ATENÇÃO!</strong> A transação só será processada após inserir o código de autenticação. Caso contrário não conseguiremos comprovar o seu depósito e não será possível transferir os tokens para sua carteira. Confira aqui como encontrar o código no comprovante.
|
||||
</span3>
|
||||
</div>
|
||||
<div class="white-box-content2">
|
||||
<input type="text" placeholder="Digite o código do comprovante PIX">
|
||||
<div class="blur-container max-w-[28rem] text-black">
|
||||
<div
|
||||
class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg"
|
||||
>
|
||||
<img :src="qrCode" class="w-48 h-48" />
|
||||
<span class="text-center font-bold">Código pix</span>
|
||||
<span class="text-center text-xs">
|
||||
c02942far7047f6shri5ifh371908973
|
||||
</span>
|
||||
<img
|
||||
alt="Copy PIX code"
|
||||
src="@/assets/copyPix.svg"
|
||||
width="16"
|
||||
height="16"
|
||||
class="pt-2 mb-5 cursor-pointer"
|
||||
/>
|
||||
<span class="text-center text-xs text-start">
|
||||
<strong>ATENÇÃO!</strong> A transação só será processada após inserir o código de autenticação. Caso contrário não conseguiremos comprovar o seu depósito e não será possível transferir os tokens para sua carteira. Confira aqui como encontrar o código no comprovante.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex-col items-center justify-center flex w-full bg-white p-5 rounded-lg px-5"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Digite o código do comprovante PIX"
|
||||
@input="debounce(handleInputEvent, 500)($event)"
|
||||
class="text-md box-border w-full box-border p-2 h-6 mb-2"
|
||||
/>
|
||||
<div class="flex flex-col w-full" v-if="(pixIsValid == 2)">
|
||||
<div class="custom-divide"></div>
|
||||
<div class="flex items-center h-8">
|
||||
<img
|
||||
alt="Invalid Icon"
|
||||
src="@/assets/invalidIcon.svg"
|
||||
width="14"
|
||||
class="cursor-pointer align-middle inline-block"
|
||||
/>
|
||||
<span class="px-1 text-red-500 font-normal text-xs"
|
||||
>Código inválido. Por favor, confira e tente novamente.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full" v-else-if="(pixIsValid == 1)">
|
||||
<div class="custom-divide"></div>
|
||||
<div class="flex items-center h-8">
|
||||
<img
|
||||
alt="Valid Icon"
|
||||
src="@/assets/validIcon.svg"
|
||||
width="14"
|
||||
class="cursor-pointer align-middle inline-block"
|
||||
/>
|
||||
<span class="px-1 text-green-500 font-normal text-sm">
|
||||
Código válido.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CustomButton
|
||||
:is-disabled="!(pixIsValid == 1)"
|
||||
:text="'Enviar para a rede'"
|
||||
/>
|
||||
<CustomButton v-if="(pixIsValid == 1)" :text="'Enviar para a rede'" />
|
||||
</div>
|
||||
<button type="button">Enviar para a rede</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
@apply mt-8 w-full flex justify-center self-center;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: var(--color-background-indigo);
|
||||
@apply rounded-md w-full p-2 w-1/2;
|
||||
}
|
||||
|
||||
.col-div {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-top: 0.3cm;
|
||||
}
|
||||
|
||||
span3 {
|
||||
font-size: 11px;
|
||||
margin-top: 0.6cm;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.content {
|
||||
margin-top: 2cm;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.black-box-content {
|
||||
background-color: #0e0d0d;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.white-box-content {
|
||||
background-color: #f9f8f8;
|
||||
width: 400px;
|
||||
height: 410px;
|
||||
margin-top: 1cm;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 1cm;
|
||||
}
|
||||
|
||||
.white-box-content2 {
|
||||
background-color: #f9f8f8;
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
margin-top: 0.2cm;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0.4cm;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #FBBF24;
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
margin-top: 0.2cm;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #f9f8f8;
|
||||
padding:3px;
|
||||
width: 350px;
|
||||
align-items: center;
|
||||
margin-bottom: 3cm;
|
||||
@apply flex flex-col items-center justify-center w-full mt-16;
|
||||
}
|
||||
|
||||
::placeholder { /* Most modern browsers support this now. */
|
||||
@@ -182,11 +145,38 @@ h2 {
|
||||
@apply font-semibold tracking-wide text-emerald-50;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
|
||||
.custom-divide {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
}
|
||||
.bottom-position {
|
||||
top: -20px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.required-error {
|
||||
@apply ml-2 text-red-500;
|
||||
.page {
|
||||
@apply flex flex-col items-center justify-center w-full mt-16;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@apply flex flex-col items-center justify-center gap-4;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply text-gray-800 text-center;
|
||||
}
|
||||
|
||||
.blur-container {
|
||||
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user