實際效果

第一步我們來到要展示驗證碼的頁面，當我們按下營業執照的時候讓其，彈出一個彈框，彈框的上面就是驗證碼，如圖一所示：
（圖一）

彈框的樣式如圖二所示：
（圖二）

我們要對驗證碼的值進行校驗，判斷驗證碼是否輸入正確，當輸入不正確的時候，我們提示錯誤資訊，提示資訊如圖三所示：

（圖三）

如果頁面了驗證正確，這不會提示錯誤資訊並且調到我們的目標頁面，如圖四所示：

（圖四）
——–營業執照頁面為私密頁面，使用其他頁面代替原圖。

路由層描述

//1-在路由層進行設定，頁面跳轉到根目錄下/buyer/vshop/info.ejs頁面進行跳轉，然後在回撥函式中進行介面的呼叫 

               router.get
 
('/buyer/vshop/info', function(req, res, next) {              
//2-呼叫介面獲取資料      

                async.parallel({ 
                    verifycode :function(fn){           
 //3-呼叫介面獲取本機的IP地址

                var args= {
                      userIp: tools.getClientIp(req)
                 };

//4-呼叫介面verifyCodeHelper的createVcode方法獲取captcha與 csnonce的資料，他們的值都是介面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 fxzStatus = res.fxzStatus || {};

//5-進行根目錄下buyer/vshop/describe頁面的渲染，傳遞相關引數到EJS頁面

                        res.render("buyer/vshop/describe", {   
                            title: srcBizType==1 ? result.getDetail.name : "店鋪簡介",
                            pageName:"vshopInfo",
                            captcha:result.verifycode.captcha,//驗證碼
                            isTencent: 1,
                            csnonce:result.verifycode.csnonce
                        });
                    }
                });
            });

EJS層描述

//1-獲取路由傳遞的 csnonce

        <script>
            APP.newLogin= {
                csnonce: '<%- csnonce %>',
            };
        </script>

//2-獲取路由傳遞的captcha

        <script type="text/javascript" src="<%= captcha %>"></script>

//3-引入相關ＪＳ檔案

        <script>
            seajs.use("js_cmd/vshop/home-cmd");
        </script>
        <link href="/css/vshop/describe.css?v=<%= config.version %>" rel="stylesheet" />
        <style id="dynamic"></style>
        <div class="arrow_mask"></div>
        <div class="arrow">
            <div>
               <img src="/imgs/vshop/verification-code-back.png" class="verification-code-back" />
            </div>
            <ul class="arrow-mess"> <span class="sku-close" id="btn_sku_dialog_close"> </span>
                <li>請輸入下面的圖形驗證碼</li>
                <li>
                        <img id="J_BtnVerifyPicCodeTencent" src="" class="captcha" style="height:30px;margin:0 15px;" />
                </li>
                <li>
                    <div class="btn_mes">
                        <input class="btn_mes_text" type="text" maxlength="6">
                    </div>
                </li>
            </ul>
            <div class="btn_mes2">
                <input type="button" class="license-submit" value="提交">
            </div>
        </div>
        <div data-role="container" class="body <%= pageName %>">
            <header data-role="header">
                <%- include ./widget_vshop %>
            </header>
            <section data-role="body" class="section-body">
                <div class="div-section div-section-info">
                    <ul class="info1">
                        <li class="gap"><div class="left">所在地</div><div class="right"><%- detail.address%></div></li>
                        <li><div class="left">開店時間</div><div class="right"><%- detail.createTime%></div></li>
                    </ul>
                    <ul class="info2">
                        <li class="gap"><div class="left">發貨速度</div><div class="right"><%- detail.score.express%></div></li>
                        <li class="gap"><div class="left">服務態度</div><div class="right"><%- detail.score.service%></div></li>
                        <li><div class="left">描述相符</div><div class="right"><%- detail.score.describe%></div></li>
                    </ul>
                    <ul class="info3">
                        <%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 class="left anotherC">認證</div><div class="right textR"><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 class="info4">
                        <li><a href="tel:<%- detail.phone%>"  class="tel">服務電話</a></li>
                        <li><a data-aid="<%- aid%>" class="webim">線上客服</a></li>
                        <li  class="business-license">
                            <!--<a href="/buyer/vshop/license?aid=<%- aid%>">-->
                            <a href="#">
                                <span >營業執照</span>
                                <label>檢視<span></span></label>
                            </a>

                        </li>
                    </ul>
                </div>
                <%- include ./footer %>
                <div id="vue_hooker">
                    <child-nav></child-nav>
                    <%- include ../../widget_navBtns %>
                </div>  
            </section>
        </div>

JS層描述

//1-引入頁面所需的各個模組
        define(function (require, exports, module) {
            var $ = require("./top-suction-cmd"),
                Vue = require("lib_cmd/vue-cmd"),
                $eles = {},
                eles = {};

    //2-Vue例項化 
            var vm = new Vue({
                data: {},
                methods: {}
            });

    //3- 頁面初始化函式

            function initPage() {
                vm.$mount('#vue_hooker');
                window.scroll(0,0);
            }
    //4- 驗證碼相關處理函式
            function license(){
                $('.info4 .business-license').click(function (ev) { //彈層
                    $('.btn_mes_text').val("");
                    $('.arrow_mask').show();
                    $('.arrow').show();
                    $('#nav_omit').remove();
                });
                $('#btn_sku_dialog_close').click(function(ev){//彈窗
                    $('.arrow_mask').hide();
                    $('.arrow').hide();
                    $('.btn_mes_text').val("");
                });

                $('.btn_mes_text').focus(function(){ //輸入框獲得焦點
                    $('.btn_mes_text').val("");
                    if($('.verification-code').length!=0){
                        $('.verification-code').remove();
                    }
                });
                $('.license-submit').click(function(){
                    APP.verifyPicCode();
                });

            }

    //5- 驗證碼初始化函式（） TSOCapObj是騰訊接口裡面的方法

            function verify_initPage(){
                $('#J_BtnVerifyPicCodeTencent').on('click', function () {
                    TSOCapObj.refresh();
                });
    //6-初始化，引數傳入顯示驗證碼的元素imgid
                TSOCapObj.init("J_BtnVerifyPicCodeTencent");
                //重新整理拉取驗證碼圖片
                TSOCapObj.refresh();

                APP.verifyPicCode= function(fn) {
                    //獲取使用者輸入
                    var ans = $(".btn_mes_text").val();
                    //驗證答案，驗證完成後會回撥第二個引數傳入的函式
                    TSOCapObj.verify(ans , function(ret_json){
                        if (ret_json.errorCode!=0) {
                            $(".btn_mes_text").val("");
                            TSOCapObj.refresh();
                            //tip("圖形驗證碼輸入錯誤！");
                            if($('.verification-code').length==0){
                                $('.btn_mes').eq(0).append(" <div class='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);
                        }
                    });
                }
            }

    //7-  頁面初始化函式的執行
            $(function () {
                initPage();
                license();
                verify_initPage();
            });

        });

CCS層描述

@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: #FFFFFF;
            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;
        }