From dab76831fb1c486fdd307932665ed83cb0b66120 Mon Sep 17 00:00:00 2001
From: chenll <huxin@123.com>
Date: Fri, 4 Jul 2025 22:27:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=95=B4=E4=BD=93=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dkl-vue3-ui-DP/src/views/login2.vue | 329 ++++++++++++++++++++++++++++
 1 file changed, 329 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/login2.vue

diff --git a/Dkl-vue3-ui-DP/src/views/login2.vue b/Dkl-vue3-ui-DP/src/views/login2.vue
new file mode 100644
index 0000000..edb2e21
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/login2.vue
@@ -0,0 +1,329 @@
+<template>
+  <div class="login">
+    <!-- <img class="logo" src="@/assets/images/loginLogo.png" alt=""> -->
+  <div>
+    <!-- <div class="login-title">
+      欢迎使用
+
+      <strong>{{ title }}</strong>
+    </div> -->
+    <div class="loginbox">
+   <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+      <!-- <h3 class="title">{{ title }}{{ title2 }}</h3> -->
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          size="large"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          size="large"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          size="large"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-form-item class="login-btn" style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="large"
+          type="primary"
+          style="width:100%;"
+          round
+          @click.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right;" v-if="register">
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    </div>
+ 
+  </div>
+    <!--  底部  -->
+    <!-- <div class="el-login-footer">
+      <span>Copyright © 2018-2025 dkl.vip All Rights Reserved.</span>
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { getCodeImg } from "@/api/login";
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import useUserStore from '@/store/modules/user'
+
+const title = import.meta.env.VITE_APP_TITLE;
+const title2 = import.meta.env.VITE_APP_TITLE_VERSION;
+const userStore = useUserStore();
+const route = useRoute();
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+const loginForm = ref({
+  username: "",
+  password: "",
+  rememberMe: false,
+  code: "",
+  uuid: ""
+});
+
+const loginRules = {
+  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+};
+
+const codeUrl = ref("");
+const loading = ref(false);
+// 验证码开关
+const captchaEnabled = ref(true);
+// 注册开关
+const register = ref(false);
+const redirect = ref(undefined);
+
+watch(route, (newRoute) => {
+    redirect.value = newRoute.query && newRoute.query.redirect;
+}, { immediate: true });
+
+function handleLogin() {
+  proxy.$refs.loginRef.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+      if (loginForm.value.rememberMe) {
+        Cookies.set("username", loginForm.value.username, { expires: 30 });
+        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
+        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
+      } else {
+        // 否则移除
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
+      }
+      // 调用action的登录方法
+      userStore.login(loginForm.value).then(() => {
+        const query = route.query;
+        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+          if (cur !== "redirect") {
+            acc[cur] = query[cur];
+          }
+          return acc;
+        }, {});
+        router.push({ path: redirect.value || "/", query: otherQueryParams });
+      }).catch(() => {
+        loading.value = false;
+        // 重新获取验证码
+        if (captchaEnabled.value) {
+          getCode();
+        }
+      });
+    }
+  });
+}
+
+function getCode() {
+  getCodeImg().then(res => {
+    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+    if (captchaEnabled.value) {
+      codeUrl.value = "data:image/gif;base64," + res.img;
+      loginForm.value.uuid = res.uuid;
+    }
+  });
+}
+
+function getCookie() {
+  const username = Cookies.get("username");
+  const password = Cookies.get("password");
+  const rememberMe = Cookies.get("rememberMe");
+  loginForm.value = {
+    username: username === undefined ? loginForm.value.username : username,
+    password: password === undefined ? loginForm.value.password : decrypt(password),
+    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+  };
+}
+
+function getOss() {
+  //const url = new URL(window.location.href); // 如果是当前页面URL
+  const url = "https://10.22.245.209:17000/login?redirect=/largeScreen?code=b3TDXa"; // 如果是当前页面URL
+  const redirectValue = url.searchParams.get("redirect");
+  console.log(redirectValue,"redirectValue")
+  // 提取查询部分（假设redirect值总是以"/"开头，后面跟着路径和查询参数）
+  // 但这里有个问题：由于redirect实际上不是一个完整的URL，我们不能确定"/"后面是否总是跟着查询参数
+  // 在这个例子中，我们知道"/"后面是路径和查询参数，但通常我们不应该依赖这种特定的格式
+  // 然而，为了演示目的，我们将使用这种方法
+  const redirectQuery = redirectValue.split("?")[1] || ""; // 获取"?"后面的部分
+
+  // 使用URLSearchParams解析查询部分
+  const redirectParams = new URLSearchParams(redirectQuery);
+  if(redirectParams.size!=0){
+  const code = redirectParams.get("code");
+  if (code != "") {
+    // 调用action的登录方法
+      userStore.loginSso(code).then(() => {
+        const query = route.query;
+        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+          if (cur !== "redirect") {
+            acc[cur] = query[cur];
+          }
+          return acc;
+        }, {});
+        router.push({ path: redirect.value || "/", query: otherQueryParams });
+      }).catch(() => {
+        loading.value = false;
+        // 重新获取验证码
+        if (captchaEnabled.value) {
+          getCode();
+        }
+      });
+  }
+}
+}
+getCode();
+getCookie();
+// getOss();
+</script>
+
+<style lang='scss' scoped>
+.loginbox {
+  width: 100%;
+  background: #fff;
+}
+:deep(.el-checkbox__label) {
+  color: #000!important;
+}
+$height: 50px;
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  // border-radius: 6px;
+  // background: #ffffff;
+  // width: 400px;
+  // padding: 25px 25px 5px 25px;
+  width: 500px;
+  margin: 0 auto;
+  // background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  -moz-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
+  -webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
+  box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  padding: 30px;
+  .el-input {
+    height: $height;
+    input {
+      height: $height;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  // height: 40px;
+  height: $height;
+  float: right;
+  img {
+    height: 100%;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+.login {
+  position: relative;
+  .logo {
+    height: 75px;
+    max-height: 13vh;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+  }
+  &-title {
+    text-align: center;
+    color: #333;
+    font-size: 32px;
+    margin-bottom: 30px;
+  }
+  :deep(.el-form-item__content) {
+    justify-content: space-between;
+  }
+  :deep(.el-checkbox__label) {
+    color: #FFF;
+  }
+  .login-btn {
+    :deep(.el-button--large) {
+      height: $height;
+      border-radius: 25px;
+      font-size: 20px;
+    }
+  }
+}
+
+</style>