첫 번째 단계는 확인 코드를 표시하는 것입니다. 비즈니스 라이센스를 누르면 팝업 상자를 팝업하십시오. 검증 코드는 그림 1과 같이 팝업 박스 위에 있습니다.
(그림 1)
팝업 프레임의 스타일은 그림 2에 나와 있습니다.
(그림 2)
확인 코드가 올바르게 입력되었는지 여부를 결정하려면 확인 코드의 값을 확인해야합니다. 입력이 올바르지 않으면 오류 메시지가 표시되며 프롬프트 메시지가 그림 3에 표시됩니다.
(그림 3)
페이지가 올바르게 확인되면 오류 메시지가 표시되지 않으며 그림 4와 같이 대상 페이지로 조정됩니다.
(그림 4)
라우팅 레이어 설명
/** 공급 업체 매장-상점 소개*///1 세트 라우팅 레이어에서 1 세트, 점프를 위해 루트 디렉토리의 /buyer/vshop/info.ejs 페이지로 점프 한 다음 인터페이스 라우터 ( '/buyer/vshop/info', function (req, res, next) {// 2-code (retcode) {{{retcode (req. : funce (fn) {// 로컬 머신의 IP 주소를 얻기위한 인터페이스 var args = {userip : 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 (res.getDetail = res.shopinfo; res.render ( "구매자/vshop/sec장", {제목 : srcbiztype == 1? result.getDetail.Name : "Shop 소개", pagename : "vshopinfo", captcha : restification code istencent : 1, csnonce.cscode)); }); }); });EJS 계층 설명
< %- 포함 ../../header %> // 1- 라우팅 된 CSNONCE <Script> app.newlogin = {csnonce : '< %-csnonce %>',}; <link href = "/css/vshop/spect.css? v = < %= config.version %>"rel = "stylesheet"/> <style id = "dynamic"> </style> </div> <div> <img src = "/imgs/vshop/verification-code-back.png"/<ul> <ul> <ul> id = "btn_sku_dialog_close"> </span> <li> 다음 그래픽 검증 코드를 입력하십시오 </li> <li> <img id = "j_btnverifypiccodetencent"src = ""style = "높이 : 30px; 마진 : 0 15px;" /> </li> <li> <div> <입력 유형 = "텍스트"텍스트 "maxlength ="6 "> </div> </li> </ul> <div> input type ="value "value ="제출 "> </div> </div> <div> <입력 유형 ="value = "value ="submit "> </div> </div> <div> <value"value = "heado"> <diver ""diver ""컨테이너 incation "incainer" ./widget_vshop%> </header> <섹션 data-lole = "body"> <div> <ul> <li> <li> <div> 위치 </div> <%- 세부 사항 address%> </div> </li> <li> <li> <div> 쇼핑 시간 </div> <%- 세부 사항. createtime%> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> 속도 </div> <div> <%- 세부 사항 .Score.express%> </div> </li> <li> <li div> 서비스 태도 </div> <div> <%- 세부 사항 .Score.Service%> </div> </li> <li> <li> div> 설명 </div> <div> <%- 세부 사항 .core.describe%> </ul> </ul> </ul> </ul> </li> </li> </li> </li> <%if (detail.shoptypeindex == 1 || detail.shoptypeindex == 2 || detail.shoptypeindex == 3) {var bg = '/imgs/vshop/tip.png' ,color='#39dda5'} else {var bg = '/imgs/vshop/tip3.png', color = '#59aaff'}%> <li> <li div> 인증 </div> <div> <span style = "backgring : url (<%-bg%>) Left 1px no-Repeat; 배경-크기 : 14px 12px;"> 배경 : <%-세부 사항-<%-세부 사항> ">. %>. AID%> ">-> <a href ="#"> <span> 비즈니스 라이센스 </span> <label> view <span> </span> </label> </a> </li> </ul> </div> <%-포함 ./footer%> <div id ="vue_hooker "> <hild-nav> </child-nav> <%-include ../../widget_nvns%> </div> // 2- 라우팅 된 <script type = "text/javaScript"src = "< %= captcha %>"> </script> // 3-introcted js 파일 <Script> seajs.use ( "js_cmd/vshop/home-cmd"); </script> < %- 포함 ../../footer %>JS 계층 설명
/** 이것은 공개 파일, VSHOP 홈페이지 및 모든 VSHOP 제품이 공유됩니다*// 1-define (함수 (요구, 내보내기, 모듈) {var $ = require ( "./ top-suction-cmd"), myDialog = require ( "lib_cmd/mydialog-cmd"), main = require ( "js_cmd/dateLoader") reque ( "./ tool-cmd"), fxztool = require ( "./ fxztool-cmd"), vue = require ( "lib_cmd/vue-cmd"), widget_navbtns = require ( "js_cmd/navbtns-cmd"), $ eles = {{}; vue (data : {}, {}}); $ ( ' $ ( '. Arrow_mask'. if ( '. verification-code'). length! = 0) { '. verification-code'); $ ( '#jbtnverifypiccodetencent'). on ( 'click', function () {tsocapobj.refresh ();}; tsocapobj.refresh (); Verifypiccode = function (fn) {// var ans = $ ( ". btn_mes_text"). (ret_json.errorCode! = 0) { ". BTN_MES_TEXT" class = 'verification-code'> 올바른 검증 코드를 입력하십시오 </div> ");} $ ( '. btn_mes_text'). }});}}} // 6- 페이지 초기화 함수 실행 $ (function () {initpage (); verify_initpage ();});CCS 계층 설명
@import URL (common.css); .div-section-info .info4 {padding : 0} .div-section-info .info4 li {패딩 : 11px 14px; 라인 높이 : 20px; 국경 바닥 : 1px 고체 #e6e6e6; } .div-section-info .info4 li a {색상 : #333; 디스플레이 : 블록; } .div-section-info .info4 li a.tel {배경 : url (/imgs/vshop/callandmsg.png) no-Repeat; 배경 크기 : 20px 60px; 배경 위치 : 오른쪽 0; } .div-section-info .info4 li a.webim {배경 : url (/imgs/vshop/callandmsg.png) no-Repeat; 배경 크기 : 20px 60px; 배경 위치 : 오른쪽 -30px; } .div-section-info .info4 li 레이블 {display : block; 플로트 : 오른쪽; } .div-section-info .info4 li 레이블 스팬 {display : block; 너비 : 12px; 높이 : 12px; 경계 오른쪽 : 1px 솔리드 #666; 국경-바닥 : 1px 고체 #666; -webkit 변환 : 회전 (-45deg); 플로트 : 오른쪽; 마진-탑 : 4px; } .Arrow_mask {위치 : 고정; 상단 : 0; 왼쪽 : 0; 하단 : 0; 오른쪽 : 0; Z- 인덱스 : 101; 디스플레이 : 없음; 배경 : 검은 색; 불투명도 : 0.7; }. Arrow {너비 : 250px; 높이 : 226px; 배경색 : #fffff; 위치 : 고정; 상단 : 50%; 왼쪽 : 50%; Z- 인덱스 : 102; -webkit 변환 : 번역 (-50%, -50%); -Moz 변환 : 번역 (-50%, -50%); -MS 변환 : 번역 (-50%, -50%); -O- 변환 : 번역 (-50%, -50%); 변환 : 번역 (-50%, -50%); Border-Radius : 10px; 디스플레이 : 없음; }. Arrow-mess li : nth-of-type (1) {Text-Align : Center; 마진 바닥 : 8px; 글꼴 크기 : 14px; 색상 : #333333; }. Arrow-mess li : nth-of-type (2) {Text-Align : Center; 마진 바닥 : 10px; }. Arrow-mess li : nth-of-type (3) 입력 {너비 : 100%; 높이 : 30px; 국경 : 1px Solid #979797; 텍스트 정렬 : 센터; Border-Radius : 3px; 유대 가족 : pingfangsc-regular; 글꼴 크기 : 16px; 색상 : #333333; 문자 스페이스 : 0px; } .BTN_MES {마진-바닥 : 15px; 너비 : 100%; 왼쪽 패딩 : 48px; 패딩-오른쪽 : 48px; 위치 : 상대; } .btn_mes2 {너비 : 100%; 왼쪽 패딩 : 70px; 패딩-오른쪽 : 70px; /* 위치 : 상대; */ 위치 : 절대; 하단 : 0px; 마진 바닥 : 10px; } .license-submit {너비 : 100%; 높이 : 44px; 배경 : #FF534C; 국경 : 1px 고체 #ff534c; 글꼴 크기 : 14px; Border-Radius : 4px; 색상 : #ffffff; } .sku-close {배경 : url (/imgs/vshop/verification-code-del.png) no-Repeat right; -webkit-background 크기 : 25px Auto; 디스플레이 : 인라인 블록; 너비 : 26px; 높이 : 26px; 위치 : 절대; 오른쪽 : 0px; 상단 : 0px; 마진 오른쪽 : -13px; 마진 -탑 : -13px; }. 검색 코드 {z-index : 102; 색상 : #ffaa00; 위치 : 절대; 글꼴 크기 : 12px; 상단 : 4px; }. 위치 : 절대; 높이 : 46px; }. Arrow div : nth-of-type (1) {위치 : 상대; }. Arrow-mess {마진-탑 : 52px; }위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.