Skip to content

F
front-ntflix
Commit c1ec9c9b authored by Nadson Santana Silva's avatar Nadson Santana Silva
Browse files
Options

correção das requisições realizadas pelo axios

parent c0d51be7
Hide whitespace changes
Inline Side-by-side
Showing with 268 additions and 250 deletions
package.json
View file @ c1ec9c9b
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve --port 4200",
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
......
src/service/assinatura.js
View file @ c1ec9c9b
...@@ -2,7 +2,7 @@ import {http} from './config' ...@@ -2,7 +2,7 @@ import {http} from './config'
export default { export default {
realizarAssinatura: (assinatura) => { realizarAssinatura: (assinatura) => {
return http.post('localhost:8080/usuario/', assinatura) return http.post('usuario/', assinatura)
}, },
buscarCep(cep) { buscarCep(cep) {
......
src/service/config.js
View file @ c1ec9c9b
import axios from 'axios' import axios from 'axios'
export const http = axios.create({ export const http = axios.create({
baseURL: 'http://localhost:8080/api/' baseURL: 'http://localhost:8080/'
}) })
src/views/Cadastro.vue
View file @ c1ec9c9b
<template> <template>
<div class="row">
<div class="col-75">
<div class="container">
<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="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"
/>
<div class="row"> <label for="user">Apelido:</label>
<div class="col-75"> <input
<div class="container"> type="text"
<ul> name="user"
<li v-for="(erro, index) of errors" :key="index"> id="user"
campo <b>{{ erro.field }}</b> - {{ erro.defaultMessage }} required
</li> v-model="assinatura.dadosPessoais.usuario.user"
</ul> 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="nome@example.com"
v-model="assinatura.dadosPessoais.usuario.email"
/>
<label for="cep">CEP:</label>
<input
type="text"
name="cep"
id="cep"
required
placeholder="96200-020"
@change="buscarCep"
v-model="assinatura.dadosPessoais.endereco.cep"
/>
<form id="preCadastro" @submit.prevent="realizarAssinatura"> <label for="rua">Rua:</label>
<input
type="text"
name="rua"
id="rua"
required
placeholder="Rua Duque de Caxias"
v-model="assinatura.dadosPessoais.endereco.rua"
/>
<label for="numero">Número:</label>
<input
type="number"
name="numero"
id="numero"
required
placeholder="200"
v-model="assinatura.dadosPessoais.endereco.numero"
/>
<div id="form1" class="row"> <label for="complemento">Complemento:</label>
<div class="col-50">
<h3>Pré-cadastro</h3>
<label for="nome"><i class="fa fa-user"></i> Nome: </label>
<input <input
type="text" type="text"
name="nome" name="complemento"
id="nome" id="complemento"
required placeholder="Próx. Laboratório Gram"
v-model="assinatura.dadosPessoais.usuario.nome" v-model="assinatura.dadosPessoais.endereco.complemento"
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="nome@example.com"
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"
/>
<div class="row">
<div class="col-50">
<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> <label for="cidade">Cidade:</label>
<div class="col-50"> <input
<label for="cep">CEP:</label> type="text"
<input name="cidade"
type="text" id="cidade"
name="cep" required
id="cep" placeholder="Rio Grande"
placeholder="00000-000" v-model="assinatura.dadosPessoais.endereco.cidade"
@change="buscarCep" />
v-model="assinatura.dadosPessoais.endereco.cep"
/>
<label for="bairro">Bairro:</label>
<input
type="text"
name="bairro"
id="bairro"
required
placeholder="Centro"
v-model="assinatura.dadosPessoais.endereco.bairro"
/>
<div class="row">
<div class="col-50">
<label for="estado">Estado:</label>
<input
type="text"
name="estado"
id="estado"
required
placeholder="RS"
v-model="assinatura.dadosPessoais.endereco.estado"
/>
<label for="pais">País:</label>
<input
type="text"
name="pais"
id="pais"
required
placeholder="Brasil"
v-model="assinatura.dadosPessoais.endereco.pais"
/>
</div>
</div> </div>
</div> </div>
</div>
<div class="col-50"> <div class="col-50">
<h3>Pagamento</h3><br> <h3>Pagamento</h3>
<h3> Pagamento Cartão</h3> <br />
<label for="debito">debito</label> <h3>Pagamento Cartão</h3>
<input type="radio" id="debito" name="debito" value="debito"> <div class="row">
<label for="credito">credito</label> <label for="debito">Débito</label>
<input type="radio" id="credito" name="credito" value="credito"> <input type="radio" id="debito" name="id_tipo_pagamento" value="1" />
<label for="">Bandeiras aceitas:</label> <label for="credito">Crédito</label>
<div class="icon-container"> <input type="radio" id="credito" name="id_tipo_pagamento" value="2" />
<i class="fa fa-cc-visa" style="color: navy">Visa</i> | </div>
<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="nomeImpresso">Nome Impresso:</label> <label for="">Bandeiras aceitas:</label>
<input <div class="icon-container">
type="text" <i class="fa fa-cc-visa" style="color: navy">Visa</i> |
name="nomeImpresso" <i class="fa fa-cc-amex" style="color: blue">Amex</i> |
id="nomeImpresso" <i class="fa fa-cc-mastercard" style="color: red">mastercard</i>|
v-model="assinatura.dadosPagamento.nomeImpresso" <i class="fa fa-cc-discover" style="color: orange">Elo</i>
/>
<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="dataVencimento">Validade:</label>
<input
type="mes"
name="dataVencimento"
id="dataVencimento"
v-model="assinatura.dadosPagamento.dataVencimento"
/>
</div> </div>
<div class="col-50">
<label for="cvv">CVV</label> <label for="nomeImpresso">Nome Impresso:</label>
<input type="text" id="cvv" name="cvv" placeholder=""> <input
type="text"
name="nomeImpresso"
id="nomeImpresso"
required
v-model="assinatura.dadosPagamento.nomeImpresso"
/>
<label for="numeroCartao">Número Cartão:</label>
<input
type="text"
name="numeroCartao"
id="numeroCartao"
required
v-model="assinatura.dadosPagamento.numeroCartao"
/>
<div class="row">
<div class="col-50">
<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> </div>
</div> <label for="idTipoPagamento">Tipo Pagamento:</label>
<label for="idTipoPagamento">Tipo Pagamento:</label>
<input <input
type="text" type="text"
name="idTipoPagamento" name="idTipoPagamento"
...@@ -214,56 +226,51 @@ ...@@ -214,56 +226,51 @@
id="idChavePix" id="idChavePix"
v-model="assinatura.dadosPagamento.idChavePix" v-model="assinatura.dadosPagamento.idChavePix"
/> />
<h3>Dados de Plano</h3><br> <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> <label for="idModalidadePlano">Modalidade Plano:</label>
<input
type="text"
name="idModalidadePlano"
id="idModalidadePlano"
v-model="assinatura.dadosPlano.idModalidadePlano"
/>
</div> <label for="idPeriodoPlano">Período Plano:</label>
<label> <input
<input type="checkbox" checked="checked" name="sameadr"> type="text"
Endereço de cobrança, mesmo de cadastro name="idPeriodoPlano"
</label> id="idPeriodoPlano"
v-model="assinatura.dadosPlano.idPeriodoPlano"
<button class="btn" type="submit">Cadastrar</button> />
</form> </div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr" />
Endereço de cobrança, mesmo de cadastro
</label>
<button class="btn" type="submit">Cadastrar</button>
</form>
</div>
</div> </div>
</div>
<div class="col-25"> <div class="col-25">
<div class="container">
<div class="container"> <p>Lista de Pré-cadastro</p>
<p> <br /><br />
Lista de Pré-cadastro <p>envio de e-mail</p>
</p><br><br>
<p> <br /><br />
envio de e-mail <button>Enviar</button>
</p> </div>
<br><br>
<button>Enviar</button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import AssinaturaService from '../service/assinatura'
export default { export default {
data() { data() {
return { return {
...@@ -302,47 +309,52 @@ export default { ...@@ -302,47 +309,52 @@ export default {
}, },
errors: [], errors: [],
}; };
},
mounted() {
}, },
methods: { methods: {
realizarAssinatura() { realizarAssinatura() {
AssinaturaService.realizarAssinatura(this.assinatura) AssinaturaService.realizarAssinatura(this.assinatura)
.then((res) => { .then((res) => {
this.assinatura.dadosPessoais.endereco.rua = null;
this.assinatura.dadosPessoais.endereco.complemento = null;
this.assinatura.dadosPessoais.endereco.cidade = null;
this.assinatura.dadosPessoais.endereco.bairro = null;
this.assinatura.dadosPessoais.endereco.estado = null;
this.assinatura.dadosPessoais.endereco.pais = null;
alert( alert(
"Assinatura realizada com sucesso! defina sua senha no email que foi enviado para o email informado" "Assinatura realizada com sucesso! defina sua senha no email que foi enviado para o email informado"
); );
this.assinatura = {};
this.errors = []; this.errors = [];
}) })
.catch((e) => { .catch((e) => {
console.log(e.res.data.errors); console.log(e);
this.errors = e.res.data.errors; this.errors = e.res.data.errors;
}); });
}, },
}, buscarCep() {
buscarCep(){
var cep = this.assinatura.dadosPessoais.endereco.cep; var cep = this.assinatura.dadosPessoais.endereco.cep;
AssinaturaService.buscarCep(cep) AssinaturaService.buscarCep(cep)
.then((res) => { .then((res) => {
this.assinatura.dadosPessoais.endereco.rua = e.res.data.logradouro; this.assinatura.dadosPessoais.endereco.rua = res.data.logradouro;
this.assinatura.dadosPessoais.endereco.complemento = this.assinatura.dadosPessoais.endereco.complemento =
e.res.data.complemento; res.data.complemento;
this.assinatura.dadosPessoais.endereco.bairro = e.res.data.bairro; this.assinatura.dadosPessoais.endereco.cidade = res.data.localidade;
this.assinatura.dadosPessoais.endereco.cidade = e.res.data.localidade; this.assinatura.dadosPessoais.endereco.bairro = res.data.bairro;
this.assinatura.dadosPessoais.endereco.estado = e.res.data.uf; this.assinatura.dadosPessoais.endereco.estado = res.data.uf;
this.assinatura.dadosPessoais.endereco.pais = "Brasil"; this.assinatura.dadosPessoais.endereco.pais = "Brasil";
}) })
.catch((e) => { .catch((e) => {
console.log(e.res.data); alert(e);
}); });
}, },
},
}; };
</script> </script>
<style> <style>
.row { .row {
display: -ms-flexbox; /* IE10 */ display: -ms-flexbox; /* IE10 */
display: flex; display: flex;
-ms-flex-wrap: wrap; /* IE10 */ -ms-flex-wrap: wrap; /* IE10 */
...@@ -378,8 +390,13 @@ export default { ...@@ -378,8 +390,13 @@ export default {
border-radius: 3px; border-radius: 3px;
} }
input[type=text] , select, input[type=date],input[type=email], [type=number], [type=debito], input[type="text"],
input[type=mes] { select,
input[type="date"],
input[type="email"],
[type="number"],
[type="debito"],
input[type="mes"] {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
padding: 12px; padding: 12px;
...@@ -398,8 +415,9 @@ label { ...@@ -398,8 +415,9 @@ label {
font-size: 24px; font-size: 24px;
} }
.btn , button { .btn,
background-color: #04AA6D; button {
background-color: #04aa6d;
color: white; color: white;
padding: 12px; padding: 12px;
margin: 10px 0; margin: 10px 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment