ShippingService_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 #prepend>
                  <el-button :icon="Iphone" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="ruleForm.password"
              >
                <template #prepend>
                  <el-button :icon="Lock" />
                </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>
    </div>

    <div @click="goBeian" class="copyright">
      Copyright © 2022 汇很多（江苏）科技有限公司 苏ICP备2022023253号-1 号
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs } from "vue";
import { ElNotification } from "element-plus";
import store from "../../store";
import router from "../../router";
import { Iphone, Lock } from "@element-plus/icons-vue";

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

const form = ref(null);
const 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" }],
});
function check() {
  // form.value.validate((valid) => {});
}
async function login() {
  // let {data} = await cloudConfig.doc("18ed09686196068205eeb77612d641c6").get();
  // let { version } = data[0];
  // localStorage.setItem("version", version);
  form.value.validate(async (valid) => {
    if (valid) {
      let { phone, password } = ruleForm.value;
      let { data } = await api.login({
        phone,
        password,
        // password: md5(password).toUpperCase(),
      });
      if (data.status == 0) {
        ElNotification.success({
          title: "成功",
          duration: 2000,
          message: data.msg,
          type: "success",
        });
        Object.keys(data.result).forEach((key) => {
          localStorage.setItem(key, data.result[key]);
        });

        store.commit("changeLogin", true);
        router.replace({ path: "/index" });
      } else {
        ElNotification.error({
          title: "错误",
          duration: 3000,
          message: data.msg,
        });
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}

function goBeian() {
  window.open("https://beian.miit.gov.cn/");
}
</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;
  width: 105px;
  background: url(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?sign=22b9335300bbef8d04da1b9b75589f7e&t=1634706935);
  background-size: contain;
  background-repeat: no-repeat;
}

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

.title-right {
  font-size: 22px;
  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>