提交

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.6",
     "vant": "^2.12.37",
     "vue": "^2.6.11",
     "vue-router": "^3.5.3"

src/main.js

@@ -1,6 +1,10 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false;
 document.title = "美发预约系统";

src/router/index.js

@@ -26,6 +26,16 @@ const routes = [
         path: '/actionSheet',
         name: "ActionSheet",
         component: () => import("../views/ActionSheet.vue")
+    },
+    {
+        path: '/menuDiet',
+        name: "MenuDiet",
+        component: () => import("../views/MenuDiet.vue")
+    },
+    {
+        path: '/pushMenu',
+        name: "PushMenu",
+        component: () => import("../views/PushMenu.vue")
     }
 ];
 // http://djweb.smcic.net/hair/index.html#/appointment

src/views/MenuDiet.vue

@@ -0,0 +1,172 @@
+<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>

src/views/PushMenu.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="PushMenu">
+    <el-date-picker
+      v-model="value1"
+      type="week"
+      format="yyyy 第 WW 周"
+      placeholder="选择周"
+    >
+    </el-date-picker>
+    <br />
+    <br />
+    <el-upload
+      class="upload-demo"
+      drag
+      action="https://jsonplaceholder.typicode.com/posts/"
+      :before-upload="beforeUpload"
+      multiple
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件</div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+
+// import { orderList, cancel } from "../api/index";
+
+export default {
+  name: "PushMenu",
+  data() {
+    return {
+      value1: "",
+    };
+  },
+  mounted() {
+      this.value1 = new Date()
+    document.title = "上传菜单";
+  },
+  computed: {},
+  methods: {
+    beforeUpload(file) {
+      if (
+        file.type ===
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
+        file.type === "application/vnd.ms-excel"
+      ) {
+        return true;
+      }
+      this.$message.error("所选文件格式错误");
+    },
+
+  },
+  beforeUnmount: function () {
+    localStorage.token = "";
+  },
+  components: {},
+};
+</script>
+
+<style>
+.PushMenu {
+  min-height: 100%;
+  padding: 5em 5%;
+  box-sizing: border-box;
+  background-color: #fff;
+  text-align: center;
+}
+</style>