CargoOwner_WebApp/src/views/index/Login.vue

<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 class="title-right">智慧航运管理系统</div>
        <div class="form-container">
          <el-form :model="ruleForm" :rules="rules" ref="form">
            <el-form-item prop="phone">
              <el-input 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
                type="password"
                placeholder="请输入密码"
                v-model="ruleForm.password"
              >
                <template v-slot:prepend>
                  <el-button icon="el-icon-lock"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                style="
                  width: 384px;
                  height: 48px;
                  border-radius: 2px;
                  margin-top: 40px;
                "
                type="primary"
                @click="login('ruleForm')"
              >
                登录
              </el-button>
            </el-form-item>

            <div
              style="
                text-align: center;
                text-decoration: underline;
                color: #999;
                font-size: 14px;
                cursor: pointer;
              "
              @click="router.push('/forgetPassword')"
            >
              忘记密码
            </div>
          </el-form>
        </div>
        <div class="df aic jcc" style="margin-top: 55px">
          <img
            style="height: 20px"
            src="https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/%E6%B1%87%E5%BE%88%E5%A4%9Alogo-%E5%B7%A6%E5%8F%B3.png"
            alt=""
          />
          <div
            style="
              height: 20px;
              line-height: 18px;
              font-size: 10px;
              color: #999;
              margin-left: 15px;
            "
          >
            汇很多智慧航运研发中心
          </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://frontend-1255802371.cos.ap-shanghai.myqcloud.com/web-static/jjly.jpg",
  },

  // 路易达孚
  lydf: {
    cargoOwner: "路易达孚",
    cargoOwnerId: 2,
    logoUrl:
      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/lydf-web/lydf-logo.png",
  },

  // 泰兴邦基
  bunge: {
    cargoOwner: "泰兴邦基",
    cargoOwnerId: 3,
    logoUrl:
      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/web-static/bunge.jpg",
  },

  // 双胞胎
  twins: {
    cargoOwnerId: 4,
    logoUrl: "",
  },

  // 东海粮油
  dhly: {
    cargoOwner: "东海粮油",

    cargoOwnerId: 5,
    logoUrl:
      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/%E4%B8%9C%E6%B5%B7%E7%B2%AE%E6%B2%B9/dhly.png",
  },

  // 中储粮
  zcl: {
    cargoOwnerId: 6,
    logoUrl: "",
  },
  // 物产
  wuchan: {
    cargoOwner: "物产中大化工集团有限公司",
    cargoOwnerId: 7,
    logoUrl:
      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/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: md5(md5(password)),
        ...postData,
      });
      if (res.data.status == 0) {
        let {
          userId,
          userName,
          phone,
          contactName,
          loginAccountId,
          rolePermission,
          email,
        } = 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("email", email);
        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>