Newer
Older
urbanLifeline_YanAn / src / views / login.vue
@zhangqy zhangqy on 9 Oct 8 KB 修改登录
  1. <template>
  2. <div class="login">
  3. <!-- 顶部Logo -->
  4. <!-- <div class="TopLogo"></div> -->
  5. <div class="TopStyle"></div>
  6. <div class="TopName">延安城市生命线</div>
  7. <!-- 登录表单 -->
  8. <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
  9. <h3 class="title">登录</h3>
  10. <el-form-item prop="username">
  11. <el-input
  12. v-model="loginForm.username"
  13. style="background: #eaf1fb"
  14. type="text"
  15. size="large"
  16. auto-complete="off"
  17. placeholder="请输入账号"
  18. >
  19. <template #prefix>
  20. <span class="input-Title">账号</span>
  21. </template>
  22. </el-input>
  23. </el-form-item>
  24. <el-form-item prop="password">
  25. <el-input
  26. v-model="loginForm.password"
  27. type="password"
  28. size="large"
  29. auto-complete="off"
  30. placeholder="8-20位大小写字母+数字+特殊符号"
  31. show-password
  32. @keyup.enter="handleLogin"
  33. >
  34. <template #prefix>
  35. <span class="input-Title">密码</span>
  36. </template>
  37. </el-input>
  38. </el-form-item>
  39. <el-form-item prop="code" v-if="captchaEnabled">
  40. <el-input
  41. v-model="loginForm.code"
  42. size="large"
  43. auto-complete="off"
  44. placeholder="请输入"
  45. style="width: 63%"
  46. @keyup.enter="handleLogin"
  47. >
  48. <template #prefix>
  49. <span class="input-Title">验证码</span>
  50. </template>
  51. </el-input>
  52. <div class="login-code">
  53. <img :src="codeUrl" @click="getCode" class="login-code-img" />
  54. </div>
  55. </el-form-item>
  56. <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">
  57. 记住密码
  58. </el-checkbox>
  59. <el-form-item style="width: 100%">
  60. <el-button
  61. :loading="loading"
  62. size="large"
  63. type="primary"
  64. style="width: 100%"
  65. @click.prevent="handleLogin"
  66. class="LoginBurtton"
  67. >
  68. <span v-if="!loading">登 录</span>
  69. <span v-else>登 录 中...</span>
  70. </el-button>
  71. <div style="float: right" v-if="register">
  72. <router-link class="link-type" :to="'/register'"> 立即注册 </router-link>
  73. </div>
  74. </el-form-item>
  75. </el-form>
  76. <!-- 底部 -->
  77. <div class="el-login-footer">
  78. <!-- <span>Copyright</span> -->
  79. </div>
  80. </div>
  81. </template>
  82.  
  83. <script setup>
  84. import { getCodeImg } from "@/api/login";
  85. import Cookies from "js-cookie";
  86. import { encrypt, decrypt } from "@/utils/jsencrypt";
  87. import { EncryptAES } from "@/utils/AES.js";
  88. import useUserStore from "@/store/modules/user";
  89.  
  90. const userStore = useUserStore();
  91. const router = useRouter();
  92. const { proxy } = getCurrentInstance();
  93.  
  94. const loginForm = ref({
  95. username: "",
  96. password: "",
  97. rememberMe: false,
  98. code: "",
  99. uuid: "",
  100. });
  101.  
  102. const loginRules = {
  103. username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  104. code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
  105. password: [
  106. {
  107. min: 8,
  108. max: 20,
  109. message: "8-20位大小写字母+数字+特殊符号",
  110. required: true,
  111. trigger: "blur",
  112. validator: validPassword,
  113. },
  114. ],
  115. };
  116. function validPassword(rule, value, callback) {
  117. // 密码校验 至少8位大小写英文字母+数字+特殊符号
  118. let reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/;
  119. if (!reg.test(value)) {
  120. callback(new Error("密码8-20位大小写英文字母+数字+特殊符号"));
  121. } else {
  122. callback();
  123. }
  124. }
  125.  
  126. const codeUrl = ref("");
  127. const loading = ref(false);
  128. // 验证码开关
  129. const captchaEnabled = ref(true);
  130. // 注册开关
  131. const register = ref(false);
  132. const redirect = ref("/oneMap");
  133.  
  134. function handleLogin() {
  135. proxy.$refs.loginRef.validate((valid) => {
  136. if (valid) {
  137. loading.value = true;
  138. // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
  139. if (loginForm.value.rememberMe) {
  140. Cookies.set("usernameNF", loginForm.value.username, { expires: 30 });
  141. Cookies.set("passwordNF", encrypt(loginForm.value.password), {
  142. expires: 30,
  143. });
  144. Cookies.set("rememberMeNF", loginForm.value.rememberMe, {
  145. expires: 30,
  146. });
  147. } else {
  148. // 否则移除
  149. Cookies.remove("usernameNF");
  150. Cookies.remove("passwordNF");
  151. Cookies.remove("rememberMeNF");
  152. }
  153. // 调用action的登录方法
  154. let params = { ...loginForm.value };
  155. params.password = EncryptAES(params.password);
  156. userStore
  157. .login(params)
  158. .then(() => {
  159. router.push({
  160. path: "/oneMap",
  161. name: "oneMap",
  162. meta: { title: "一张图", icon: "dashboard", affix: true, noCache: true },
  163. query: { type: "FullScreen" },
  164. });
  165. })
  166. .catch((err) => {
  167. getCode();
  168. loading.value = false;
  169. });
  170. }
  171. });
  172. }
  173. // 获取验证码
  174. function getCode() {
  175. getCodeImg().then((res) => {
  176. captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
  177. if (captchaEnabled.value) {
  178. codeUrl.value = "data:image/gif;base64," + res.img;
  179. loginForm.value.uuid = res.uuid;
  180. }
  181. });
  182. }
  183.  
  184. function getCookie() {
  185. const username = Cookies.get("usernameNF");
  186. const password = Cookies.get("passwordNF");
  187. const rememberMe = Cookies.get("rememberMeNF");
  188. loginForm.value = {
  189. username: username === undefined ? loginForm.value.username : username,
  190. password: password === undefined ? loginForm.value.password : decrypt(password),
  191. rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  192. };
  193. }
  194.  
  195. getCode();
  196. getCookie();
  197. </script>
  198.  
  199. <style lang="scss" scoped>
  200. .login {
  201. height: 100%;
  202. background-image: url("@/assets/images/login-background.jpg");
  203. background-size: cover;
  204. position: relative;
  205. }
  206.  
  207. .TopLogo {
  208. background-image: url("@/assets/images/logo.png");
  209. background-size: cover;
  210. width: 114px;
  211. height: 36px;
  212. position: absolute;
  213. top: 33px;
  214. left: 40px;
  215. }
  216.  
  217. .TopStyle {
  218. width: 1px;
  219. height: 20px;
  220. background: #cfd0e5;
  221. position: absolute;
  222. top: 49px;
  223. left: 191px;
  224. }
  225.  
  226. .TopName {
  227. height: 26px;
  228. font-size: 26px;
  229. font-family: Source Han Sans CN;
  230. font-weight: bold;
  231. color: #000046;
  232. position: absolute;
  233. top: 39px;
  234. left: 30px;
  235. }
  236.  
  237. .login-form {
  238. position: absolute;
  239. top: 314px;
  240. right: 223px;
  241. border-radius: 6px;
  242. background: #ffffff;
  243. width: 450px;
  244. height: 462px;
  245. padding: 80px 37px 5px 49px;
  246. background-image: url("@/assets/images/LoginForm.jpg");
  247. background-size: cover;
  248. box-sizing: border-box;
  249.  
  250. .title {
  251. text-align: left;
  252. margin: 0 0 30px 0px;
  253. color: #707070;
  254. font-size: 24px;
  255. font-family: Source Han Sans CN;
  256. font-weight: 600;
  257. color: #030a1e;
  258. letter-spacing: 3px;
  259. }
  260.  
  261. .el-input {
  262. height: 40px;
  263.  
  264. input {
  265. height: 40px;
  266. }
  267. }
  268.  
  269. .input-icon {
  270. height: 39px;
  271. width: 14px;
  272. margin-left: 0px;
  273. }
  274. }
  275.  
  276. .login-tip {
  277. font-size: 13px;
  278. text-align: center;
  279. color: #bfbfbf;
  280. }
  281.  
  282. .login-code {
  283. width: 33%;
  284. height: 40px;
  285. float: right;
  286.  
  287. img {
  288. cursor: pointer;
  289. vertical-align: middle;
  290. }
  291. }
  292.  
  293. .el-login-footer {
  294. position: fixed;
  295. bottom: 40px;
  296. width: 100%;
  297. text-align: center;
  298. color: #fff;
  299. font-family: Arial;
  300. letter-spacing: 1px;
  301. height: 18px;
  302. font-size: 16px;
  303. font-family: Source Han Sans CN;
  304. font-weight: bold;
  305. color: #5266ab;
  306. }
  307.  
  308. .login-code-img {
  309. height: 40px;
  310. padding-left: 12px;
  311. }
  312.  
  313. .LoginBurtton {
  314. width: 300px;
  315. height: 40px;
  316. background: linear-gradient(90deg, #2270ff 0%, #5f98ff 100%);
  317. border-radius: 20px;
  318. }
  319.  
  320. .input-Title {
  321. width: 65px;
  322. height: 100%;
  323. text-align: left;
  324. font-size: 16px;
  325. font-family: Source Han Sans CN;
  326. font-weight: 500;
  327. color: #030a1e;
  328. position: relative;
  329.  
  330. &::after {
  331. content: "";
  332. width: 1px;
  333. height: 14px;
  334. background: #d1dff2;
  335. position: absolute;
  336. right: 0;
  337. top: 12px;
  338. }
  339. }
  340.  
  341. :deep(.el-input__wrapper) {
  342. background: #eaf1fb;
  343. border: none;
  344. }
  345. </style>