From 450dc8a1e4e0d643817ffd0eee04b938cc84af74 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 07 Nov 2025 15:23:09 +0800
Subject: [PATCH] feat:修改密码成功清除记住密码
---
src/pages/login/index.vue | 348 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 239 insertions(+), 109 deletions(-)
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 9f75363..4495aca 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,134 +1,264 @@
<!-- 登录页 -->
<template>
- <view>
- <view class="login-form-wrap">
- <view class="title"> 掌控智飞</view>
- <input
- v-model="loginForm.username"
- class="u-border-bottom"
- placeholder="请输入用户名"
- />
- <input
- v-model="loginForm.password"
- class="u-border-bottom"
- type="password"
- placeholder="请输入密码"
- />
- <button class="login-btn" :style="[inputStyle]" @tap="submit">
- 登录
- <text class="i-mdi-login" />
- </button>
- </view>
- </view>
+ <view class="login-form-wrap">
+ <image class="logo" :src="logoSvg" />
+ <div class="title">掌控智飞</div>
+ <div class="user-name">
+ <image :src="usernameSvg" />
+ <input v-model="loginForm.username" placeholder="请输入用户名" />
+ </div>
+ <div class="pass-word">
+ <image :src="passwordSvg" />
+ <input v-model="loginForm.password" type="password" placeholder="请输入密码" />
+ </div>
+ <div class="remember-password">
+ <label>
+ <checkbox-group @change="toggleRemember">
+ <checkbox :checked="rememberPassword" color="#1D6FE9" style="transform:scale(0.7)" />
+ </checkbox-group>
+ 记住密码
+ </label>
+ </div>
+
+ <button class="login-btn" :style="[inputStyle]" @tap="submit">
+ 登录
+ </button>
+
+ <image class="lowerRightCorner" :src="droneSvg" />
+ </view>
</template>
<script setup>
-import md5 from "js-md5";
-import { loginByUsername } from "@/api/user/index.js";
-import { useUserStore } from "@/store/index.js";
-import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
-const userStore = useUserStore();
-const loginForm = ref({
- username: "cpz3",
- password: "cpz3@2025",
-});
-const inputStyle = computed(() => {
- const style = {};
- if (loginForm.value.username && loginForm.value.password) {
- style.color = "#fff";
- style.backgroundColor = uni.$u.color.warning;
- }
- return style;
-});
-let redirect = HOME_PATH;
+ import md5 from "js-md5";
+ import {
+ loginByUsername
+ } from "@/api/user/index.js";
+ import {
+ useUserStore
+ } from "@/store/index.js";
+ import droneSvg from '@/static/images/login/droneSvg.svg'
+ import usernameSvg from '@/static/images/login/username.svg'
+ import passwordSvg from '@/static/images/login/password.svg'
+ import logoSvg from '@/static/images/login/logo.svg'
+ import {
+ HOME_PATH,
+ LOGIN_PATH,
+ removeQueryString
+ } from "@/router";
+ import { onMounted } from 'vue';
-async function submit() {
- let userInfo = {
- tenantId: "000000",
- deptId: "",
- roleId: "",
- username: loginForm.value.username,
- password: loginForm.value.password,
- type: "account",
- code: "",
- key: "",
- };
- loginByUsername(
- userInfo.tenantId,
- userInfo.deptId,
- userInfo.roleId,
- userInfo.username,
- md5(userInfo.password),
- userInfo.type,
- userInfo.key,
- userInfo.code
- ).then((res) => {
- userStore.setUserInfo(res.data);
- uni.switchTab({
- url: "/pages/user/index",
- });
- });
-}
+ const userStore = useUserStore();
+ const loginForm = ref({
+ username: "",
+ password: "",
+ });
+ const rememberPassword = ref(false);
+ const inputStyle = computed(() => {
+ const style = {};
+ if (loginForm.value.username && loginForm.value.password) {
+ style.color = "#fff";
+ style.backgroundColor = '#1D6FE9';
+ }
+ return style;
+ });
+ let redirect = HOME_PATH;
+ function toggleRemember(e) {
+ rememberPassword.value = e.detail.value.length > 0;
+ }
-onLoad((options) => {
- if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
- redirect = decodeURIComponent(options.redirect);
- }
-});
+ async function submit() {
+ let userInfo = {
+ tenantId: "000000",
+ deptId: "",
+ roleId: "",
+ username: loginForm.value.username,
+ password: loginForm.value.password,
+ type: "account",
+ code: "",
+ key: "",
+ };
+
+ if (rememberPassword.value) {
+ uni.setStorageSync('rememberedUser', {
+ username: loginForm.value.username,
+ password: loginForm.value.password
+ });
+ } else {
+ uni.removeStorageSync('rememberedUser');
+ }
+
+ try {
+ const res = await loginByUsername(
+ userInfo.tenantId,
+ userInfo.deptId,
+ userInfo.roleId,
+ userInfo.username,
+ md5(userInfo.password),
+ userInfo.type,
+ userInfo.key,
+ userInfo.code
+ );
+ userStore.setUserInfo(res.data);
+ uni.reLaunch({
+ url: "/pages/user/index",
+ });
+ } catch (error) {
+ const errorMsg =error.data?.error_description !=="Bad credentials" ? error.data?.error_description: "登录失败，请重试";
+ uni.showToast({
+ title: errorMsg,
+ icon: "none",
+ duration: 2000
+ });
+ }
+ }
+ // 从本地存储加载记住的密码
+ onMounted(() => {
+ const savedUserInfo = uni.getStorageSync('rememberedUser');
+ console.log('记住密码',savedUserInfo)
+ if (savedUserInfo) {
+ loginForm.value.username = savedUserInfo.username;
+ loginForm.value.password = savedUserInfo.password;
+ rememberPassword.value = true;
+ }
+ });
+ onLoad((options) => {
+ if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
+ redirect = decodeURIComponent(options.redirect);
+ }
+ });
+
</script>
<style lang="scss" scoped>
-.login-form-wrap {
- @apply mt-80rpx mx-auto mb-0 w-600rpx;
+ .login-form-wrap {
+ position: relative;
+ text-align: center;
+ height: 100%;
+ width: 100%;
- .title {
- @apply mb-100rpx text-60rpx text-left font-500;
- }
+ .logo {
+ width: 127px;
+ height: 51px;
+ margin: 0 auto;
+ margin-top: 104px;
+ margin-bottom: 16px;
+ }
- input {
- @apply pb-6rpx mb-10rpx text-left;
- }
+ .lowerRightCorner {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 425.61rpx;
+ height: 316.46rpx;
+ }
- .tips {
- @apply mt-8rpx mb-60rpx;
+ .title {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 84rpx;
+ line-height: 82rpx;
+ letter-spacing: 1px;
+ text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18);
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ color: #1452D3;
+ text-align: center;
+ margin-bottom: 168rpx;
+ }
- color: $u-info;
- }
+ .user-name,
+ .pass-word {
+ display: flex;
+ //justify-content: center;
+ align-items: center;
+ margin-left: 62rpx;
+ margin-right: 58rpx;
+ height: 118rpx;
+ border-bottom: 2rpx solid #E3E3E3;
- .login-btn {
- @apply flex items-center justify-center py-12rpx px-0 text-30rpx bg-#fdf3d0 border-none;
+ image {
+ width: 40rpx;
+ height: 40rpx;
+ margin-right: 12rpx;
+ }
- color: $u-tips-color;
+ :deep(uni-input) {
+ height: 40rpx;
+ line-height: 40rpx;
+ width: 80%;
+ margin-top: 20rpx;
+ }
- &::after {
- @apply border-none;
- }
- }
+ :deep(.uni-input-placeholder) {
+ font-size: 32rpx;
+ color: #E3E3E3;
+ font-weight: 500;
+ }
+ }
- .alternative {
- @apply flex justify-between mt-30rpx;
+ .remember-password {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin-left: 62rpx;
+ margin-right: 58rpx;
+ margin-top: 20rpx;
+
+ color: #666;
+ font-size: 28rpx;
+
+ label {
+ display: flex;
+ align-items: center;
+ }
+ }
- color: $u-tips-color;
- }
-}
+ input {
+ @apply pb-6rpx mb-10rpx text-left;
+ }
-.login-type-wrap {
- @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
+ .tips {
+ @apply mt-8rpx mb-60rpx;
+ color: $u-info;
+ }
- .item {
- @apply flex items-center flex-col text-28rpx;
+ .login-btn {
+ z-index: 1;
+ @apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none;
+ background: #5a93e6;
+ color: white;
+ width: 590rpx;
+ height: 76rpx;
+ border-radius: 40rpx 40rpx 40rpx 40rpx;
+ margin-top: 100rpx;
- color: $u-content-color;
- }
-}
+ &::after {
+ @apply border-none;
+ }
+ }
-.hint {
- @apply px-40rpx py-20rpx text-24rpx;
+ .alternative {
+ @apply flex justify-between mt-30rpx;
+ color: $u-tips-color;
+ }
+ }
- color: $u-tips-color;
+ .login-type-wrap {
+ @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
- .link {
- color: $u-warning;
- }
-}
-</style>
+ .item {
+ @apply flex items-center flex-col text-28rpx;
+ color: $u-content-color;
+ }
+ }
+
+ .hint {
+ @apply px-40rpx py-20rpx text-24rpx;
+ color: $u-tips-color;
+
+ .link {
+ color: $u-warning;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3