Первый шаг - показать код проверки. Когда мы нажимаем на бизнес-лицензию, пусть она всплывает на всплывающую окно. Код проверки выше всплывающего окна, как показано на рисунке 1:
(Изображение 1)
Стиль всплывающей рамы показан на рисунке 2:
(Рисунок 2)
Нам нужно проверить значение кода проверки, чтобы определить, правильно ли введен код проверки. Когда ввод неверный, мы предпринимаем для сообщения об ошибке, и сообщение о приглашении показано на рисунке 3:
(Рисунок 3)
Если страница проверена правильно, это не заставит сообщать об ошибке и будет настроена на нашу целевую страницу, как показано на рисунке 4:
(Рисунок 4)
Описание уровня маршрутизации
/** Store Store-Введение в магазин*// // 1-й набор в слое маршрутизации, перейдите на страницу /buyer/vshop/info.ejs в корневом каталоге для прыжков, а затем вызовите интерфейс-router.get ('/buyer/vshop/info', function (req, res, next) {// 2-n-in-interface, чтобы получить данные Asyn.Pallc. : function (fn) {// 3-й-вывод интерфейса для получения IP-адреса локальной машины var args = {userip: tools.getClientip (req)}; VerifyCodeHelper.createVCode (args, function (err, result) {if (err) {console.log (err);} else {fn (null, {captcha: result.data.queryurl, csnonce: result.csnonce || 0}}); res.end (err); res.render («Покупатель/vshop/description», {title: srcbiztype == 1? Result.getDetail.name: «Введение в магазин», PagenAme: «Vshopinfo», Captcha: result.verifycode.captcha, // verification istencent: 1, csnonce: result.verifycode. }); }); });EJS слоя Описание
< %- включать ../../Header %> // 1-Get маршрутированный CSNONCE <Script> app.newlogin = {csnonce: '< %- csnonce %>',}; <link href = "/css/vshop/descript.css? v = < %= config.version %>" rel = "stylesship"/> <style id = "dynamic"> </style> <div> </div> <div> <img src = "/imgs/vshop/verification-code-back.pg"/> </div> id = "btn_sku_dialog_close"> </span> <li> Пожалуйста, введите следующий код графической проверки </li> <li> <img id = "j_btnverifypiccodetencent" src = "" style = "Высота: 30px; Margin: 0 15px;" /> </li> <li> <div> <input type = "text" maxlength = "6"> </div> </li> </ul> <div> <input type = "кнопка" value = "pospent"> </div> </div> <div> <input type = "value =" pospent "> </div> </div> <div-Role =" Data Role = "> <> </div> </div> <div-role ="> <> head-hader data role ">". ./widget_vshop%> </header> <раздел DATA-ROLE = "BODY"> <Div> <ul> <li> <div> Местоположение </div> <%- detail.address%> </div> </li> <li> <div> Время открытия магазина </div> <Div> <%- createTime%> </div> </li> </ul> <liping> <li-liping. Speed </div> <div> <%- detail.score.express%> </div> </li> <li> <div> Отношение к обслуживанию </div> <div> <%- defit.score.service%> </div> </li> <li> <div> Описание согласованно </div> <Div> <%- Defit.score.describe%> </div> </li> </div> <%- dive.score.describe%> </div> </div> <Div> <%- score.describe%> </div> </div> <Div> <%- score. <%if (detail.shoptypeindex == 1 || detail.shoptypeindex == 2 || detail.shoptypeindex == 3) {var bg = '/imgs/vshop/tip.png', color='#39dda5'} erese {var bg = '/imgs/vshop/tip3.png', color ='#59aaff '}%> <li> <div> Сертификация </div> <div> <span style = "Фон: URL (<%-bg%>) левая 1px no-repeat; фоновая система: 14px 12px;"> <i style = "founder: <%-color>". %> </i> </span> </div> </li> </ul> <ul> <li> <a href = "Тел: <%-detail.phone%>"> Service Phone </a> </li> <li> <A Data-aid = "<%-AID%>"> онлайн-обслуживание клиентов </a> </li> <li> <s! AID%> ">-> <a href ="#"> <pan> Бизнес-лицензия </span> <babel> view <pan> </span> </label> </a> </li> </ul> </div> <%-включать ./footer%> <div id =" vue_hooker "> <sald-nav> </child> <%-incult ../btdet_ns_tdet_nt_nt_tdet_ntis_ns_bt_bt_bt_bt_bt_bt_. </section> </div> // 2-Get CAPTCHA для маршрутируемого <script type = "text/javascript" src = "< %= captcha %>"> </script> // 3-introduce, связанные с файлами js <script> seajs.use ("js_cmd/vshop/home-cmd"); </script> < %- включить ../../footer %>Описание слоя JS
/** Это общедоступный файл, домашняя страница Vshop и все продукты Vshop являются общими*/// 1-define (function (require, exports, module) {var $ = require ("./ top-suction-cmd"), mydialog = require ("lib_cmd/mydialog-cmd"), main = reft (js_cmd/main-cmd "), kadaider"), ad-cmd "), adailed"), "js_cmd/main-cmd"), "js_cmd/main-cmd"), «js_cmd/main-cmd»), «js_cmd/main-cmd». require ("./ tool-cmd"), fxztool = require (". Data: {}, методы: {}}); $ ('. Btn_mes_text'). Val (""); $ ('. Arrow_mask'). Hide (); if ($ ('. Verifice-Code'). Длина! $ ('#J_btnverifypiccodetence'). On ('click', function () {tsocapobj.refresh ();}); Tsocapobj.refresh (); (ret_json.errorcode! = 0) {$ (". Btn_mes_text"). Val (""); class = 'verification-code'> Пожалуйста, введите правильный код проверки </div> ");} $ ('. Btn_mes_text'). Blur (function () {$ ('. Btn_mes_text'). Text (" ");});} else {window.location ="/buyer/vshop/aid = " + app.Ad; });Описание слоя CCS
@import url (common.css); .div-section-info .info4 {padding: 0} .div-section-info .info4 li {padding: 11px 14px; высота линии: 20px; Пограничный подклад: 1px solid #e6e6e6; } .div-section-info .info4 li a {color: #333; дисплей: блок; / размер фонового размера: 20px 60px; Справочная позиция: справа 0; } .div-section-info .info4 li a.webim {founal: url (/imgs/vshop/callandmsg.png) no-repeat; размер фонового размера: 20px 60px; Справочная позиция: справа -30px; } .div-section-info .info4 li a label {display: block; Поплавок: верно; } .div-section-info .info4 li a label span {display: block; Ширина: 12px; Высота: 12px; граница правая: 1px solid #666; Пограничный подъем: 1PX SOLID #666; -Webkit-transform: rotate (-45Deg); Поплавок: верно; маржинальная версия: 4px; } .Arrow_mask {position: fixed; Верх: 0; слева: 0; Внизу: 0; Справа: 0; Z-Index: 101; дисплей: нет; Фон: черный; непрозрачность: 0,7; } .Arrow {width: 250px; Высота: 226px; фоновый цвет: #fffff; позиция: исправлена; Верх: 50%; Слева: 50%; Z-Index: 102; -Вебкит-трансформ: перевод (-50%, -50%); -Моз-трансформ: перевод (-50%, -50%); -ms-transform: transtate (-50%, -50%); -o-transform: transtate (-50%, -50%); Преобразование: перевод (-50%, -50%); граница радий: 10px; дисплей: нет; } .Rrow-mess li: nth-of-type (1) {text-align: center; маржинальный бат: 8px; размер шрифта: 14px; Цвет: #333333; } .Rrow-mess li: nth-of-type (2) {text-align: center; маржинальный бат: 10px; } .ROW-MESS LI: NTH-OF-OFTE (3) Вход {ширина: 100%; Высота: 30px; Граница: 1PX SOLID #979797; Текст-альбом: Центр; граница-радий: 3PX; Семейство шрифта: pingfangsc-regular; размер шрифта: 16px; Цвет: #333333; СКАЖИ САМЕТ: 0PX; } .btn_mes {margin-bottom: 15px; Ширина: 100%; Лебь накладки: 48px; Право накладки: 48px; позиция: относительно; } .btn_mes2 {ширина: 100%; Лебь набивки: 70px; Право накладки: 70px; /* позиция: относительно; */ позиция: абсолютно; Внизу: 0px; маржинальный бат: 10px; } .license-submit {ширина: 100%; Высота: 44px; Фон: #ff534c; Граница: 1px solid #ff534c; размер шрифта: 14px; граница-радий: 4px; Цвет: #ffffff; } .sku-close {founal: url (/imgs/vshop/verification-code-del.png) no-repeat rugh; -Вебкит-обратный размер: 25px Auto; дисплей: встроенный блок; Ширина: 26px; Высота: 26px; позиция: абсолютно; Справа: 0px; Верх: 0px; Право маржи: -13px; маржинальная версия: -13px; } .Verification-code {z-index: 102; Цвет: #FFAA00; позиция: абсолютно; размер шрифта: 12px; Верх: 4px; } .Verification-code-back {ширина: 100%; позиция: абсолютно; Высота: 46px; } .орроу div: nth-of-type (1) {позиция: относительно; } .Arrow-mess {margin-top: 52px; }Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.