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