完善版本
This commit is contained in:
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<un-pages
|
||||
:show-nav-bar="true"
|
||||
nav-bar-title="修改密码"
|
||||
:show-back="true"
|
||||
:show-tab-bar="false"
|
||||
:nav-bar-right-text="loading ? '保存中...' : '保存'"
|
||||
@nav-bar-right-click="handleSave"
|
||||
>
|
||||
<view class="password-container">
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-section">
|
||||
<view class="form-item">
|
||||
<text class="form-label">当前密码</text>
|
||||
<input
|
||||
class="form-input"
|
||||
:type="showOldPassword ? 'text' : 'password'"
|
||||
v-model="formData.oldPassword"
|
||||
placeholder="请输入当前密码"
|
||||
/>
|
||||
<uni-icons
|
||||
:type="showOldPassword ? 'eye-slash' : 'eye'"
|
||||
size="20"
|
||||
color="#999"
|
||||
@tap="toggleOldPassword"
|
||||
></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">新密码</text>
|
||||
<input
|
||||
class="form-input"
|
||||
:type="showNewPassword ? 'text' : 'password'"
|
||||
v-model="formData.newPassword"
|
||||
placeholder="请输入新密码（6-20位）"
|
||||
maxlength="20"
|
||||
/>
|
||||
<uni-icons
|
||||
:type="showNewPassword ? 'eye-slash' : 'eye'"
|
||||
size="20"
|
||||
color="#999"
|
||||
@tap="toggleNewPassword"
|
||||
></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">确认密码</text>
|
||||
<input
|
||||
class="form-input"
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
v-model="formData.confirmPassword"
|
||||
placeholder="请再次输入新密码"
|
||||
maxlength="20"
|
||||
/>
|
||||
<uni-icons
|
||||
:type="showConfirmPassword ? 'eye-slash' : 'eye'"
|
||||
size="20"
|
||||
color="#999"
|
||||
@tap="toggleConfirmPassword"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tips-section">
|
||||
<view class="tip-item">
|
||||
<uni-icons type="info" size="16" color="#666"></uni-icons>
|
||||
<text class="tip-text">密码长度为6-20个字符</text>
|
||||
</view>
|
||||
<view class="tip-item">
|
||||
<uni-icons type="info" size="16" color="#666"></uni-icons>
|
||||
<text class="tip-text">建议使用字母、数字和符号的组合</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="submit-section">
|
||||
<button class="submit-btn" @tap="handleSave" :disabled="loading">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</un-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import memberApi from '@/api/modules/member'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
formData: {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
},
|
||||
showOldPassword: false,
|
||||
showNewPassword: false,
|
||||
showConfirmPassword: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 切换当前密码显示/隐藏
|
||||
toggleOldPassword() {
|
||||
this.showOldPassword = !this.showOldPassword
|
||||
},
|
||||
|
||||
// 切换新密码显示/隐藏
|
||||
toggleNewPassword() {
|
||||
this.showNewPassword = !this.showNewPassword
|
||||
},
|
||||
|
||||
// 切换确认密码显示/隐藏
|
||||
toggleConfirmPassword() {
|
||||
this.showConfirmPassword = !this.showConfirmPassword
|
||||
},
|
||||
|
||||
// 保存修改
|
||||
async handleSave() {
|
||||
// 表单验证
|
||||
if (!this.validateForm()) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
})
|
||||
|
||||
// 调用修改密码接口
|
||||
const result = await memberApi.editpasswd.put({
|
||||
old_password: this.formData.oldPassword,
|
||||
new_password: this.formData.newPassword
|
||||
})
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (result && result.code === 1) {
|
||||
uni.showToast({
|
||||
title: '密码修改成功，请重新登录',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
// 延迟退出登录，跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.removeStorageSync('token')
|
||||
uni.removeStorageSync('userInfo')
|
||||
this.$store.commit('setUserLogout')
|
||||
uni.reLaunch({
|
||||
url: '/pages/ucenter/login/index'
|
||||
})
|
||||
}, 2000)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.message || '密码修改失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
console.error('修改密码失败:', error)
|
||||
uni.showToast({
|
||||
title: '修改失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 表单验证
|
||||
validateForm() {
|
||||
const { oldPassword, newPassword, confirmPassword } = this.formData
|
||||
|
||||
if (!oldPassword) {
|
||||
uni.showToast({
|
||||
title: '请输入当前密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!newPassword) {
|
||||
uni.showToast({
|
||||
title: '请输入新密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (newPassword.length < 6 || newPassword.length > 20) {
|
||||
uni.showToast({
|
||||
title: '密码长度为6-20个字符',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '请再次输入新密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '两次输入的密码不一致',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (oldPassword === newPassword) {
|
||||
uni.showToast({
|
||||
title: '新密码不能与当前密码相同',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.password-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 140rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.tip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-left: 12rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
margin: 40rpx 30rpx;
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user