提交

src/views/MenuDiet.vue

@@ -3,18 +3,16 @@
     <br v-if="load" />
     <br v-if="load" />
     <van-skeleton title v-if="load" :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>
+    <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 &&
@@ -23,43 +21,63 @@
         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">
+      <div v-for="(item, i) in list[value1].child" :key="i">
+        <br />
+        <van-cell-group inset :border="false">
           <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>
+            :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"
-      title="【温馨提示】每日菜品可能会临时调整，以现场提供的实际菜品为准哦~"
-    />
+    <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 {
-  DropdownMenu as vanDropdownMenu,
-  DropdownItem as vanDropdownItem,
   Cell as vanCell,
   CellGroup as vanCellGroup,
   Skeleton as vanSkeleton,
+  Tab as vanTab,
+  Tabs as vanTabs,
 } 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/tab/style/index";
+import "vant/lib/tabs/style/index";
 import "vant/lib/cell/style/index";
 import "vant/lib/cell-group/style/index";
 
@@ -80,32 +98,34 @@ export default {
   },
   mounted() {
     this.load = true;
-    menulist().then(r => {
-      this.list = (r || []).map((v, i) => {
-        v.value = i;
-        return v;
+    menulist()
+      .then(r => {
+        this.list = (r || []).map((v, i) => {
+          v.value = i;
+          return v;
+        });
+        this.load = false;
+      })
+      .catch(() => {
+        this.load = false;
       });
-      this.load = false;
-    }).catch(()=>{
-      this.load = false;
-    });
     document.title = "菜单";
   },
   computed: {},
   methods: {
     change(v) {
-      console.log(v);
+      this.value1 = v;
     },
   },
   beforeUnmount: function () {
     localStorage.token = "";
   },
   components: {
-    vanDropdownMenu,
-    vanDropdownItem,
     vanCell,
     vanSkeleton,
     vanCellGroup,
+    vanTab,
+    vanTabs,
   },
 };
 </script>
@@ -113,12 +133,16 @@ export default {
 <style>
 .MenuDiet {
   min-height: 100%;
+  font-weight: 400;
   box-sizing: border-box;
-  background-color: #f7f8fa;
+  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%;
@@ -135,4 +159,31 @@ export default {
   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>