完善版本
This commit is contained in:
@@ -0,0 +1,412 @@
|
||||
<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="edit-profile-container">
|
||||
<!-- 头像上传 -->
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-wrapper" @tap="chooseAvatar">
|
||||
<image v-if="formData.avatar" :src="formData.avatar" class="avatar-image" mode="aspectFill"></image>
|
||||
<uni-icons v-else type="person-filled" size="60" color="#ccc"></uni-icons>
|
||||
<view class="avatar-overlay">
|
||||
<uni-icons type="camera" size="20" color="#fff"></uni-icons>
|
||||
<text class="avatar-tip">更换头像</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-section">
|
||||
<view class="form-item">
|
||||
<text class="form-label">用户名</text>
|
||||
<input class="form-input" type="text" v-model="formData.username" placeholder="请输入用户名" disabled />
|
||||
<text class="form-tip">用户名不可修改</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">昵称</text>
|
||||
<input class="form-input" type="text" v-model="formData.nickname" placeholder="请输入昵称" maxlength="20" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">邮箱</text>
|
||||
<input class="form-input" type="text" v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</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'
|
||||
import authApi from '@/api/modules/auth'
|
||||
import commonApi from '@/api/modules/common'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
formData: {
|
||||
username: '',
|
||||
nickname: '',
|
||||
email: '',
|
||||
avatar: ''
|
||||
},
|
||||
originalData: {}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载用户信息
|
||||
async loadUserInfo() {
|
||||
try {
|
||||
// 从本地存储获取用户信息
|
||||
const userInfo = uni.getStorageSync('userInfo') || {}
|
||||
this.formData = {
|
||||
username: userInfo.username || '',
|
||||
nickname: userInfo.nickname || '',
|
||||
email: userInfo.email || '',
|
||||
avatar: userInfo.avatar || ''
|
||||
}
|
||||
// 保存原始数据用于对比
|
||||
this.originalData = { ...this.formData }
|
||||
} catch (error) {
|
||||
console.error('加载用户信息失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 选择头像
|
||||
chooseAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
this.uploadAvatar(tempFilePath)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传头像
|
||||
async uploadAvatar(filePath) {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '上传中...'
|
||||
})
|
||||
|
||||
// 调用上传接口
|
||||
uni.uploadFile({
|
||||
url: commonApi.upload.url,
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
uni.hideLoading()
|
||||
try {
|
||||
const data = JSON.parse(uploadRes.data)
|
||||
if (data.code === 1) {
|
||||
this.formData.avatar = data.data.url || data.data
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: data.message || '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析上传结果失败:', e)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
uni.hideLoading()
|
||||
console.error('上传失败:', error)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
console.error('上传头像失败:', error)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 保存修改
|
||||
async handleSave() {
|
||||
// 检查是否有修改
|
||||
const hasChanges = Object.keys(this.formData).some(key => {
|
||||
if (key === 'username') return false // 用户名不可修改
|
||||
return this.formData[key] !== this.originalData[key]
|
||||
})
|
||||
|
||||
if (!hasChanges) {
|
||||
uni.showToast({
|
||||
title: '未做任何修改',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
if (!this.validateForm()) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
})
|
||||
|
||||
// 调用更新用户信息接口
|
||||
const result = await memberApi.edit.put({
|
||||
nickname: this.formData.nickname,
|
||||
email: this.formData.email,
|
||||
avatar: this.formData.avatar
|
||||
})
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (result && result.code === 1) {
|
||||
// 重新获取用户信息
|
||||
const userInfoRes = await authApi.info.get()
|
||||
if (userInfoRes && userInfoRes.code === 1) {
|
||||
const updatedUserInfo = userInfoRes.data || {}
|
||||
uni.setStorageSync('userInfo', updatedUserInfo)
|
||||
this.$store.commit('setUserInfo', updatedUserInfo)
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} 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 { nickname, email } = this.formData
|
||||
|
||||
if (nickname && nickname.length < 2) {
|
||||
uni.showToast({
|
||||
title: '昵称至少2个字符',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (email) {
|
||||
const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailReg.test(email)) {
|
||||
uni.showToast({
|
||||
title: '邮箱格式不正确',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-profile-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
background: #fff;
|
||||
padding: 60rpx 0;
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:hover .avatar-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
|
||||
&: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: 60rpx;
|
||||
|
||||
&[disabled] {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<un-pages
|
||||
:show-nav-bar="true"
|
||||
nav-bar-title="个人设置"
|
||||
:show-back="true"
|
||||
:show-tab-bar="false"
|
||||
>
|
||||
<view class="profile-container">
|
||||
<!-- 设置选项 -->
|
||||
<view class="settings-section">
|
||||
<view class="section-title">账户设置</view>
|
||||
<view class="settings-list">
|
||||
<view class="setting-item" @tap="navigateToEdit">
|
||||
<view class="setting-left">
|
||||
<view class="setting-icon">
|
||||
<uni-icons type="person" size="20" color="#667eea"></uni-icons>
|
||||
</view>
|
||||
<view class="setting-content">
|
||||
<text class="setting-title">个人资料</text>
|
||||
<text class="setting-desc">修改头像、昵称、邮箱</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @tap="navigateToPassword">
|
||||
<view class="setting-left">
|
||||
<view class="setting-icon">
|
||||
<uni-icons type="locked" size="20" color="#667eea"></uni-icons>
|
||||
</view>
|
||||
<view class="setting-content">
|
||||
<text class="setting-title">修改密码</text>
|
||||
<text class="setting-desc">定期更换密码保护账户安全</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 安全提示 -->
|
||||
<view class="security-tips">
|
||||
<view class="tip-header">
|
||||
<uni-icons type="info-filled" size="18" color="#ffa500"></uni-icons>
|
||||
<text class="tip-title">安全提示</text>
|
||||
</view>
|
||||
<view class="tip-content">
|
||||
<text class="tip-text">1. 请勿将密码告知他人</text>
|
||||
<text class="tip-text">2. 定期修改密码以确保账户安全</text>
|
||||
<text class="tip-text">3. 如遇异常请及时联系客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</un-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载用户信息
|
||||
loadUserInfo() {
|
||||
// 从本地存储获取用户信息
|
||||
this.userInfo = this.$store.state.user.userInfo || {}
|
||||
},
|
||||
|
||||
// 跳转到编辑资料页面
|
||||
navigateToEdit() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ucenter/profile/edit'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到修改密码页面
|
||||
navigateToPassword() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ucenter/profile/password'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
|
||||
.user-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10rpx);
|
||||
|
||||
.avatar-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.user-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin: 20rpx 30rpx;
|
||||
animation: fadeInUp 0.6s ease-out 0.1s both;
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.setting-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.setting-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.setting-title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
margin: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||||
|
||||
.tip-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tip-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tip-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 8rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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