<template>
<div class="shop_container">
<section class="headers">
<div>
12321312
</div>
</section>
<section class="menu_container">
<section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
<ul>
<li v-for="(item,index) in menuList" :key="index" class="menu_left_li" :class="{activity_menu: index == menuIndex}" @click="chooseMenu(index)">
<img :src="getImgPath(item.icon_url)" v-if="item.icon_url">
<span>{{item.name}}</span>
<span class="category_num" v-if="categoryNum[index]&&item.type==1">{{categoryNum[index]}}</span>
</li>
</ul>
</section>
<section class="menu_right" ref="menuFoodList">
<ul>
<li v-for="(item,index) in menuList" :key="index">
<header class="menu_detail_header">
<section class="menu_detail_header_left">
<strong class="menu_item_title">{{item.name}}</strong>
<span class="menu_item_description">{{item.description}}</span>
</section>
<span class="menu_detail_header_right" @click="showTitleDetail(index)">...</span>
<p class="description_tip" v-if="index == TitleDetailIndex">
<span>{{item.name}}</span>
{{item.description}}
</p>
</header>
<section v-for="(foods,foodindex) in item.foods" :key="foodindex" class="menu_detail_list">
<div class="menu_detail_link">
<section class="menu_food_img">
</section>
<section class="menu_food_description">
<h3 class="food_description_head">
<strong class="description_foodname">{{foods.name}}</strong>
<ul v-if="foods.attributes.length" class="attributes_ul">
<li v-for="(attribute, foodindex) in foods.attributes" :key="foodindex" :style="{color: '#' + attribute.icon_color,borderColor:'#' +attribute.icon_color}" :class="{attribute_new: attribute.icon_name == '新'}">
<p :style="{color: attribute.icon_name == '新'? '#fff' : '#' + attribute.icon_color}">{{attribute.icon_name == '新'? '新品':attribute.icon_name}}</p>
</li>
</ul>
</h3>
<p class="food_description_content">{{foods.description}}</p>
<p class="food_description_sale_rating">
<span>月售{{foods.month_sales}}份</span>
<span>好评率{{foods.satisfy_rate}}%</span>
</p>
<p v-if="foods.activity" class="food_activity">
<span :style="{color: '#' + foods.activity.image_text_color,borderColor:'#' +foods.activity.icon_color}">{{foods.activity.image_text}}</span>
</p>
</section>
</div>
</section>
</li>
</ul>
</section>
</section>
<section class="footer"></section>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
menuIndex:0,
cartFoodList: [], //购物车商品列表
TitleDetailIndex: null, //点击展示列表头部详情
categoryNum:[],
menuIndexChange: true,//解决选中index时，scroll监听事件重复判断设置index的bug
foodScroll: null,
shopListTop: [], //商品列表的高度集合
menuList:[
{
name:"热销榜",
type:'1',
is_selected:true,
id:2,
description:"大家喜欢吃，才叫真好吃。",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:2,
item_id:324,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认",
packing_fee:1,
sku_id:3152,
stock:1000
} ,
{
food_id:3153,
name:1,
price:21,
sold_out:false,
specs_name:"ok",
packing_fee:1,
sku_id:3152,
stock:1000
}
]
},
{
name:"食品名称",
restaurant_id:1,
month_sales:631,
category_id:2,
item_id:340,
description:"食品名称",
attributes:[
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text:"食品活动",
image_text_color: "f1884f"
},
specifications:[
],
specfoods :[
{
food_id:1073,
name:1,
price:20,
sold_out:false,
specs_name:"默认",
packing_fee:0,
sku_id:1073,
stock:1000
}
]
},
{
name:"欲为",
restaurant_id:1,
month_sales:631,
category_id:2,
item_id:374,
description:"食品名称",
attributes:[
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text:"食品活动",
image_text_color: "f1884f"
},
specifications:[
],
specfoods :[
{
food_id:1195,
name:1,
price:20,
sold_out:false,
specs_name:"默认",
packing_fee:0,
sku_id:1195,
stock:1000
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
,
{
name:"优惠",
type:'1',
is_selected:true,
id:3,
description:"美味又实惠, 大家快来抢!",
restaurant_id:1,
foods:[
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
{
name:1,
restaurant_id:1,
month_sales:622,
category_id:3,
description:"阿斯",
attributes:[
{icon_color:"5ec452",
icon_name:'新'
}
],
satisfy_rate:"96",
activity:{
icon_color:"f07373",
image_text: "阿萨德",
image_text_color: "f1884f"
},
specifications:[
{
name:'规格',
values:[
"默认","OK","dse"
]
}
],
specfoods :[
{
food_id:3152,
name:1,
price:20,
sold_out:false,
specs_name:"默认"
}
]
},
]
}
]
}
},
created(){
},
mounted() {
this.windowHeight = window.innerHeight;
setTimeout(() => {
this.$nextTick(()=>{
this.getFoodListHeight();
})
}, 20)
},
methods:{
getFoodListHeight(){
const listContainer = this.$refs.menuFoodList;
const listArr = Array.from(listContainer.children[0].children);
listArr.forEach((item, index) => {
this.shopListTop[index] = item.offsetTop;
console.log(this.shopListTop)
});
this.listenScroll(listContainer)
},
listenScroll(element){
this.foodScroll = new BScroll(element, {
probeType: 3,
deceleration: 0.001,
bounce: false,
swipeTime: 2000,
click: true,
});
const wrapperMenu = new BScroll('#wrapper_menu', {
click: true,
});
/**
* offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
*/
const wrapMenuHeight = this.$refs.wrapperMenu.clientHeight; //当前元素的文本高度
console.log(-wrapMenuHeight/2-50,"wrapmenuHeight")
this.foodScroll.on('scroll', (pos) => {
if (!this.$refs.wrapperMenu) {
return
}
this.shopListTop.forEach((item, index) => {
if (this.menuIndexChange && Math.abs(Math.round(pos.y)) >= item) {
console.log(pos,"pos")
this.menuIndex = index;
// console.log(123)
// return;
const menuList=this.$refs.wrapperMenu.querySelectorAll('.activity_menu');
const el = menuList[0];
wrapperMenu.scrollToElement(el, 800, 0, -(wrapMenuHeight/2 - 50));
}
})
})
},
chooseMenu(index){
this.menuIndex = index;
//menuIndexChange解决运动时listenScroll依然监听的bug
this.menuIndexChange = false;
this.foodScroll.scrollTo(0, -this.shopListTop[index], 400);
this.foodScroll.on('scrollEnd', () => {
this.menuIndexChange = true;
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../styles/mixin';
.shop_container{
li{
list-style: none;
}
display: flex;
flex-direction: column;
position: absolute;
height: 100%;
width:100%;
.headers{
height: 50px;
}
.footer{
height: 100px;
background: red;
}
}
// .food_container{
// display: flex;
// flex: 1;
// padding-bottom: 2rem;
// }
.menu_container{
flex: 1;
display: flex;
overflow-y: hidden;
position: relative;
.menu_left{
width: 3.8rem;
background: #f8f8f8;
.menu_left_li{
padding: .7rem .3rem;
border-bottom: 0.025rem solid #ededed;
box-sizing: border-box;
border-left: 0.15rem solid #f8f8f8;
position: relative;
img{
@include wh(.5rem, .6rem);
}
span{
@include sc(.6rem, #666);
}
.category_num{
position: absolute;
top: .1rem;
right: .1rem;
background-color: #ff461d;
line-height: .6rem;
text-align: center;
border-radius: 50%;
border: 0.025rem solid #ff461d;
min-width: .6rem;
height: .6rem;
@include sc(.5rem, #fff);
font-family: Helvetica Neue,Tahoma,Arial;
}
}
.activity_menu{
border-left: 0.15rem solid #3190e8;
background-color: #fff;
span:nth-of-type(1){
font-weight: bold;
}
}
}
.menu_right{
flex: 4;
/*overflow-y: auto;*/
.menu_detail_header{
width: 100%;
padding: .4rem ;
position: relative;
box-sizing: border-box;
background: #f8f8f8;
@include fj;
align-items: center;
.menu_detail_header_left{
width: 11rem;
white-space: nowrap;
overflow: hidden;
.menu_item_title{
@include sc(.7rem, #666);
font-weight: bold;
}
.menu_item_description{
@include sc(.5rem, #999);
width: 30%;
overflow: hidden;
}
}
.menu_detail_header_right{
@include wh(.5rem, 1rem);
display: block;
background-size: 100% .4rem;
background-position: left center;
}
.description_tip{
background-color: #39373a;
opacity: 0.95;
@include sc(.5rem, #fff);
position: absolute;
top: 1.5rem;
z-index: 14;
width: 8rem;
right: .2rem;
padding: .5rem .4rem;
border: 1px;
border-radius: .2rem;
span{
color: #fff;
line-height: .6rem;
font-size: .55rem;
}
}
.description_tip::after{
content: '';
position: absolute;
@include wh(.4rem, .4rem);
background-color: #39373a;
top: -.5rem;
right: .7rem;
transform: rotate(-45deg) translateY(.41rem);
}
}
.menu_detail_list{
background-color: #fff;
padding: .6rem .4rem;
border-bottom: 1px solid #f8f8f8;
position: relative;
overflow: hidden;
.menu_detail_link{
display:flex;
.menu_food_img{
margin-right: .4rem;
img{
@include wh(2rem, 2rem);
display: block;
}
}
.menu_food_description{
width: 100%;
.food_description_head{
@include fj;
margin-bottom: .2rem;
.description_foodname{
@include sc(.7rem, #333);
}
.attributes_ul{
display: flex;
li{
font-size: .3rem;
height: .6rem;
line-height: .35rem;
padding: .1rem;
border: 1px solid #666;
border-radius: 0.3rem;
margin-right: .1rem;
transform: scale(.8);
p{
white-space: nowrap;
}
}
.attribute_new{
position: absolute;
top: 0;
left: 0;
background-color: #4cd964;
@include wh(2rem, 2rem);
display: flex;
align-items: flex-end;
transform: rotate(-45deg) translate(-.1rem, -1.5rem);
border: none;
border-radius: 0;
p{
@include sc(.4rem, #fff);
text-align: center;
flex: 1;
}
}
}
}
.food_description_content{
@include sc(.5rem, #999);
line-height: .6rem;
}
.food_description_sale_rating{
line-height: .8rem;
span{
@include sc(.5rem, #333);
}
}
.food_activity{
line-height: .4rem;
span{
font-size: .3rem;
border: 1px solid currentColor;
border-radius: 0.3rem;
padding: .08rem;
display: inline-block;
transform: scale(.8);
margin-left: -0.35rem;
}
}
}
}
.menu_detail_footer{
margin-left: 2.4rem;
font-size: 0;
margin-top: .3rem;
@include fj;
.food_price{
span{
font-family: 'Helvetica Neue',Tahoma,Arial;
}
span:nth-of-type(1){
@include sc(.5rem, #f60);
margin-right: .05rem;
}
span:nth-of-type(2){
@include sc(.7rem, #f60);
font-weight: bold;
margin-right: .3rem;
}
span:nth-of-type(3){
@include sc(.5rem, #666);
}
}
}
}
}
}
</style>
浙公网安备 33010602011771号