From befa15de5b78167ccbcb4bb19dc3af56bcb5b2e9 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 14 May 2026 14:25:02 +0800
Subject: [PATCH] feat:增加显示、加密密码处理
---
src/pages/login/index.vue | 48 ++++++++++++++++++++++++++++++++++++++----------
1 files changed, 38 insertions(+), 10 deletions(-)
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 75d4a89..57ad7e0 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -11,8 +11,14 @@
<image :src="passwordSvg" />
<input
v-model="loginForm.password"
- type="password"
+ type="text"
+ :password="showPassword"
placeholder="请输入密码"
+ />
+ <image
+ class="pass-word-icon"
+ :src="passwordTriggerIcon"
+ @click="showPassWord"
/>
</div>
<div class="remember-password">
@@ -32,7 +38,11 @@
<image class="lowerRightCorner" :src="droneSvg" />
<!-- #ifdef MP-WEIXIN -->
- <GetPrivacy ref="privacyComponent" position="center" @allowPrivacy="allowPrivacy"/>
+ <GetPrivacy
+ ref="privacyComponent"
+ position="center"
+ @allowPrivacy="allowPrivacy"
+ />
<!-- #endif -->
</view>
</template>
@@ -43,7 +53,7 @@
import { loginByUsername } from "@/api/user/index.js";
import { useUserStore } from "@/store/index.js";
// #ifdef MP-WEIXIN
-import GetPrivacy from '@/components/GetPrivacy.vue'
+import GetPrivacy from "@/components/GetPrivacy.vue";
// #endif
import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
import { onMounted } from "vue";
@@ -52,6 +62,8 @@
const usernameSvg = getAssetsImage("/images/login/username.png");
const passwordSvg = getAssetsImage("/images/login/password.png");
const logoSvg = getAssetsImage("/images/login/logo.png");
+const passwordShow = getAssetsImage("/images/password-show.png");
+const passwordHide = getAssetsImage("/images/password-hide.png");
const userStore = useUserStore();
const loginForm = ref({
@@ -138,6 +150,16 @@
}
}
+const showPassword = ref(true);
+
+const showPassWord = () => {
+ showPassword.value = !showPassword.value;
+};
+
+const passwordTriggerIcon = computed(() => {
+ return showPassword.value ? passwordHide : passwordShow;
+});
+
// 从本地存储加载记住的密码
onMounted(() => {
const savedUserInfo = uni.getStorageSync("rememberedUser");
@@ -155,12 +177,11 @@
});
// #ifdef MP-WEIXIN
-const allowPrivacy = () =>{
-
+const allowPrivacy = () => {
// 同意隐私协议触发事件，有些接口需要同意授权后才能执行，比如获取手机号授权接口，可以在同意隐私协议后，再执行授权获取手机号接口，如果不需要可以不添加该方法
- console.log('同意隐私授权')
-}
-const privacyComponent =ref(null)
+ console.log("同意隐私授权");
+};
+const privacyComponent = ref(null);
// onShow(() =>{
// wx.getPrivacySetting({
// success: res => {
@@ -232,10 +253,16 @@
margin-right: 12rpx;
}
+ .pass-word-icon {
+ margin-left: 12rpx;
+ margin-right: 0;
+ }
+
:deep(uni-input) {
height: 40rpx;
line-height: 40rpx;
- width: 80%;
+ width: 0;
+ flex: 1;
margin-top: 20rpx;
padding: 0 !important;
}
@@ -243,7 +270,8 @@
:deep(input) {
height: 40rpx;
line-height: 40rpx;
- width: 80%;
+ width: 0;
+ flex: 1;
margin-top: 20rpx;
padding: 0 !important;
margin: 0 !important;
--
Gitblit v1.9.3