From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/views/common/login.vue | 326 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 326 insertions(+), 0 deletions(-)
diff --git a/src/views/common/login.vue b/src/views/common/login.vue
new file mode 100644
index 0000000..0fa2a0b
--- /dev/null
+++ b/src/views/common/login.vue
@@ -0,0 +1,326 @@
+<template>
+ <div class="login">
+ <div class="login-box">
+ <!-- <div class="top">
+ <div class="logo"><img src="~@/assets/img/login-logo.png"
+ alt=""></div>
+ </div> -->
+ <div class="mid">
+ <div class="midBg">
+ <el-form
+ :model="dataForm"
+ :rules="dataRule"
+ ref="dataForm"
+ @keyup.enter="dataFormSubmit()"
+ status-icon
+ >
+ <el-form-item prop="userName">
+ <el-input
+ class="info"
+ v-model="dataForm.userName"
+ clearable
+ placeholder="帐号"
+ ></el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ class="info"
+ v-model="dataForm.password"
+ clearable
+ show-password
+ type="password"
+ placeholder="密码"
+ ></el-input>
+ </el-form-item>
+ <!-- <el-form-item prop="googleAuthCode">
+ <el-input
+ class="info"
+ type="number"
+ clearable
+ v-model="dataForm.googleAuthCode"
+ placeholder="谷歌验证码"
+ ></el-input>
+ </el-form-item> -->
+ <!-- <el-form-item prop="captcha">
+ <el-row :gutter="20">
+ <el-col :span="14">
+ <el-input v-model="dataForm.captcha"
+ placeholder="验证码">
+ </el-input>
+ </el-col>
+ <el-col :span="10"
+ class="login-captcha">
+ <img :src="captchaPath"
+ @click="getCaptcha()"
+ alt="">
+ </el-col>
+ </el-row>
+ </el-form-item> -->
+ <el-form-item>
+ <!-- <div class="item-btn"><input type="primary"
+ :loading="loading"
+ value="登录"
+ @click="dataFormSubmit()"></div> -->
+ <el-button
+ type="primary"
+ class="infoButton"
+ :loading="loading"
+ @click="dataFormSubmit()"
+ >
+ 登录
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+
+ <div class="bottom"></div>
+ </div>
+ <Verify
+ ref="verify"
+ :captcha-type="'blockPuzzle'"
+ :img-size="{ width: '400px', height: '200px' }"
+ @success="login"
+ />
+ </div>
+</template>
+
+<script>
+import { getUUID } from "@/utils";
+import Verify from "@/components/verifition/Verify";
+import { encrypt } from "@/utils/crypto";
+export default {
+ components: {
+ Verify,
+ },
+ data() {
+ return {
+ dataForm: {
+ userName: "",
+ password: "",
+ uuid: "",
+ captcha: "",
+ googleAuthCode: "",
+ },
+ loading: false,
+ isSubmit: false,
+ dataRule: {
+ userName: [
+ { required: true, message: "账号不能为空", trigger: "blur" },
+ ],
+ password: [
+ { required: true, message: "密码不能为空", trigger: "blur" },
+ ],
+ // googleAuthCode: [
+ // { required: true, message: "谷歌验证码不能为空", trigger: "blur" },
+ // ],
+ captcha: [
+ { required: true, message: "验证码不能为空", trigger: "blur" },
+ ],
+ },
+ captchaPath: "",
+ };
+ },
+ beforeDestroy() {
+ document.removeEventListener("keyup", this.handerKeyup);
+ },
+ created() {
+ //this.getCaptcha() //图片验证
+ document.addEventListener("keyup", this.handerKeyup);
+ },
+ methods: {
+ handerKeyup(e) {
+ var keycode = document.all ? event.keyCode : e.which;
+ if (keycode === 13) {
+ this.dataFormSubmit();
+ }
+ },
+ // 提交表单
+ dataFormSubmit() {
+ this.$refs["dataForm"].validate((valid) => {
+ if (valid) {
+ this.loading = true;
+ this.login();
+ //this.$refs.verify.show() //图片验证
+ }
+ });
+ },
+ login(verifyResult) {
+ if (this.isSubmit) {
+ return
+ }
+ this.loading = true;
+ this.isSubmit = true;
+ //console.log(this.$http.adornUrl("/adminLogin"));
+ this.$http({
+ url: this.$http.adornUrl("/adminLogin"),
+ method: "post",
+ data: this.$http.adornData({
+ userName: this.dataForm.userName,
+ passWord: encrypt(this.dataForm.password),
+ // googleAuthCode: this.dataForm.googleAuthCode,
+ // 'captchaVerification': verifyResult.captchaVerification
+ }),
+ })
+ .then(({ data }) => {
+ if (data.code == 0) {
+ console.log("version = 1.0.0");
+ this.$cookie.set("Authorization", data.data.accessToken);
+ this.$router.push({ path: "/home" });
+ setTimeout(()=>{ // 防止重复提交
+ this.$login = true;
+ this.loading = false;
+ this.isSubmit = false
+ },5000)
+ } else {
+ this.$message({
+ message: data.msg,
+ type: "error",
+ });
+ setTimeout(()=>{ // 防止重复提交
+ this.$login = true;
+ this.loading = false;
+ this.isSubmit = false
+ },2000)
+ }
+ // this.$router.replace({ name: 'home' })
+ })
+ .catch(() => {
+ this.loading = false;
+ this.isSubmit = true;
+ this.$login = false;
+ });
+ },
+ // dataFormSubmit () {
+ // this.$refs['dataForm'].validate((valid) => {
+ // if (valid) {
+ // this.$http({
+ // url: this.$http.adornUrl('/login?grant_type=admin'),
+ // method: 'post',
+ // data: this.$http.adornData({
+ // 'principal': this.dataForm.userName,
+ // 'credentials': this.dataForm.password,
+ // 'sessionUUID': this.dataForm.uuid,
+ // 'imageCode': this.dataForm.captcha
+ // })
+ // }).then(({ data }) => {
+ // this.$cookie.set('Authorization', 'bearer' + data.access_token)
+ // this.$router.replace({ name: 'home' })
+ // }).catch(() => {
+ // this.getCaptcha()
+ // })
+ // }
+ // })
+ // },
+ // 获取验证码
+ getCaptcha() {
+ this.dataForm.uuid = getUUID();
+ this.captchaPath = this.$http.adornUrl(
+ `/captcha.jpg?uuid=${this.dataForm.uuid}`
+ );
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+.login {
+ width: 100%;
+ height: 100%;
+ background: url(~@/assets/img/Maskgroup.png) no-repeat top;
+ background-size: 100%;
+ position: fixed;
+}
+.mid {
+ background: url(~@/assets/img/longinBg.png) no-repeat center;
+ background-size: 100%;
+ width: 655px;
+ height: 536px;
+ padding-top: 101px;
+}
+.midBg {
+ width: 76%;
+ height: 320px;
+ background: #fff;
+ margin: 0 auto;
+ padding: 44px 0 0 56px;
+}
+.login .login-box {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ height: 100%;
+ padding-top: 10%;
+}
+.login .login-box .top {
+ margin-bottom: 30px;
+ text-align: center;
+}
+.login .login-box .top .logo {
+ font-size: 0;
+ max-width: 50%;
+ margin: 0 auto;
+}
+.login .login-box .top .company {
+ font-size: 16px;
+ margin-top: 10px;
+}
+.login .login-box .mid {
+ font-size: 14px;
+}
+.login .login-box .mid .item-btn {
+ margin-top: 10px;
+}
+.login .login-box .mid .item-btn input {
+ border: 0;
+ width: 74%;
+ height: 40px;
+ box-shadow: 0;
+ background: #1f87e8;
+ color: #fff;
+}
+.info {
+ width: 400px;
+ margin: 0 auto;
+ border-radius: 30px;
+}
+.infoButton {
+ width: 400px;
+ margin: 0 auto;
+ margin-top: 10px;
+ border-radius: 30px;
+}
+.login-captcha {
+ height: 40px;
+}
+.login .login-box .bottom {
+ position: absolute;
+ bottom: 10%;
+ width: 100%;
+ color: #999;
+ font-size: 12px;
+ text-align: center;
+}
+.el-form-item {
+ margin-bottom: 15px !important;
+}
+.info input[type="number"]::-webkit-outer-spin-button,
+.info input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+}
+::v-deep .el-input__inner {
+ background: #f4f6fa !important;
+ margin-bottom: 10px;
+ border: none;
+ border-radius: 30px;
+}
+.info::-webkit-outer-spin-button,
+.info::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+}
+</style>
--
Gitblit v1.9.3