O primeiro passo é mostrar o código de verificação. Quando pressionarmos a licença comercial, deixe-a exibir uma caixa pop-up. O código de verificação está acima da caixa pop-up, como mostrado na Figura 1:
(Figura 1)
O estilo do quadro pop-up é mostrado na Figura 2:
(Figura 2)
Precisamos verificar o valor do código de verificação para determinar se o código de verificação foi inserido corretamente. Quando a entrada está incorreta, solicitamos uma mensagem de erro e a mensagem imediata é mostrada na Figura 3:
(Figura 3)
Se a página for verificada corretamente, isso não solicitará uma mensagem de erro e será ajustado à nossa página de destino, conforme mostrado na Figura 4:
(Figura 4)
Descrição da camada de roteamento
/** Armazenamento de fornecedores-Introdução da loja*/// 1-set na camada de roteamento, pule para a página /buyer/vshop/info.ejs no diretório raiz para salto e, em seguida, ligue para o interface Router.get.get ('/Buyer/vshop/info', function (req, res. : function (fn) {// 3-chamando a interface para obter o endereço IP da máquina local var args = {userip: tools.getclientip (req)}; verifyCodeHelper.creatEvCode (args, function (err, resultado) {if (err) {console.log (err);} else {fn (null, {captcha: resultado.data.Queryurl, csNonce: resultado.csNence || 0}}}}; Res. end (err); Res.render ("Comprador/vshop/descreve", {title: srcbiztype == 1? Result.getDetail.name: "Shop Introdução", Pagename: "Vshopinfo", Captcha: result.verifyCode.CaptCha, // Código de verificação ISTENCENT: 1, CSNOCH. }); }); });Descrição da camada EJS
< %- incluir ../../header %> // 1-GOT O CSNONCE ROTED <SCRIPT> APP.NEWLOGIN = {CSNONCE: '< %- CSNOnce %>',}; <link href = "/css/vshop/descreve.css? v = < %= config.version %>" rel = "stylesheet"/> <style id = "dynamic"> </style> <div> </div> <div> <mg src = "/imgs/vshop/verification-back.png" id = "btn_sku_dialog_close"> </span> <li> Por favor, insira o seguinte código de verificação gráfica </li> <li> <img id = "j_btnverifypiccodetencent" src = "" style = "altura: 30px; margin: 0 15px;" /> </li> <li> <div> <input type = "text" maxlengthing = "6"> </div> </li> </ul> <div> <input type = "button" value = "submit"> </div> </div> <Data> <Data> <Data> <input Type = "" = "suber"> </</> </data-r "<Div> <%- incluir ./widget_vshop%> </weweler> <seção data- role = "body"> <div> <ul> <li> <div> localização </div> <%- detalhe.address %> </div> </li> <li> <di-> <div> o tempo de abertura da loja </div> <div> <div> <%> </li> <li> <li> velocidade </div> <div> <%- detalhe.score.express%> </div> </li> <li> <div> atitude de serviço </div> <div> <%- detalhe.score.service%> </div> </li> <li> <div> Descrição consistente </> <div> <iv> <%if (detalhe.shoptypeIndex == 1 || detalhe.shoptypeIndex == 2 || detalhe.shoptypeIndex == 3) {var bg = '/imgs/vshop/tip.png'.color='#39dda5' else {var bg = '/imgs/vshop/tip3.png'.color ='#59aaff '}%> <li> <div> certificação </div> <div> <span style = "background: url (<%-bg%>) esquerda 1px no-repeat; back-size: 14px 12px;"> <iysty) " %> </i> </span> </div> </li> </ul> <ul> <li> <a href = "tel: <%-detalhe.phone %>"> telefone </a> </li> <li> <a data -ed = "<%-aid %>"> Serviço de cliente online </a> </li> <li> <!-<! AID%> ">-> <a href ="#"> <pan> Licença comercial </span> <belt> view <span> </span> </celt> </a> </li> </ul> </div> <%-incluir ./footer%> <div id =" vue_hooker "> <filg-nav> </chrav> </section> </div> // 2-te o captcha para roteado <script type = "text/javascript" src = "< %= captcha %>"> </sCript> // arquivos JS relacionados a 3-Introduce <Cript> Seajs.use ("js_cmd/vshop/home-cmd"); </script> < %- incluir ../../footer %>Descrição da camada js
/** Este é um arquivo público, a página inicial do VSHOP e todos os produtos VSHOP são compartilhados*/// 1-define (função (requer, exportações, módulo) {var $ = requer ("./ top-suction-cmd"), mydialog = requer ("lib_cmd/mydialog-cmd"), main = requer ("js_ js_c (" js_c (lib_cmd/mydialog-cmd "), main = requer (" " requer ("./ Tool-cmd"), fxztool = requer ("./ fxztool-cmd"), vue = require ("lib_cmd/vue-cmd"), widget_navbtns = requim ("js_cmd/navbtns-cmd), $ es = {) Vue ({data: {}, métodos: {}}); $ ('BTN_MES_TEXT') ('. Arrow_mask'). if ($ ('. $ ('#J_btnverifypiccodetencent'). Tsocapobj.Refresh (); (ret_json.errorcode! = 0) {$ (". BTN_MES_TEXT") class = '' verificação-code '> insira o código de verificação correto </div> ");} $ ('. }});Descrição da camada do CCS
@import url (Common.css); .div-seção-info .info4 {preenchimento: 0} .div-seção-info .info4 li {preenchimento: 11px 14px; altura de linha: 20px; Bottom de fronteira: 1px Solid #E6E6E6; } .div-seção-info .info4 li a {color: #333; exibição: bloco; } .div-seção-info .info4 li a.tel {background: url (/imgs/vshop/callandmsg.png) no-repeat; Antecedentes-tamanho: 20px 60px; Posição de fundo: direita 0; } .div-seção-info .info4 li A.Webim {Background: url (/imgs/vshop/callandmsg.png) no-repeat; Antecedentes-tamanho: 20px 60px; Posição de fundo: direita -30px; } .div-seção-info .info4 li um rótulo {display: block; Float: Certo; } .div-seção-info .info4 li Um span de etiqueta {display: block; Largura: 12px; Altura: 12px; Fronteira: 1px Solid #666; Bottom de fronteira: 1px Solid #666; -Webkit-transform: girate (-45deg); Float: Certo; Margin-top: 4px; } .arrow_mask {position: corrigido; topo: 0; Esquerda: 0; Inferior: 0; Direita: 0; Z-Index: 101; Exibir: Nenhum; Antecedentes: preto; Opacidade: 0,7; } .arrow {width: 250px; Altura: 226px; Background-Color: #fffff; Posição: fixado; TOP: 50%; Esquerda: 50%; Index z: 102; -webkit-transform: tradutor (-50%, -50%); -moz-transform: traduzir (-50%, -50%); -ms-transform: traduzir (-50%, -50%); -o-transform: traduzir (-50%, -50%); Transformar: traduzir (-50%, -50%); Radio de fronteira: 10px; Exibir: Nenhum; } .Arrow-Mess Li: Nth-of-Type (1) {Text-Align: Center; Margin-Bottom: 8px; Size da fonte: 14px; Cor: #333333; } .Arrow-Mess Li: Nth-of-Type (2) {Text-Align: Center; Margin-Bottom: 10px; } .Arrow-Mess Li: Nth-of-Type (3) Entrada {Width: 100%; Altura: 30px; fronteira: 1px Solid #979797; Alinhamento de texto: centro; Radio de fronteira: 3px; Fonte-família: pingfangsc-regular; Size da fonte: 16px; Cor: #333333; Espacamento de cartas: 0px; } .btn_mes {margem-bottom: 15px; largura: 100%; preenchimento-esquerda: 48px; Right-right: 48px; Posição: relativa; } .btn_mes2 {width: 100%; preenchimento-esquerda: 70px; Right-right: 70px; /* Posição: relativa; */ posição: absoluto; Inferior: 0px; Margin-Bottom: 10px; } .license-submit {width: 100%; Altura: 44px; Antecedentes: #FF534C; borda: 1px sólido #ff534c; Size da fonte: 14px; Radio de fronteira: 4px; Cor: #ffffff; } .sku-close {background: url (/imgs/vshop/verification-code-del.png) sem-repetição à direita; -Webkit-background-size: 25px automático; Exibição: bloco embutido; Largura: 26px; Altura: 26px; Posição: Absoluto; Direita: 0px; Top: 0px; Margem -direita: -13px; margin -top: -13px; } .Verificação-código {Z-Index: 102; Cor: #ffaa00; Posição: Absoluto; tamanho de fonte: 12px; topo: 4px; } .verificação-code-back {width: 100%; Posição: Absoluto; Altura: 46px; } .Arrow Div: Nth-of-Type (1) {Position: relativo; } .arrow-masss {margin-top: 52px; }O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.