<template>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
<ul>

<li v-for="(item, index) in goods" class="menu-item" :class="{'current': currentIndex === index}"
@click="selectMenu(index,$event)">
<span class="text border-1px" ref="menuList">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="food-wrapper" ref="foodWrapper">
<ul>
<li v-for="item in goods" class="food-list" ref="foodList">
<h1 class="title">{{item.name}}</h1>
<ul>
<li v-for="food in item.foods" class="food-item">
<div class="icon">
<img :src="food.icon" width="57" height="57"/>
</div>
<div class="content">
<div class="name">{{food.name}}</div>
<p class="dec">{{food.description}}</p>
<div class="extra">
<span class="sellCount">月售{{food.sellCount}}份</span>
<span class="rating">好評率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">￥{{food.price}}</span>
<span v-show="food.oldPrice" class="oldPrice">￥{{food.oldPrice}}</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>

</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
const ERROK = 0
export default {
props: {
seller: {
type: Object
}
},
data() {
return {
goods: [],
listHeight: [], // 定義一個變量數(shù)組來存儲每個item的高度
scrollY: 0 // 滾動的y軸坐標(biāo)
}
},
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
this.$http.get('/api/goods').then((response) => {
response = response.body
if(response.errno === ERROK){
this.goods = response.data
console.log(response.data)
this.$nextTick(() => {
this._initScroll()
this._calculateHeight()
})
}
})
},
computed: {
// 3.計算menu當(dāng)前的index
currentIndex() {
for(let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i]
let height2 = this.listHeight[i + 1]
if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
this._followScroll(i)
return i
}
}
return 0
}
},
methods: {
// 6. 點(diǎn)擊某個menu，foodList列表跳轉(zhuǎn)
selectMenu(index, event) {
// 解決瀏覽器點(diǎn)擊事件響應(yīng)兩次的問題
if(event._constructed) {
return
}
let foodList = this.$refs.foodList
let el = foodList[index]
this.foodsScroll.scrollToElement(el, 300)
},
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
this.foodsScroll = new BScroll(this.$refs.foodWrapper, {
click: true,
probeType: 3 // 探針，實時監(jiān)聽滾動位置
})
// 2.獲取滾動的高度
this.foodsScroll.on('scroll', (pos) => {
if(pos.y <= 0) {
this.scrollY = Math.abs(Math.round(pos.y))
}
})
},
// 1.計算每個item的高度，記得在li里面添加ref標(biāo)簽來獲取dom
_calculateHeight() {
let foodList = this.$refs.foodList // 獲取food列表的DOM
let height = 0
this.listHeight.push(height)
for(let i = 0; i < foodList.length; i++) {
let item = foodList[i]
height += item.clientHeight // 獲取可視區(qū)域店高度
this.listHeight.push(height)
}
},
// 4.menu滾動到制定位置
_followScroll(index) {
let menuList = this.$refs.menuList
let el = menuList[index]
this.menuScroll.scrollToElement(el, 300, 0, -100)
}
}
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"
*{margin: 0; padding: 0}
.goods
position absolute
display flex
width 100%
top 174px
bottom 46px
overflow hidden
.menu-wrapper
flex 0 0 80px
width 80px
background #f3f5f7
.menu-item
display table
width 56px
height 54px
line-height 12px
padding 0 12px
&.current
position relative
margin-top -1px
z-index 10
background #fff
font-weight 700
.text
border-none()
.icon
display inline-block
width 12px
height 12px
background-size 12px 12px
background-repeat no-repeat
vertical-align top
padding-right 2px
&:last-child
margin 0
&.decrease
bg-image('decrease_3')
&.discount
bg-image('discount_3')
&.special
bg-image('special_3')
&.invoice
bg-image('invoice_3')
&.guarantee
bg-image('guarantee_3')
.text
display table-cell
width 56px
font-size 12px
line-height 14px
vertical-align middle
border-1px(rgba(7, 17, 27, 0.1))
.food-wrapper
flex 1
font-size 0
.title
font-size 12px
height 26px
line-height 26px
color rgb(147,153,159)
background #f3f5f7
border-left 2px solid #d9dde1
padding-left 14px
.food-item
display flex
margin 18px 0 0 18px
border-1px(rgba(7, 17, 27, 0.1))
padding-bottom 18px
&:last-child
border-none()
margin-bottom 0
.icon
flex 0 0 57px
margin-right 10px
.content
flex 1
.name
font-size 14px
color rgb(7,17,27)
line-height 10px
.desc, .extra
font-size 10px
color rgb(147,153,159)
margin 8px 0
.desc
line-height 14px
.extra
line-height 10px
.price
.now
font-size 14px
font-weight 700
line-height 24px
color #f01414
.oldPrice
font-size 10px
color rgb(147,153,159)
font-weight 700
line-height 24px
margin-left 8px

</style>