/** 这是一个公用文件，vshop首页&vshop全部商品共用 */ //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实例化 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(); }); //初始化，参数传入显示验证码的元素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>请输入正确的验证码</div>"); } $('.btn_mes_text').blur(function(){ $('.btn_mes_text').text(""); }); } else { window.location="/buyer/vshop/license?aid=" + APP.aid; fn(ret_json.ticket); } }); } } //6- 页面初始化函数的执行 $(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; }