init

pages/store/meals.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="content">
+		<!-- banner -->
+		<view class="banner">
+			<image v-if="banner != ''" class="banner-cover" :src="banner" mode="aspectFill"></image>
+		</view>
+		<!-- 分类 -->
+		<u-sticky bgColor="#fff" zIndex="99">
+			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs"></u-tabs>
+		</u-sticky>
+		<!-- 套餐列表 -->
+		<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	: [],
+				classify	: [],
+				categoryId	: ""
+			};
+		},
+		mounted(){
+			this.getMeals()
+		},
+		methods:{
+			getMeals(){
+				meals(this.$Route.query.id, this.categoryId).then(res => {
+					uni.setNavigationBarTitle({
+						title: res.meal.subtitle
+					})
+					this.banner   	= res.meal.banner
+					this.goodsArr 	= res.goods
+					this.classify   = [{ name: "全部", category_id: "" }].concat(res.categories)
+					uni.stopPullDownRefresh()
+				})
+			},
+			onTabs(e){
+				this.categoryId = e.category_id
+				this.getMeals()
+			}
+		},
+		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>