From be4e2d7c2b330c3b8991a0286ea16cc1285b9ec0 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 08 May 2026 17:47:32 +0800
Subject: [PATCH] feat: 微信小程序支持上传头像
---
src/subPackages/userDetail/password/index.vue | 192 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 136 insertions(+), 56 deletions(-)
diff --git a/src/subPackages/userDetail/password/index.vue b/src/subPackages/userDetail/password/index.vue
index 0dc6d3b..dd51f58 100644
--- a/src/subPackages/userDetail/password/index.vue
+++ b/src/subPackages/userDetail/password/index.vue
@@ -2,64 +2,123 @@
<template>
<view class="container">
<view class="detailBox">
- <div class="orderRow">
- <div class="rowTitle">原始密码</div>
- <u-input input-align="right" v-model="passwordForm.oldPassword" type="password" placeholder="请输入"
- class="input-item" />
- </div>
- <div class="orderRow">
- <div class="rowTitle">新密码</div>
- <u-input input-align="right" v-model="passwordForm.newPassword" type="password" placeholder="请输入"
- class="input-item" />
+ <div class="detailCon">
+ <div class="orderRow">
+ <!-- type="password" :password-icon="passwordIcon" -->
+ <div class="rowTitle">原始密码</div>
+ <input type="password" v-model="passwordForm.oldPassword" placeholder="请输入" class="input-item" />
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">新密码</div>
+ <input type="password" v-model="passwordForm.newPassword" placeholder="请输入" class="input-item" />
- </div>
- <div class="orderRow">
- <div class="rowTitle">确认密码</div>
- <u-input input-align="right" v-model="passwordForm.newPassword1" type="password" placeholder="请输入"
- class="input-item" />
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">确认密码</div>
+ <input type="password" v-model="passwordForm.newPassword1" placeholder="请输入" class="input-item" />
+ </div>
</div>
</view>
<view class="btngroup">
- <u-button color="#AEAEAE" round @click="reset">重置</u-button>
- <u-button color="#1D6FE9" round @click="submit">提交</u-button>
+ <u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button>
+ <u-button color="#1D6FE9" class="custom-style" shape="circle" @click="submit">提交</u-button>
</view>
</view>
</template>
<script setup>
+ import {
+ useUserStore
+ } from "@/store/index.js";
import md5 from "js-md5";
import {
getUserInfo,
updateInfo,
updatePassword
} from '@/api/user/index.js';
- import {
- useUserStore
- } from "@/store/index.js";
+ const passwordIcon = {
+ show: 'fas fa-eye', // 显示密码时的图标
+ hide: 'fas fa-eye-slash' // 隐藏密码时的图标
+ }
const userStore = useUserStore();
const passwordForm = ref({
oldPassword: '',
newPassword: '',
newPassword1: '',
});
+ // 校验密码不能包含中文
+ const validatePasswordNoChinese = (password) => {
+ const chineseRegex = /[\u4e00-\u9fa5]/;
+ if (chineseRegex.test(password)) {
+
+ uni.showToast({
+ title: '密码不能包含中文字符',
+ icon: 'none',
+ duration: 2000
+ });
+ return false;
+ }
+ return true;
+ };
+ // 校验密码复杂度（长度≥6位，包含字母和数字）
+ const validatePasswordStrength = (password) => {
+ if (password.length < 6) {
+
+ uni.showToast({
+ title: '密码长度不能少于6位',
+ icon: 'none',
+ duration: 2000
+ });
+ return false;
+ }
+ return true;
+ };
const clearForm = () => {
- passwordForm.value = {
- oldPassword: '',
- newPassword: '',
- newPassword1: '',
- };
+ passwordForm.value = {
+ oldPassword: '',
+ newPassword: '',
+ newPassword1: '',
};
+ };
const reset = () => {
- // passwordForm.value = {
- // id: userStore.userInfo.user_id,
- // oldPassword: '',
- // newPassword: '',
- // newPassword1: '',
- // };
clearForm();
};
const submit = () => {
+ // 原始密码校验
+ if (!passwordForm.value.oldPassword) {
+ uni.showToast({
+ title: '请输入原始密码',
+ icon: 'none',
+ duration: 2000
+ });
+ return;
+ }
+ // 中文校验
+ if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return;
+ // 新密码校验
+ if (!passwordForm.value.newPassword) {
+
+ uni.showToast({
+ title: '请输入新密码',
+ icon: 'none',
+ duration: 2000
+ });
+ return;
+ }
+ // 确认密码校验
+ if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
+
+ uni.showToast({
+ title: '两次输入的新密码不一致',
+ icon: 'none',
+ duration: 2000
+ });
+ return;
+ }
+
+ // 复杂度校验
+ if (!validatePasswordStrength(passwordForm.value.newPassword)) return;
updatePassword(md5(passwordForm.value.oldPassword),
md5(passwordForm.value.newPassword),
md5(passwordForm.value.newPassword1)).then(res => {
@@ -70,6 +129,11 @@
duration: 2000
});
clearForm();
+ userStore.setUserInfo(null)
+ uni.removeStorageSync('rememberedUser');
+ uni.reLaunch({
+ url: '/pages/login/index'
+ })
} else {
uni.showToast({
@@ -83,72 +147,88 @@
};
onShow(async () => {
-clearForm();
+ clearForm();
});
</script>
<style lang="scss" scoped>
.container {
-
width: 100%;
- // min-height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
-
- background: url('/src/static/images/user/allBg.svg') no-repeat center center;
- background-size: cover;
-
- background-attachment: fixed;
- padding-top: 20px;
-
}
.detailBox {
- width: 351px;
+ margin-top: 40rpx;
+ width: 702rpx;
- min-height: 163px;
+ min-height: 326rpx;
background: #FFFFFF;
- border-radius: 6px;
+ border-radius: 12rpx;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+ .detailCon {
+ padding: 0 24rpx;
+ }
.orderRow {
display: flex;
justify-content: space-between;
align-items: center;
- height: 48px;
- border-bottom: 1px solid #f5f5f5;
+ height: 96rpx;
+ border-bottom: 2rpx solid #f5f5f5;
color: #7b7b7b;
- padding: 0 12px;
+
.rowTitle {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
- font-size: 15px;
+ font-size: 30rpx;
color: #222324;
white-space: nowrap;
}
- ::v-deep .u-input {
+ input.input-item {
+ text-align: right;
border: none !important;
background: transparent !important;
- }
-
- ::v-deep .u-input__input {
- border: none !important;
box-shadow: none !important;
- background: transparent !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
+
+ outline: none;
+ font-size: 30rpx;
+ color: #222324;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ }
+ :deep(.uni-input-placeholder) {
+ color: #D5D5D5;
+ }
+ input.input-item::placeholder {
+ font-size: 30rpx;
}
}
}
.btngroup {
display: flex;
- margin-top: 120px;
+ position: absolute;
+ bottom: 150rpx;
}
-</style>
\ No newline at end of file
+
+ :deep(.u-button:first-child) {
+ margin-right: 30rpx !important;
+ }
+
+ .custom-style {
+ width: 276rpx;
+ height: 76rpx;
+ }
+ :deep(.u-button){
+ width: 276rpx !important;
+ height: 76rpx !important;
+ }
+</style>
--
Gitblit v1.9.3