新增 notFound

src/main.js

@@ -26,9 +26,10 @@ app.component("Uploader", Uploader);
 // }
 
 router.beforeEach(async (to, from, next) => {
+  console.log(to, from);
   let { token } = to.query;
   localStorage.setItem("token", token);
-  if (token) {
+  if (token && to.matched.length) {
     store.commit("changeLogin", true);
     next();
     // let rolePermission = localStorage.rolePermission?.split(",") || [];
@@ -60,10 +61,10 @@ router.beforeEach(async (to, from, next) => {
     // }
   } else {
     store.commit("changeLogin", false);
-    if (to.path == "/login") {
+    if (to.path == "/notFound") {
       next();
     } else {
-      next("/login");
+      next("/notFound");
     }
   }
 });

src/router/index.js

@@ -5,6 +5,7 @@ import {
   createRouter,
 } from "vue-router";
 import Login from "../views/index/Login.vue";
+import NotFound from "../views/index/notFound.vue";
 import Index from "../views/index/Index.vue";
 import VoyageList from "../views/voyage/voyageList.vue";
 
@@ -19,6 +20,14 @@ const router = createRouter({
       },
       component: Index,
     },
+    {
+      path: "/notFound",
+      name: "notFound",
+      meta: {
+        title: "暂无数据",
+      },
+      component: NotFound,
+    },
     {
       path: "/login",
       name: "login",

src/views/index/notFound.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="container">
+    <div class="login-box">
+      <div class="left">
+        <div class="left-up-icon"></div>
+      </div>
+      <div class="right">
+        <div class="title">
+          <!-- <img
+              class="title-logo"
+              :src="cargoOwners[currentCompanyLevelTwo]?.logoUrl"
+              alt=""
+            /> -->
+          <div class="title-left">
+            {{ cargoOwners[currentCompanyLevelTwo]?.cargoOwner }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div @click="goBeian" class="copyright">
+      Copyright © 2022 汇很多（江苏）科技有限公司 苏ICP备2022023253号-1 号
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, toRefs, computed, onMounted } from "vue";
+import { ElNotification } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+
+import md5 from "md5";
+import api from "../../apis/fetch";
+
+const form = ref(null);
+let ruleForm = ref({
+  phone: "",
+  password: "",
+});
+
+const rules = ref({
+  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" },
+  ],
+});
+function check() {
+  // form.value.validate((valid) => {});
+}
+let cargoOwners = ref({
+  // 嘉吉
+  cargill: {
+    cargoOwner: "嘉吉粮油",
+    cargoOwnerId: 1,
+    logoUrl:
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/web-static/jjly.jpg",
+  },
+
+  // 路易达孚
+  lydf: {
+    cargoOwner: "路易达孚",
+    cargoOwnerId: 2,
+    logoUrl:
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/lydf-web/lydf-logo.png",
+  },
+
+  // 泰兴邦基
+  bunge: {
+    cargoOwner: "泰兴邦基",
+    cargoOwnerId: 3,
+    logoUrl:
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/web-static/bunge.jpg",
+  },
+
+  // 双胞胎
+  twins: {
+    cargoOwnerId: 4,
+    logoUrl: "",
+  },
+
+  // 东海粮油
+  dhly: {
+    cargoOwner: "东海粮油",
+
+    cargoOwnerId: 5,
+    logoUrl:
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/%E4%B8%9C%E6%B5%B7%E7%B2%AE%E6%B2%B9/dhly.png",
+  },
+
+  // 中储粮
+  zcl: {
+    cargoOwnerId: 6,
+    logoUrl: "",
+  },
+  // 物产
+  wuchan: {
+    cargoOwner: "物产中大化工集团有限公司",
+    cargoOwnerId: 7,
+    logoUrl:
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/web-static/wuchan3.jpg",
+  },
+
+  // 浙江粮贸
+  zjlm: {
+    cargoOwnerId: 8,
+    logoUrl: "",
+  },
+
+  // 通用货主公司
+  cargo: {
+    cargoOwner: "汇很多智慧航运研发中心",
+    cargoOwnerId: 0,
+    logoUrl: "",
+  },
+  // 浙江粮海
+  zjlh: {
+    cargoOwnerId: 10,
+    logoUrl: "",
+  },
+  cargoowner: {
+    cargoOwner: "货主公司",
+  },
+});
+function login() {
+  form.value.validate(async (valid) => {
+    if (valid) {
+      let { phone, password } = ruleForm.value;
+      let env = import.meta.env.VITE_PROJECT_ENV;
+      let postData = {};
+      if (env == "release") {
+        postData = {
+          cargoOwnerId:
+            cargoOwners.value[currentCompanyLevelTwo.value]?.cargoOwnerId ||
+            cargoOwners.value["cargo"]?.cargoOwnerId,
+        };
+      }
+      let res = await api.staffLogin({
+        phone,
+        // password: md5(password).toUpperCase(),
+        password,
+        ...postData,
+      });
+      if (res.data.status == 0) {
+        let {
+          userId,
+          userName,
+          phone,
+          contactName,
+          loginAccountId,
+          rolePermission,
+        } = res.data.result;
+        if (!rolePermission.length) {
+          ElNotification.error({
+            title: "失败",
+            duration: 2000,
+            message: "暂无权限,请联系管理员",
+            type: "error",
+          });
+          return;
+        }
+        ElNotification.success({
+          title: "成功",
+          duration: 2000,
+          message: res.data.msg,
+          type: "success",
+        });
+        localStorage.setItem("userId", userId);
+        localStorage.setItem("userName", userName);
+        localStorage.setItem("phone", phone);
+        localStorage.setItem("contactName", contactName);
+        localStorage.setItem("userType", 1);
+        localStorage.setItem("loginAccountId", loginAccountId);
+        localStorage.setItem(
+          "logoUrl",
+          cargoOwners.value[currentCompanyLevelTwo.value]?.logoUrl || ""
+        );
+        rolePermission = rolePermission || [];
+        let arr = [...new Set([...rolePermission])];
+        localStorage.setItem("rolePermission", arr);
+        store.dispatch("GetBasePermissionData", localStorage.loginAccountId);
+        let res1 = await store.dispatch(
+          "GetUserPermission",
+          localStorage.loginAccountId
+        );
+
+        router.replace("/index");
+        store.commit("changeLogin", true);
+      } else {
+        ElNotification.error({
+          title: "错误",
+          duration: 3000,
+          message: res.data.msg,
+        });
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
+    }
+  });
+}
+
+function goBeian() {
+  window.open("https://beian.miit.gov.cn/");
+}
+
+let currentCompanyLevelTwo = ref("");
+let baseurl = ref("");
+function getLevel2domain() {
+  baseurl.value = window.location.href;
+  let index0 = baseurl.value.indexOf("localhost");
+  if (index0 != -1) {
+    currentCompanyLevelTwo.value = "cargo";
+  } else {
+    let index1 = baseurl.value.indexOf("http://");
+    let index2 = baseurl.value.indexOf(".");
+    let plenth;
+    if (index1 == -1) {
+      plenth = 8;
+    } else {
+      plenth = 7;
+    }
+    currentCompanyLevelTwo.value = baseurl.value.substring(plenth, index2);
+  }
+  console.log(currentCompanyLevelTwo.value);
+}
+
+onMounted(() => {
+  getLevel2domain();
+});
+</script>
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/login-back.png);
+  background-size: cover;
+}
+
+.login-box {
+  position: relative;
+  display: flex;
+  top: calc(50% - 255px);
+  left: calc(50% - 478px);
+  width: 966px;
+  height: 508px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.left {
+  height: 100%;
+  width: 450px;
+  background-image: url(../../assets/login-modal.png);
+}
+
+.left-up-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin: 24px;
+  background-image: url(../../assets/logo.png);
+  background-size: contain;
+}
+
+.right {
+  height: 100%;
+  width: 516px;
+  background: #fff;
+}
+
+.title {
+  width: 384px;
+  height: 38px;
+  display: flex;
+  margin: 0 auto;
+  align-items: center;
+  color: #333;
+  margin-top: 40px;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+
+.title-logo {
+  max-width: 50px;
+  max-height: 40px;
+  object-fit: contain;
+  margin-right: 20px;
+}
+
+.title-left {
+  font-size: 20px;
+}
+
+.title-mid {
+  font-size: 24px;
+}
+
+.title-right {
+  font-size: 20px;
+  width: 384px;
+  height: 38px;
+  margin: 0 auto;
+  text-align: center;
+  color: #333;
+}
+
+.form-container {
+  margin: 0 auto;
+  margin-top: 30px;
+  width: 384px;
+}
+
+.copyright {
+  position: absolute;
+  width: 100vw;
+  bottom: 70px;
+  text-align: center;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #aaa;
+  opacity: 0.8;
+  cursor: pointer;
+}
+</style>