版本 0.1

src/App.vue

@@ -1,19 +1,27 @@
 <template>
   <div v-if="this.$store.state.isLogin" class="main-container">
-    <div class="header">header</div>
+    <HeaderVue class="header"></HeaderVue>
     <div class="main">
-      <div class="aside">aside</div>
+      <div class="aside"><AsideVue></AsideVue></div>
       <div class="section">
         <router-view></router-view>
       </div>
     </div>
-    <div class="footer">footer</div>
+    <FooterVue></FooterVue>
   </div>
   <router-view v-else></router-view>
 </template>
 
 <script>
+import HeaderVue from "./components/Header.vue";
+import AsideVue from "./components/Aside.vue";
+import FooterVue from "./components/Footer.vue";
 export default {
+  components: {
+    HeaderVue,
+    AsideVue,
+    FooterVue,
+  },
   data() {
     return {};
   },
@@ -25,15 +33,10 @@ export default {
   width: 100%;
   min-height: 800px;
   min-width: 1200px;
-  overflow: scroll;
 }
 
-.header,
-.footer {
-  widows: 100%;
-  height: 60px;
-  line-height: 60px;
-  background: #b3c0d1;
+.aside {
+  width: 220px;
 }
 
 .footer {
@@ -45,13 +48,8 @@ export default {
   display: flex;
 }
 
-.aside {
-  width: 200px;
-  height: 100%;
-}
-
 .section {
-  border: 1px solid grey;
   width: 100%;
+  overflow-y: scroll;
 }
 </style>

src/apis/fetch.js

@@ -1,7 +1,11 @@
-import { $http } from "./fetch";
+import { $http } from "./config";
 export default {
   // 员工登录
-  login(data) {
-    return $http("post", "/staff/backstage/login", data);
+  staffLogin(data) {
+    return $http("post", "staff/backstage/login", data);
+  },
+  // 小程序登录
+  miniLogin(data) {
+    return $http("post", "user/wx/login", data);
   },
 };

src/components/Aside.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-menu
+    style="width: 210px; height: 100%"
+    default-active="2"
+    class="el-menu-vertical-demo"
+    @open="handleOpen"
+    @close="handleClose"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+  >
+    <el-submenu index="1">
+      <template v-slot:title>
+        <i class="el-icon-s-unfold"></i>
+        <span>货主信息</span>
+      </template>
+      <el-menu-item index="1-1">货主列表</el-menu-item>
+      <el-menu-item index="1-2">添加货主</el-menu-item>
+    </el-submenu>
+    <el-submenu index="2">
+      <template v-slot:title>
+        <i class="el-icon-user"></i>
+        <span>船东信息</span>
+      </template>
+      <el-menu-item index="2-1">船东列表</el-menu-item>
+    </el-submenu>
+    <el-submenu index="3">
+      <template v-slot:title>
+        <i class="el-icon-ship"></i>
+        <span>船舶信息</span>
+      </template>
+      <el-menu-item index="3-1">船舶列表</el-menu-item>
+    </el-submenu>
+    <el-submenu index="4">
+      <template v-slot:title>
+        <i class="el-icon-s-data"></i>
+        <span>航次</span>
+      </template>
+      <el-menu-item index="4-1">航次列表</el-menu-item>
+      <el-menu-item index="4-2">添加航次</el-menu-item>
+    </el-submenu>
+    <el-submenu index="5">
+      <template v-slot:title>
+        <i class="el-icon-picture-outline"></i>
+        <span>鉴图/视频</span>
+      </template>
+      <el-menu-item index="5-1">鉴图/视频</el-menu-item>
+    </el-submenu>
+  </el-menu>
+</template>
+<script>
+export default {
+  setup() {
+    function handleOpen() {
+      console.log("handleOpen");
+    }
+    function handleClose() {
+      console.log("handleClose");
+    }
+
+    return {
+      handleOpen,
+      handleClose,
+    };
+  },
+};
+</script>

src/components/Footer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="copyright">
+    <div class="in" @click="goBeian">
+      Copyright © 2021 河南省汇很多科技有限公司 豫ICP备 2021029101 号
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    function goBeian() {
+      window.open("https://beian.miit.gov.cn/");
+    }
+    return {
+      goBeian,
+    };
+  },
+};
+</script>
+<style scoped>
+.copyright {
+  width: 100%;
+  height: 60px;
+  background: #b3c0d1;
+}
+
+.in {
+  width: 520px;
+  margin: 0 auto;
+  line-height: 60px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  opacity: 0.8;
+  cursor: pointer;
+}
+</style>

src/components/Header.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="header">
+    <div class="left">
+      <img class="first" src="../assets/three.png" alt="" />
+      <div class="shu"></div>
+      <img class="logo" src="../assets/white-logo.png" alt="" />
+      <div class="title">江运随手拍</div>
+    </div>
+    <div class="right">
+      <img class="user-icon" src="../assets/user.png" alt="" />
+      <div class="user">{{ userName }}</div>
+      <div class="quit" @click="quit">[退出]</div>
+    </div>
+  </div>
+</template>
+<script>
+import store from "../store";
+import router from "../router";
+
+export default {
+  setup() {
+    let userName = localStorage.staffName;
+    function quit() {
+      localStorage.clear();
+      store.commit("changeLogin", false);
+      router.push({ path: "/login" });
+    }
+    return {
+      quit,
+      userName,
+    };
+  },
+};
+</script>
+<style scoped>
+.header {
+  width: 100%;
+  height: 60px;
+  background: #212029;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left,
+.right {
+  display: flex;
+  align-items: center;
+}
+
+.first {
+  width: 22px;
+  height: 20px;
+  margin: 0 22px;
+}
+
+.shu {
+  width: 1px;
+  height: 60px;
+  background: #101015;
+  margin-right: 22px;
+}
+
+.logo {
+  width: 120px;
+  height: 40px;
+}
+
+.title {
+  font-size: 21px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  margin-left: 26px;
+}
+
+.user-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 16px;
+}
+
+.user,
+.quit {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  cursor: pointer;
+  margin-right: 16px;
+}
+</style>

src/main.js

@@ -5,17 +5,13 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import md5 from "md5";
+
 const app = createApp(App);
-app.config.globalProperties.$md5 = md5;
 
 router.beforeEach(async (to, from, next) => {
-  let userid = localStorage.userid;
-  if (userid) {
+  let id = localStorage.id;
+  if (id) {
     store.commit("changeLogin", true);
-  } else {
-    store.commit("changeLogin", false);
-  }
-  if (userid) {
     if (0 === to.matched.length) {
       next("/");
     } else if (to.path == "/login") {
@@ -24,6 +20,7 @@ router.beforeEach(async (to, from, next) => {
       next();
     }
   } else {
+    store.commit("changeLogin", false);
     if (to.path == "/login") {
       next();
     } else {
@@ -31,5 +28,8 @@ router.beforeEach(async (to, from, next) => {
     }
   }
 });
+app.config.globalProperties.check = () => {
+  console.log("check");
+};
 
 app.use(router).use(Element3).use(store).mount("#app");

src/views/index/Index.vue

@@ -1,20 +1,10 @@
-<template>
-  {{ this.$store.state.isLogin }}
-  <button @click="quit()">注销登录</button>
-</template>
+<template>index</template>
 <script>
 export default {
   data() {
     return {};
   },
-  methods: {
-    quit() {
-      console.log("quit");
-      localStorage.clear();
-      this.$store.commit("changeLogin", false);
-      this.$router.push({ path: "/login" });
-    },
-  },
+  methods: {},
   created() {},
 };
 </script>

src/views/index/Login.vue

@@ -11,16 +11,25 @@
           <div class="title-right">智慧运力运维平台</div>
         </div>
         <div class="form-container">
-          <el-form :model="ruleForm" :rules="rules">
+          <el-form :model="ruleForm" :rules="rules" ref="form">
             <el-form-item prop="phone">
-              <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
+              <el-input
+                @blur="check"
+                placeholder="请输入手机号"
+                v-model="ruleForm.phone"
+              >
                 <template v-slot:prepend>
                   <el-button icon="el-icon-mobile-phone"></el-button>
                 </template>
               </el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input placeholder="请输入密码" v-model="ruleForm.password">
+              <el-input
+                @blur="check"
+                type="password"
+                placeholder="请输入密码"
+                v-model="ruleForm.password"
+              >
                 <template v-slot:prepend>
                   <el-button icon="el-icon-lock"></el-button>
                 </template>
@@ -28,7 +37,12 @@
             </el-form-item>
             <el-form-item>
               <el-button
-                style="width: 384px; height: 48px; border-radius: 2px"
+                style="
+                  width: 384px;
+                  height: 48px;
+                  border-radius: 2px;
+                  margin-top: 40px;
+                "
                 type="primary"
                 @click="login('ruleForm')"
               >
@@ -46,34 +60,90 @@
   </div>
 </template>
 <script>
+import { ref, reactive, toRefs } from "vue";
+import { Notification } from "element3";
+import store from "../../store";
+import router from "../../router";
+
+import md5 from "md5";
+import api from "../../apis/fetch";
+
 export default {
-  data() {
-    return {
+  setup() {
+    function print() {
+      this.$check();
+    }
+    const form = ref(null);
+    const ruleForm = reactive({
       ruleForm: {
         phone: "",
         password: "",
       },
+    });
+
+    const rules = reactive({
       rules: {
         phone: [
           { required: true, message: "请输入手机号", trigger: "blur" },
           { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" },
         ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, max: 20, message: "请正确输入手机号", trigger: "blur" },
+        ],
       },
-      password: [
-        { required: true, message: "请输入密码", trigger: "blur" },
-        { min: 6, max: 20, message: "请正确输入手机号", trigger: "blur" },
-      ],
-    };
-  },
-  methods: {
-    login() {
-      this.$store.commit("changeLogin", true);
-      localStorage.setItem("userid", 3);
-      this.$router.push({ path: "/" });
-    },
-    goBeian() {
+    });
+    function check() {
+      form.value.validate((valid) => {});
+    }
+    function login() {
+      form.value.validate(async (valid) => {
+        if (valid) {
+          let { phone, password } = ruleForm.ruleForm;
+          let res = await api.staffLogin({
+            phone,
+            password: md5(password).toUpperCase(),
+          });
+          if (res.data.status == 0) {
+            Notification.success({
+              title: "成功",
+              duration: 2000,
+              message: res.data.msg,
+              type: "success",
+            });
+            let { id, staffName, staffPhone, status } = res.data.result;
+            localStorage.setItem("id", id);
+            localStorage.setItem("staffName", staffName);
+            localStorage.setItem("staffPhone", staffPhone);
+            localStorage.setItem("status", status);
+            store.commit("changeLogin", true);
+            router.replace({ path: "/" });
+          } else {
+            Notification.error({
+              title: "错误",
+              duration: 3000,
+              message: res.data.msg,
+            });
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    }
+
+    function goBeian() {
       window.open("https://beian.miit.gov.cn/");
-    },
+    }
+
+    return {
+      form,
+      ...toRefs(ruleForm),
+      ...toRefs(rules),
+      login,
+      check,
+      goBeian,
+    };
   },
 };
 </script>
@@ -151,10 +221,6 @@ export default {
   width: 384px;
 }
 
-.el-input-group {
-  border: 1px solid #0094fe !important;
-  border-radius: 5px;
-}
 .copyright {
   position: absolute;
   width: 520px;