今天我要分享的是wex5實戰之仿淘寶商品詳情頁詳細代碼解析，其中有些代碼是我之前發佈過的乾貨，在這裏我也再稍微講一下，相信大家看了代碼之後會有所領悟。話不多說，咱們先看下效果圖把。
圖一爲打開商品頁就看見的內容，有商品名稱、價格，評價，商品信息等，
圖二爲點擊選擇顏色分類，圖一、圖二的加入購物車、立即購買按鈕均可點擊的。
下面開始講解加入購物車：
1、分解步驟。
1）點擊加入購物車彈出選擇規格，數量窗口。
2）當用戶沒有選擇規格，數量等的時候需要彈出提示框。
3）當用戶選擇商品數量超過庫存或少於1時也彈出提示框。
4）當用戶切換規格時，改變對應價格。
5）點擊進入購物車。
2、詳細步驟說明。
a、當點擊加入購物車或立即購買按鈕時最好做個標識，判斷爲加入或者立即購買，因爲兩者效果不一樣。在此，我的標識是加在確定按鈕上，如圖所示：
代碼如下：
//確定按鈕
Model.prototype.enterBtnClick = function(event){
var _this = this;
var cartFalg = this.comp("cartFalg").val();//爲放置頁面中隱藏input值
if(cartFalg ==1){//加入購物車
_this.addCat_BtnClick(event);//爲加入購物車事件
}else if(cartFalg ==2){//立即購買
_this.button5Click(event);//爲加入立即購買事件
}
};
b、選擇規格數量。
//減數量
Model.prototype.subBtnClick = function(event){
/*
1、減少數量按鈕綁定點擊事件onClick()
2、點擊按鈕，當前記錄的fNumber值減1
3、fNumber爲1時不再相減
*/
var number = this.comp("number").val();
number = number - 1;
if (number <= 0) {
this.comp("number").val(1);
} else {
this.comp("number").val(number);
}
};
//加數量
Model.prototype.addBtnClick = function(event){
/*
1、增加數量按鈕綁定點擊事件onClick()
2、點擊按鈕，當前記錄的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("庫存不足！");
this.comp("number").val(1);
}
};
//選擇規格
Model.prototype.list3Click = function(event){
var colorData = this.comp('spectextdata');//獲取規格data
var row=colorData.getCurrentRow();
var col = colorData.getValue('fSpecID');//獲取規格值id
colorData.setValue("fStatus", "0", colorData.find(['fSpecID',"fStatus"],[col,"1"],true,true,true)[0]);//設置未點擊的規格狀態爲爲選中，圖四說明
colorData.setValue("fStatus", "1",row);//設置當前點擊的規格選中
var allspec = colorData.find(["fStatus"],["1"],false,true,true);//獲取所有位選中規格
var temp = "";
for(var i=0;i<allspec.length;i++){
temp+=colorData.getValue('id',allspec[i]) + ",";//獲取所有選中規格用,隔開
}
.....//下面的代碼只需按照自己項目需求來編寫即可。
};
c、加入購物車。
1、首先需判斷用戶是否登錄。
2、判斷用戶是否選擇規格。
3、添加拋物線加入購物車效果。
//加入購物車
Model.prototype.addCat_BtnClick = function(event){
var me = this;
var username = sessionStorage.getItem('username');//獲取登錄頁面添加的sessionStorage
if(username == null){//判斷是否登錄
me.comp("LoginwindowDialog").open();//未登錄打開登錄頁面彈窗
return;
}
var size = this.comp("spectextdata").find([ "fStatus" ], [ "1" ],false,true,true);
if($('[xid=specList]').text() !=""){//判斷是否有規格
if (size.length <= 0) {//判斷是否選擇規格
util.hint("請選擇規格！", {
"position" : "middle"
});
return false;
}
}
//獲取規格值
var temp = "";
for(var i=0;i<size.length;i++){
temp+=size[i].val('id') + ",";//獲取選中規格“，”隔開
}
var me = this;
var datas = {//這裏的參數是接口中需要的參數，每個項目有所不同。
id:me.params.goodsID,
count:this.comp('number').val(),
price:$('[xid=store_price]').text(),
gsp:temp//規格
};
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;//獲取購物車圖標top、left值
var top2 = $(".o-cart").position().top - 5;
$(".o-move").show().stop().animate({
"left" : left2,
"top" : top2
}, "slow", function() {
setTimeout(function() {
me.modelLoad();//這個函數爲當頁面打開時獲取加入購物車按鈕位置
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
});
};
注：以上爲商品詳情頁拋物線加入購物車代碼詳解。可能有些地方並沒有說得詳細，希望對大家有所幫助，wex5這個軟件確實很強大，因爲項目需求，我們並沒有使用wex5提供的數據庫，如果使用提供的數據庫那麼大大節省了人力物力，只需一人即可完成三四個人的工作。wex5還有很多強大的功能我並沒有挖掘出來，希望和大家共勉，謝謝。