Skip to content

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

Adiciona consulta api viacep

parent 609d2c7e
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 83 deletions
package.json
View file @ becd3cdc
......@@ -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/components/Plans.vue
View file @ becd3cdc
......@@ -6,9 +6,9 @@
<div v-else-if="error" class="error" role="alert">
Erro ao tentar carregar a lista de planos
</div>
<div class="price-col" v-else v-for="plan in plans" :key="plan.name">
<p>{{ plan.name }}</p>
<h3>R$ {{ plan.price }}<span>/ mês</span></h3>
<div class="price-col" v-else v-for="plan in plans" :key="plan.nome">
<p>{{ plan.nome }}</p>
<h3>R$ {{ plan.valor }}<span>/ mês</span></h3>
<ul v-for="reason in plan.reasons" :key="reason.name">
<li>{{ reason }}</li>
</ul>
......@@ -41,10 +41,10 @@ export default {
.then((data) => (this.plans = data.plans))
.catch(() => (this.error = true)); */
await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/plans")
await fetch("http://192.168.0.68:9094/NTFlix/v1/stage/cadastro")
.then((res) => res.json())
.then((data) => (this.plans = data.plans))
.catch(() => (this.error = true));
.then((data) => (this.plans = data.plano.modalidades))
.catch((e) => (console.log(e)));
this.pending = false;
},
......
src/services/assinatura.js
View file @ becd3cdc
......@@ -3,5 +3,9 @@ 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/')
}
}
\ No newline at end of file
src/views/Cadastro.vue
View file @ becd3cdc
<template>
<div class="container">
<h3>Pré-cadastro</h3>
<ul>
......@@ -78,6 +77,57 @@
/>
</fieldset>
<fieldset>
<legend>Pagamento</legend>
<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>
</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"
/>
<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"
/>
<label for="dataVencimento">Validade:</label>
<input
type="month"
name="dataVencimento"
id="dataVencimento"
v-model="assinatura.dadosPagamento.dataVencimento"
/>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<label for="cep">CEP:</label>
......@@ -86,6 +136,7 @@
name="cep"
id="cep"
placeholder="00000-000"
@change="buscarCep"
v-model="assinatura.dadosPessoais.endereco.cep"
/>
......@@ -163,57 +214,6 @@
/>
</fieldset>
<fieldset>
<legend>Pagamento</legend>
<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>
</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"
/>
<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"
/>
<label for="dataVencimento">Validade:</label>
<input
type="month"
name="dataVencimento"
id="dataVencimento"
v-model="assinatura.dadosPagamento.dataVencimento"
/>
</fieldset>
<fieldset>
<legend>Dados do Plano</legend>
......@@ -233,7 +233,6 @@
v-model="assinatura.dadosPlano.idPeriodoPlano"
/>
</fieldset>
<button class="btn">Cadastrar</button>
</form>
</div>
......@@ -296,43 +295,65 @@ export default {
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);
});
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 10px 10px;
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
form {
flex-grow: 1;
display: flex;
align-items: center;
columns: 1fr 1fr;
justify-content: center;
}
input[type="text"],
select {
input[type="text"] {
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