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 @@
"license": "MIT",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"dev": "vue-cli-service serve --port 4200",
"build": "vue-cli-service build"
},
"dependencies": {
......
src/service/assinatura.js
View file @ c1ec9c9b
......@@ -2,7 +2,7 @@ import {http} from './config'
export default {
realizarAssinatura: (assinatura) => {
return http.post('localhost:8080/usuario/', assinatura)
return http.post('usuario/', assinatura)
},
buscarCep(cep) {
......
src/service/config.js
View file @ c1ec9c9b
import axios from 'axios'
export const http = axios.create({
baseURL: 'http://localhost:8080/api/'
baseURL: 'http://localhost:8080/'
})
src/views/Cadastro.vue
View file @ c1ec9c9b
<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">
<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>
<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="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">
<div class="col-50">
<h3>Pré-cadastro</h3>
<label for="nome"><i class="fa fa-user"></i> Nome: </label>
<label for="complemento">Complemento:</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="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"
/>
type="text"
name="complemento"
id="complemento"
placeholder="Próx. Laboratório Gram"
v-model="assinatura.dadosPessoais.endereco.complemento"
/>
</div>
<div class="col-50">
<label for="cep">CEP:</label>
<input
type="text"
name="cep"
id="cep"
placeholder="00000-000"
@change="buscarCep"
v-model="assinatura.dadosPessoais.endereco.cep"
/>
<label for="cidade">Cidade:</label>
<input
type="text"
name="cidade"
id="cidade"
required
placeholder="Rio Grande"
v-model="assinatura.dadosPessoais.endereco.cidade"
/>
<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 class="col-50">
<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">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>
<div class="col-50">
<h3>Pagamento</h3>
<br />
<h3>Pagamento Cartão</h3>
<div class="row">
<label for="debito">Débito</label>
<input type="radio" id="debito" name="id_tipo_pagamento" value="1" />
<label for="credito">Crédito</label>
<input type="radio" id="credito" name="id_tipo_pagamento" value="2" />
</div>
<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="dataVencimento">Validade:</label>
<input
type="mes"
name="dataVencimento"
id="dataVencimento"
v-model="assinatura.dadosPagamento.dataVencimento"
/>
<label for="">Bandeiras aceitas:</label>
<div class="icon-container">
<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>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="">
<label for="nomeImpresso">Nome Impresso:</label>
<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>
<label for="idTipoPagamento">Tipo Pagamento:</label>
<label for="idTipoPagamento">Tipo Pagamento:</label>
<input
type="text"
name="idTipoPagamento"
......@@ -214,56 +226,51 @@
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"
/>
<h3>Dados de Plano</h3>
<br />
</div>
<label for="idModalidadePlano">Modalidade Plano:</label>
<input
type="text"
name="idModalidadePlano"
id="idModalidadePlano"
v-model="assinatura.dadosPlano.idModalidadePlano"
/>
</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>
<label for="idPeriodoPlano">Período Plano:</label>
<input
type="text"
name="idPeriodoPlano"
id="idPeriodoPlano"
v-model="assinatura.dadosPlano.idPeriodoPlano"
/>
</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 class="col-25">
<div class="container">
<p>
Lista de Pré-cadastro
</p><br><br>
<p>
envio de e-mail
</p>
<br><br>
<button>Enviar</button>
<div class="col-25">
<div class="container">
<p>Lista de Pré-cadastro</p>
<br /><br />
<p>envio de e-mail</p>
<br /><br />
<button>Enviar</button>
</div>
</div>
</div>
</div>
</template>
<script>
import AssinaturaService from '../service/assinatura'
export default {
data() {
return {
......@@ -302,47 +309,52 @@ export default {
},
errors: [],
};
},
mounted() {
},
methods: {
realizarAssinatura() {
AssinaturaService.realizarAssinatura(this.assinatura)
.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(
"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);
console.log(e);
this.errors = e.res.data.errors;
});
},
},
buscarCep(){
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.rua = 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;
res.data.complemento;
this.assinatura.dadosPessoais.endereco.cidade = res.data.localidade;
this.assinatura.dadosPessoais.endereco.bairro = res.data.bairro;
this.assinatura.dadosPessoais.endereco.estado = res.data.uf;
this.assinatura.dadosPessoais.endereco.pais = "Brasil";
})
.catch((e) => {
console.log(e.res.data);
alert(e);
});
},
},
};
</script>
<style>
.row {
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
......@@ -378,8 +390,13 @@ export default {
border-radius: 3px;
}
input[type=text] , select, input[type=date],input[type=email], [type=number], [type=debito],
input[type=mes] {
input[type="text"],
select,
input[type="date"],
input[type="email"],
[type="number"],
[type="debito"],
input[type="mes"] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
......@@ -398,8 +415,9 @@ label {
font-size: 24px;
}
.btn , button {
background-color: #04AA6D;
.btn,
button {
background-color: #04aa6d;
color: white;
padding: 12px;
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