wex5實(shí)戰(zhàn)之仿淘寶app拋物線加入購(gòu)物車

今天我要分享的是wex5實(shí)戰(zhàn)之仿淘寶商品詳情頁(yè)詳細(xì)代碼解析，其中有些代碼是我之前發(fā)布過的干貨，在這里我也再稍微講一下，相信大家看了代碼之后會(huì)有所領(lǐng)悟。話不多說，咱們先看下效果圖把。

圖一為打開商品頁(yè)就看見的內(nèi)容，有商品名稱、價(jià)格，評(píng)價(jià)，商品信息等，

圖二為點(diǎn)擊選擇顏色分類，圖一、圖二的加入購(gòu)物車、立即購(gòu)買按鈕均可點(diǎn)擊的。

下面開始講解加入購(gòu)物車：

1、分解步驟。

1）點(diǎn)擊加入購(gòu)物車彈出選擇規(guī)格，數(shù)量窗口。

2）當(dāng)用戶沒有選擇規(guī)格，數(shù)量等的時(shí)候需要彈出提示框。

3）當(dāng)用戶選擇商品數(shù)量超過庫(kù)存或少于1時(shí)也彈出提示框。

4）當(dāng)用戶切換規(guī)格時(shí)，改變對(duì)應(yīng)價(jià)格。

5）點(diǎn)擊進(jìn)入購(gòu)物車。

2、詳細(xì)步驟說明。

a、當(dāng)點(diǎn)擊加入購(gòu)物車或立即購(gòu)買按鈕時(shí)最好做個(gè)標(biāo)識(shí)，判斷為加入或者立即購(gòu)買，因?yàn)閮烧咝Ч灰粯印Ｔ诖?，我的?biāo)識(shí)是加在確定按鈕上，如圖所示：

代碼如下：

//確定按鈕

Model.prototype.enterBtnClick = function(event){

     var _this = this;

     var cartFalg = this.comp("cartFalg").val();//為放置頁(yè)面中隱藏input值

     if(cartFalg ==1){//加入購(gòu)物車

        _this.addCat_BtnClick(event);//為加入購(gòu)物車事件

    }else if(cartFalg ==2){//立即購(gòu)買

        _this.button5Click(event);//為加入立即購(gòu)買事件

    }

};

b、選擇規(guī)格數(shù)量。

//減數(shù)量

Model.prototype.subBtnClick = function(event){

/*

1、減少數(shù)量按鈕綁定點(diǎn)擊事件onClick()

2、點(diǎn)擊按鈕，當(dāng)前記錄的fNumber值減1

3、fNumber為1時(shí)不再相減

*/

var number = this.comp("number").val();

number = number - 1;

if (number <= 0) {

this.comp("number").val(1);

} else {

this.comp("number").val(number);

}

};

//加數(shù)量

Model.prototype.addBtnClick = function(event){

/*

1、增加數(shù)量按鈕綁定點(diǎn)擊事件onClick()

2、點(diǎn)擊按鈕，當(dāng)前記錄的fNumber值加1

*/

var number = this.comp("number").val();

var kucun = parseInt($("[xid=recordNum]").text());

if(number <kucun){

this.comp("number").val(number + 1);

}else{

util.hint("庫(kù)存不足！");

this.comp("number").val(1);

}

};

//選擇規(guī)格

Model.prototype.list3Click = function(event){

var colorData = this.comp('spectextdata');//獲取規(guī)格data

var row=colorData.getCurrentRow();

var col = colorData.getValue('fSpecID');//獲取規(guī)格值id

colorData.setValue("fStatus", "0", colorData.find(['fSpecID',"fStatus"],[col,"1"],true,true,true)[0]);//設(shè)置未點(diǎn)擊的規(guī)格狀態(tài)為為選中，圖四說明

colorData.setValue("fStatus", "1",row);//設(shè)置當(dāng)前點(diǎn)擊的規(guī)格選中

var allspec = colorData.find(["fStatus"],["1"],false,true,true);//獲取所有位選中規(guī)格

var temp = "";

for(var i=0;i<allspec.length;i++){

temp+=colorData.getValue('id',allspec[i]) + ",";//獲取所有選中規(guī)格用,隔開

}

.....//下面的代碼只需按照自己項(xiàng)目需求來編寫即可。

};

c、加入購(gòu)物車。

1、首先需判斷用戶是否登錄。

2、判斷用戶是否選擇規(guī)格。

3、添加拋物線加入購(gòu)物車效果。

//加入購(gòu)物車

Model.prototype.addCat_BtnClick = function(event){

var me = this;

var username = sessionStorage.getItem('username');//獲取登錄頁(yè)面添加的sessionStorage

if(username == null){//判斷是否登錄

me.comp("LoginwindowDialog").open();//未登錄打開登錄頁(yè)面彈窗

return;

}

var size = this.comp("spectextdata").find([ "fStatus" ], [ "1" ],false,true,true);

if($('[xid=specList]').text() !=""){//判斷是否有規(guī)格

if (size.length <= 0) {//判斷是否選擇規(guī)格

util.hint("請(qǐng)選擇規(guī)格！", {

"position" : "middle"

});

return false;

}

}

//獲取規(guī)格值

var temp = "";

for(var i=0;i<size.length;i++){

temp+=size[i].val('id') + ",";//獲取選中規(guī)格“，”隔開

}

var me = this;

var datas = {//這里的參數(shù)是接口中需要的參數(shù)，每個(gè)項(xiàng)目有所不同。

id:me.params.goodsID,

count:this.comp('number').val(),

price:$('[xid=store_price]').text(),

gsp:temp//規(guī)格

};

var url = require.toUrl(url_window+"/uapp/goods/add_goods_cart.htm?jsoncallback=?");

$.getJSON(url,datas, function(data) {

// console.log(JSON.stringify(data));

});

        //以下為拋物線過程

var me = this;

var left2 = $(".o-cart").position().left + 30;//獲取購(gòu)物車圖標(biāo)top、left值

var top2 = $(".o-cart").position().top - 5;

$(".o-move").show().stop().animate({

"left" : left2,

"top" : top2

}, "slow", function() {

setTimeout(function() {

me.modelLoad();//這個(gè)函數(shù)為當(dāng)頁(yè)面打開時(shí)獲取加入購(gòu)物車按鈕位置

me.comp('popOverHint').hide();

}, 300);

$(".o-cart div").show();

});

var me = this;

this.comp('popOverHint').show();

this.comp("stateData").setValue("state","1");

this.comp("popOver").hide();

};

//初始化獲取位置

Model.prototype.modelLoad = function(event) {

var h = $(window).height();

var w = $(window).width();

var left = w-200;

var top = h;

$(".o-move").hide().css({

"left" : left,

"top" : top

});

};

注：以上為商品詳情頁(yè)拋物線加入購(gòu)物車代碼詳解?？赡苡行┑胤讲]有說得詳細(xì)，希望對(duì)大家有所幫助，wex5這個(gè)軟件確實(shí)很強(qiáng)大，因?yàn)轫?xiàng)目需求，我們并沒有使用wex5提供的數(shù)據(jù)庫(kù)，如果使用提供的數(shù)據(jù)庫(kù)那么大大節(jié)省了人力物力，只需一人即可完成三四個(gè)人的工作。wex5還有很多強(qiáng)大的功能我并沒有挖掘出來，希望和大家共勉，謝謝。