<template>
	<view class="content">
		<!-- banner -->
		<view class="banner">
			<image v-if="banner.length > 0" class="banner-cover" :src="banner[0].cover || ''" mode="aspectFill"></image>
		</view>
		<!-- 套餐列表 -->
		<oct-goods
			:lists="goodsArr"
			color="#e6576b"
			@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
		/>
	</view>
</template>

<script>
	import { meals } from "@/apis/interfaces/store"
	export default {
		data() {
			return {
				banner  : [],
				goodsArr: []
			};
		},
		mounted(){
			this.getMeals()
		},
		methods:{
			getMeals(){
				meals(this.$Route.query.id).then(res => {
					console.log(res)
					uni.setNavigationBarTitle({
						title: res.meal.subtitle
					})
					this.banner   = res.banner
					this.goodsArr = res.meal.goods
					uni.stopPullDownRefresh()
				})
			},
			click(){
				console.log('筛选')
			}
		},
		onPullDownRefresh() {
			this.getMeals()
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
	}
	// banner
	.banner{
		position: relative;
		width: 100%;
		background-color: white;
		padding-top: 40%;
		&-text,
		&-cover{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
	}
	// 筛选
	.classify-tabs{
		background: white;
	}
</style>
