Adiciona a requisição para a api do camunda
Showing
| ... | @@ -10,6 +10,7 @@ | ... | @@ -10,6 +10,7 @@ |
| "build": "vue-cli-service build" | "build": "vue-cli-service build" | ||
| }, | }, | ||
| "dependencies": { | "dependencies": { | ||
| "axios": "^0.27.2", | |||
| "core-js": "^3.8.3", | "core-js": "^3.8.3", | ||
| "vue": "^3.2.13", | "vue": "^3.2.13", | ||
| "vue-router": "^4.0.3" | "vue-router": "^4.0.3" | ||
| ... | ... |
src/services/assinatura.js
0 → 100644
src/services/config.js
0 → 100644
| <template> | <template> | ||
| <div class="row"> | <div class="container"> | ||
| <div class="col-75"> | <h3>Pré-cadastro</h3> | ||
| <div class="container"> | <ul> | ||
| <form action="/action_page.php"> | <li v-for="(erro, index) of errors" :key="index"> | ||
| campo <b>{{ erro.field }}</b> - {{ erro.defaultMessage }} | |||
| <div id="form1" class="row"> | </li> | ||
| <div class="col-50"> | </ul> | ||
| <h3>Pré-cadastro</h3> | |||
| <label for="fname"><i class="fa fa-user"></i> Nome: </label> | <form id="preCadastro" @submit.prevent="realizarAssinatura"> | ||
| <input type="text" id="fname" name="firstname" required placeholder=""> | <fieldset> | ||
| <legend>Dados Pessoais</legend> | |||
| <label for="fname"><i class="fa fa-user"></i> Sobrenome: </label> | <label for="nome">Nome:</label> | ||
| <input type="text" id="fname" name="firstname" placeholder=""> | <input | ||
| type="text" | |||
| <label for="fname"><i class="fa fa-user"></i> CPF: </label> | name="nome" | ||
| <input type="text" id="fname" name="firstname" required placeholder="xxx-xxx-xxx-xx"> | id="nome" | ||
| required | |||
| <label required for="fname"><i class="fa fa-user"></i> Telefone: </label> | v-model="assinatura.dadosPessoais.usuario.nome" | ||
| <input type="text" id="fname" name="firstname" placeholder="(xx)xxxx-xxxx"> | placeholder="Nome completo" | ||
| /> | |||
| <label for="country">Sexo</label> | |||
| <select id="country" name="country"> | <label for="user">Apelido:</label> | ||
| <option value="australia">Masculino</option> | <input | ||
| <option value="canada">Femino</option> | type="text" | ||
| <option value="usa">Prefiro não informa</option> | name="user" | ||
| </select> | id="user" | ||
| required | |||
| <label for="fname"><i class="fa fa-user"></i> Data Nascimento: </label> | v-model="assinatura.dadosPessoais.usuario.user" | ||
| <input id="date" type="date" name="firstname" placeholder=""> | placeholder="Apelido" | ||
| <br> | /> | ||
| <label for="email"><i class="fa fa-envelope"></i> Email</label> | <label for="cpf">CPF:</label> | ||
| <input type="text" id="email" name="email" required placeholder="[email protected]"> | <input | ||
| <label for="adr"><i class="fa fa-address-card-o"></i> Rua</label> | type="text" | ||
| <input type="text" id="adr" name="address" placeholder=""> | name="cpf" | ||
| <label for="adr"><i class="fa fa-address-card-o"></i> Nº</label> | id="cpf" | ||
| <input type="text" id="adr" name="address" placeholder=""> | required | ||
| placeholder="000.000.000-00" | |||
| <label for="city"><i class="fa fa-institution"></i> Cidade</label> | v-model="assinatura.dadosPessoais.usuario.cpf" | ||
| <input type="text" id="city" name="city" placeholder=""> | /> | ||
| <label for="city"><i class="fa fa-institution"></i> Referecia/Complemento</label> | <label for="celular">Celular:</label> | ||
| <input type="text" id="city" name="city" placeholder=""> | <input | ||
| type="tel" | |||
| <div class="row"> | name="celular" | ||
| <div class="col-50"> | id="celular" | ||
| <label for="state">Estado</label> | required | ||
| <input type="text" id="state" name="state" placeholder=""> | placeholder="(00) 90000-0000" | ||
| </div> | v-model="assinatura.dadosPessoais.usuario.celular" | ||
| <div class="col-50"> | /> | ||
| <label required for="zip">Cep</label> | |||
| <input type="text" id="zip" name="zip" placeholder="00000-00"> | <label for="sexo">Sexo:</label> | ||
| </div> | <select name="sexo" id="sexo"> | ||
| </div> | <option value="masculino">Masculino</option> | ||
| </div> | <option value="feminino">Feminino</option> | ||
| <option value="outro">Prefiro não informar</option> | |||
| <div class="col-50"> | </select> | ||
| <h3>Pagamento</h3> | |||
| <label for="fname">bandeiras aceitas</label> | <label for="dataNascimento">Data Nascimento:</label> | ||
| <div class="icon-container"> | <input | ||
| <i class="fa fa-cc-visa" style="color:navy;"></i> | type="date" | ||
| <i class="fa fa-cc-amex" style="color:blue;"></i> | name="dataNascimento" | ||
| <i class="fa fa-cc-mastercard" style="color:red;"></i> | id="dataNascimento" | ||
| <i class="fa fa-cc-discover" style="color:orange;"></i> | required | ||
| </div> | v-model="assinatura.dadosPessoais.usuario.dataNascimento" | ||
| <label for="cname">Nome Titular</label> | /> | ||
| <input type="text" id="cname" name="cardname" placeholder=""> | |||
| <label for="ccnum">Numero Cartão</label> | <label for="email">Email:</label> | ||
| <input type="text" id="ccnum" name="cardnumber" placeholder=""> | <input | ||
| <label for="expmonth">Mês Expedição</label> | type="email" | ||
| <input type="text" id="expmonth" name="expmonth" placeholder=""> | name="email" | ||
| id="email" | |||
| <div class="row"> | required | ||
| <div class="col-50"> | placeholder="[email protected]" | ||
| <label for="expyear">Validade</label> | v-model="assinatura.dadosPessoais.usuario.email" | ||
| <input type="text" id="expyear" name="expyear" placeholder=""> | /> | ||
| </div> | </fieldset> | ||
| <div class="col-50"> | |||
| <label for="cvv">CVV</label> | <fieldset> | ||
| <input type="text" id="cvv" name="cvv" placeholder=""> | <legend>Endereço</legend> | ||
| </div> | <label for="cep">CEP:</label> | ||
| </div> | <input | ||
| </div> | 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> | </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"> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| <div class="col-25"> | <label for="idTipoPagamento">Tipo Pagamento:</label> | ||
| <div class="container"> | <input | ||
| <p> | type="text" | ||
| Lista de Pré-cadastro | name="idTipoPagamento" | ||
| </p><br><br> | id="idTipoPagamento" | ||
| <p> | v-model="assinatura.dadosPagamento.idTipoPagamento" | ||
| envio de e-mail | /> | ||
| </p> | |||
| <label for="idChavePix">Chave Pix:</label> | |||
| <br><br> | <input | ||
| <button>Enviar</button> | type="text" | ||
| </div> | 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> | |||
| </template> | </template> | ||
| <script> | <script> | ||
| import AssinaturaService from "../services/assinatura"; | |||
| export default { | export default { | ||
| name: "app", | |||
| data() { | data() { | ||
| return { | 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> | </script> | ||
| <style> | <style> | ||
| .row { | * { | ||
| display: -ms-flexbox; /* IE10 */ | margin: 0; | ||
| display: flex; | padding: 0; | ||
| -ms-flex-wrap: wrap; /* IE10 */ | border: 0; | ||
| flex-wrap: wrap; | font-size: 100%; | ||
| margin: 0 -16px; | font: inherit; | ||
| } | vertical-align: baseline; | ||
| .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 { | .container { | ||
| display: flex; | |||
| flex-flow: row wrap; | |||
| justify-content: center; | |||
| align-items: center; | |||
| gap: 10px 10px; | |||
| 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; | ||
| } | } | ||
| 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%; | width: 100%; | ||
| margin-bottom: 20px; | margin-bottom: 20px; | ||
| padding: 12px; | padding: 12px; | ||
| ... | @@ -180,8 +351,8 @@ label { | ... | @@ -180,8 +351,8 @@ label { |
| font-size: 24px; | font-size: 24px; | ||
| } | } | ||
| .btn , button { | .btn { | ||
| background-color: #04AA6D; | background-color: #04aa6d; | ||
| color: white; | color: white; | ||
| padding: 12px; | padding: 12px; | ||
| margin: 10px 0; | margin: 10px 0; | ||
| ... | ... |
Please
register
or
sign in
to comment