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>

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));
        });
    });

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;}

//定義幀動畫
@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;
        }
    }

8、