hair/src/views/MenuDiet.vue

<template>
  <div class="MenuDiet">
    <br v-if="load" />
    <br v-if="load" />
    <van-skeleton title v-if="load" :row="10" />
    <van-tabs
      line-width="16"
      title-active-color="#FA6400"
      color="#FA6400"
      v-if="list.length"
      :active="value1"
      :before-change="change"
    >
      <van-tab :title="item.text" v-for="(item, i) in list" :key="i"></van-tab>
    </van-tabs>
    <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: 14px; 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-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,
  Tab as vanTab,
  Tabs as vanTabs,
} from "vant";
import "vant/lib/skeleton/style/index";
import "vant/lib/tab/style/index";
import "vant/lib/tabs/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,
    vanTab,
    vanTabs,
  },
};
</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: 16px;
}
.MenuDiet .p {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #ffb07b;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.MenuDiet .title {
  font-weight: 600;
}
.MenuDiet .t {
  text-align: center;
  line-height: 20px;
  font-size: 11px;
}
.MenuDiet .t span {
  color: #fa6400;
}
.MenuDiet .van-tabs__line {
  border-radius: 2px;
}
.MenuDiet .van-cell__label {
  color: #555555;
  padding-left: 9px;
}
</style>