下载文档

商品详情页
更新时间:2016-04-25

商品详情效果图:



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、买家点击咨询,跳出输入框,发表咨询信息,代码如下:

  1. appcan.button("#buyQ", "btn-act", function() {
  2. var minusMy=appcan.locStorage.getVal("minusMy");
  3. if(userId==null){
  4. appcan.window.open("login","../login.html",16);
  5. }else if(minusMy<0){
  6. var alertcontent="淘现场已经结束!";
  7. appcan.locStorage.setVal("alertcontent",alertcontent);
  8. appcan.frame.open("alertPop","alertPop.html");
  9. }else{
  10. $("#buy,#consult").toggleClass("uhide");
  11. $("#inputtext").focus();
  12. uexWindow.showSoftKeyboard();
  13. }
  14. })

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

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