荟生活培训案例shop页面详情页

（Shop.htmlShop_content.html页UI一、UI<divid="header"class="uh<divid="header"class="uhbc-text-headubbc-对插入的导航作一些修改：id改为“footer”；将中间的<h1class="utub-f1ulev-3ut-stx-c"tabindex="0">标题</h1>去掉“标题”两字，此时界面如图：<divclass="btnubub-acbc-text-headub-pcbc-btn"收藏<divclass="btnubub-acbc-text-headub-pcbc-btn"分别修改样式，修改后代码（sc-bg-active白色，设置右边距，bc-text-red3）:<div<divid="footer"class="uhbc-text-headubbc-headsc-bg-active<divclass="nav-btn"<divclass="fafa-angle-leftfa-<h1class="utub-f1ulev-3ut-stx-c"<divclass="nav-btn"id="nav-<divclass="btnubub-acbc-text-headub-pcbc-btnumar-ruc-auba2"id="shoucang">收藏</div><divclass="btnubub-acbc-text-headub-pcbc-btnumar-ruc-auba2"id="share"> <link<linkrel="stylesheet"href="css/new-<linkrel="stylesheet"href="css/my-、在content页中首先在body区域的滑块上方加一个DIV显示描述饭店的标<divid="description"class="ub-f1"style="word-break:break-word;"</div>、把slider区域去掉（包括对应js代码），换成<div<divclass="ubub-ver"onclick=""<divclass="ub-fhumw-sliderres-sliderub-在shop_content/css文件夹下的main文件中定义路径（该从网上获取//}<divclass="ubbc-bguinn-m"><divclass="ubub-verulev-3"<div<divclass="ubub-vermyuinn-asc-<ulclass="ubbc-text-blaub-acumh4<liclass="ub-f1ut-smyline-h2ubrb-btn-h"<lionclick="gotoTable()"class="tx-rbc-text-<divclass="ubub-vermyuinn-asc-<ulclass="ubbc-text-blaub-acumh4 <lionclick="call()"class="d-icon3d-iconwhumar-l<lionclick="callclass="tx-rbc-text-red2"><divclass="ubub-vermyuinn-asc-<ulclass="ubbc-text-blaub-acumh4<liclass="ub-f1ut-smyline-h2ubrb-btn-h"<lionclick=""class="tx-rbc-text- 、查地图前面的图标处理方式下。三 .d-icon1{background-.d-icon3{background-.d-icon4{.d-icon4{background-<liclass="ub-f1ut-smyline-h2ubrb-btn-h"<lionclick=""class="d-icon1d-iconwhumar-lub-<lionclickclass="tx-rbc-text-red2">去预定</li><divclass=""分析页面，网友点评的标题放在一个盒子里，右边还有个图标，所有又将这<divclass="ub"<divid="dian"class="nav-btn" 网友点评（共9条<divclass="nav-btmy-tu1ub-imgumar-t"style="margin-left:15em"></div>整个评论列表放在一个大盒子中，所有先定义一个盒子<divid="list"class="sc-bg"><divid=”everyone”class="ubub-f1ub-ver"><divclass="ubub-acub-pcbc-text-blaumh4<divclass="ut-sulev-3tx-lub-f1"评论者<divclass="res-h10ub-<divclass="res-h10ub-img<divclass="res-h10ub-img<divclass="res-h11ub-img<divclass="res-h11ub-img<divclass="bc-text-gra1ulev-1uinn-h3"不错，很好吃，下次再来 <divclass="bc-text-gra2ulev-1umar-年月 <divclass=""<div<divid="dian "class="nav-btn"网友点评（9条<divclass="nav-btmy-tu1ub-imgumar-t"style="margin-left:15em"></div><divid="list"class="sc-<divid=”everyone”class="ubub-f1ub-<divclass="ubub-acub-pcbc-text-blaumh4<divclass="ut-sulev-3tx-l"<divclass="res-h10ub-<div<divclass="res-h10ub-img<divclass="res-h10ub-img<divclass="res-h11ub-img<divclass="res-h11ub-img<divclass="bc-text-gra1ulev-1uinn-h3"<divclass="bc-text-gra2ulev-1umar-二、JS1、Shop页appcan.button("#ret",appcan.button("#ret","btn-act",function(){设置按appcan.button("#share",appcan.button("#share","ani-act",function()uexWindow.cbActionSheet=function(opId,dataType,{if(data=="0"){elseif(data"1"}}varvalue=uexWindow.actionSheet取消腾 方法：打 页functionfunctionsendWeiXin()}varvarislogappcan.locStorage.val('islog')是否登录flagvaruserId=appcan.locStorage.val('userID');//用户IDvarscflag=0;//是否第一次被收藏varshopuser已经收藏过zai取消过收藏对应的记录appcan.button("#shoucang","ani-act",function(){if(islog==1){switch(scflag){case0:url:hshIp+type:'POST',contentType:"application/json",dataType:'json', if tformName=="Simulator") ', headers:"x-mas-app-id": data'{"user_id":{":"'+userId'"},"shop_id":{"type":"Pointer","className":"hsh_shop","objectId":"'+shop_id+'"},"collect_status":1}',success:function(ret,status,xhr){if(ret.status=="success"){shopuser=appcan.window.openToast("appcan.window.openToast("添加收藏成功20005scflag=1;}elseappcan.window.openToast("添加收藏失败20005}error:function(xhr,type){alert('Ajaxerror!');}case1:}}elseappcan.locStorage.setVal("page"1);appcan.window.open('login','login.html',10,}functionfunctioncollect()varshoucang=$('#shoucang')[0].innerHTML;switch(shoucang){case'收藏url:hshIp+'hsh_collect/'+type:'PUT',dataType:'JSON',data:'{"collect_status":1}',contentType:"application/json", if tformName=="Simulator") ', headers:"x-mas-app-id": success:function(ret,status,xhr){ret=JSON.parse(ret);if(ret.status=="success"){appcan.window.openToast("收藏成功！200050);}elseappcan.window.openToast("收藏失败！20005}error:function(xhr,type){alert('Ajaxerror!')}case'取消收藏':url:hshIp+'hsh_collect/'+type:'PUT',dataType:'JSON',data:'{"collect_status":0}',contentType:"application/json", if tformName=="Simulator") ', headers:"x-mas-app-id": success:function(ret,status,xhr){ret=JSON.parse(ret);if(ret.status=="success")}else}}error:function(xhr,type){alert('Ajaxerror!')}}}第四步：取消收藏functionisQuxiao(){if(islog==1){varwhereObj={"user_id.objectId":userId,"shop_id.objectId":url:hshIp+'hsh_collect?where='+type:'GET',dataType:'JSON', if tformName=="Simulator") ', headers:"X-MAS-APP-INFO": contentType:"application/json",success:function(ret,status,xhr){ret=if(ret.status=="success"){if(ret.msg.results!='')if(ret.msg.results[0].collect_status==1)shopuserret.msg.results[0].objectId;scflag1;//}elsescflag=1;shopuser=}}else scflag=0;}}error:function(xhr,type){alert('Ajaxerror!')}});});//end}//end}//endready2、Shop_content引入<script<script<script<script<script添加去预定按钮点击functionfunctiongotoTable()',name:'book',data:'book.html',dataType:'0',aniId:type:} 功修改 的id=添加点击functionfunctioncall()varnum=$("#num=num.re ce(/-/g,'').re ce(/\D/g,'');if(/^\d+$/.test(num)){if(data==0){}}}else格式不正确}}添加点击functionfunctionmap()name:'map',data:dataType:aniId:}点击“网友点评”，打开该全部点评信第一步：在“网友点评“的div中添加点击 <div<divclass="ub" readyappcan.setLocVal("shopId",varshop_name=varshop_id=第三步：加入 functionsp_ l(){appcan.setLocVal('sp_id',shop_id);appcan.setLocVal('sp_name',shop_name);appcan.setLocVal('openpl',0);'shanghu_detail.html',}第一步：在所在div中加入onclick<div<divclass="ubub-ver"<divclass="ub-fhumw-sliderres-sliderub-functionshowPhoto(id){appcan.setLocVal("shopimgid",id);name:'change-Pic',data:'change-Pic.html',aniId:'10',type:}三、数据添取消商铺div中的以下代码<divclass="ub-fhumw-sliderres-sliderub-readyfunctiongetData(){msg正在获取数据duration:position:type:varwhereObj={"objectId":url:hshIp+'hsh_shop?where='+type:'GET',dataType:'json', if tformName=="Simulator") ', headers:"X-MAS-APP-INFO": success:function(ret,status,xhr){if(ret.status=="success"){varshopId=ret.msg.results[0].objectId;varimg_url=isDefine(ret.msg.results[0].shop_imgurl)?ret.msg.results[0].shop_imgurl:css/images/loading.png;varshop_ _num= varshop_address=varstar_level=isDefine(ret.msg.results[0].star_level)?ret.msg.results[0].star_level:0;varshop_support=varshop_type=ret.msg.results[0].shop_type;varlocation=ret.msg.results[0].location;switch(shop_type){case0:shop_type=" caseshop_type餐饮";caseshop_type酒店";caseshop_type丽人";}varbtnlist='<divclass="ubb-dob-btn-h">'+'<divclass="umar-apot5">'+'<ulclass="ubbc-text-blaub-acumh4lis">'+'<liclass="ub-f1ut-sline-h2ubrb-btn-h" 信息！</li>'+'<lionclick="gotoTable()"class="d-icon1d-iconwhumar-lumar-rub-img"></li>'+'<lionclick="gotoTable()"class="tx-rbc-text-red2">去预定</li>'+'</ul>'+'</div>'+'</div>'+'<divclass="ubb-dob-btn-h">'+'<divclass="umar-apot5">'+'<ulclass="ubbc-text-blaub-acumh4+'<liid=" ephone"class="ub-f1ut-sline-h2ubrb-btn-h">'+ _num)?shop_ _num:"")+'</li>'+'<lionclick="call()"class="d-icon3d-iconwhumar-lumar-rub-img"></li>'+'<lionclick="call()"class="tx-rbc-text-red2"> class="umar-apot5">'+'<ulclass="ubbc-text-blaub-acumh4+'<liid="address"class="ub-f1ut-sline-h2ubrb-btn-h">'+(isDefine(shop_address)?shop_address:"")+'</li>'+'<li'<lionclick="map()class="tx-rbc-text-red2查地图</li>'</ul>'+'</div>'+varpeoplenum=varstarnum=parseInt(star_level);if(starnum>5){starnum=}appcan.setLocVal('startnum',varmoodsnum=varimgstr='<divid="'+shopId+'"class="bttnub-img4ub-f1ubub-peres-h4"onclick="showPhoto(this.id)"style="background-image:url('+img_url+')">'+'<divclass="ub-img5res-h5ubub-ae"style="width:38%;"id="mypic">'+'<divclass="ulev-1ubub-f1ub-veruinn-h4ub-ac">'+'<divid="people">'+peoplenum+'</span></div>'+'</div>'+'<div+'</div>'+'</div>'+'<divclass="ulev-1ubub-f1ub-veruinn-h4class="bc-text-wh">'+moodsnum+'</div>'+'</div>'+'</div>'+$("#shopImage")[0].innerHTML=').attr('class','ubuinnc-t-red2ulev-}error:function(xhr,type){}}商铺列表数据获取片第一步：删除或者注销掉原来html部分的静态数据信息，即注掉以下代码（不注销也行，<divclass="ubub-vermyuinn-asc-<ulclass="ubbc-text-blaub-acumh4<liclass="ub-f1ut-smyline-h2ubrb-btn-h"暂 信息<lionclick="gotoTable()"class="d-icon1d-iconwhumar-l<lionclick="gotoTable()"class="tx-rbc-text-<divclass="ubub-vermyuinn-asc-<ulclass="ubbc-text-blaub-acumh4<lionclick="call()"class="d-icon3d-iconwhumar-l<lionclick="call()"class="tx-rbc-text-打<divclass="ubub-vermyuinn-asc-<ulclass="ubbc-text-blaub-acumh4<liclass="ub-f1ut-smyline-h2ubrb-btn-h"<lionclick="map()"class="d-icon4d-iconwhumar-l<lionclick="map()"class="tx-rbc-text-（共9）网友点评（<spanid="totle"html<div<divid=”everyone”class="ubub-f1ub-verumar-b<divclass="ubub-acub-pcbc-text-blaumh4<divclass="ut-sulev-3tx-l"<divclass="res-h10ub-<divclass="res-h10ub-img<divclass="res-h10ub-img<divclass="res-h11ub-img<divclass="res-h11ub-img<divclass="bc-text-gra1ulev-1uinn-h3"<divclass="bc-text-gra2ulev-1umar-年月 <divid=”everyone”class="ubub-f1ub-<divclass="ubub-acub-pcbc-text-blaumh4<divclass="ut-sulev-3tx-l"<divclass="res-h10ub-<divclass="res-h10ub-img<divclass="res-h10ub-img<divclass="res-h10ub-img<divclass="res-h10ub-img<divclass="bc-text-gra1ulev-1uinn-<divclass="bc-text-gra2ulev-1umar-年月readyfunctionshowInfo1(shopId){varwhereObj={"shop_id.objectId":'url:hshIpencodeURI(JSON.stringify(whereObj))+'&include=user_id',type:'GET',dataType:'json',contentType:"application/json", if tformName=="Simulator") ', headers:"X-MAS-APP-INFO": success:function(ret,status,xhr){if(ret.status=="success"){varstr=varrest=$("#totle")[0].innerHTML=ret.msg.count;if(rest.length>0){//for(varfor(varj=rest.length-1;j>(rest.length>2?rest.length-3:-1);j--){str+='<divclass="ubub-acub-bc-text-blaumh4lis'+(j==(rest.length-1)||j==1?'':'ubb-dob-btn-h')+'">'+'<divclass="ubub-f1ub-ver">'+'<divclass="ubub-acub-pc">'+'<divclass="ut-sulev-3"style="width:15em;">'+rest[j].user_id.uname+'</div>'+'<d