商品详情页

商品详情效果图:

商品详情页 - 图1

1、头部轮播图,用的是uexScrollPicture插件,图片地址从后台获取,动态显示在页面上,轮播图的点击事件,调用uexImage.openBrowser浏览大图,代码如下:

  1. uexScrollPicture.onPicItemClick= function(data){
  2. var count=JSON.parse(data).index;
  3. var len = bigimage.length;
  4. var datas=[];
  5. var url_imgb;
  6. for (var i = 0; i < len; i++) {
  7. url_imgb = api+bigimage[i];
  8. datas[i] ={"src" : url_imgb};
  9. }
  10. var params = {
  11. "displayActionButton" : false,
  12. "displayNavArrows" : false,
  13. "enableGrid" : false,
  14. "startOnGrid" : false,
  15. "startIndex" : count,
  16. data :datas
  17. };
  18. var data = JSON.stringify(params);
  19. uexImage.openBrowser(data);
  20. }

2、底部悬浮框代码

  1. <div style="height: 2.4em;background-color: #FFFFFF;padding: .5em 0;border-top: 1px solid #DDDDDD;position: fixed;width: 100%;bottom: 0">
  2. <div id="buy" class="ub ub-ac ub-pc ub-f1" style="padding-top:.1em;display:none" >
  3. <div class="ub ub-ac ub-pc ub-f1 ulev-3" >
  4. <div class="ub ub-ac ub-pc buy" id="buyQ">购买咨询</div>
  5. </div>
  6. <div class="ub ub-ac ub-pc ub-f1 ulev-3" >
  7. <div class="ub fa fa-shopping-cart fa-2x" id="cart" style="color:#00C1F9;" onclick="openShoping()"></div>
  8. </div>
  9. <div class="ub ub-ac ub-pc ub-f1 ulev-3" id="detailstatus" style="margin-right: 0.5em">
  10. </div>
  11. </div>
  12. <div class="ub uinput12 uhide" id="consult" style="height: 2.2em;background-color: #FFFFFF;">
  13. <input type="text" onblur="hide()" id="inputtext" placeholder="回复"/>
  14. <button class="send" onclick="sendConsult();">发送</button>
  15. </div>
  16. </div>

3、买家点击咨询,跳出输入框,发表咨询信息,代码如下:

appcan.button("#buyQ", "btn-act", function() { 
var minusMy=appcan.locStorage.getVal("minusMy");  
if(userId==null){          
appcan.window.open("login","../login.html",16);
}else if(minusMy<0){
var alertcontent="淘现场已经结束!";
appcan.locStorage.setVal("alertcontent",alertcontent);
appcan.frame.open("alertPop","alertPop.html");
}else{  
$("#buy,#consult").toggleClass("uhide");
$("#inputtext").focus(); 
uexWindow.showSoftKeyboard();           
} 
})

4、如果是卖家,不显示底部悬浮窗,可以点击买家发布的咨询信息,跳出回复输入框,回复买家,代码如下:

function replycustomer(id1,id2,i){ 
var have_input=$("#reply"+i).next().is(".uinput12");
var minusMy=appcan.locStorage.getVal("minusMy");
if(minusMy<0){
var alertcontent="淘现场已经结束!";
appcan.locStorage.setVal("alertcontent",alertcontent);
appcan.frame.open("alertPop","alertPop.html");
}else if(!have_input){
$(".uinput12").remove();
var rhtml="";
rhtml+='<div class="ub uinput12" style="padding:.7em .5em ">'
+'<input type="text" id="inputtext'+i+'" placeholder="回复"/>'               
+'<button class="send" onclick="send('+"'"+id1+"'"+','+"'"+id2+"'"+','+i+');this.disabled = true;">发送</button>'
+'</div>';
$("#reply"+i).after(rhtml);
$("#inputtext"+i).focus(); 
uexWindow.showSoftKeyboard(); 
}            
}