Android仿饿了么点餐页面 分类和商品级联滑动定位 添加购物车动_百度知道
Android仿饿了么点餐页面 分类和商品级联滑动定位 添加购物车动
我有更好的答案
//我没有用jquery，我这里没有jquery的插件直接用js写的，你自己改成jquery就行。 把文字替换成图片就行。&!DOCTYPE html&&html lang=&en&&&head& &meta charset=&UTF-8&& &title&Document&/title& &style type=&text/css&&
*{margin:0padding:0;}
div #div1{
height : 300
background :
div #div2{
height : 300
background :
&/style& &script type=&text/javascript&&function
div2 = document.getElementById(&div2&);
div2.innerHTML = obj.innerHTML;
} &/script&&/head&&body&&div&
&div id=&div1&&
onclick='oc(this)'
href=&#&&yuxiangrousi&/a&&/ul&
onclick='oc(this)'
href=&#& &yuxiangqiezi&/a&&/ul&
onclick='oc(this)' href=&#&&tangcuyu&/a&&/ul&
&div id='div2'&
&/div& &div&
&/body&&/html&
采纳率：93%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。2.3k 次阅读
标签：至少1个，最多5个
1.上一章--2.苍渡大神源码--3.数据接口--4.UI框架--5.下一章--
1.先看一下目前的UI图
要实现的UI图
2.footdiv代码修改如下
&transition name="left"&
&div v-if="footdiv" class="foot on"&
&div class="footleft"&
&div class="footlogo"&
&icon name="footcar" class="footicon"&&/icon&
&div class="rednum"&15&/div&
&div class="footmain"&
&div v-if="false" class=""&未选购商品&/div&
&div class="ih30 fs1-2"&￥ 3205&/div&
&div class="ih20"&配送费 ￥5&/div&
&div class="footright"&
&span &￥20起送&/span&
&span v-if="false"&还差￥15起送&/span&
&span v-if="false"&去结算&/span&
&/transition&
line-height:50
background-color:#594C46;
width:100%;
.foot.on .footicon{
.foot.on .footmain{
.foot.on .footlogo{
background-color:#3190E8;
.foot.on .footright{
.footleft{
.footright{
text-align:
color:#B7B7B7;
background-color:#61686A;
.footright.on{
background-color:#4CD964;
.footlogo{
text-align:
border-radius:50%;
background-color:#515151;
margin:0px 10
border:3px solid #444446;
transform:translatey(-15px)
.footicon{
color:#8a8a8a;
margin-top:7
.footmain{
color:#ADADAD;
font-size:0.8
border-radius:50%;
background-color:
text-aligin:
line-height:18
font-size:12
我把所有可能出现的元素全部写出来了，用v-if来判断显示哪个，到时候购物车有东西了，直接给footdiv加一个onclass就行。
3.点击添加注意，首先我们要把布局修改一下
以前绿色的div在红色的div内，而红色div有一个点击跳转的效果，所以点击绿色div也会跳转。这在js中解决非常简单，但是在vue中怎么解决呢？我上网查了查没找到结果（哪位老铁知道怎么解决感谢指出）。。。最后是用布局解决的。解决后红色div与绿色div是兄弟并不是父子，将绿色div定位到红色div上即可。
4.数据类型咱们把数据存到localStorage里，键名为mycar，键值结构为
[{"shop":第一个商品的相关信息,"num":第一个商品的个数},{"shop":第二个商品的相关信息,"num":第二个商品的个数}]
（注意：localStorage只接收字符串，所以咱们存取都要先转化再使用）（注意：下面点击事件的参数e为API返回的一个完整的食品对象，，截图如下）
点击事件如下
addcar:function(e){
if(localStorage.getItem("mycar")){
var mycar=JSON.parse(localStorage.getItem("mycar"));
var addok=
//数据是否添加
for(var i =0;i&mycar.i++){
if(mycar[i].shop.item_id==e.item_id&&mycar[i].shop.category_id==e.category_id&&mycar[i].shop.restaurant_id==e.restaurant_id){
mycar[i].num=mycar[i].num+1;
if(addok){
mycar.push({"shop":e,"num":1});
that.mycar=
localStorage.setItem("mycar",JSON.stringify(mycar));
var mycar=[{"shop":e,"num":1}];
that.mycar=
localStorage.setItem("mycar",JSON.stringify(mycar));
（注意：别忘了在data中设置变量mycar来存放购物车信息）在footdiv中监听mycar来控制onclass是否添加和右上角的红色数字是否显示。
&transition name="left"&
&div v-if="footdiv" class="foot" :class="{on:mycar.length&=1}"&
&div class="footleft"&
&div class="footlogo"&
&icon name="footcar" class="footicon"&&/icon&
&div v-if="mycar" class="rednum"&15&/div&
&div class="footmain"&
&div v-if="false" class=""&未选购商品&/div&
&div class="ih30 fs1-2"&￥ 3205&/div&
&div class="ih20"&配送费 ￥5&/div&
&div class="footright"&
&span &￥20起送&/span&
&span v-if="false"&还差￥15起送&/span&
&span v-if="false"&去结算&/span&
&/transition&
这时发现商品数量没有计算，目前是写死的15，在计算属性computed中添加计算
computed:{
//计算属性
mycarshopnum:function(){
var num=0;
for(var i=0;i&this.mycar.i++){
num+=this.mycar[i].
return num
在footdiv中的rednum调用
&div v-if="mycar" class="rednum"&{{mycarshopnum}}&/div&
ok！运行试试解决！
1.可以看到，除了商品数量，其他全是假的，咱们现在写活。在computed中添加商品价格的计算（piecewise_agent_fee.tips为配送费，float_minimum_order_amount为起送费，在商家详情的API中，咱们以前已经获取）
computed:{
//计算属性
//计算商品数量
mycarshopnum:function(){
var num=0;
for(var i=0;i&this.mycar.i++){
num+=this.mycar[i].
return num
//计算商品价格(商品只有一个种类)
mycarshoppic:function(){
var num=0;
for(var i=0;i&this.mycar.i++){
num+=(this.mycar[i].shop.specfoods[0].price*this.mycar[i].num);
return num
//判断商家起送价与目前购物车价格
shoppicbig:function(){
if(this.mycar){
if(this.mycarshoppic&=this.shopinfo.float_minimum_order_amount){
return false
footdiv修改如下
&transition name="left"&
&div v-if="footdiv" class="foot" :class="{on:mycar.length&=1}"&
&div class="footleft"&
&div class="footlogo"&
&icon name="footcar" class="footicon"&&/icon&
&div v-if="mycar" class="rednum"&{{mycarshopnum}}&/div&
&div class="footmain"&
&div v-if="!mycar" class=""&未选购商品&/div&
&div v-if="mycar" class="ih30 fs1-2"&￥ {{mycarshoppic}}&/div&
&div v-if="mycar" class="ih20"&{{this.shopinfo.piecewise_agent_fee.tips}}&/div&
&div class="footright" :class="{on:shoppicbig==1}"&
&span v-if="!mycar"&￥{{this.shopinfo.float_minimum_order_amount}}起送&/span&
&span v-if="shoppicbig==2"&还差￥{{this.shopinfo.float_minimum_order_amount-mycarshoppic}}起送&/span&
&span v-if="shoppicbig==1"&去结算&/span&
&/transition&
现在只有购物车显示总数量，每个商品显示几个并没有。1.样式
&transition name="right"&
class="ih20"&
&span&&icon class="addicon" name="offline"&&/icon&&/span&
&span class="ih20 inblock y-4"&15&/span&
&/transition&
因为商品数量为0时，减号也该没有，所以商品数量与减号写在一个动画内了，样式如下
2.判断商品数量。现在商品的信息是从接口请求到后直接渲染在页面，没有做任何处理。现在我们要把商品信息与购物车的信息结合一下，在computed写函数（shopmean是从接口请求到的商品信息，在前几章已经请求到，未做任何处理。specfoods是商品的型号，这里默认只有一个）
//商品与购物车数量结合
getshopnum:function(){
for(var i=0;i&this.shopmean.i++){
for(var k=0;k&this.shopmean[i].foods.k++){
for( var h=0;h&this.mycar.h++){
if(this.shopmean[i].foods[k].specfoods[0]._id==this.mycar[h].shop.specfoods[0]._id){
this.shopmean[i].foods[k].mynum=this.mycar[h].
return this.shopmean
再然后我们在页面渲染数据时，只需要把
v-for="item in shopmean"
v-for="item in getshopnum"
即可。最后判断减号与数量的显示隐藏
&transition name="right"&
&span v-if="items.mynum" class="ih20"&
&span&&icon class="addicon" name="offline"&&/icon&&/span&
&span class="ih20 inblock y-4"&{{items.mynum}}&/span&
&/transition&
除了动画没有运行，其他的完美！
1.删除点击事件在dome绑定
&transition name="right"&
&span v-if="items.mynum" class="ih20"&
&span @click="removecar(items)"&&icon class="addicon" name="offline"&&/icon&&/span&
&span class="ih20 inblock y-4"&{{items.mynum}}&/span&
&/transition&
在methods中写函数
removecar:function(e){
for(var i=0;i&this.mycar.i++){
if(this.mycar[i].shop.specfoods[0]._id==e.specfoods[0]._id){
this.mycar[i].num==1?this.mycar.splice(i,1):(this.mycar[i].num=this.mycar[i].num-1);
localStorage.setItem("mycar",JSON.stringify(this.mycar));
注意这里要改一下计算属性中的getshopnum函数。咱们在刚开始写时，只是把商品列表跟购物车列表循环，当ID相同时在商品列表添加属性mynum存储商品在购物车数量，不相同时不作操作。但是，我们做了减商品的功能后，当商品数量为1时，减一后购物车清除该商品，然后通过计算属性中的getshopnum函数与商品列表循环，结果因为购物车已经清除该商品而函数找不到相同ID不作任何操作，但商品列表的该商品数量仍为一，所以当ID不相同时我们给商品列表自定义属性mynum为0即可，将computed中的getshopnum修改为
//商品与购物车数量结合
getshopnum:function(){
for(var i=0;i&this.shopmean.i++){
for(var k=0;k&this.shopmean[i].foods.k++){
var isadd=
//判断该商品是否在购物车
for( var h=0;h&this.mycar.h++){
if(this.shopmean[i].foods[k].specfoods[0]._id==this.mycar[h].shop.specfoods[0]._id){
this.shopmean[i].foods[k].mynum=this.mycar[h].
if(isadd){
this.shopmean[i].foods[k].mynum=0;
return this.shopmean
注意当购物车清空时，mycar已存在而不是刚开始的空，所以购物车div里的元素显示隐藏要修改为判断mycar的长度而不是是否为空
&transition name="left"&
&div v-if="footdiv" class="foot" :class="{on:mycar.length&=1}"&
&div class="footleft"&
&div class="footlogo"&
&icon name="footcar" class="footicon"&&/icon&
&div v-if="mycar.length" class="rednum"&{{mycarshopnum}}&/div&
&div class="footmain"&
&div v-if="!mycar.length" class=""&未选购商品&/div&
&div v-if="mycar.length" class="ih30 fs1-2"&￥ {{mycarshoppic}}&/div&
&div v-if="mycar.length" class="ih20"&{{this.shopinfo.piecewise_agent_fee.tips}}&/div&
&div class="footright" :class="{on:shoppicbig==1}"&
&span v-if="!mycar"&￥{{this.shopinfo.float_minimum_order_amount}}起送&/span&
&span v-if="shoppicbig==2"&还差￥{{this.shopinfo.float_minimum_order_amount-mycarshoppic}}起送&/span&
&span v-if="shoppicbig==1"&去结算&/span&
&/transition&
商品分类小红点
我们只需要在getshopnum给商品判断购物车中给商品数量时，给该商品的分类也加上该商品的数量即可。修改如下
//商品与购物车数量结合
getshopnum:function(){
for(var i=0;i&this.shopmean.i++){
var thisnum=0;
for(var k=0;k&this.shopmean[i].foods.k++){
var isadd=
//判断该商品是否在购物车
for( var h=0;h&this.mycar.h++){
if(this.shopmean[i].foods[k].specfoods[0]._id==this.mycar[h].shop.specfoods[0]._id){
this.shopmean[i].foods[k].mynum=this.mycar[h].
thisnum+=this.mycar[h].
if(isadd){
this.shopmean[i].foods[k].mynum=0;
this.shopmean[i].mynum=
return this.shopmean
ok！购物车表面功夫写完了，下面升级购物车。注意购物车应该在渲染页面事就获取数据，所以在mounted中添加
//获取购物车信息
if(localStorage.getItem("mycar")){
that.mycar=JSON.parse(localStorage.getItem("mycar"));
最终shop.vue代码修改如下
&template&
&div id="shop" class="bgfff"&
&transition name="left"&
&div v-if="myrouter" class="big"&
&div class="topbg"&
&img class="topbgimg" :src="imgpath+shopinfo.image_path"&
&div class="shoptop"&
&div class="toptop ih30"&
&router-link to="/miste"&
&icon class="backicon" name="back"&&/icon&
&/router-link&
&span class="right"&
&icon class="backicon2" name="cart"&&/icon&
&icon class="backicon2" name="more"&&/icon&
&div class="topfoot"&
&div class="topleft"&
&img :src="imgpath+shopinfo.image_path"&
&div class="topright nowarp"&
&router-link to="shop/shopDetail"&
&div class="foota"&
&div class="footamain fs1-2 nowarp"&{{shopinfo.name}}&/div&
&icon name="right" class="icon3"&&/icon&
&/router-link&
&div class="footb nowarp"&
&div class="nowarp"&公告:{{shopinfo.promotion_info}}&/div&
&div class="footc"&
&span class="footcmain"&&span v-if="shopinfo.delivery_mode"&{{shopinfo.delivery_mode.text}}o&/span&&span&约{{shopinfo.order_lead_time}}&/span&&/span&
&div class="shopmid mgtop10"&
&div @click="modal=true" v-if="shopinfo.activities" class="midtop"&&span class="te mgr5"&{{shopinfo.activities[0].icon_name}}&/span&&span&{{shopinfo.activities[0].description}}&/span&&span class="right"&{{shopinfo.activities.length}}个活动 &icon name="down" class="icon4"&&/icon&&/span&&/div&
&div class="mytab"&
&div @click="footdiv=shoporscore=true" :class="{ on:shoporscore }"&商品&/div&
&div @click="footdiv=shoporscore=false" :class="{ on:!shoporscore }"&评价{{shopinfo.rating}}分&/div&
&transition name="left"&
&div v-if="shoporscore" class="shopmain"&
&div class="mianleft"&
&div v-for="(item,index) in getshopnum" @click="itemgo(index)" :class="{on:index==shopon}" class="relative leftdiv"&
&icon v-if="index==0" class="icon5" name="hot"&&/icon&
&icon v-if="index==1" class="icon5" name="discount"&&/icon&
&span class="fs0-8"&{{item.name}}&/span&
&span v-if="item.mynum" class="rednum2"&{{item.mynum}}&/span&
&div class="mainright"&
&div class="item" v-for="item in getshopnum"&
&div class="itemtop padtop10 ih30 after"&
&span class="fs15"&{{item.name}}&/span&
&span class="fs0-8 col9f"&{{item.description}}&/span&
&div class="itemmain"&
&div v-for="items in item.foods" class="after"&
&router-link to="/shop/foodDetail"&
&div class="iteminfo"&
&div class="infoimgbox"&
&img :src="imgpath+items.image_path"&
&div class="inforight nowarp"&
&div class="colblack fs15 ih20 nowarp"&{{items.name}}&/div&
&div class="ih15 col9f"&&span class="fs10 mgl"&{{items.tips}}&/span&&/div&
&div class="ih15"&&span v-if="false" class="fs10 mgl"&&span class="zk"&包装费&/span&&span class="yh"&{{}}&/span&&/span&&/div&
&div class="ih20"&
&span class="colred fs12"&￥&/span&
&span class="colred mgr5"&{{items.specfoods[0].price}}&/span&
&span v-if="items.specfoods[0].original_price" class="fs12 col9f midline"&￥56&/span&
&/router-link&
&div class="iteminfofoot ih20"&
&transition name="top"&
&span v-if="items.mynum" class="ih20"&
&span @click="removecar(items)"&&icon class="addicon" name="offline"&&/icon&&/span&
&span class="ih20 inblock y-4"&{{items.mynum}}&/span&
&/transition&
&span v-if="items.specfoods.length==1" @click="addcar(items)" class=""&&icon name="add" class="addicon"&&/icon&&/span&
&span class="fs12 right gz" v-if="items.specfoods.length&1"&选规则&/span&
&/transition&
&transition name="right"&
&div class="score" v-if="!shoporscore"&
&div class="scoretop"&
&div class="scoretopleft"&
&div class="fs1-2 colf60"&{{shopinfo.rating}}&/div&
&div class="fs15 col9f"&综合评价&/div&
&div class="fs0-8 col9f"&高于周边商家{{parseInt(scorerating.compare_rating*100)}}%&/div&
&div class="scoretopright"&
&div&&span class="fs15 col9f mgr5"&评价服务&/span&&stars :num="scorerating.service_score.toFixed(1)"&&/stars&&span class="colf60 right"&{{scorerating.service_score.toFixed(1)}}&/span&&/div&
&div&&span class="fs15 col9f mgr5"&菜品评价&/span&&stars :num="scorerating.food_score.toFixed(1)"&&/stars&&span class="colf60 right"&{{scorerating.food_score.toFixed(1)}}&/span&&/div&
&div&&span class="fs15 col9f mgr5"&送达时间&/span&&span class="fs15 colf60"&{{scorerating.deliver_time}}分钟&/span&&/div&
&div class="scoremain"&
&div class="scoremaintop after"&
&div v-for="(item,index) in scoretags" class="ih30 fs0-8" :class="{sty2:item.unsatisfied,sty1:!(item.unsatisfied),on:index==scoreindex}"&{{item.name}}({{item.count}})&/div&
&div class="scoremaininfo"&
&div v-for="item in score" class="scoreitem after"&
&div class="scoreitemleft"&
&img :src="imgaddpath(item.avatar)" &
&div class="scoreitemright fs12 col9f"&
&span&{{item.username}}&/span&
&span class="right"&{{item.rated_at}}&/span&
&stars :num="item.rating_star"&&/stars&
{{item.time_spent_desc}}
&div class="scoreimgbox"&
&img v-for="itema in item.item_ratings" :src="imgaddpath(itema.image_hash)"&
&div class="namebox"&
&div v-for="itemb in item.item_ratings"&{{itemb.food_name}}&/div&
&/transition&
&transition name="top"&
&div v-if="modal" class="modal flex2 colfff pad10"&
&div class="modaltop flex1"&
&div class="modaltitle"&
{{shopinfo.name}}
&div class="modalmid"&
&div class="modal_title ih30"&&span&优惠信息&/span&&/div&
&div v-if="shopinfo.activities" v-for="item in shopinfo.activities" class="midtop"&&span class="te mgr5"&{{item.icon_name}}&/span&&span&{{item.description}}&/span&&/div&
&div class="modalinfo mgtop40"&
&div class="modal_title ih30"&&span&商家公告&/span&&/div&
{{shopinfo.promotion_info}}
&div @click="modal=false" class="modalfoot"&
&span&X&/span&
&/transition&
&load v-if="num!=1"&&/load&
&/transition&
&transition name="left"&
&div v-if="footdiv" class="foot" :class="{on:mycar.length&=1}"&
&div class="footleft"&
&div class="footlogo"&
&icon name="footcar" class="footicon"&&/icon&
&div v-if="mycar.length" class="rednum"&{{mycarshopnum}}&/div&
&div class="footmain"&
&div v-if="!mycar.length" class=""&未选购商品&/div&
&div v-if="mycar.length" class="ih30 fs1-2"&￥ {{mycarshoppic}}&/div&
&div v-if="mycar.length" class="ih20"&{{this.shopinfo.piecewise_agent_fee.tips}}&/div&
&div class="footright" :class="{on:shoppicbig==1}"&
&span v-if="shoppicbig==3"&￥{{this.shopinfo.float_minimum_order_amount}}起送&/span&
&span v-if="shoppicbig==2"&还差￥{{this.shopinfo.float_minimum_order_amount-mycarshoppic}}起送&/span&
&span v-if="shoppicbig==1"&去结算&/span&
&/transition&
&router-view&&/router-view&
&/template&
import stars from '../../components/stars/stars'
import load from '../../components/load/load'
export default {
//我的购物车
footdiv:true,
//脚部购物车是否显示
//商品种类选中的哪个
imgpath:'http://cangdu.org:8001/img/',
//商家头像的路径地址path
shopinfo:"",
//商家信息
shopmean:"",
//食品信息
shoporscore:true,
//商家还是评价
//评价信息
scorerating:"",
//评价分数
scoretags:"",
//评价分类
scoreindex:0,
//选中第几个评价分类
modal:false,
//模态框显示隐藏
myrouter:true,
//是否显示big div
components:{
//注册组件
mounted:function(){
//生命周期
//获取购物车信息
if(localStorage.getItem("mycar")){
that.mycar=JSON.parse(localStorage.getItem("mycar"));
that.num=that.num-5;
//餐馆详情
this.$http.get('http://cangdu.org:8001/shopping/restaurant/'+this.$store.state.shopid+'').then(response =& {
console.log(response);
this.shopinfo=response.
that.num=that.num+1;
}, response =& {
that.num=that.num+1;
console.log(response);
//食品详情
this.$http.get('http://cangdu.org:8001/shopping/v2/menu?restaurant_id='+this.$store.state.shopid+'').then(response =& {
console.log(response);
that.num=that.num+1;
this.shopmean=response.
}, response =& {
that.num=that.num+1;
console.log(response);
//评论详情
this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/'+this.$store.state.shopid+'/ratings?offset=0&limit=10').then(response =& {
console.log(response);
that.num=that.num+1;
this.score=response.
}, response =& {
that.num=that.num+1;
console.log(response);
//评论分数
this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/'+this.$store.state.shopid+'/ratings/scores').then(response =& {
console.log(response);
this.scorerating=response.
that.num=that.num+1;
}, response =& {
console.log(response);
that.num=that.num+1;
//评论分类
this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/'+this.$store.state.shopid+'/ratings/tags').then(response =& {
console.log(response);
this.scoretags=response.
that.num=that.num+1;
}, response =& {
console.log(response);
that.num=that.num+1;
let mydiv=document.querySelector('.mainright');
mydiv.addEventListener('scroll', this.handleScroll);
computed:{
//计算属性
//计算商品数量
mycarshopnum:function(){
var num=0;
for(var i=0;i&this.mycar.i++){
num+=this.mycar[i].
return num
//计算商品价格(商品只有一个种类)
mycarshoppic:function(){
var num=0;
if(this.mycar.length){
for(var i=0;i&this.mycar.i++){
num+=(this.mycar[i].shop.specfoods[0].price*this.mycar[i].num);
//判断商家起送价与目前购物车价格
shoppicbig:function(){
if(this.mycarshoppic&=this.shopinfo.float_minimum_order_amount){
}else if(this.mycarshoppic==0){
//商品与购物车数量结合
getshopnum:function(){
for(var i=0;i&this.shopmean.i++){
var thisnum=0;
for(var k=0;k&this.shopmean[i].foods.k++){
var isadd=
//判断该商品是否在购物车
for( var h=0;h&this.mycar.h++){
if(this.shopmean[i].foods[k].specfoods[0]._id==this.mycar[h].shop.specfoods[0]._id){
this.shopmean[i].foods[k].mynum=this.mycar[h].
thisnum+=this.mycar[h].
if(isadd){
this.shopmean[i].foods[k].mynum=0;
this.shopmean[i].mynum=
return this.shopmean
imgaddpath:function(e){
return "https://fuss10.elemecdn.com/"+e+".jpeg"
itemgo:function(index){
this.shopon=
document.querySelector('.mainright').scrollTop=document.querySelectorAll('.itemtop')[index].offsetT
handleScroll:function(){
var mydiv=document.querySelectorAll('.item');
for(var i =0;i&mydiv.i++){
if(mydiv[i].offsetTop&document.querySelector('.mainright').scrollTop-10&&mydiv[i].offsetTop&document.querySelector('.mainright').scrollTop+10){
this.shopon=i;
newpage:function(){
this.myrouter=(this.$route.path=="/shop"?true:false);
this.footdiv=(((this.$route.path=="/shop"&&this.shoporscore)||this.$route.path=="/shop/foodDetail")?true:false);
gofoodDetail:function(){
this.$router.push("/shop/foodDetail");
addcar:function(e){
if(localStorage.getItem("mycar")){
var mycar=JSON.parse(localStorage.getItem("mycar"));
var addok=
//数据是否添加
for(var i =0;i&mycar.i++){
if(mycar[i].shop.item_id==e.item_id&&mycar[i].shop.category_id==e.category_id&&mycar[i].shop.restaurant_id==e.restaurant_id){
mycar[i].num=mycar[i].num+1;
if(addok){
mycar.push({"shop":e,"num":1});
that.mycar=
localStorage.setItem("mycar",JSON.stringify(mycar));
var mycar=[{"shop":e,"num":1}];
that.mycar=
localStorage.setItem("mycar",JSON.stringify(mycar));
removecar:function(e){
for(var i=0;i&this.mycar.i++){
if(this.mycar[i].shop.specfoods[0]._id==e.specfoods[0]._id){
this.mycar[i].num==1?this.mycar.splice(i,1):(this.mycar[i].num=this.mycar[i].num-1);
localStorage.setItem("mycar",JSON.stringify(this.mycar));
"$route":"newpage",
&!-- Add "scoped" attribute to limit CSS to this component only --&
&style scoped&
display:-webkit-
-webkit-box-orient:
height:100
height:120
background-color: rgba(119,103,137,.43);
box-sizing:border-
padding:10px 10px 0px 10
width:100%;
height:120
.topbgimg{
width:100%;
filter: blur(10px);
.backicon{
.backicon2{
margin-bottom:10
background-color:#3c3c3c;
margin-right:10
border-radius:3
box-shadow:0 0 5px #3c3c3c;
.topleft&img{
max-width:100%;
max-height:100%;
border-radius:3
.topright,.topleft{
.topright{
height:100%;
line-height:30
margin-top:5
line-height:20
font-size:12
font-size:12
.footcmain{
background-color:#0097FF;
padding:0px 5
padding:10px 10px 0px 10
border-bottom:2px solid #F8F8F8;
font-size:12
background-color:#F08449;
padding:0px 1
margin-top:10
.mytab&div{
padding-bottom:10
margin-right:10
border-bottom:2
.mytab&div.on{
color:#0B89FF;
border-color:#0B89FF;
padding:0px 10
color:#727272;
background-color:#F8F8F8;
.leftdiv&div{
padding:15px 0
border-bottom:1px solid #F1F1F1;
.leftdiv.on{
background-color:
color:#080808;
.leftdiv.on&div{
.mianleft{
box-sizing:border-
.shopmain{
-webkit-box-flex:1;
display:-webkit-
margin-bottom:50
.mainright{
-webkit-box-flex:1;
padding-left:10
line-height:50
background-color:#594C46;
width:100%;
.foot.on .footicon{
.foot.on .footmain{
.foot.on .footright{
.foot.on .footlogo{
background-color:#3190E8;
.footleft{
.footright{
text-align:
color:#B7B7B7;
background-color:#61686A;
.footright.on{
background-color:#4CD964;
.footlogo{
text-align:
border-radius:50%;
background-color:#515151;
margin:0px 10
border:3px solid #444446;
transform:translatey(-15px)
.footicon{
color:#8a8a8a;
margin-top:7
.footmain{
color:#ADADAD;
font-size:0.8
.itemmain{
padding-right:10
.iteminfo{
padding:10px 0
.infoimgbox{
margin-right:5
background-color:
.infoimgbox&img{
width:100%;
height:100%;
.inforight{
line-height:20
line-height:15
background-color:#FF5F15;
padding:0px 3
border:1px solid #FF5F15;
padding:0px 3
color:#FF5F15;
border:1px solid #FF5F15;
display:inline-
background-color:#3190E8;
padding:0px 2
border-radius:2
.scoretop{
padding:0px 10px 10px 10
border-bottom:10px solid #F5F5F5;
.scoretopleft{
text-align:
.scoretopright{
.scoretopright&div{
.scoremain{
padding:0px 10
.scoremaintop{
padding:10px 0px 5px 0
flex-wrap:
.scoremaintop&div{
padding:0px 8
border-radius:5
margin-right:5
margin-bottom:5
background-color:#EBF5FF;
color:#9f9f9f;
background-color:#3190E8;
background-color:#F5F5F5;
color:#AFAFAF;
.scoreitem{
margin-top:10
.scoreitemleft{
margin-right:10
.scoreitemleft&img{
width:100%;
border-radius:50%;
.scoreitemright{
flex-wrap:
.namebox&div{
padding:3px 3
margin-right:5
border-radius:3
margin-bottom:5
padding-top:10
overflow-y:
.scoreimgbox&img{
margin-right:10
box-sizing:border-
height:100
background-color:#262626;
z-index:10;
.modaltop{
.modaltitle{
margin:20px 0
text-align:
font-size:1.5
.modal_title{
text-align:
.modal_title&span{
padding:2px 5
border:1px solid #
border-radius:5
.modalfoot{
width:100%;
margin-bottom:10
justify-content:flex-
text-align:
.modalfoot&span{
display: inline-
border:1px solid #
border-radius:50%;
ling-height:30
font-size:25
.iteminfofoot{
bottom: 10
border-radius:50%;
background-color:
text-align:
line-height:18
font-size:12
transform: translateY(-4px);
border-radius:50%;
background-color:
text-align:
line-height:15
font-size:12
引入的全局css如下
height: 100
background-color: #f5f5f5;
text-decoration:
width: 100%;
z-index: 5;
height: 40
line-height: 40
height: 30
line-height: 30
height: 50
line-height: 50
background-color:#26a2
background-color: #
background-color:#F5F5F5;
font-size: 0.8rem !
font-size: 1.2
font-size: 15
font-size: 12
font-size: 12
transform: scale(.8);
display:inline-
transform-origin:100% 50% 0;/*改变缩放基点*/
transform-origin:0 50% 0;/*改变缩放基点*/
color: #9F9F9F;
color: #FF6600;
color: #26a2
color:#FE3D3D;
.colblack{
padding: 10
padding:0px 10px 0px 10
.padtop10{
padding-top:10
.padtop40{
padding-top:40
.padtop50{
padding-top:50
.padbot10{
padding-bottom:10
padding-right: 10
margin-top: 5
margin-top: 40
margin-top: 50
margin-top: 10
margin-bottom: 10
margin-right: 5
height: 15
height: 60
width: 100%;
.radius50{
border-radius: 50%;
display: inline-
flex-direction:
box-sizing: border-
.relative{
text-decoration: line-
white-space:
/* 不换行 */
/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:一起使用。*/
/*一像素分割线*/
.after::after{
content: " ";
bottom: 0;
width: 100%;
background-color: #e4e4e4;
-webkit-transform-origin:
transform-origin:
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.after::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.after::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
/* 组件动画 */
/* 左进左出 */
.left-enter-active{
animation-name: left-
animation-duration: .2s;
animation-timing-function:
.left-leave-active{
animation-name: left-
animation-timing-function:
animation-duration: .2s;
@keyframes left-in {
transform: translate3d(-100%, 0, 0);
transform: translate3d(-50%, 0, 0);
transform: translate3d(0, 0, 0);
@keyframes left-out {
transform: translate3d(0, 0, 0);
transform: translate3d(-50%, 0, 0);
transform: translate3d(-100%, 0, 0);
/* 右进右出 */
.right-enter-active{
animation-name: right-
animation-duration: .2s;
animation-timing-function:
.right-leave-active{
animation-name: right-
animation-timing-function:
animation-duration: .2s;
@keyframes right-in {
transform: translate3d(100%, 0, 0);
transform: translate3d(50%, 0, 0);
transform: translate3d(0, 0, 0);
@keyframes right-out {
transform: translate3d(0, 0, 0);
transform: translate3d(50%, 0, 0);
transform: translate3d(100%, 0, 0);
/* 上进上出 */
.top-enter-active{
animation-name: top-
animation-duration: .2s;
animation-timing-function:
.top-leave-active{
animation-name: top-
animation-timing-function:
animation-duration: .2s;
@keyframes top-in {
transform: translate3d(0, -100%, 0);
transform: translate3d(0, -50%, 0);
transform: translate3d(0, 0, 0);
@keyframes top-out {
transform: translate3d(0, 0, 0);
transform: translate3d(0, -50%, 0);
transform: translate3d(0, -100%, 0);
/* 淡进淡出 */
.opacity-enter-active{
animation-name: opacity-
animation-duration: .2s;
animation-timing-function:
.opacity-leave-active{
animation-name: opacity-
animation-timing-function:
animation-duration: .2s;
@keyframes opacity-in {
opacity:0;
opacity:0.5;
opacity:1;
@keyframes opacity-out {
opacity:1;
opacity:0.5;
opacity:0;
下面来改造购物车
3 收藏&&|&&8
你可能感兴趣的文章
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。