Adiciona a requisição para a api do camunda
Showing
| ... | ... | @@ -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/services/assinatura.js
0 → 100644
src/services/config.js
0 → 100644
| <template> | ||
| <div class="row"> | ||
| <div class="col-75"> | ||
| <div class="container"> | ||
| <form action="/action_page.php"> | ||
| <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> | ||
| <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"> | ||
| <fieldset> | ||
| <legend>Dados Pessoais</legend> | ||
| <label for="nome">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="tel" | ||
| 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="fname"><i class="fa fa-user"></i> Data Nascimento: </label> | ||
| <input id="date" type="date" name="firstname" placeholder=""> | ||
| <br> | ||
| <label for="email"><i class="fa fa-envelope"></i> Email</label> | ||
| <input type="text" id="email" name="email" required placeholder="[email protected]"> | ||
| <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=""> | ||
| </div> | ||
| <div class="col-50"> | ||
| <label required for="zip">Cep</label> | ||
| <input type="text" id="zip" name="zip" placeholder="00000-00"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-50"> | ||
| <h3>Pagamento</h3> | ||
| <label for="fname">bandeiras aceitas</label> | ||
| <label for="dataNascimento">Data Nascimento:</label> | ||
| <input | ||
| type="date" | ||
| name="dataNascimento" | ||
| id="dataNascimento" | ||
| required | ||
| v-model="assinatura.dadosPessoais.usuario.dataNascimento" | ||
| /> | ||
| <label for="email">Email:</label> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| id="email" | ||
| required | ||
| placeholder="[email protected]" | ||
| v-model="assinatura.dadosPessoais.usuario.email" | ||
| /> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Endereço</legend> | ||
| <label for="cep">CEP:</label> | ||
| <input | ||
| type="text" | ||
| name="cep" | ||
| id="cep" | ||
| placeholder="00000-000" | ||
| v-model="assinatura.dadosPessoais.endereco.cep" | ||
| /> | ||
| <label for="rua">Rua:</label> | ||
| <input | ||
| type="text" | ||
| name="rua" | ||
| id="rua" | ||
| placeholder="Travessa do Sabiá" | ||
| v-model="assinatura.dadosPessoais.endereco.rua" | ||
| /> | ||
| <label for="numero">Número:</label> | ||
| <input | ||
| type="number" | ||
| name="numero" | ||
| id="numero" | ||
| placeholder="250" | ||
| v-model="assinatura.dadosPessoais.endereco.numero" | ||
| /> | ||
| <label for="complemento">Complemento:</label> | ||
| <input | ||
| type="text" | ||
| name="complemento" | ||
| id="complemento" | ||
| placeholder="Prédio Ernesto Gouveia" | ||
| v-model="assinatura.dadosPessoais.endereco.complemento" | ||
| /> | ||
| <label for="bairro">Bairro:</label> | ||
| <input | ||
| type="text" | ||
| name="bairro" | ||
| id="bairro" | ||
| placeholder="Inocoop" | ||
| v-model="assinatura.dadosPessoais.endereco.bairro" | ||
| /> | ||
| <label for="cidade">Cidade:</label> | ||
| <input | ||
| type="text" | ||
| name="cidade" | ||
| id="cidade" | ||
| placeholder="Camaçari" | ||
| v-model="assinatura.dadosPessoais.endereco.cidade" | ||
| /> | ||
| <label for="estado">Estado:</label> | ||
| <input | ||
| type="text" | ||
| name="estado" | ||
| id="estado" | ||
| placeholder="BA" | ||
| 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" | ||
| /> | ||
| <label for="isEnderecoDeCobranca" | ||
| >O endereço informado é o endereço de cobrança</label | ||
| > | ||
| <input | ||
| type="checkbox" | ||
| unchecked | ||
| name="isEnderecoDeCobranca" | ||
| id="isEnderecoDeCobranca" | ||
| /> | ||
| </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="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=""> | ||
| <div class="row"> | ||
| <div class="col-50"> | ||
| <label for="expyear">Validade</label> | ||
| <input type="text" id="expyear" name="expyear" placeholder=""> | ||
| </div> | ||
| <div class="col-50"> | ||
| <label for="cvv">CVV</label> | ||
| <input type="text" id="cvv" name="cvv" placeholder=""> | ||
| </div> | ||
| </div> | ||
| <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> | ||
| </div> | ||
| <label> | ||
| <input type="checkbox" checked="checked" name="sameadr"> | ||
| Endereço de cobrança, mesmo de cadastro | ||
| </label> | ||
| <input type="submit" value="Cadastro" class="btn"> | ||
| <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> | ||
| <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" | ||
| /> | ||
| </fieldset> | ||
| <button class="btn">Cadastrar</button> | ||
| </form> | ||
| </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> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import AssinaturaService from "../services/assinatura"; | ||
| 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; | ||
| }); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
| <style> | ||
| .row { | ||
| display: -ms-flexbox; /* IE10 */ | ||
| display: flex; | ||
| -ms-flex-wrap: wrap; /* IE10 */ | ||
| flex-wrap: wrap; | ||
| margin: 0 -16px; | ||
| } | ||
| .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; | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| .container { | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px 10px; | ||
| background-color: #f2f2f2; | ||
| padding: 5px 20px 15px 20px; | ||
| border: 1px solid lightgrey; | ||
| border-radius: 3px; | ||
| } | ||
| input[type=text] , select { | ||
| form { | ||
| flex-grow: 1; | ||
| display: flex; | ||
| align-items: center; | ||
| columns: 1fr 1fr; | ||
| justify-content: center; | ||
| } | ||
| input[type="text"], | ||
| select { | ||
| width: 100%; | ||
| margin-bottom: 20px; | ||
| padding: 12px; | ||
| ... | ... | @@ -180,8 +351,8 @@ label { |
| font-size: 24px; | ||
| } | ||
| .btn , button { | ||
| background-color: #04AA6D; | ||
| .btn { | ||
| background-color: #04aa6d; | ||
| color: white; | ||
| padding: 12px; | ||
| margin: 10px 0; | ||
| ... | ... |
Please
register
or
sign in
to comment