menu

.env

@@ -1,2 +1 @@
-VUE_APP_BASE_API=/api
 VUE_APP_publicPath=/

.env.development

@@ -1 +1,2 @@
-VUE_APP_Target=http://182.92.160.141:9002/
+VUE_APP_Target=http://182.92.160.141:9002/
+VUE_APP_BASE_API=/api/

.env.production

@@ -1 +1,2 @@
-VUE_APP_Target=http://192.168.100.254:9300/
+VUE_APP_Target=http://192.168.100.254:9300/
+VUE_APP_BASE_API=/

src/api/menu.ts

@@ -0,0 +1,9 @@
+import { post } from "@/utils/request";
+import menu from "@/store/modules/menu";
+
+export const getMenu = () => {
+  post<{ tree: IMenu[] }>("/goods/type/treeData").then(
+    ([err, { tree }]) => err || menu.setList(tree)
+  );
+  return [] as IMenu[];
+};

src/components/menu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="menuDiv">
     <ul class="menuUl">
-      <li v-for="item in menuData" :key="item.value" class="menuli">
+      <li v-for="{ id, title } in items" :key="id" class="menuli">
         <router-link to="home">
-          <span class="menuLine"></span>{{ item.title }}
+          <span class="menuLine"></span>{{ title }}
           <i class="el-icon-arrow-right"></i>
         </router-link>
 
         <div class="menuCon">
           <ul class="menuConUl">
-            <li v-for="subitem in item.subList" :key="subitem.subValue">
-              {{ subitem.subTitle }}123
+            <li v-for="{ id: sid, title: st } in getSub(id)" :key="sid">
+              {{ st }}
             </li>
           </ul>
         </div>
@@ -18,72 +18,18 @@
     </ul>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      menuData: [
-        {
-          title: "文件柜",
-          value: 1,
-          subList: [
-            {
-              subTitle: "选项",
-              subValue: 11
-            },
-            {
-              subTitle: "选项",
-              subValue: 12
-            },
-            {
-              subTitle: "选项",
-              subValue: 13
-            }
-          ]
-        },
-        {
-          title: "文件柜2",
-          value: 2,
-          subList: [
-            {
-              subTitle: "选项",
-              subValue: 21
-            },
-            {
-              subTitle: "选项",
-              subValue: 22
-            },
-            {
-              subTitle: "选项",
-              subValue: 23
-            }
-          ]
-        },
-        {
-          title: "文件柜3",
-          value: 3,
-          subList: [
-            {
-              subTitle: "选项",
-              subValue: 31
-            },
-            {
-              subTitle: "xx",
-              subValue: 32
-            },
-            {
-              subTitle: "选项",
-              subValue: 33
-            }
-          ]
-        }
-      ]
-    };
+import menu from "@/store/modules/menu";
+@Component
+export default class extends Vue {
+  get items() {
+    return menu.pList;
+  }
+  getSub(pid: number) {
+    return menu.subList(pid);
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 .menuDiv {

src/store/modules/menu.ts

@@ -0,0 +1,25 @@
+import {
+  VuexModule,
+  Module,
+  getModule,
+  Mutation,
+  Action
+} from "vuex-module-decorators";
+import store from "../index";
+import { getMenu } from "@/api/menu";
+@Module({ dynamic: true, store, name: "menu" })
+class Menu extends VuexModule {
+  private list = getMenu();
+  @Mutation
+  public setList(list: IMenu[]) {
+    this.list = list;
+  }
+  get pList() {
+    return this.list.filter(({ pId }) => !pId);
+  }
+
+  get subList() {
+    return (pid: number) => this.list.filter(({ pId }) => pId === pid);
+  }
+}
+export default getModule(Menu);

src/types/global.d.ts

@@ -36,3 +36,9 @@ interface ILogin {
   loginPassword: string;
   validateCode: string;
 }
+
+interface IMenu {
+  id: number;
+  pId: number;
+  title: string;
+}

src/views/account/login.vue

@@ -82,13 +82,15 @@ export default class extends Vue {
     this.setVerifyImg();
   }
   private setVerifyImg() {
-    this.verifyImg = `/api/captcha/info/captchaImage?t=${Date.now()}`;
+    this.verifyImg = `${
+      process.env.VUE_APP_BASE_API
+    }captcha/info/captchaImage?t=${Date.now()}`;
   }
   async submit() {
     const token = await user.setToken(this.form);
     if (!token) return this.setVerifyImg();
     this.$message.success("登陆成功");
-    this.$router.push("/user"); //.catch(x => console.log("route error -", x));
+    this.$router.push("/user");
   }
 }
 </script>