Skip to content

Instantly share code, notes, and snippets.

@gilcierweb

gilcierweb/index.html

Last active Apr 8, 2020
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Component Vue.js search CEP or Zip code
Raw
index.html
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author"
content="GilcierWeb - Web Developer - gilcierweb@gmail.com - gilcier06@yahoo.com.br - Sites, Sistemas para Web, E-commerce, Manutenção de Sites."/>
<meta name="doc-rights" content="Private"/>
<title>Vue.js - by GilcierWeb</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div id="app" class="container">
<button class="btn btn-default-bright btn-raised" data-toggle="modal" data-target="#formModal">Não sei meu CEP?
</button>
<form action="">
<div class="row">
<div class="col-lg-3">
<label for="zip_code">CEP</label>
<input type="text" class="form-control" name="zip_code" id="zip_code" v-model="zip_code"
v-on:change="load_cep">
</div>
<div class="col-lg-3">
<label for="patio">Logradouro</label>
<input type="text" class="form-control" name="patio" id="patio" v-model="patio">
</div>
<div class="col-lg-3">
<label for="complement">Complemento</label>
<input type="text" class="form-control" name="complement" id="complement" v-model="complement">
</div>
<div class="col-lg-3">
<label for="number">Número</label>
<input type="text" class="form-control" name="number" id="number" v-model="number">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="neighborhood">Bairro</label>
<input type="text" class="form-control" name="neighborhood" id="neighborhood" v-model="neighborhood">
</div>
<div class="col-lg-3">
<label for="state_id">Estado</label>
<input type="text" class="form-control" name="state_id" id="state_id" v-model="state_id">
</div>
<div class="col-lg-3">
<label for="city_id">Cidade</label>
<input type="text" class="form-control" name="city_id" id="city_id" v-model="city_id">
</div>
</div>
</form>
<div id="app-modal">
<search-cep></search-cep>
</div>
</div>
<template id="search-cep-template">
<!-- BEGIN FORM MODAL MARKUP -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header style-default-light">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="formModalLabel">Buscar CEP</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-3">
<label for="email1" class="control-label">Rua</label>
</div>
<div class="col-sm-9">
<input type="text" name="patio" id="patio" v-model="patio" class="form-control"
placeholder="informe o nome da rua" required="true">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="city_id" class="control-label">Cidade</label>
</div>
<div class="col-sm-9">
<input type="text" name="city_id" id="city_id" v-model="city_id" class="form-control"
placeholder="Informe a cidade" required="true">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="state_id" class="control-label">Estado</label>
</div>
<div class="col-sm-9">
<select class="selectpicker form-control" data-live-search="true" name="state_id"
id="state_id" v-model="state_id" required="true">
<option value="">Selecione</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PR">Paraná</option>
<option value="PB">Paraíba</option>
<option value="PA">Pará</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary"
v-on:click.prevent.stop="search_cep">Buscar CEP
</button>
</div>
</form>
<table v-if="is_complete" class="table table-bordered no-margin">
<thead>
<tr>
<th>Endereço</th>
<th>CEP</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<tr v-for="row_cep in response_cep">
<td>{{row_cep.logradouro}} {{row_cep.complemento}} {{row_cep.bairro}} {{row_cep.localidade}} {{row_cep.uf}}</td>
<td><strong>{{row_cep.cep}}</strong></td>
<td>Escolher</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- END FORM MODAL MARKUP -->
</template>
<!--scripts-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Raw
search_cep.js
Vue.component('search-cep', {
template: '#search-cep-template',
data: function () {
return {
zip_code: '',
state_id: '',
city_id: '',
patio: '',
complement: '',
neighborhood: '',
number: '',
response_cep: [],
is_complete: false
}
},
methods: {
search_cep: function (event) {
if (event) {
event.preventDefault();
}
this.zip_code = this.zip_code.trim().replace(/[^0-9]/g, '');
// viacep.com.br/ws/RS/Porto Alegre/Domingos/json
url_cep = 'https://viacep.com.br/ws/' + this.state_id + '/' + this.city_id + '/' + this.patio + '/json/';
// clear all headers axios to viacep
axios.defaults.headers.common = null
axios.get(url_cep).then(function (response) {
this.is_complete = true;
this.response_cep = response.data;
// jQuery('#number').focus();
}.bind(this)).catch(function (error) {
console.log(error.statusText);
});
}
}
})
element = document.getElementById("app")
if (element != null) {
var app = new Vue({
el: "#app",
data: function () {
return {
zip_code: '',
patio: '',
complement: '',
neighborhood: '',
number: '',
state_id: '',
city_id: '',
response_cep: [],
is_complete: false
}
},
methods: {
load_cep: function (event) {
var url_cep, self;
if (event) {
event.preventDefault();
}
this.zip_code = this.zip_code.trim().replace(/[^0-9]/g, '');
url_cep = 'https://viacep.com.br/ws/' + this.zip_code + '/json';
// clear all headers axios to viacep
axios.defaults.headers.common = null;
axios.get(url_cep).then(function (response) {
this.patio = response.data.logradouro;
this.complement = response.data.complemento;
this.neighborhood = response.data.bairro;
this.state_id = response.data.uf;
this.city_id = response.data.localidade;
jQuery("#number").focus();
}.bind(this)).catch(function (error) {
console.log(error.statusText);
});
}
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment