The first step is to show the verification code. When we press the business license, let it pop up a pop-up box. The verification code is above the pop-up box, as shown in Figure 1:
(Picture 1)
The style of the pop-up frame is shown in Figure 2:
(Figure 2)
We need to verify the value of the verification code to determine whether the verification code is entered correctly. When the input is incorrect, we prompt for an error message, and the prompt message is shown in Figure 3:
(Figure 3)
If the page is verified correctly, this will not prompt an error message and will be adjusted to our target page, as shown in Figure 4:
(Figure 4)
Routing layer description
/** Supplier Store - Shop Introduction*/ //1-Set in the routing layer, jump to the /buyer/vshop/info.ejs page in the root directory for jump, and then call the interface router.get('/buyer/vshop/info', function(req, res, next) { //2-Calling the interface to get data async.parallel({ verifycode :function(fn){ //3-Calling the interface to get the IP address of the local machine var args= { userIp: tools.getClientIp(req) }; //4-Call the createVcode method of the interface verifyCodeHelper to obtain the data of captcha and csnonce. Their values are all data returned by Tencent interface verifyCodeHelper verifyCodeHelper.createVcode(args, function(err, result){ if (err) { console.log(err); } else{ fn(null, { captcha: result.data.queryUrl, csnonce: result.csnonce || 0 }) } }); } },function(err, result){ if (err) { res.end(err); }else{ result.getDetail= res.shopInfo; var; }else{ result.getDetail= res.shopInfo; var fxzStatus = res.fxzStatus || {}; //5-Resource the buyer/vshop/describe page in the root directory, and pass the relevant parameters to the EJS page res.render("buyer/vshop/describe", { title: srcBizType==1 ? result.getDetail.name : "Shop Introduction", pageName:"vshopInfo", captcha:result.verifycode.captcha,//Verification code isTencent: 1, csnonce:result.verifycode.csnonce }); } }); }); }); });EJS layer description
<%- include ../../header %> //1-Get the routed csnonce <script> APP.newLogin= { csnonce: '<%- csnonce %>', }; <link href="/css/vshop/describe.css?v=<%= config.version %>" rel="stylesheet" /> <style id="dynamic"></style> <div></div> <div> <img src="/imgs/vshop/verification-code-back.png" /> </div> <ul> <span id="btn_sku_dialog_close"> </span> <li>Please enter the following graphic verification code</li> <li> <img id="J_BtnVerifyPicCodeTencent" src="" style="height:30px;margin:0 15px;" /> </li> <li> <div> <input type="text" maxlength="6"> </div> </li> </ul> <div> <input type="button" value="submit"> </div> </div> <div> <input type="button" value="submit"> </div> </div> <div data-role="container"> <header data-role="header"> <%- include ./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' }else{var bg = '/imgs/vshop/tip3.png',color='#59aaff'}%> <li><div>Certification</div><div><span style="background: url(<%-bg%>) left 1px no-repeat;background-size: 14px 12px;"><i style="background: <%-color%>"><%- detail.shopType %></i></span></div></li> </ul> <ul> <li><a href="tel:<%- detail.phone%>">Service phone</a></li> <li><a data-aid="<%- aid%>">Online Customer Service</a></li> <li> <!--<a href="/buyer/vshop/license?aid=<%- aid%>">--> <a href="#"> <span >Business License</span> <label>View<span></span></label> </a> </li> </ul> </div> <%- include ./footer %> <div id="vue_hooker"> <child-nav></child-nav> <%- include ../../widget_navBtns %> </div> </section> </div> //2-Get the captcha for routed <script type="text/javascript" src="<%= captcha %>"></script> //3-Introduce related JS files <script> seajs.use("js_cmd/vshop/home-cmd"); </script> <%- include ../../footer %>JS layer description
/** 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 = require("./tool-cmd"), fxzTool = require("./fxzTool-cmd"), Vue = require("lib_cmd/vue-cmd"), widget_navBtns = require("js_cmd/navBtns-cmd"), $eles = {}, eles = {}; //2-Vue instantiation var vm = new Vue({ data: {}, methods: {} }); //3- Page initialization function function initPage() { vm.$mount('#vue_hooker'); window.scroll(0,0); } //4- Verification code-related processing function function license(){ $('.info4 .business-license').click(function (ev) { //Elastic layer $('.btn_mes_text').val(""); $('.arrow_mask').show(); $('.arrow').show(); $('#nav_omit').remove(); }); $('#btn_sku_dialog_close').click(function(ev){//Popt-up $('.arrow_mask').hide(); $('.arrow').hide(); $('.btn_mes_text').val(""); }); $('.btn_mes_text').focus(function(){ //Enter the box to get the focus $('.btn_mes_text').val(""); if($('.verification-code').length!=0){ $('.verification-code').remove(); } }); $('.license-submit').click(function(){ APP.verifyPicCode(); }); } //5- Verification code initialization function() TSOCapObj is a method in Tencent interface function verify_initPage(){ $('#J_BtnVerifyPicCodeTencent').on('click', function () { TSOCapObj.refresh(); }); //Initialize, pass the parameters into the element that displays the verification code imgid TSOCapObj.init("J_BtnVerifyPicCodeTencent"); //Refresh the pull verification code image TSOCapObj.refresh(); APP.verifyPicCode= function(fn) { //Get user input var ans = $(".btn_mes_text").val(); //Verify the answer, after verification is completed, the function passed in the second parameter will be called back TSOCapObj.verify(ans , function(ret_json){ if (ret_json.errorCode!=0) { $(".btn_mes_text").val(""); TSOCapObj.refresh(); //tip("Graphic verification code input error!"); if($('.verification-code').length==0){ $('.btn_mes').eq(0).append(" <div class='verification-code'>Please enter the correct verification code</div>"); } $('.btn_mes_text').blur(function(){ $('.btn_mes_text').text(""); }); } else { window.location="/buyer/vshop/license?aid=" + APP.aid; fn(ret_json.ticket); } }); } } //6- Execution of page initialization function $(function () { initPage(); license(); verify_initPage(); }); });CCS layer description
@import url(common.css); .div-section-info .info4{padding: 0} .div-section-info .info4 li{ padding: 11px 14px; line-height: 20px; border-bottom: 1px solid #e6e6e6; } .div-section-info .info4 li a{ color: #333; display: block; } .div-section-info .info4 li a.tel{ background: url(/imgs/vshop/callAndMsg.png) no-repeat; background-size: 20px 60px; background-position: right 0; } .div-section-info .info4 li a.webim{ background: url(/imgs/vshop/callAndMsg.png) no-repeat; background-size: 20px 60px; background-position: right -30px; } .div-section-info .info4 li a label{ display: block; float: right; } .div-section-info .info4 li a label span{ display: block; width: 12px; height: 12px; border-right:1px solid #666; border-bottom:1px solid #666; -webkit-transform:rotate(-45deg); float: right; margin-top: 4px; } .arrow_mask { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 101; display: none; background: black; opacity: 0.7; } .arrow{ width: 250px; height: 226px; background-color: #FFFFF; position: fixed; top: 50%; left: 50%; z-index: 102; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 10px; display: none; } .arrow-mess li:nth-of-type(1){ text-align: center; margin-bottom: 8px; font-size: 14px; color: #333333; } .arrow-mess li:nth-of-type(2){ text-align: center; margin-bottom: 10px; } .arrow-mess li:nth-of-type(3) input{ width: 100%; height: 30px; border: 1px solid #979797; text-align: center; border-radius: 3px; font-family: PingFangSC-Regular; font-size: 16px; color: #333333; letter-spacing: 0px; } .btn_mes{ margin-bottom: 15px; width: 100%; padding-left: 48px; padding-right: 48px; position: relative; } .btn_mes2{ width: 100%; padding-left: 70px; padding-right: 70px; /* position: relative; */ position: absolute; bottom: 0px; margin-bottom: 10px; } .license-submit{ width: 100%; height: 44px; background: #FF534C; border: 1px solid #FF534C; font-size: 14px; border-radius: 4px; color: #FFFFFF; } .sku-close { background: url(/imgs/vshop/verification-code-del.png) no-repeat right; -webkit-background-size: 25px auto; display: inline-block; width: 26px; height: 26px; position: absolute; right: 0px; top: 0px; margin-right: -13px; margin-top: -13px; } .verification-code{ z-index: 102; color: #FFAA00; position: absolute; font-size: 12px; top: 4px; } .verification-code-back{ width: 100%; position: absolute; height: 46px; } .arrow div:nth-of-type(1){ position: relative; } .arrow-mess{ margin-top: 52px; }The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.