增加系统页

src/components/container/main-layout/MainPageLayout.vue

@@ -6,7 +6,7 @@
     <van-tabbar-item name="density" icon="home-o">指标</van-tabbar-item>
     <van-tabbar-item name="food" icon="friends-o">食物</van-tabbar-item>
     <van-tabbar-item name="cookbook" icon="search">菜谱</van-tabbar-item>
-    <van-tabbar-item name="profile" icon="setting-o">我的</van-tabbar-item>
+    <van-tabbar-item name="system" icon="setting-o">我的</van-tabbar-item>
   </van-tabbar>
 </template>
 
@@ -34,7 +34,7 @@ export default defineComponent({
         } else if (route.path.includes("/main/cookbook")) {
           active.value = "cookbook";
         } else {
-          active.value = "profile";
+          active.value = "system";
         }
       },
       {

src/main.ts

@@ -4,7 +4,6 @@ import router from "./router";
 import Vant from "vant";
 import "vant/lib/index.css";
 import "tailwindcss/tailwind.css";
-import "@/styles/style.css";
 import SimpleTypeahead from "vue3-simple-typeahead";
 import "vue3-simple-typeahead/dist/vue3-simple-typeahead.css";
 

src/router/index.ts

@@ -77,17 +77,17 @@ const routes = [
       },
       /** profile */
       {
-        path: "/main/profile",
-        name: "Profile",
+        path: "/main/system",
+        name: "System",
         components: {
-          "main-container": () => import("@/views/profile/Profile.vue"),
+          "main-container": () => import("@/views/system/System.vue"),
         },
       },
       {
-        path: "/main/profile",
+        path: "/main/system/profile",
         name: "Profile",
         components: {
-          "main-container": () => import("@/views/profile/Profile.vue"),
+          "main-container": () => import("@/views/system/Profile.vue"),
         },
       },
     ],

src/views/density/Density.vue

@@ -53,7 +53,7 @@ import ScaleChart from "./components/ScaleChart.vue";
 import LatestAnalyzer from "./components/LatestAnalyzer.vue";
 import Suggest from "./components/Suggest.vue";
 import { useRouter } from "vue-router";
-import useProfile from "@/views/profile/hooks/useProfile";
+import useProfile from "@/views/system/hooks/useProfile";
 import useStats from "./hooks/useStats";
 
 export default defineComponent({

src/views/profile/Profile.vue → src/views/system/Profile.vue

@@ -1,8 +1,5 @@
 <template>
-  <van-nav-bar title="个人中心" left-text="返回" left-arrow>
-    <template #left>
-      <van-icon name="wap-nav" size="18" @click="onClickLeft" />
-    </template>
+  <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="onClickLeft">
     <template #right>
       <van-icon name="bell" size="18" @click="onClickRight" />
     </template>
@@ -52,9 +49,11 @@ import { areaList } from "@vant/area-data";
 import { HttpMessage, VantAreaType } from "@/types/index";
 import * as crypto from "crypto-js";
 import { getProfileAction } from "@/action/profile";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   setup() {
+    const router = useRouter();
     const profile = ref<Profile>({
       name: "",
       bornTime: "",
@@ -81,9 +80,11 @@ export default defineComponent({
         .join("/");
     };
 
-    const onClickLeft = () => Toast("返回");
+    const onClickLeft = () => {
+      router.push("/main/system");
+    };
 
-    const onClickRight = () => Toast("按钮");
+    const onClickRight = () => Toast("这是一个通知");
 
     const updateProfile = () => {
       crypto.DES.decrypt(profile.value.passwd, "plan app").toString();
@@ -95,8 +96,9 @@ export default defineComponent({
       });
     });
 
-    // const saveProfile = () => {
-    // }
+    const saveProfile = () => {
+      console.log();
+    };
 
     return {
       profile,
@@ -108,7 +110,7 @@ export default defineComponent({
       onClickLeft,
       onClickRight,
       updateProfile,
-      // saveProfile
+      saveProfile,
     };
   },
 });

src/views/system/System.vue

@@ -0,0 +1,58 @@
+<template>
+  <van-nav-bar title="个人中心" left-text="返回" left-arrow>
+    <template #left>
+      <van-icon name="wap-home-o" size="18" @click="onClickLeft" />
+    </template>
+    <template #right>
+      <van-icon name="bell" size="18" @click="onClickRight" />
+    </template>
+  </van-nav-bar>
+  <div>头像</div>
+  <van-cell
+    title="用户信息"
+    size="large"
+    icon="user-circle-o"
+    @click="jumpTo('profile')"
+    is-link
+    value="查看个人信息"
+  />
+  <van-cell title="指南" size="large" icon="video-o" is-link value="指导资料" />
+</template>
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import { Toast } from "vant";
+import { useRouter } from "vue-router";
+
+export default defineComponent({
+  setup() {
+    const router = useRouter();
+
+    const onClickLeft = () => {
+      console.log();
+    };
+
+    const onClickRight = () => {
+      Toast("这是一个通知");
+    };
+
+    const jumpTo = (path: string) => {
+      switch (path) {
+        case "profile":
+          router.push("/main/system/profile");
+          break;
+      }
+    };
+
+    return {
+      onClickLeft,
+      onClickRight,
+      jumpTo,
+    };
+  },
+});
+</script>
+<style scoped lang="less">
+/deep/ .van-cell__title {
+  text-align: left;
+}
+</style>