hair/src/views/MenuDiet.vue

<template>
  <div class="MenuDiet">
    <br v-if="!list.length" />
    <br v-if="!list.length" />
    <van-skeleton title v-if="!list.length" :row="10" />
    <van-dropdown-menu v-if="list.length">
      <van-dropdown-item v-model="value1" :options="list" @change="change">
        <template #title>
          {{
            list[value1]
              ? list[value1].text + "(" + list[value1].date + ")"
              : ""
          }}
        </template>
        <template #default></template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <template
      v-if="
        list.length &&
        list[value1] &&
        list[value1].child &&
        list[value1].child.length
      "
    >
      <van-cell-group inset v-for="(item, i) in list[value1].child" :key="i">
        <template #title>
          <b class="meal" style="color: #899ded" v-text="item.meal"></b>
        </template>
        <div v-if="item.varietyOfDishes && item.varietyOfDishes.length">
          <van-cell
            :title="v.title"
            v-for="(v, p) in item.varietyOfDishes"
            :key="p"
          >
            <template #label>
              <span>{{ v.value.join("、") }}</span>
            </template>
          </van-cell>
        </div>
      </van-cell-group>
    </template>
    <van-cell-group
      v-if="list.length"
      :border="false"
      title="【温馨提示】每日菜品可能会临时调整，以现场提供的实际菜品为准哦~"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import {
  DropdownMenu as vanDropdownMenu,
  DropdownItem as vanDropdownItem,
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Skeleton as vanSkeleton,
} from "vant";
import "vant/lib/dropdown-menu/style/index";
import "vant/lib/dropdown-item/style/index";
import "vant/lib/skeleton/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/cell-group/style/index";

// import { orderList, cancel } from "../api/index";

export default {
  name: "MenuDiet",
  data() {
    return {
      list: [],
      option1: [
        { text: "今天(2022/02/11)", value: 0 },
        { text: "明天(2022/02/12)", value: 1 },
      ],
      value1: 0,
    };
  },
  mounted() {
    let list = [
      {
        text: "今天",
        date: "2022/02/12",
        id: 0,
        child: [
          {
            meal: "早餐",
            varietyOfDishes: [
              {
                title: "热菜",
                value: [
                  "干炸马面鱼",
                  "宽粉红烧肉",
                  "莲菜炒肉片",
                  "麻婆豆腐",
                  "酸辣土豆丝",
                  "蘑菇青菜",
                ],
              },
              {
                title: "主食",
                value: ["米饭", "馒头", "花卷", "杂粮"],
              },
              {
                title: "汤",
                value: ["西红柿鸡蛋汤", "醪糟羹"],
              },
              {
                title: "其他",
                value: ["时令水果"],
              },
            ],
          },
        ],
      },
    ];
    let o = setTimeout(() => {
      clearTimeout(o);
      this.list = list.map((v, i) => {
        v.value = i;
        return v;
      });
    }, 2000);
    console.log(this.list);
    document.title = "菜单";
  },
  computed: {},
  methods: {
    change(v) {
      console.log(v);
    },
  },
  beforeUnmount: function () {
    localStorage.token = "";
  },
  components: {
    vanDropdownMenu,
    vanDropdownItem,
    vanCell,
    vanSkeleton,
    vanCellGroup,
  },
};
</script>

<style>
.MenuDiet {
  min-height: 100%;
  box-sizing: border-box;
  background-color: #f7f8fa;
}
.MenuDiet .van-sidebar {
  width: 100px;
}
.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: 16px;
}
</style>