|
|
@@ -0,0 +1,195 @@
|
|
|
+<template>
|
|
|
+ <div class="MenuDiet">
|
|
|
+ <br v-if="load" />
|
|
|
+ <br v-if="load" />
|
|
|
+ <van-skeleton title v-if="load" :row="10" />
|
|
|
+ <van-empty v-if="!list.length && !load" description="今日休息" />
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ list.length &&
|
|
|
+ list[value1] &&
|
|
|
+ list[value1].child &&
|
|
|
+ list[value1].child.length
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div v-for="(item, i) in list[value1].child" :key="i">
|
|
|
+ <br />
|
|
|
+ <van-cell-group inset :border="false">
|
|
|
+ <van-cell
|
|
|
+ :style="
|
|
|
+ 'padding: 5px 16px;font-size: 18px; color: #fff;background-color: ' +
|
|
|
+ (i % 2 === 1 ? '#FFB07B' : '#74BBFF') +
|
|
|
+ ';'
|
|
|
+ "
|
|
|
+ :title="item.meal"
|
|
|
+ ></van-cell>
|
|
|
+ <div v-if="item.varietyOfDishes && item.varietyOfDishes.length">
|
|
|
+ <van-cell v-for="(v, p) in item.varietyOfDishes" :key="p">
|
|
|
+ <template #title>
|
|
|
+ <div
|
|
|
+ class="p"
|
|
|
+ :style="
|
|
|
+ 'background-color:' + (i % 2 === 1 ? '#FFB07B' : '#74BBFF')
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ v-text="v.title"
|
|
|
+ class="title"
|
|
|
+ style="vertical-align: middle"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <template #label>
|
|
|
+ <span>{{ v.value.join("、") }}</span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
|
|
+ <van-swipe-item>1</van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ <van-cell-group v-if="list.length" :border="false">
|
|
|
+ <template #title>
|
|
|
+ <div class="t">
|
|
|
+ <span>【温馨提示】</span>
|
|
|
+ <p>每日菜品可能会临时调整,以现场提供的实际菜品为准哦~</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// @ is an alias to /src
|
|
|
+import {
|
|
|
+ Cell as vanCell,
|
|
|
+ CellGroup as vanCellGroup,
|
|
|
+ Skeleton as vanSkeleton,
|
|
|
+ Empty as vanEmpty,
|
|
|
+ Swipe as vanSwipe,
|
|
|
+ SwipeItem as vanSwipeItem,
|
|
|
+} from "vant";
|
|
|
+import "vant/lib/swipe/style/index";
|
|
|
+import "vant/lib/swipe-item/style/index";
|
|
|
+import "vant/lib/skeleton/style/index";
|
|
|
+import "vant/lib/empty/style/index";
|
|
|
+import "vant/lib/cell/style/index";
|
|
|
+import "vant/lib/cell-group/style/index";
|
|
|
+
|
|
|
+import { menulist } from "../api/index";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "MenuDiet",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ load: false,
|
|
|
+ list: [],
|
|
|
+ option1: [
|
|
|
+ { text: "今天(2022/02/11)", value: 0 },
|
|
|
+ { text: "明天(2022/02/12)", value: 1 },
|
|
|
+ ],
|
|
|
+ value1: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.load = true;
|
|
|
+ menulist()
|
|
|
+ .then(r => {
|
|
|
+ this.list = (r || []).map((v, i) => {
|
|
|
+ v.value = i;
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ this.load = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.load = false;
|
|
|
+ });
|
|
|
+ document.title = "菜单";
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ change(v) {
|
|
|
+ this.value1 = v;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeUnmount: function () {
|
|
|
+ localStorage.token = "";
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ vanCell,
|
|
|
+ vanSkeleton,
|
|
|
+ vanCellGroup,
|
|
|
+ vanEmpty,
|
|
|
+ vanSwipeItem,
|
|
|
+ vanSwipe,
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.MenuDiet {
|
|
|
+ min-height: 100%;
|
|
|
+ font-weight: 400;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.MenuDiet .van-sidebar {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+.MenuDiet .van-cell-group {
|
|
|
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
|
|
|
+}
|
|
|
+.MenuDiet .main {
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+.MenuDiet .van-sidebar-item--select::before {
|
|
|
+ background-color: #e42417;
|
|
|
+}
|
|
|
+.MenuDiet .meal {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.MenuDiet .p {
|
|
|
+ display: inline-block;
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ background-color: #ffb07b;
|
|
|
+ border-radius: 50%;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 9px;
|
|
|
+}
|
|
|
+.MenuDiet .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.MenuDiet .t {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.MenuDiet .t span {
|
|
|
+ color: #fa6400;
|
|
|
+}
|
|
|
+.MenuDiet .van-tabs__line {
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+.MenuDiet .van-cell__label {
|
|
|
+ color: #555555;
|
|
|
+ padding-left: 14px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.5em;
|
|
|
+}
|
|
|
+.MenuDiet .van-tab {
|
|
|
+ font-size: 19px;
|
|
|
+}
|
|
|
+.MenuDiet .van-tab--active .van-tab__text {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|
liyongli