143 lines
3.2 KiB
Vue
143 lines
3.2 KiB
Vue
<template>
|
|
<view class="change-pwd-page">
|
|
<!-- 顶部导航栏 -->
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="修改登录密码"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="140rpx"
|
|
:border="false"
|
|
backgroundColor="#eeeeee"
|
|
></uni-nav-bar>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="form-wrapper">
|
|
<view class="input-row">
|
|
<input class="text-input" :password="true" v-model="oldPwd" placeholder="请输入原密码" placeholder-style="color:#c7c7c7" />
|
|
</view>
|
|
<view class="input-row">
|
|
<input class="text-input" :password="!showNewPwd" v-model="newPwd" placeholder="新密码(6~16位数字字母组合)" placeholder-style="color:#c7c7c7" />
|
|
</view>
|
|
<view class="input-row">
|
|
<input class="text-input" :password="!showConfirmPwd" v-model="confirmPwd" placeholder="确认新密码" placeholder-style="color:#c7c7c7" />
|
|
</view>
|
|
|
|
<view class="forgot" @click="goForgot">忘记密码?</view>
|
|
</view>
|
|
|
|
<!-- 底部确定按钮 -->
|
|
<view class="bottom-bar">
|
|
<button class="confirm-btn" @click="onConfirm">确 定</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import api from "@/api/api.js"
|
|
|
|
const oldPwd = ref('');
|
|
const newPwd = ref('');
|
|
const confirmPwd = ref('');
|
|
const showNewPwd = ref(false);
|
|
const showConfirmPwd = ref(false);
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
};
|
|
|
|
const goForgot = () => {
|
|
// 跳转到忘记密码或短信登录页（如无专页，这里跳到短信登录）
|
|
uni.navigateTo({ url: '/pages_app/smsLogin/smsLogin' });
|
|
};
|
|
|
|
const isStrong = (pwd) => {
|
|
return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(pwd);
|
|
};
|
|
|
|
const onConfirm = () => {
|
|
if (!oldPwd.value) {
|
|
return uni.showToast({ title: '请输入原密码', icon: 'none' });
|
|
}
|
|
if (!newPwd.value) {
|
|
return uni.showToast({ title: '请输入新密码', icon: 'none' });
|
|
}
|
|
if (!isStrong(newPwd.value)) {
|
|
return uni.showToast({ title: '密码需6-16位数字字母组合', icon: 'none' });
|
|
}
|
|
if (confirmPwd.value !== newPwd.value) {
|
|
return uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
|
|
}
|
|
|
|
api.changePassword({
|
|
old_password: oldPwd.value,
|
|
password: newPwd.value
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
uni.showToast({ title: '修改密码成功', icon: 'success' });
|
|
// 清除登录状态
|
|
uni.clearStorageSync();
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages_app/login/login'
|
|
});
|
|
}, 2000);
|
|
} else {
|
|
uni.showToast({ title: res.msg || '修改密码失败', icon: 'none' });
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.change-pwd-page {
|
|
background: #ffffff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.form-wrapper {
|
|
padding: 40rpx 30rpx 0;
|
|
}
|
|
|
|
.input-row {
|
|
margin-bottom: 30rpx;
|
|
background: #ffffff;
|
|
border: 2rpx solid #eeeeee;
|
|
border-radius: 12rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.text-input {
|
|
height: 96rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.forgot {
|
|
text-align: center;
|
|
color: #8b8b8b;
|
|
font-size: 28rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40rpx;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.confirm-btn {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
border-radius: 50rpx;
|
|
background-color: #ffffff;
|
|
border: 2rpx solid #8B2316;
|
|
color: #8B2316;
|
|
font-size: 36rpx;
|
|
}
|
|
</style>
|
|
|