B2B商城网站前端开发

最近在时间很忙，在弄一个B2B商城，运用到的easyUI【后台系统】+javaWEB(maven)+JQuery【前台系统】+Scss+JavaScript+其他框架(sea.js模块化等),我负责前端这块：后期的重要的前端代码，都会发布出来

1、60s短信验证码发送code：

        //60s无效 forget   要引用的话，后期如果，jquey代码庞大的话，就考虑在封装的基础上，在进行封装、压缩精简代码。
           $('.forget span.btn-small').on('click',function(){
               !$(this).hasClass('btn-gray') && sendCode($(this),60);
           });        

        //发送验证码方法封装
        function sendCode(obj,cur){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                if(cur>0) {
                    obj.addClass('btn-gray').html('(' + (cur--)+ 's后获取)');
                }else{
                    clearInterval(obj.timer);
                    obj.removeClass('btn-gray').html('获取验证码');
                }
            },1000);
        } 

验证码

2、购物车数量、金额、统计

//计算每行的小计金额
function lineMoney(oCur){
    var $oCur=oCur.parents('.order-tr');  //当前单击的选中行
    var cNum=parseInt($oCur.find('.key-3 input').val());
    var cCoupon=Math.abs(parseFloat($oCur.find('.key-4 div').text()));
    var cPrice=parseFloat($oCur.find('.key-2 em').text());
    var cLineMoney=(cPrice-cCoupon)*cNum;
    toFix(cLineMoney+'', $oCur.find('.key-5'), 'em');
}

//统计：应付款、总优费     pObj当前对象----->对应的就是选中的那一行
function moneyCount(pObj){
    //单击选中店铺下的所有商品  优费金额：x_total,,,,,应付金额：z_total
    var x_total=0,z_total=0;
    var $$oo=pObj.parents('.order-note-border').find('.order-tr :checked');
    $.each($$oo, function(inx, obj) {   //遍历所有已选中的商品，并累计价格
        var $cur=$(obj).parents('.order-tr');
        var iNum=parseInt($cur.find('.key-3 input').val());
        var iCoupon=Math.abs(parseFloat($cur.find('.key-4 div').text()));
        x_total+=iCoupon*iNum;
        z_total+=parseFloat($cur.find('.key-5 em').text());
    });
    toFix('-'+x_total,$('li.pdu-money'),'em','¥');
    toFix(''+z_total,$('li.go-wind'),'em','¥');
}

//购买件数
function buy_Num(pClass,fClass){
    var buy=0;
    $(pClass).each(function(inx, ele){
        if(!$(this).hasClass(fClass)) {
            buy+=$(this).find('input[type="checkbox"]').filter(':checked').size();
        }
    });
    $('.pdu-select em').text(buy);
    buy>0?$('.cart-count a').removeClass('gen-dis'):$('.cart-count a').addClass('gen-dis');
}

//固定金额小数后2位toFix()  str格式的字符串  pObj父对象  sClass：指定输出的位置上的selector  ---> class要带上'.'
function toFix(str,pObj,sClass,$){
    var dInx=str.indexOf('.');
    var $$=$||'';
        if(dInx>0)
            if(str.charAt(dInx+1) && str.charAt(dInx+2)) {
                pObj.find(sClass).text($$+str.substring(0,dInx+3));
            } else {
                pObj.find(sClass).text($$+str.substring(0,dInx+3)+'0');
            }
        else {
            pObj.find(sClass).text($$+str+'.00');
        }
}

购物车统计金额、数目

3、静态化模板artTemplate(传说中性能很有优势的一个模板化，此商城自然少不了这个东西引入，，，呵呵！！！)

<!----//店铺--------->
<script id="submitOrders_ShopsTpl" type="text/html">
<div class="order-note">
    <div class="note-tit">
        <span>{{bUserSellerName}}</span>
        <i class="order-em">满100减20</i>
        <div class="ps-ipt"><input type="text" placeholder="备注"></div>
    </div>
    <div class="order-details">
        <div class="order-tbody">
            <!--具体商品列表----->
        </div>
        <div class="order-ifs">
            <div class="order-stat">
                <div class="other-count">
                    <div class="other-sel">
                    <span>配送方式:</span>
                    <span><a href="javascript:;" class="font-on">包邮</a></span>
                    </div>
                    <div class="other-doller">
                    <ul>
                        <li>
                            <span>运费:</span>
                            <span><em>0.00</em></span>
                            <span>元</span>
                        </li>
                        <li>
                            <span>优惠:</span>
                            <span><em>200.00</em></span>
                            <span>元</span>
                        </li>
                    </ul>
                    </div>
                </div>
                <div class="order-counts">
                    <span>小计:</span>
                    <span><em>40006.10</em></span>
                    <span>元</span>
                </div>
            </div>
        </div>
    </div>
