薈生活培訓(xùn)案例shop頁(yè)面詳情頁(yè)

（Shop.htmlShop_content.html頁(yè)UI一、UI<divid="header"class="uh<divid="header"class="uhbc-text-headubbc-對(duì)插入的導(dǎo)航作一些修改：id改為“footer”；將中間的<h1class="utub-f1ulev-3ut-stx-c"tabindex="0">標(biāo)題</h1>去掉“標(biāo)題”兩字，此時(shí)界面如圖：<divclass="btnubub-acbc-text-headub-pcbc-btn"收藏<divclass="btnubub-acbc-text-headub-pcbc-btn"分別修改樣式，修改后代碼（sc-bg-active白色，設(shè)置右邊距，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頁(yè)中首先在body區(qū)域的滑塊上方加一個(gè)DIV顯示描述飯店的標(biāo)<divid="description"class="ub-f1"style="word-break:break-word;"</div>、把slider區(qū)域去掉（包括對(duì)應(yīng)js代碼），換成<div<divclass="ubub-ver"onclick=""<divclass="ub-fhumw-sliderres-sliderub-在shop_content/css文件夾下的main文件中定義路徑（該從網(wǎng)上獲取//}<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- 、查地圖前面的圖標(biāo)處理方式下。三 .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">去預(yù)定</li><divclass=""分析頁(yè)面，網(wǎng)友點(diǎn)評(píng)的標(biāo)題放在一個(gè)盒子里，右邊還有個(gè)圖標(biāo)，所有又將這<divclass="ub"<divid="dian"class="nav-btn" 網(wǎng)友點(diǎn)評(píng)（共9條<divclass="nav-btmy-tu1ub-imgumar-t"style="margin-left:15em"></div>整個(gè)評(píng)論列表放在一個(gè)大盒子中，所有先定義一個(gè)盒子<divid="list"class="sc-bg"><divid=”everyone”class="ubub-f1ub-ver"><divclass="ubub-acub-pcbc-text-blaumh4<divclass="ut-sulev-3tx-lub-f1"評(píng)論者<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"不錯(cuò)，很好吃，下次再來(lái) <divclass="bc-text-gra2ulev-1umar-年月 <divclass=""<div<divid="dian "class="nav-btn"網(wǎng)友點(diǎn)評(píng)（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頁(yè)appcan.button("#ret",appcan.button("#ret","btn-act",function(){設(shè)置按appcan.button("#share",appcan.button("#share","ani-act",function()uexWindow.cbActionSheet=function(opId,dataType,{if(data=="0"){elseif(data"1"}}varvalue=uexWindow.actionSheet取消騰 方法：打 頁(yè)functionfunctionsendWeiXin()}varvarislogappcan.locStorage.val('islog')是否登錄flagvaruserId=appcan.locStorage.val('userID');//用戶IDvarscflag=0;//是否第一次被收藏varshopuser已經(jīng)收藏過(guò)zai取消過(guò)收藏對(duì)應(yīng)的記錄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添加去預(yù)定按鈕點(diǎn)擊functionfunctiongotoTable()',name:'book',data:'book.html',dataType:'0',aniId:type:} 功修改 的id=添加點(diǎn)擊functionfunctioncall()varnum=$("#num=num.re ce(/-/g,'').re ce(/\D/g,'');if(/^\d+$/.test(num)){if(data==0){}}}else格式不正確}}添加點(diǎn)擊functionfunctionmap()name:'map',data:dataType:aniId:}點(diǎn)擊“網(wǎng)友點(diǎn)評(píng)”，打開(kāi)該全部點(diǎn)評(píng)信第一步：在“網(wǎng)友點(diǎn)評(píng)“的div中添加點(diǎn)擊 <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:}三、數(shù)據(jù)添取消商鋪div中的以下代碼<divclass="ub-fhumw-sliderres-sliderub-readyfunctiongetData(){msg正在獲取數(shù)據(jù)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">去預(yù)定</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){}}商鋪列表數(shù)據(jù)獲取片第一步：刪除或者注銷掉原來(lái)html部分的靜態(tài)數(shù)據(jù)信息，即注掉以下代碼（不注銷也行，<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）網(wǎng)友點(diǎn)評(píng)（<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