correcao de consumo de api
Showing
| ... | ... | @@ -10,6 +10,7 @@ |
| "build": "vue-cli-service build" | ||
| }, | ||
| "dependencies": { | ||
| "axios": "^0.27.2", | ||
| "core-js": "^3.8.3", | ||
| "vue": "^3.2.13", | ||
| "vue-router": "^4.0.3" | ||
| ... | ... |
src/service/assinatura.js
0 → 100644
src/service/config.js
0 → 100644
| ... | ... | @@ -3,85 +3,235 @@ |
| <div class="row"> | ||
| <div class="col-75"> | ||
| <div class="container"> | ||
| <form action="/action_page.php"> | ||
| <ul> | ||
| <li v-for="(erro, index) of errors" :key="index"> | ||
| campo <b>{{ erro.field }}</b> - {{ erro.defaultMessage }} | ||
| </li> | ||
| </ul> | ||
| <form id="preCadastro" @submit.prevent="realizarAssinatura"> | ||
| <div id="form1" class="row"> | ||
| <div class="col-50"> | ||
| <h3>Pré-cadastro</h3> | ||
| <label for="fname"><i class="fa fa-user"></i> Nome: </label> | ||
| <input type="text" id="fname" name="firstname" required placeholder=""> | ||
| <label for="fname"><i class="fa fa-user"></i> Sobrenome: </label> | ||
| <input type="text" id="fname" name="firstname" placeholder=""> | ||
| <label for="fname"><i class="fa fa-user"></i> CPF: </label> | ||
| <input type="text" id="fname" name="firstname" required placeholder="xxx-xxx-xxx-xx"> | ||
| <label required for="fname"><i class="fa fa-user"></i> Telefone: </label> | ||
| <input type="text" id="fname" name="firstname" placeholder="(xx)xxxx-xxxx"> | ||
| <label for="country">Sexo</label> | ||
| <select id="country" name="country"> | ||
| <option value="australia">Masculino</option> | ||
| <option value="canada">Femino</option> | ||
| <option value="usa">Prefiro não informa</option> | ||
| </select> | ||
| <label for="fname"><i class="fa fa-user"></i> Data Nascimento: </label> | ||
| <input id="date" type="date" name="firstname" placeholder=""> | ||
| <label for="nome"><i class="fa fa-user"></i> Nome: </label> | ||
| <input | ||
| type="text" | ||
| name="nome" | ||
| id="nome" | ||
| required | ||
| v-model="assinatura.dadosPessoais.usuario.nome" | ||
| placeholder="Nome completo" | ||
| /> | ||
| <label for="user">Apelido:</label> | ||
| <input | ||
| type="text" | ||
| name="user" | ||
| id="user" | ||
| required | ||
| v-model="assinatura.dadosPessoais.usuario.user" | ||
| placeholder="Apelido" | ||
| /> | ||
| <label for="cpf">CPF:</label> | ||
| <input | ||
| type="text" | ||
| name="cpf" | ||
| id="cpf" | ||
| required | ||
| placeholder="000.000.000-00" | ||
| v-model="assinatura.dadosPessoais.usuario.cpf" | ||
| /> | ||
| <label for="celular">Celular:</label> | ||
| <input | ||
| type="text" | ||
| name="celular" | ||
| id="celular" | ||
| required | ||
| placeholder="(00) 90000-0000" | ||
| v-model="assinatura.dadosPessoais.usuario.celular" | ||
| /> | ||
| <label for="sexo">Sexo:</label> | ||
| <select name="sexo" id="sexo"> | ||
| <option value="masculino">Masculino</option> | ||
| <option value="feminino">Feminino</option> | ||
| <option value="outro">Prefiro não informar</option> | ||
| </select> | ||
| <label for="dataNascimento">Data Nascimento:</label> | ||
| <input | ||
| type="date" | ||
| name="dataNascimento" | ||
| id="dataNascimento" | ||
| required | ||
| v-model="assinatura.dadosPessoais.usuario.dataNascimento" | ||
| /> | ||
| <br> | ||
| <label for="email">Email:</label> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| id="email" | ||
| required | ||
| placeholder="[email protected]" | ||
| v-model="assinatura.dadosPessoais.usuario.email" | ||
| /> | ||
| <label for="rua">Rua:</label> | ||
| <input | ||
| type="text" | ||
| name="rua" | ||
| id="rua" | ||
| placeholder="" | ||
| v-model="assinatura.dadosPessoais.endereco.rua" | ||
| /> | ||
| <label for="numero">Número:</label> | ||
| <input | ||
| type="number" | ||
| name="numero" | ||
| id="numero" | ||
| placeholder="" | ||
| v-model="assinatura.dadosPessoais.endereco.numero" | ||
| /> | ||
| <label for="cidade">Cidade:</label> | ||
| <input | ||
| type="text" | ||
| name="cidade" | ||
| id="cidade" | ||
| placeholder="" | ||
| v-model="assinatura.dadosPessoais.endereco.cidade" | ||
| /> | ||
| <label for="complemento">Complemento:</label> | ||
| <input | ||
| type="text" | ||
| name="complemento" | ||
| id="complemento" | ||
| placeholder="" | ||
| v-model="assinatura.dadosPessoais.endereco.complemento" | ||
| /> | ||
| <label for="email"><i class="fa fa-envelope"></i> Email</label> | ||
| <input type="text" id="email" name="email" required placeholder="[email protected]"> | ||
| <label for="adr"><i class="fa fa-address-card-o"></i> Rua</label> | ||
| <input type="text" id="adr" name="address" placeholder=""> | ||
| <label for="adr"><i class="fa fa-address-card-o"></i> Nº</label> | ||
| <input type="text" id="adr" name="address" placeholder=""> | ||
| <label for="city"><i class="fa fa-institution"></i> Cidade</label> | ||
| <input type="text" id="city" name="city" placeholder=""> | ||
| <label for="city"><i class="fa fa-institution"></i> Referecia/Complemento</label> | ||
| <input type="text" id="city" name="city" placeholder=""> | ||
| <div class="row"> | ||
| <div class="col-50"> | ||
| <label for="state">Estado</label> | ||
| <input type="text" id="state" name="state" placeholder=""> | ||
| <label for="estado">Estado:</label> | ||
| <input | ||
| type="text" | ||
| name="estado" | ||
| id="estado" | ||
| placeholder="" | ||
| v-model="assinatura.dadosPessoais.endereco.estado" | ||
| /> | ||
| <label for="pais">País:</label> | ||
| <input | ||
| type="text" | ||
| name="pais" | ||
| id="pais" | ||
| placeholder="Brasil" | ||
| v-model="assinatura.dadosPessoais.endereco.pais" | ||
| /> | ||
| </div> | ||
| <div class="col-50"> | ||
| <label required for="zip">Cep</label> | ||
| <input type="text" id="zip" name="zip" placeholder="00000-00"> | ||
| <label for="cep">CEP:</label> | ||
| <input | ||
| type="text" | ||
| name="cep" | ||
| id="cep" | ||
| placeholder="00000-000" | ||
| @change="buscarCep" | ||
| v-model="assinatura.dadosPessoais.endereco.cep" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-50"> | ||
| <h3>Pagamento</h3> | ||
| <label for="fname">bandeiras aceitas</label> | ||
| <h3>Pagamento</h3><br> | ||
| <h3> Pagamento Cartão</h3> | ||
| <label for="debito">debito</label> | ||
| <input type="radio" id="debito" name="debito" value="debito"> | ||
| <label for="credito">credito</label> | ||
| <input type="radio" id="credito" name="credito" value="credito"> | ||
| <label for="">Bandeiras aceitas:</label> | ||
| <div class="icon-container"> | ||
| <i class="fa fa-cc-visa" style="color:navy;"></i> | ||
| <i class="fa fa-cc-amex" style="color:blue;"></i> | ||
| <i class="fa fa-cc-mastercard" style="color:red;"></i> | ||
| <i class="fa fa-cc-discover" style="color:orange;"></i> | ||
| <i class="fa fa-cc-visa" style="color: navy">Visa</i> | | ||
| <i class="fa fa-cc-amex" style="color: blue">Amex</i> | | ||
| <i class="fa fa-cc-mastercard" style="color: red">mastercard</i> | | ||
| <i class="fa fa-cc-discover" style="color: orange">Elo</i> | ||
| </div> | ||
| <label for="cname">Nome Titular</label> | ||
| <input type="text" id="cname" name="cardname" placeholder=""> | ||
| <label for="ccnum">Numero Cartão</label> | ||
| <input type="text" id="ccnum" name="cardnumber" placeholder=""> | ||
| <label for="expmonth">Mês Expedição</label> | ||
| <input type="text" id="expmonth" name="expmonth" placeholder=""> | ||
| <label for="nomeImpresso">Nome Impresso:</label> | ||
| <input | ||
| type="text" | ||
| name="nomeImpresso" | ||
| id="nomeImpresso" | ||
| v-model="assinatura.dadosPagamento.nomeImpresso" | ||
| /> | ||
| <label for="numeroCartao">Número Cartão:</label> | ||
| <input | ||
| type="text" | ||
| name="numeroCartao" | ||
| id="numeroCartao" | ||
| v-model="assinatura.dadosPagamento.numeroCartao" | ||
| /> | ||
| <div class="row"> | ||
| <div class="col-50"> | ||
| <label for="expyear">Validade</label> | ||
| <input type="text" id="expyear" name="expyear" placeholder=""> | ||
| <label for="dataVencimento">Validade:</label> | ||
| <input | ||
| type="mes" | ||
| name="dataVencimento" | ||
| id="dataVencimento" | ||
| v-model="assinatura.dadosPagamento.dataVencimento" | ||
| /> | ||
| </div> | ||
| <div class="col-50"> | ||
| <label for="cvv">CVV</label> | ||
| <input type="text" id="cvv" name="cvv" placeholder=""> | ||
| </div> | ||
| </div> | ||
| <label for="idTipoPagamento">Tipo Pagamento:</label> | ||
| <input | ||
| type="text" | ||
| name="idTipoPagamento" | ||
| id="idTipoPagamento" | ||
| v-model="assinatura.dadosPagamento.idTipoPagamento" | ||
| /> | ||
| <label for="idChavePix">Chave Pix:</label> | ||
| <input | ||
| type="text" | ||
| name="idChavePix" | ||
| id="idChavePix" | ||
| v-model="assinatura.dadosPagamento.idChavePix" | ||
| /> | ||
| <h3>Dados de Plano</h3><br> | ||
| <label for="idModalidadePlano">Modalidade Plano:</label> | ||
| <input | ||
| type="text" | ||
| name="idModalidadePlano" | ||
| id="idModalidadePlano" | ||
| v-model="assinatura.dadosPlano.idModalidadePlano" | ||
| /> | ||
| <label for="idPeriodoPlano">Período Plano:</label> | ||
| <input | ||
| type="text" | ||
| name="idPeriodoPlano" | ||
| id="idPeriodoPlano" | ||
| v-model="assinatura.dadosPlano.idPeriodoPlano" | ||
| /> | ||
| </div> | ||
| </div> | ||
| ... | ... | @@ -89,12 +239,14 @@ |
| <input type="checkbox" checked="checked" name="sameadr"> | ||
| Endereço de cobrança, mesmo de cadastro | ||
| </label> | ||
| <input type="submit" value="Cadastro" class="btn"> | ||
| <button class="btn" type="submit">Cadastrar</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <div class="col-25"> | ||
| <div class="container"> | ||
| <p> | ||
| Lista de Pré-cadastro | ||
| ... | ... | @@ -113,12 +265,77 @@ |
| <script> | ||
| export default { | ||
| name: "app", | ||
| data() { | ||
| return { | ||
| msg: "Welcome to Your Vue.js App", | ||
| assinatura: { | ||
| dadosPessoais: { | ||
| usuario: { | ||
| cpf: "", | ||
| nome: "", | ||
| user: "", | ||
| email: "", | ||
| dataNascimento: "", | ||
| celular: "", | ||
| }, | ||
| endereco: { | ||
| rua: "", | ||
| numero: "", | ||
| bairro: "", | ||
| complemento: "", | ||
| cidade: "", | ||
| estado: "", | ||
| pais: "", | ||
| cep: "", | ||
| }, | ||
| }, | ||
| dadosPagamento: { | ||
| idTipoPagamento: "", | ||
| idChavePix: "", | ||
| nomeImpresso: "", | ||
| numeroCartao: "", | ||
| dataVencimento: "", | ||
| }, | ||
| dadosPlano: { | ||
| idModalidadePlano: "", | ||
| idPeriodoPlano: "", | ||
| }, | ||
| }, | ||
| errors: [], | ||
| }; | ||
| }, | ||
| methods: { | ||
| realizarAssinatura() { | ||
| AssinaturaService.realizarAssinatura(this.assinatura) | ||
| .then((res) => { | ||
| alert( | ||
| "Assinatura realizada com sucesso! defina sua senha no email que foi enviado para o email informado" | ||
| ); | ||
| this.assinatura = {}; | ||
| this.errors = []; | ||
| }) | ||
| .catch((e) => { | ||
| console.log(e.res.data.errors); | ||
| this.errors = e.res.data.errors; | ||
| }); | ||
| }, | ||
| }, | ||
| buscarCep(){ | ||
| var cep = this.assinatura.dadosPessoais.endereco.cep; | ||
| AssinaturaService.buscarCep(cep) | ||
| .then((res) => { | ||
| this.assinatura.dadosPessoais.endereco.rua = e.res.data.logradouro; | ||
| this.assinatura.dadosPessoais.endereco.complemento = | ||
| e.res.data.complemento; | ||
| this.assinatura.dadosPessoais.endereco.bairro = e.res.data.bairro; | ||
| this.assinatura.dadosPessoais.endereco.cidade = e.res.data.localidade; | ||
| this.assinatura.dadosPessoais.endereco.estado = e.res.data.uf; | ||
| this.assinatura.dadosPessoais.endereco.pais = "Brasil"; | ||
| }) | ||
| .catch((e) => { | ||
| console.log(e.res.data); | ||
| }); | ||
| }, | ||
| }; | ||
| ... | ... | @@ -161,7 +378,8 @@ export default { |
| border-radius: 3px; | ||
| } | ||
| input[type=text] , select { | ||
| input[type=text] , select, input[type=date],input[type=email], [type=number], [type=debito], | ||
| input[type=mes] { | ||
| width: 100%; | ||
| margin-bottom: 20px; | ||
| padding: 12px; | ||
| ... | ... |
Please
register
or
sign in
to comment