淘现场详情页

对于一个购物类App来说,商品和购物车部分十分重要。在《海外购》App中,卖家每次可发布一个淘现场(相当于店铺),一个淘现场至少要发布3件商品。而进入淘现场中,里面有个功能——帮忙看。解释一下,如果某个淘现场是某家品牌店,但是买家想要的商品不在卖家发出的商品里,那么这时可以让卖家在店里帮忙购买,买家点击帮忙看即可发布现场帮忙看请求,卖家可以进行回复。

现场详情效果图:

淘现场详情页 - 图1

1、根据不同状态显示商品的操作,代码如下:

  1. if(userId==null){
  2. changehtml='';
  3. }else if(minusMy<0){
  4. changehtml='<div class="over1" style="margin-top:.35em;margin-left: 12%">已结束</div>';
  5. }else if(offShelf==true){
  6. changehtml='<div class="over1" style="margin-top:.35em;margin-left: 12%">已下架</div>';
  7. }else if(count==0){
  8. changehtml='<div class="over1" style="margin-top:.35em;margin-left: 12%">已售罄</div>';
  9. }else{
  10. changehtml='<div class="btnblue" id="addcart" style="margin-top:.35em;margin-left: 8%" onclick="addcart('+"'"+img_id+"'"+');">加入购物车</div>';
  11. }

2、点击添加购物车,代码如下:

  1. var flag=true;
  2. function addcart(id){
  3. // alert(userId+","+sellerId);
  4. if(userId==sellerId){
  5. var alertcontent="不能购买自己发布的商品!";
  6. appcan.locStorage.setVal("alertcontent",alertcontent);
  7. appcan.frame.open("alertPop","alertPop.html");
  8. return;
  9. }else{
  10. if(flag){
  11. $("#addcart").css("background-color","#17a0c7");
  12. flag=false;
  13. appcan.request.ajax({
  14. url :api+'/api/cart/addItem',
  15. type : 'POST',
  16. dataType : 'json',
  17. data : {
  18. "userId": userId,
  19. "items": {"itemId":id}
  20. },
  21. success : function(data) {
  22. if(data.status == 1){
  23. uexWindow.toast("0", "5", "添加成功", "2000");
  24. uexWindow.evaluatePopoverScript("cart", "content", "shoppingTrolley()");
  25. $("#addcart").css("background-color","#00C1F9");
  26. flag=true;
  27. }
  28. else{
  29. uexWindow.toast("0", "5", "添加失败", "2000");
  30. $("#addcart").css("background-color","#00C1F9");
  31. flag=true;
  32. }
  33. },
  34. error : function(errMessage) {
  35. //alert("errMessage:"+JSON.stringify(errMessage));
  36. $("#addcart").css("background-color","#00C1F9");
  37. flag=true;
  38. }
  39. })
  40. }
  41. }
  42. }

3、点击帮忙看,跳出输入框,发布现场帮忙看,代码如下:

  1. function helplo(){
  2. var minusMy=appcan.locStorage.getVal("minusMy");
  3. var have_input=$("#hlo").next().is(".uinput13");
  4. if(userId==null){
  5. appcan.window.open("login","../login.html",16);
  6. }else if(minusMy<0){
  7. var alertcontent="淘现场已经结束!";
  8. appcan.locStorage.setVal("alertcontent",alertcontent);
  9. appcan.frame.open("alertPop","alertPop.html");
  10. }else if(!have_input){
  11. var html="";
  12. var i="hl";
  13. html+='<div class="ub uinput13" id="consult" style="height: 2.35em;width:96%;background-color: #FFFFFF;padding:.5em 2%;border-top: 1px solid #DDDDDD;margin-top: 2em;position: fixed;bottom: 0">'
  14. +'<img src="../image/Picture-50.png" id="imghl" onclick="choose('+"'"+i+"'"+')" style="width:2.5em;height: 2.5em;margin:.05em" />'
  15. +'<input type="text" onblur="hide()" id="inputtext" placeholder="回复"/>'
  16. +'<button class="send" onclick="send();this.disabled = true;">发送</button>'
  17. +'</div>';
  18. $("#hlo").after(html);
  19. $("#inputtext").focus();
  20. uexWindow.showSoftKeyboard();
  21. }
  22. }

4、如果是卖家,不显示帮忙看按钮,可以点击买家发布的帮忙看信息,跳出恢复输入框,回复买家,代码如下:

  1. function replyshoplive(id,i) {
  2. var have_input=$("#reply"+i).next().is(".uinput13");
  3. var minusMy=0;//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. $(".uinput13").remove();
  10. var rhtml="";
  11. rhtml+='<div class="ub uinput13" style="padding:.7em .5em ">'
  12. +'<img src="../image/Picture-50.png" id="img'+i+'" onclick="choose('+i+')" style="width:2.5em;height: 2.5em;margin:.05em" />'
  13. +'<input type="text" id="inputtext'+i+'" placeholder="回复"/>' // onblur="hide('+i+');"
  14. +'<button class="send" onclick="sendr('+"'"+id+"'"+','+i+');this.disabled = true;">发送</button>'
  15. +'</div>';
  16. $("#reply"+i).after(rhtml);
  17. $("#inputtext"+i).focus();
  18. uexWindow.showSoftKeyboard();
  19. }
  20. }

5、现场帮忙看及回复信息的时间判断并显示,代码如下:

  1. function judgetime(time){
  2. var today=new Date();
  3. var nowtime=parseInt(today.getTime()/1000);
  4. var overtime=moment(time, 'YYYY-MM-DDTHH:mm:ss.sssZ');
  5. var deadline=overtime.unix();
  6. var minus=nowtime-deadline;
  7. if((minus/86400)>1){
  8. var ctime=new Date(time);
  9. var yy=ctime.getFullYear();
  10. var MM=ctime.getMonth()+1;
  11. var dd=ctime.getDate();
  12. ztime= yy+"-"+MM+"-"+dd;
  13. }else if((minus/3600)>1){
  14. var hh=parseInt(minus/3600);
  15. ztime=hh+"小时前";
  16. }else if((minus/60)>1){
  17. var mm=parseInt(minus/60);
  18. ztime=mm+"分钟前";
  19. }else{
  20. ztime="0分钟前";
  21. }
  22. }