Agency_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">
          <div class="title-left">汇很多代理</div>
          <div class="title-mid">丨</div>
          <div class="title-right">智慧航运管理平台</div>
        </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>
          </el-form>
        </div>
        <div class="df aic jcc" style="margin-top: 55px">
          <img
            style="height: 20px"
            src="https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/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>
import { ref, reactive, toRefs, computed } from "vue";
import { ElNotification } from "element-plus";
import store from "../../store";
import router from "../../router";

import md5 from "md5";
import api from "../../apis/fetch";

export default {
  setup() {
    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" },
        ],
      },
    });
    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(),
            password,
            // proxyId: 31,
          });
          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);
            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({ path: store.state.menuData[0]?.items[0].path });
            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/");
    }

    return {
      form,
      ...toRefs(ruleForm),
      ...toRefs(rules),
      login,
      goBeian,
    };
  },
};
</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;
  margin-top: 100px;
}

.title-left {
  height: 38px;
  /* background: url(https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/web-static/wuchan3.jpg); */
  background-size: contain;
  background-repeat: no-repeat;
  line-height: 38px;
  /* padding-left: 46px; */
  font-size: 22px;
}

.title-mid {
  font-size: 25px;
  color: #e4e4e4;
}

.title-right {
  font-size: 28px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #434343;
  line-height: 38px;
}

.form-container {
  margin: 0 auto;
  margin-top: 60px;
  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>