virtualSimulation/src/layout/loginPage.vue

<template>
  <div class="login_container">
    <div class="top">
      <div class="title">{{ setting.title }}</div>
    </div>
    <div class="main-content">
      <el-row style="display: flex; justify-content: center">
        <el-col>
          <el-form
            :rules="rules"
            :model="formModel"
            ref="formRef"
            size="large"
            autocomplete="off"
            v-if="isRegister"
          >
            <el-form-item prop="username">
              <el-input
                v-model="formModel.username"
                :prefix-icon="User"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="studentNumb">
              <el-input
                v-model="formModel.studentNumb"
                :prefix-icon="Avatar"
                placeholder="请输入学号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                v-model="formModel.name"
                :prefix-icon="Stamp"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="formModel.password"
                :prefix-icon="Lock"
                type="password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="repassword">
              <el-input
                v-model="formModel.repassword"
                :prefix-icon="Lock"
                type="password"
                placeholder="请输入再次密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
                class="button"
                type="primary"
                auto-insert-space
                @click="register"
              >
                注册
              </el-button>
              <el-button
                style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
                class="button"
                type="primary"
                auto-insert-space
                @click="isRegister = false"
              >
                返回到登录页
              </el-button>
            </el-form-item>
            <el-form-item> </el-form-item>
            <!-- <el-form-item class="flex">
                            <el-link type="info" :underline="false" @click="isRegister = false">
                                ← 返回
                            </el-link>
                        </el-form-item> -->
          </el-form>
          <el-form
            :model="formModel"
            :rules="rules"
            ref="formRef"
            size="large"
            autocomplete="off"
            v-else
            class="custom-form"
          >
            <el-form-item prop="username">
              <div style="display: flex; align-items: center; color: pink">
                <div class="left" style="display: flex; align-items: center">
                  <div style="padding-right: 10px; color: #1084c1">
                    <el-icon class="bold-icon">
                      <user />
                    </el-icon>
                  </div>
                  <div style="padding-right: 10px; color: #2592a1">用户名</div>
                </div>
                <div class="right">
                  <el-input
                    v-model="formModel.username"
                    style="border-color: #20bec8; background-color: pink"
                    placeholder="请输入用户名"
                  ></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="学号" prop="studentNumb">
              <el-input
                v-model="formModel.studentNumb"
                :prefix-icon="Avatar"
                placeholder="请输入学号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                name="password"
                :prefix-icon="Lock"
                type="password"
                placeholder="请输入密码"
                v-model="formModel.password"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <div class="captcha">
                <el-input
                  v-model="formModel.captcha"
                  style="height: 0.2344rem"
                  maxlength="4"
                />
                <div class="code" @click="getcodeinfo">
                  <img :src="codeUrl" alt="" srcset="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                class="hexagon-button"
                type="primary"
                auto-insert-space
                @click="login"
                >登录</el-button
              >
              <el-button
                class="hexagon-button"
                type="primary"
                auto-insert-space
                @click="isRegister = true"
                >去注册</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" :xs="0"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from "vue"
// import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting";
import { User, Lock, Avatar, Stamp } from "@element-plus/icons-vue";
import { ref } from "vue";
import userStore from "@/store/modules/user";
import { getCode } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter()
const setting = settingStore();
const user = userStore();
console.log(setting.title);

const isRegister = ref(false);
const formRef = ref();
const formModel = ref({
  username: "",
  studentNumb: "",
  name: "",
  password: "",
  repassword: "",
  captcha: "",
});
// 添加校验规则
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 5,
      max: 30,
      message: "用户名长度最小五位最大三十位",
      trigger: ["change", "blur"],
    },
  ],
  studentNumb: [
    { required: true, message: "请输入学号", trigger: "blur" },
    {
      min: 5,
      max: 11,
      message: "学号长度最小五位最大三十位",
      trigger: ["change", "blur"],
    },
  ],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      pattern: /^\S{6,15}$/,
      message: "密码长度最小六位最大十五位",
      trigger: ["change", "blur"],
    },
  ],
  repassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      max: 15,
      min: 6,
      pattern: /^\S{6,15}$/,
      message: "密码长度最小六位最大十五位",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};
const register = async () => {
  await formRef.value.validate();
  console.log("开始注册i请求");
};
const codeUrl = ref("");
const getcodeinfo = async () => {
  const res: any = await getCode(1629428467008);
  codeUrl.value = res.result;
  console.log(codeUrl.value);
};
getcodeinfo();
// import { useRouter } from 'vue-router'
// const router = useRouter()
// const goToPage=()=>{
//     router.push('/')
// }
// 登录
const login = async () => {
  await formRef.value.validate();
  let data = {
    captcha: formModel.value.captcha,
    checkKey: 1629428467008,
    password: formModel.value.password,
    username: formModel.value.username,
  };
  const res = await user.logIn(data);
  if(res){
    router.push('/')
  }
  
};
</script>

<style lang="less" scoped>
.login_container {
  position: relative;
  width: 100%;
  // height: 1080px;
  min-height: 100vh;
  background-color: #091d22;
  background: url("../assets//images/bg2.png") no-repeat;
  background-size: cover;

  .top {
    width: 100%;
    // height: 75px;
    text-align: center;
    font-size: 42px;
    line-height: 75px;
    font-style: italic;
    background: url("../assets/images/topbgc.png") no-repeat;
    // background-position: center bottom -10px;
    background-size: cover;

    .title {
      color: #fff;
    }
  }

  .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: url("../assets/images/login.png") no-repeat;
    background-position: center;
  }
  .captcha {
        width: 100%;
        height: 100%;
        position: relative;
        .code {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          width: 105px;
          height: 100%;
          // background-color: pink;
          display: flex;
          align-items: center;
          img {
            width: 100%;
            height: 100%;
          }
        }}
}

.hexagon-button {
  margin-top: 30px;
  /* 应用clip-path属性来创建六边形形状 */
  width: 180px;
  height: 50px;
  /* 使用clip-path定义按钮形状 */
  clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
  /* 模拟边框效果 */
  box-shadow: 0 0 0 2px cyan;
  background-color: #14213d;
  color: #3ad7e2;
  background-color: #0e2e5e;
  font-size: 18px;
}

// .custom-form .el-form-item__label {
//     color: #409eff;
//     /* 标签颜色 */
//     font-size: 14px;
//     font-weight: bold;
// }
// .bold-icon svg {
//     stroke-width: 9;
//     /* 加粗效果 */
// }
.el-form-item__label {
  color: #0e2e5e;
}
</style>