Der erste Schritt besteht darin, den Verifizierungscode anzuzeigen. Wenn wir die Geschäftslizenz drücken, lassen Sie sie eine Pop-up-Box auftauchen. Der Verifizierungscode befindet sich über dem Popup-Feld, wie in Abbildung 1 gezeigt:
(Bild 1)
Der Stil des Popup-Rahmens ist in Abbildung 2 dargestellt:
(Abbildung 2)
Wir müssen den Wert des Verifizierungscodes überprüfen, um festzustellen, ob der Verifizierungscode korrekt eingegeben wird. Wenn die Eingabe falsch ist, fordern wir eine Fehlermeldung auf, und die Eingabeaufforderung ist in Abbildung 3 dargestellt:
(Abbildung 3)
Wenn die Seite korrekt überprüft wird, fordert dies keine Fehlermeldung auf und wird an unsere Zielseite angepasst, wie in Abbildung 4 gezeigt:
(Abbildung 4)
Beschreibung der Routing -Ebene
/** Lieferanten Store-Shop Einführung*/// 1-set in der Routing-Ebene, springen Sie in die Seite /buyer/vshop/info.ejs im Root-Verzeichnis und rufen Sie dann den Schnittstellen-Router. : function (fn) {// 3 rechnen die Schnittstelle, um die IP-Adresse der lokalen Maschine zu erhalten. verifyCodeHelper.createvCode (args, function (err, result) {if (err) {console.log (err);} else {fn (null, {captcha: result.data.Queryurl, csnonce: result.csnonce ||})}); res.end (errand); res.render ("Käufer/VSHOP/beschreiben", {Titel: srcbiztype == 1? result.getDetail.Name: "Shop Introduction", Pagename: "vshopInfo", captcha: result.verifyCode.captcha, // Verifizierungscode iscent: 1, csnonce: csnonce: csnonce: csnonce: csnonce: csnonce: csnonce: csnonce: csnonce: csnone }); }); });EJS -Schicht Beschreibung
< %- include ../../Header %> // 1-enden Sie das Routed Csnonce <Script> app.newlogin = {csnonce: '< %- csnonce %>',}; <link href = "/css/vshop/beschreiben.css? v = < %= config.version %>" rel = "styleSheet"/> <style id = "dynamic"> </style> <div> </div> <div> <img src = "/imgs/vshop/verabschieden-code-back.png"/> </> </> </> </> </> </> </> </> </> </> </DIV. id = "btn_sku_dialog_close"> </span> <li> Bitte geben Sie den folgenden Grafikverifizierungscode ein </li> <li> <img id = "j_BTNVERIFYPICCODENTENCENT" Src = "Style =" Height: 30px; Margin: 0 15px; " /> </li> <li> <div> <Eingabe type = "text" maxLength = "6"> </div> </li> </ul> <div> <Eingabe type = "button" value = "sure"> </div> </div> <div> <Eingabe type = "button" -Weich "> </div> </div> <%" conconter "-conconter =" concent "-conconter" conconter ". ./widget_vshop %> </header> <section data-role="body"> <div> <ul> <li><div>Location</div><%- detail.address%></div></li> <li><div>Shop opening time</div><div><%- detail.createTime%></div></li> </ul> <ul> <li><div>Shipping speed</div><div><%- detail.score.express%></div></li> <li><div>Service attitude</div><div><%- detail.score.service%></div></li> <li><div>Description consistent</div><div><%- detail.score.describe%></div></li> </ul> <ul> <%if (detail.shOptypeIndex == 1 || detail.ShOptypeinDex == 2 || detail.ShOptypeinDex == 3) {var bg = '/imgs/vshop/tip.png',color='#39dda5'} {var bg = var bg = '/imgs/vshop/tip3.png',color ='#59aaff '}%> <li> <Viv> Zertifizierung </div> <div> <span style = "Hintergrund: url (<%-bg%>) links 1px no-repeat; Hintergrundgröße: 14px 12px; %> </i> </span> </div> </li> </ul> <ul> <li> <a href = "tel: <%-detaThone%>"> Service Telefon </a> </li> <li> <a data-aid = "<%-Aid%>"> Online-Kundendienst </a> </li> <li> <! AID%> ">-> <a href ="#"> <span> Geschäftslizenz </span> <label> Ansicht <span> </span> </label> </a> </li> </ul> </div> <%-include ./foter%> <div id =" vue_hooker "> <childn-nav> </child-nav> <%> <%> <%> <%- </section> </div> // 2-Tge die Captcha für Routed <script type = "text/javaScript" src = "< %= captcha %>"> </script> // 3-infroducucucucucucucucucucucucucucucucucucucucucucucucucucucucusie </script> < %- inklusive ../../foter %>JS -Schicht Beschreibung
/** This is a public file, vshop homepage & all vshop products are shared*/ //1-Define(function (require, exports, module) { var $ = require("./top-suction-cmd"), myDialog = require("lib_cmd/myDialog-cmd"), main = require("js_cmd/main-cmd"), DataLoader = benötigen ("./ Tool-cmd"), fxztool = require ("./ fxztool-cmd"), vue = required ("lib_cmd/vue-cmd"), widget_navbtns = require ("js_cmd/navbtns-cmd"), $ {{{{}, Eles = {{{{{{{{{{{{}; VUE ({Daten: {}, Methoden: {}}); $ ('. BTN_MES_TEXT'). VAL (""); $ ('. Arrow_mask'). Hide (); if ($ ('. Verification-Code'). Länge! = 0) {$ ('. Verification-Code'). $ ('#J_BTNVERIFYPICCODENTECENT'). On ('Click', Funktion () {tSocapobj.refresh ();}); TSocapobj.refresh (); (ret_json.ErrorCode! = 0) {$ (". Btn_Mes_Text"). Val (""); class = 'verification-code'> Bitte geben Sie den richtigen Verifikationscode </div> ");} $ ('. Btn_Mes_Text'). Blur (function () {$ ('. Btn_Mes_Text'). text (" ");}) ein. }});CCS -Schicht Beschreibung
@import URL (Common.css); .Div-Abschnitt-Info .Info4 {Padding: 0} .Div-Abschnitt-info .info4 li {padding: 11px 14px; Zeilenhöhe: 20px; Border-Bottom: 1PX Solid #e6e6e6; } .Div-Abschnitt-info .info4 li a {color: #333; Anzeige: Block; } .divsektion-info .info4 li a.tel {Hintergrund: URL (/imgs/vshop/callandmsg.png) no-repeat; Hintergrundgröße: 20px 60px; Hintergrundposition: Recht 0; } .divsektion-info .info4 li a.webim {Hintergrund: URL (/imgs/vshop/callandmsg.png) no-repeat; Hintergrundgröße: 20px 60px; Hintergrundposition: Rechts -30px; } .Div-Abschnitt-Info .Info4 li ein Etikett {Anzeige: Block; float: rechts; } .Div-Abschnitt-Info .Info4 li eine Etikettspanne {Anzeige: Block; Breite: 12px; Höhe: 12px; Grenzrechte: 1PX Solid #666; Border-Bottom: 1PX Solid #666; -Webkit-transform: rotieren (-45de); float: rechts; Rand: 4px; } .Arrow_mask {Position: behoben; Top: 0; links: 0; unten: 0; Rechts: 0; Z-Index: 101; Anzeige: Keine; Hintergrund: Schwarz; Opazität: 0,7; } .Arrow {width: 250px; Höhe: 226px; Hintergrundfarbe: #fffff; Position: fest; Top: 50%; Links: 50%; Z-Index: 102; -Webkit-Transformation: Translate (-50%, -50%); -moz-transform: translate (-50%, -50%); -MS-Transformation: Translate (-50%, -50%); -O-Transformation: Translate (-50%, -50%); Transformation: Translate (-50%, -50%); Border-Radius: 10px; Anzeige: Keine; } .Arrow-mess li: n-vom-type (1) {text-align: center; Randboden: 8px; Schriftgröße: 14px; Farbe: #333333; } .Arrow-mess li: n-vom-type (2) {text-align: center; Randboden: 10px; } .Arrow-mess li: N-vom-Typ (3) Eingabe {Breite: 100%; Höhe: 30px; Grenze: 1PX Solid #979797; Text-Align: Mitte; Border-Radius: 3px; Schriftfamilie: Pingfangsc-Regular; Schriftgröße: 16px; Farbe: #333333; Buchstabenabteilung: 0px; } .BTN_MES {Margin-Bottom: 15px; Breite: 100%; Padding-Links: 48px; Padding-Right: 48PX; Position: Relativ; } .BTN_MES2 {Breite: 100%; Padding-Links: 70px; Padding-Right: 70px; /* Position: Relativ; */ Position: absolut; unten: 0px; Randboden: 10px; } .License-submit {Breite: 100%; Höhe: 44px; Hintergrund: #ff534c; Rand: 1PX Solid #ff534c; Schriftgröße: 14px; Border-Radius: 4px; Farbe: #ffffff; } .sku-close {Hintergrund: URL (/imgs/vshop/verification-code-del.png) No-Repeat Right; -Webkit-Background-Größe: 25px Auto; Anzeige: Inline-Block; Breite: 26px; Höhe: 26px; Position: absolut; Rechts: 0px; Oben: 0px; Rand -Rechts: -13px; Rand: -13px; } .verification-code {z-Index: 102; Farbe: #ffaa00; Position: absolut; Schriftgröße: 12px; Top: 4px; } .verification-code-back {width: 100%; Position: absolut; Höhe: 46px; } .Arrow div: n-of-type (1) {Position: relativ; } .Arrow-mess {margin-top: 52px; }Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.