</div>
</script>
<!----//店铺下已选购的商品--------->
<script type="text/html" id="shopListTpl">
<div class="order-tr">
    <div class="key-0">
        <div class="order-pic">
            <img src="img/pdu/b1.jpg" alt="{{skuName}}">
        </div>
        <div class="order-describe">
            {{skuName}}
            <div class="order-em">{{skuCommodity_price}}</div>
        </div>
    </div>
    <div class="key-1">
        <div>
            <span>1段</span>
            <span>800g</span>
        </div>
    </div>
    <div class="key-2">
        <div>
            <s>{{skuCommodity_price}}</s>
            <div>
             <em>{{skuCommodity_price}}</em>
             </div>
        </div>
    </div>
    <div class="key-3">
        <div>{{skuCommodity_surplus_count}}</div>
    </div>
    <div class="key-4">
        <div>
            -20.00
        </div>
    </div>
    <div class="key-5">
        <div>
            <em>{{skuCommodity_price}}</em>
        </div>
    </div>
</div>
</script>
<script>
    $(function(){
        $.ajax({
            url: "json/subOrder.json",
            //data:params或者data,   /***async：是否同步       datatype:数据类型*******/
            async:false,
            dataType:"json",
            beforeSend:function(){},
            success: function(data){              //此data---->json的整个的数据data
                if(data.code == 100){
                    if(data.content.rows){
                        for(var i = 0; i < data.content.rows.length; i++){
                            //具体行------>父节点数据
                            var fatherData = data.content.rows[i];
                            var fatherShopNameTpl = $(template('submitOrders_ShopsTpl', fatherData));    //将fatherData数据渲染到template中
                            var sonList = fatherData.userList;    //得到相应店铺下已选购的商品list数组列表
                            var sonLength = sonList.length;       //此处定义一个临时变量存储商品列表的长度，为防止重复访问变量，而做此步
                            for(var j = 0; j< sonLength; j++){   //遍历每一个list
                                var sonData = sonList[j];    //要是一个数组:sonData
                                var sonShopsTpl = $(template('shopListTpl', sonData));  //渲染店铺下对应的数据到商品template中
                                fatherShopNameTpl.find(".order-tbody").append(sonShopsTpl);  //添加子到父，---->对应到商品添加到相应店铺中
                            }
                            $(".order-note-border").append(fatherShopNameTpl);  //最后添加所有的数据到页面里
                        }
                    }
                }
            },
            error:function(){}
        });
    });
</script>

artTemplate

4、购物车数据渲染到提交的订单页面（这个功能吭的要命，主要原因是之前全部写好了，都要从库中拿数据，结果一个项目负责人一个无厘头要求，要购物车提交的订单不能经过从库中到提交页面，说白了，不访问数据库哇，这个功能吭的要命，明理就是ajax，但是厌烦那种拼串的日子，怎么弄，，，结果是弄出来了，因为这个项目是artTemplatejs模板渲染数据，妈的直接封装一个专门的渲染数据的方法，执行ajax请求成功的时候，让其也执行一遍。详细过程，大家看代码，2个静态页面通过js传值。

//单击‘去下单’按钮并执行将购物车的数据通过js模板渲染到submit.html页面中
    $(function(){
        $('a.red-def-btn').click(function(){
            var aFatherData=[],aSonData=[];
            //店铺列表
            $.each($('.note-tit .checked'),function(){
                aFatherData.push($(this).find('input').data('fData'));
                //这里清空userList 数组的长度，主要是为了清空userList下的数据，为后面动态加入数据辅助
                $(this).find('input').data('fData').userList.length=0;
            });

            //商品列表
            $.each($('.order-tr .key-0 .checked'),function(){
                for(var i=0; i<aFatherData.length; i++){
                    //在这通过判断选中的商品所属店铺然后动态插入数据
                    aFatherData[i].bUserSellerName==$(this).parents('.success-order-note').find('.note-tit span').text() && aFatherData[i].userList.push($(this).find('input').data('sData'));
                }
            });            

            //动态执行ajax,并动态渲染js模板数据到订单页面submitOrders.html
            $.ajax({
                url:"submitOrders.html",
                type: 'get',
                async:false,
                dataType: 'html',
                beforeSend:function(){},
                success:function(data){
                    var $otherHTML=$(data);
                    $('body').html($otherHTML);
                    tplData(aFatherData);
                },
                error:function(){}
            });
            //console.log(JSON.stringify(aFatherData));
        });
    });

从购物车至订单页面通过js传值

5、css3动画

&::after{content: ""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:10px; box-shadow: inset 0 0 0.375em rgba(255,0,0,0.75); transform: scale(1); animation: rep 2s infinite ease;}

css3动画

//定义帧动画
@keyframes rep{
0% {opacity: 0;}
20% {opacity: 1; transform: scale(2);}
50%,100%{opacity: 0; transform: scale(3);}
}

//解决ff/chrome 1px问题
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .ffox{padding-top: 4px !important;}
}

