Skip to content

F
front-ntflix
Commit c0d51be7 authored by Daniela Olinda Catarina's avatar Daniela Olinda Catarina
Browse files
Options

correcao de consumo de api

parent afaba613
Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 64 deletions
package-lock.json
View file @ c0d51be7
......@@ -9,6 +9,7 @@
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
......@@ -3190,6 +3191,11 @@
"lodash": "^4.17.14"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
......@@ -3232,6 +3238,15 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"dependencies": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"node_modules/babel-loader": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
......@@ -3890,6 +3905,17 @@
"integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
......@@ -4644,6 +4670,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
......@@ -5261,7 +5295,6 @@
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
"integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
"dev": true,
"funding": [
{
"type": "individual",
......@@ -5277,6 +5310,19 @@
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
......@@ -6648,7 +6694,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
......@@ -6657,7 +6702,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
......@@ -12613,6 +12657,11 @@
"lodash": "^4.17.14"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
......@@ -12633,6 +12682,15 @@
"postcss-value-parser": "^4.2.0"
}
},
"axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"requires": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"babel-loader": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
......@@ -13120,6 +13178,14 @@
"integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
......@@ -13651,6 +13717,11 @@
"object-keys": "^1.1.1"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
......@@ -14149,8 +14220,17 @@
"follow-redirects": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
"integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
"dev": true
"integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"forwarded": {
"version": "0.2.0",
......@@ -15178,14 +15258,12 @@
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"requires": {
"mime-db": "1.52.0"
}
......
package.json
View file @ c0d51be7
......@@ -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
View file @ c0d51be7
import {http} from './config'
export default {
realizarAssinatura: (assinatura) => {
return http.post('localhost:8080/usuario/', assinatura)
},
buscarCep(cep) {
return http.get('http://viacep.com.br/ws/' + cep + '/json/')
}
}
src/service/config.js 0 → 100644
View file @ c0d51be7
import axios from 'axios'
export const http = axios.create({
baseURL: 'http://localhost:8080/api/'
})
src/views/Cadastro.vue
View file @ c0d51be7
......@@ -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="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"
/>
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" required placeholder="text@example.com">
<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;
......
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