feat:修改密码成功清除记住密码

张含笑

2025-11-07 450dc8a1e4e0d643817ffd0eee04b938cc84af74

 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>