帧动画

6、网站地址重定向一个基准地址：base(href, target，域名可以解决ie8的兼容性问题)

function cStar(){
        //每条评论星星显示控制，实时
        $.each($('.toldDetail'), function(inx,ele){
            var rule=$(ele).find('.toldRule').data('userscore');
            for(var i=0; i<=5-rule; i++){
                $(ele).find('.toldRule i').eq(5-i).addClass('rmR');
            }
        });

        //商品满意度星星显示控制
        var avg=$('.showS').data('avgscore')+'';
        var ogg=parseInt(avg)-1;
        var dott=Subtr(parseFloat(avg),parseInt(avg));
        var w=accMul(dott,16)+'px';  //防止精度丢失
        var $aFull=$('.full1 i');  //色块
        $.each($('.showS i'), function(inx, ele) {
            $(ele).css('left', inx*22+44+'px');   //布局转换思想
        });
        $.each($('.showS i'), function(inx, ele) {
            $(ele).css('position', 'absolute');
            if(inx<=ogg) {
                //整数部分通用
                $(ele).css('background-color', '#FF5F8A');
                blockColor($aFull.eq(inx),inx);
            }
            if(ogg+1==inx){
                //改变左边星星小数部分色块
                var $em=$('<em style="left:'+(44+inx*22)+'px;width:'+w+'"></em>');
                $(ele).after($em);
                //改变右边色块小数部分
                blockColor($aFull.eq(inx),inx);
                $aFull.eq(inx).css('width',dott*80+'px');
            }
        });

        function blockColor(obj,num){
            switch(num){
                case 0:obj.addClass('bkOne'); break;
                case 1:obj.addClass('bkTwo'); break;
                case 2:obj.addClass('bkThr'); break;
                case 3:obj.addClass('bkFor'); break;
                case 4:obj.addClass('bkFive'); break;
            }
        }
    }

//这里同时绑定了多个鼠标事件  星星评价
    $('li.de-tail').on('mouseover mouseout click', '.de-star>i', function(e){
        var $this=$(this);  //单击了，就保存当前对象
        var $aI=$this.parent('.de-star').find('i');

        if(e.type=='mouseover'){
            for(var i=1; i<=5; i++){
                $aI.eq(i-1).removeClass('red-star');
                for(var j=1; j<=$this.attr('ipos'); j++) {
                    $aI.eq(j-1).addClass('red-star');
                }
            }
            $this.attr('cFlag',0);
        }else if(e.type=='mouseout'){
            if(!parseInt($this.attr('cFlag'))){
                for(var i=1; i<=5; i++){
                    $aI.eq(i-1).removeClass('red-star');
                    for(var j=1; j<=$this.parents('li.de-tail').attr('ix'); j++){
                        $aI.eq(j-1).addClass('red-star');
                    }
                }
            }
        }else{
            $this.parents('li.de-tail').attr('ix',$this.attr('ipos'));
            $this.attr('cFlag',1);
            $.each($aI,function(inx, ele){
                for(var i=1; i<=5; i++){
                    $aI.eq(i-1).removeClass('red-star');
                    for(var j=1; j<=$this.parents('li.de-tail').attr('ix'); j++){
                        $aI.eq(j-1).addClass('red-star');
                    }
                }
            });
        }
    });

满意度实时更新；星星评价动态改变

7、ajax回退历史记录（回退之前保存记录、并返回刷新、跳转）

        //提交支付回退至购物车  另外jQ中$(function(){})|$(document).ready(function($){})：载入   (function($){})(jQuery)：匿名写法 自执行
    //history.pushState|replaceState(state, title, url)
    //state：与要跳转到的URL对应的状态信息。title：标题(现在是被忽略，未作处理)。url：要跳转到的URL地址，不能跨域。
    if (window.history && window.history.pushState) {  //这里做下兼容处理，因为jq不存在history封装，只能通过原生
        $(window).on('popstate', function () {   //点击回退，就会触发这个操作
            var hashLocation = location.hash;
            var hashSplit = hashLocation.split("#!/");
            var hashName = hashSplit[1];
            if (hashName !== '') {
                var hash = window.location.hash;
                if (hash === '') {
                    window.location.reload();
                }
            }
        });
        window.history.pushState('forward', null, 'stc/customer/ahtmls/order/back_fullOrderCart.html');
    }

        function goHisCart(){
        var his=$.getCookie('uHis');//主要为了给回退购物车历史做辅助
        var hef=Request('hef');   //截取地址栏的参数
        if(his||hef){
            $('.asideItem li').each(function(inx,ele){
                if($(ele).data('his')==his||$(ele).data('his')==hef) {
                    $(".asideItem li").removeClass('as-on');
                    $(ele).addClass("as-on").trigger('click');
                }
            });
        }else{
            return;
        }
    }

Ajax回退历史记录

8、