La première étape consiste à afficher le code de vérification. Lorsque nous appuyons sur la licence commerciale, laissez-la apparaître une boîte contextuelle. Le code de vérification est au-dessus de la boîte contextuelle, comme le montre la figure 1:
(Photo 1)
Le style du cadre pop-up est illustré à la figure 2:
(Figure 2)
Nous devons vérifier la valeur du code de vérification pour déterminer si le code de vérification est entré correctement. Lorsque l'entrée est incorrecte, nous invitons à un message d'erreur et que le message d'invite est illustré à la figure 3:
(Figure 3)
Si la page est vérifiée correctement, cela n'invitera pas de message d'erreur et sera ajusté à notre page cible, comme le montre la figure 4:
(Figure 4)
Description de la couche de routage
/ ** Store de fournisseur - Acheter Introduction * / // 1 set dans la couche de routage, sautez vers la page /buyer/vshop/info.ejs dans le répertoire racine pour Jump, puis appelez l'interface router.get ('/ acheteur / vshop / info', fonction (req, res, Next) {// 2 calant l'interface pour obtenir des données en tant que synch.Paronal : Fonction (fn) {// Calling l'interface pour obtenir l'adresse IP de la machine locale var args = {userIp: TOLS.getClientip (req)}; VerifyCodeHelper.CreatevCode (args, fonction (err, result) {if (err) {console.log (err);} else {fn (null, {captcha: result.data.queryurl, csnonce: result.csnonce || 0})}}); Res.end (ERR); res.render ("acheteur / vshop / décrire", {title: srcbiztype == 1? result.getdetail.name: "shop introduction", pagename: "vshopinfo", captcha: result.verifycode.captcha, // code de vérification "); }); }); });Description de la couche EJS
<% - include ../../Header%> // 1-get le csnonce <script> App.newlogin = {csnonce: '<% - csnonce%>',}; <link href = "/ css / vshop / décrire.css? v = <% = config.version%>" rel = "Stylesheet" /> <style id = "dynamic"> </ style> <v> </ div> <div> <img src = "/ imgs / vshop / vérification-code-back.png" /> </v> <ul> id = "btn_sku_dialog_close"> </span> <li> Veuillez saisir le code de vérification graphique suivant </li> <li> <img id = "j_btnverifypiccodencecent" src = "" style = "height: 30px; margin: 0 15px;" /> </li> <li> <div> <input type = "text" maxLengng ./widget_vshop%> </ en-tête> <section data-role = "body"> <div> <ul> <li> <div> Location </ div> <% - Detail.Address %> </ div> </li> <li> <div> Shop Opening Time </div> <v> <% - Detail.CreatEtime %> </v> </li> </ul> <ul> Speed </div> <div> <% - de détail.score.express%> </ div> </li> <li> <div> Service Attitude </div> <div> <% - Detail.Score.Service %> </ div> </li> <li> <div> Description cohérent </ div> <v> <% - Detail.Score.Describe> </v> </li> </ ul> <% if (de détail.shopTypeIndex == 1 || de détail.shopTypeIndex == 2 || de détail.shoptypeIndex == 3) {var bg = '/imgs/vshop/tip.png',color='#39dda5'} else {var bg = '/imgs/vshop/tip3.png',color =' # 59aaff '}%> <li> <div> Certification </div> <div> <span style = "background: url (<% - bg %>) gauche 1px no-repeat; background-size: 14px 12px;"> <i style = "background: <% - Color %> %> </i> </span> </div> </li></ul> <ul> <li> <a href = "tel: <% - Detail.Phone%>"> Service Téléphone </a> </li> <li> <a data-aaid = "<% - Aid %>"> Service client en ligne </a> </li> <li> <! Aid%> "> -> <a href =" # "> <span> licence commerciale </span> <babline> View <span> </span> </ label> </a> </li> </ul> </ div> <% - include ./footer %> <div id =" vue_hooker "> <fil-nav> </fil-nav> <% - incluse ../../widget_ </ section> </ div> // 2-get the captCha for Routed <script type = "text / javascript" src = "<% = captcha%>"> </ script> // 3-introduce liés js fichiers <script> seajs.use ("js_cmd / vshop / home-cmd"); </cript> <% - inclure ../../footer%>Description de la couche JS
/ ** Il s'agit d'un fichier public, d'une page d'accueil VSHOP et de tous les produits VShop sont partagés * / // 1-Define (fonction (require, exports, module) {var $ = require (./ top-SUCLS-CMD "), myDialog = require (" lib_cmd / mydialog "), main = require (" js_cmd / main-cmd "), datal = requis (" js_cmd / main-cmd "), datal = require (" js_cmd / main-cmd "), datal = require (" js_cmd / main-cmd "), Dataload = require (./ tool-cmd "), fxztool = require (" ./ fxztool-cmd "), vue = require (" lib_cmd / vue-cmd "), widget_navbtns = require (js_cmd / navbtns-cmd"), $ eles = {}, eles = {}; Vue ({data: {}, méthodes: {}}); $ ('. Btn_mes_text'). $ ('. Arrow_mask'). Hide (); $ ('. Arrow'). if ($ (.. $ ('# J_btnverifypicCodeTencent'). Sur ('click', function () {tsocapobj.refresh ();}); Tsocapobj.refresh (); (ret_json.errorcode! = 0) {$ (". btn_mes_text"). Val (""); classe = 'Verification-Code'> Veuillez saisir le code de vérification correct </ div> ");} $ ('. BTN_MES_Text'). Blur (function () {$ ('. BTN_MES_Text'). Text (" ");});} else {window.Location =" / acheteur / vshop? }).Description de la couche CCS
@Import URL (Common.css); .div-section-info .info4 {padding: 0} .div-section-info .info4 li {padding: 11px 14px; hauteur de ligne: 20px; Border-Bottom: 1px solide # e6e6e6; } .div-section-info .info4 li a {couleur: # 333; Affichage: bloc; } .div-section-info .info4 li a.tel {background: url (/imgs/vshop/callandmsg.png) no-repeat; taille arrière: 20px 60px; Position d'arrière-plan: à droite 0; } .div-section-info .info4 li a.webim {background: url (/imgs/vshop/callandmsg.png) no-repeat; taille arrière: 20px 60px; Position d'arrière-plan: à droite -30px; } .div-section-info .info4 li une étiquette {affichage: bloc; flottant: à droite; } .div-section-info .info4 li a étiquette span {affiche: bloc; Largeur: 12px; hauteur: 12px; Border-droite: 1px solide # 666; Border-Bottom: 1px solide # 666; -Webkit-Transform: Rotate (-45DEG); flottant: à droite; marge: 4px; } .arrow_mask {position: fixe; en haut: 0; à gauche: 0; en bas: 0; à droite: 0; Z-Index: 101; Affichage: aucun; Contexte: noir; Opacité: 0,7; } .arrow {largeur: 250px; Hauteur: 226px; Color d'arrière-plan: #FFFFF; Position: fixe; en haut: 50%; Gauche: 50%; Z-Index: 102; -Webkit-transform: traduire (-50%, -50%); -moz-transform: traduire (-50%, -50%); -ms-transform: traduire (-50%, -50%); -o-transform: traduire (-50%, -50%); Transformer: traduire (-50%, -50%); Border-Radius: 10px; Affichage: aucun; } .arrow-mess li: nth of-type (1) {text-align: Centre; marge-fond: 8px; taille de police: 14px; Couleur: # 333333; } .arrow-mess li: nth of-type (2) {text-align: Centre; marge-fond: 10px; } .arrow-mess li: nth of-type (3) entrée {largeur: 100%; hauteur: 30px; Border: 1px solide # 979797; Texte-aligne: Centre; Border-Radius: 3px; Font-Family: Pingfangsc-régulier; taille de police: 16px; Couleur: # 333333; Espacement des lettres: 0px; } .btn_mes {margin-bottom: 15px; Largeur: 100%; padding-gauche: 48px; rembourrage à droite: 48px; Position: relative; } .btn_mes2 {largeur: 100%; padding-gauche: 70px; padding-droite: 70px; / * position: relative; * / position: absolu; En bas: 0px; marge-fond: 10px; } .license-submit {width: 100%; hauteur: 44px; Contexte: # FF534C; Border: 1px solide # FF534C; taille de police: 14px; Border-Radius: 4px; Couleur: #ffffff; } .sku-close {background: url (/imgs/vshop/verification-code-del.png) no-repeat droit; -Webkit-Background-Size: 25px Auto; Affichage: bloc en ligne; Largeur: 26px; hauteur: 26px; Position: absolue; Droite: 0px; En haut: 0px; marge-droite: -13px; marge: -13px; } .Verification-Code {Z-index: 102; Couleur: # FFAA00; Position: absolue; taille de police: 12px; en haut: 4px; } .Verification-Code-Back {width: 100%; Position: absolue; hauteur: 46px; } .arrow div: nth of-type (1) {position: relatif; } .arrow-mess {margin-top: 52px; }Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.