<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%; 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>