gangyan/chat_web_front/src/views/login/index.vue

<template>
  <div class="loginPage">
    <Waves></Waves>
    <div>
      <img :src="projectLogo" alt="" class="loginLogo" />
    </div>
    <div class="loginContent">
      <div class="loginTitle">
        <div>
          聚尖端之力，创多维平台
          <br />
          <span class="loginInfo">
            聚合科技动能，扩展创新疆界，引领行业跃迁升级
          </span>
        </div>
      </div>
      <div class="loginOperate">
        <img
          :src="projectLogo2"
          class="logoImg"
          alt=""
        />
        <el-form
          ref="ruleFormRef"
          label-position="top"
          label-width="auto"
          :model="ruleForm"
          :rules="rules"
          style="width: 20vw; margin-top: 5%"
          hide-required-asterisk
        >
          <el-form-item label="手机号" prop="tel">
            <el-input v-model.trim="ruleForm.tel" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="ruleForm.password" show-password />
          </el-form-item>
          <el-form-item prop="checked">
            <el-checkbox v-model="ruleForm.checked" label="" size="large" />
            <span
              >勾选即代表您阅读并同意<a
                target="_blank"
                href="http://www.metalinfo.cn/agreement.html?pageId=c03923c64e6b4d0896488212054b1742"
                style="color: #0969da"
                >《用户协议》</a
              ></span
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%; margin-top: 20px"
              @click="submitForm(ruleFormRef)"
              :disabled="isDisabled"
            >
              {{ loginTip }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { computed, ref, onMounted, reactive } from "vue";
import projectLogo from "@/assets/images/login/projectLogo-white.svg";
import projectLogo2 from "@/assets/images/login/projectLogo.svg";
import type { FormInstance, FormRules } from "element-plus";
import { fetchVerify } from "@/api";
import { useAuthStore } from "@/store";
import { useRouter } from "vue-router";
import Waves from "../../components/Waves.vue";

interface RuleForm {
  tel: string;
  password: string;
  checked: boolean;
  loginType: number;
}
interface Token {
  token: string;
  refreshToken: string;
  expiresIn: number;
}
const ruleForm = reactive<RuleForm>({
  tel: "",
  password: "",
  checked: true,
  loginType: 3,
});
const ruleFormRef = ref<FormInstance>();
const authStore = useAuthStore();
const router = useRouter();
const isDisabled = ref<Boolean>(false);
const loginTip = ref<string>("登录");

const validateChecked = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请勾选“用户协议”"));
  } else {
    callback();
  }
};
const rules = reactive<FormRules<RuleForm>>({
  tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  checked: {
    required: true,
    message: "请勾选“用户协议”",
    trigger: "blur",
    validator: validateChecked,
  },
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      isDisabled.value = true;
      loginTip.value = "登录中...";
      handleVerify();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const handleVerify = async () => {
  try {
    fetchVerify<Token>(ruleForm).then((res) => {
      if (res.code === 200) {
        authStore.setToken(res.data.token);
        router.push("/chat");
      } else {
        isDisabled.value = false;
        loginTip.value = "登录";
        ElMessage.error(res.msg);
      }
    });
  } finally {
  }
};
</script>
<style scoped lang="scss">
.loginPage {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/images/login/loginBg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
}
.loginLogo {
  position: absolute;
  height: 6.1vh;
  margin: 2rem;
}
.loginContent {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
}
.loginTitle {
  font-weight: 700;
  font-size: 7vh;
  color: white;
  display: flex;
  flex-direction: column;
}
.loginInfo {
  font-weight: 300;
  font-size: 2vh;
}
.loginOperate {
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  align-items: center;
  padding: 4vh;
  .logoImg {
    height: 5vh;
  }
}
::v-deep .is-required .el-form-item__label::after {
  content: "*";
  color: #ff0000;
  margin-left: 4px;
}
</style>