El primer paso es mostrar el código de verificación. Cuando presionamos la licencia de negocio, deje que aparezca una caja emergente. El código de verificación está por encima del cuadro emergente, como se muestra en la Figura 1:
(Imagen 1)
El estilo del marco emergente se muestra en la Figura 2:
(Figura 2)
Necesitamos verificar el valor del código de verificación para determinar si el código de verificación se ingresa correctamente. Cuando la entrada es incorrecta, solicitamos un mensaje de error y el mensaje de solicitud se muestra en la Figura 3:
(Figura 3)
Si la página se verifica correctamente, esto no solicitará un mensaje de error y se ajustará a nuestra página de destino, como se muestra en la Figura 4:
(Figura 4)
Descripción de la capa de enrutamiento
/** Tienda de proveedores-Compre Introducción*/// 1S en la capa de enrutamiento, salte a la página /buyer/vshop/info.ejs en el directorio raíz para saltar, y luego llame a la interfaz router.get ('/buyer/vshop/info', function (req, res, next) {// 2-calling the Interface para obtener datos async. : function (fn) {// 3 califica la interfaz para obtener la dirección IP de la máquina local var args = {userip: tools.getClientip (req)}; VerifyCodeHelper.CreatevCode (args, function (err, result) {if (err) {console.log (err);} else {fn (null, {captcha: dult.data.queryUrl, csnonce: result.csnonce || 0})}}); } else {result.getDetail = res.shopinfo; {Título: SrcbizType == 1? }); });Descripción de la capa de EJS
< %- incluir ../../header %> // 1-get el csnonce <script> app.newlogin = {csnonce: '< %- csnonce %>',}; <link href = "/css/vshop/describe.css? v = < %= config.Version %>" rel = "stylesheet"/> <style id = "dinámico"> </ystye> <div> </div> <viv> id = "btn_sku_dialog_close"> </span> <li> Ingrese el siguiente código de verificación gráfico </li> <li> <img id = "j_btnverifypiccodetencent" src = "" style = "altura: 30px; margen: 0 15px;" /> </li> <li> <div> <input type = "text" maxlength = "6"> </div> </li> </ul> <div> <input type = "button" value = "enviar"> </div> </div> <div> <input type = "button" value = "enviar"> </div> </div> <Div data-role = "contenedor" ./widget_vshop%> </header> <section data-role = "body"> <div> <ul> <li> <div> ubicación </div> <%- detalle.address%> </div> </li> <li> <div> time de apertura </iv> <div> <%- detalle.creatEtime%> </div> </li> </ul> <li> <li> <viV> velocidad </div> <div> <%- detall.score.express%> </div> </li> <li> <div> actitud de servicio </div> <div> <%- detall.score.service%> </div> </li> <li> <div> Descripción consistente </div> <div> <%detail.score.Describe%> </div> </</li> </ul> <%if (Detalle.ShoPTypeIndex == 1 || Detalle.ShoPTypeIndex == 2 || Detalle.ShoPTypeIndex == 3) {var bg = '/imgs/vshop/tip.png',color='#39dda5'} else {var bg = '/imgs/vshop/tip3.png',color ='#59aaff '}%> <li> <Viv> certificación </div> <div> <span style = "en segundo plano: url (<%-bg%>) izquierda 1px sin-repeat; de tamaño de fondo: 14px 12px;"> <i style = "de fondo: <%-color%>"> <%-dinetas de detalle; de fondo: 14px 12px; "> <i Style =" Background: <%-color%> "> <%-Detalle-Detalle; %> </i> </span> </div> </li> </ul> <ul> <li> <a href = "Tel: <%-Detalle.phone%>"> Teléfono de servicio </a> </li> <li> <a data-id = "<%-AID%>"> Servicio al cliente en línea </a> </li> <!-<a href = "/buyer/vshop/Liceprese? ayuda%> ">--> <a href ="#"> <span> Licencia de negocios </span> <label> View <span> </span> </selete> </a> </li> </ul> </div> <%-include ./footer%> <dividi =" vue_hooker "> <bild-nav> </bild nav> <%-include ../../widget_navget_navs> </section> </div> // 2-get el captcha para enrutado <script type = "text/javaScript" src = "< %= captcha %>"> </script> // 3-introducir archivos js relacionados <script> mars.use ("js_cmd/vshop/home-cmd"); </script> < %- incluir ../../footer %>Descripción de la capa JS
/** Este es un archivo público, VShop HomePage y todos los productos VShop se comparten*/// 1-Define (Function (require, Exports, Module) {var $ = require ("./ top-suction-cmd"), myDialog = request ("lib_cmd/myDialog-cmd"), main = require ("js_cmd/main-cmd"), datalOader =, datalOader =, datalOader =, datalOader require ("./ Tool-cmd"), fxzTool = request ("./ fxztool-cmd"), vue = request ("lib_cmd/vue-cmd"), widget_navbtns = require ("js_cmd/navbtns-cmd"), $ eles = {}, eles = {{}/// 2-vue instantán Vue ({Data: {}, Métodos: {}}); $ ('. BTN_MES_TEXT'). Val ("); $ ('. Arrow_mask'). Hide (); if ($ ('. verificación-código'). $ ('#J_btnverifypiccodetencent'). On ('click', function () {tsocapobj.refresh ();}); Tsocapobj.refresh (); (jet_json.errorCode! = 0) {$ (". Btn_mes_text"). Val (""); class = 'verificación-código'> Ingrese el código de verificación correcto </div> ");} $ ('. Btn_mes_text'). Blur (function () {$ ('. Btn_mes_text'). Text (" ");});} else {Window.location ="/comprador/VSHOP/Licenciation? }});Descripción de la capa CCS
@Import URL (Common.css); .Div-Section-Info .info4 {Padding: 0} .Div-Section-Info .info4 Li {Padding: 11px 14px; Línea de altura: 20px; Border-Bottom: 1px Solid #E6E6E6; } .div-section-info .info4 li a {color: #333; Pantalla: bloque; } .Div-Section-Info .info4 Li A.Tel {Background: url (/imgs/vshop/callandmsg.png) no-repeat; tamaño de fondo: 20px 60px; Posición de fondo: derecha 0; } .Div-Section-Info .info4 Li A.Webim {Background: url (/imgs/vshop/callandmsg.png) no-repeat; tamaño de fondo: 20px 60px; Posición de fondo: derecha -30px; } .Div-Section-Info .Info4 Li A Label {Display: Block; flotante: correcto; } .Div-Section-Info .info4 li A Label Span {Display: Block; Ancho: 12px; Altura: 12px; Border-Right: 1px Solid #666; Border-Bottom: 1px Solid #666; -webkit-transform: rotar (-45deg); flotante: correcto; margen-top: 4px; } .arw_mask {posición: fijo; arriba: 0; Izquierda: 0; Abajo: 0; Derecha: 0; Índice Z: 101; Pantalla: ninguno; Fondo: negro; Opacidad: 0.7; } .arw {ancho: 250px; Altura: 226px; Color de fondo: #fffff; Posición: fijo; arriba: 50%; Izquierda: 50%; Índice Z: 102; -Webkit-transform: traducir (-50%, -50%); -Moz-transform: traducir (-50%, -50%); -ms-transform: traducir (-50%, -50%); -o-transform: traducir (-50%, -50%); transformar: traducir (-50%, -50%); Border-Radius: 10px; Pantalla: ninguno; } .arw-Mess li: nth-of-type (1) {text-align: center; Botón de margen: 8px; tamaño de fuente: 14px; Color: #333333; } .arw-Mess li: nth-of-type (2) {text-align: center; margen-fondo: 10px; } .arw-Mess li: nth de type (3) entrada {ancho: 100%; Altura: 30px; borde: 1px Solid #979797; Text-Align: Center; Border-Radius: 3px; Font-Family: PingfangsC-Regular; tamaño de fuente: 16px; Color: #333333; espaciado de letras: 0px; } .btn_mes {margen-bottom: 15px; Ancho: 100%; RODING-LEFT: 48px; Right de relleno: 48px; Posición: relativo; } .btn_mes2 {ancho: 100%; RODING-LEFT: 70px; Right-Right: 70px; /* Posición: relativo; */ posición: absoluto; Abajo: 0px; margen-fondo: 10px; } .license-submit {ancho: 100%; Altura: 44px; Antecedentes: #FF534C; borde: 1px sólido #ff534c; tamaño de fuente: 14px; Border-Radius: 4px; Color: #ffffff; } .sku-close {fondo: url (/imgs/vshop/verification-code-del.png) no se repite derecho; -Webkit-background-size: 25px Auto; Pantalla: bloque en línea; Ancho: 26px; Altura: 26px; Posición: Absoluto; Derecha: 0px; arriba: 0px; margen -derecha: -13px; margen -top: -13px; } .verificación-código {índice z: 102; Color: #FFAA00; Posición: Absoluto; tamaño de fuente: 12px; arriba: 4px; } .verificación-código-back {ancho: 100%; Posición: Absoluto; Altura: 46px; } .arw div: nth-de-type (1) {posición: relativo; } .arw-Mess {margin-top: 52px; }Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.