pet-system-fulfiller-app/pages/mine/settings/security/change-password/index.vue

<template>
    <view class="container">
        <!-- 自定义头部 -->
        <view class="custom-header">
            <view class="header-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);"></image>
            </view>
            <text class="header-title">修改密码</text>
            <view class="header-right"></view>
        </view>
        <view class="header-placeholder"></view>

        <view class="form-card">
            <view class="form-item">
                <text class="form-label">旧密码</text>
                <input 
                    class="form-input" 
                    type="password" 
                    v-model="oldPassword" 
                    placeholder="请输入旧密码"
                    placeholder-class="placeholder"
                />
            </view>
            <view class="form-item">
                <text class="form-label">新密码</text>
                <input 
                    class="form-input" 
                    type="password" 
                    v-model="newPassword" 
                    placeholder="请输入新密码（6-20位）"
                    placeholder-class="placeholder"
                />
            </view>
            <view class="form-item no-border">
                <text class="form-label">确认密码</text>
                <input 
                    class="form-input" 
                    type="password" 
                    v-model="confirmPassword" 
                    placeholder="请再次输入新密码"
                    placeholder-class="placeholder"
                />
            </view>
        </view>

        <view class="btn-area">
            <button class="submit-btn" @click="submitChange">确认修改</button>
        </view>
    </view>
</template>

<script>
// 引入 API @author steelwei
import { updatePassword } from '@/api/fulfiller/fulfiller'

export default {
    data() {
        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        }
    },
    methods: {
        navBack() {
            uni.navigateBack({ delta: 1 });
        },
        
        // 提交修改 @author steelwei
        async submitChange() {
            // 验证输入
            if (!this.oldPassword) {
                uni.showToast({ title: '请输入旧密码', icon: 'none' });
                return;
            }
            if (!this.newPassword) {
                uni.showToast({ title: '请输入新密码', icon: 'none' });
                return;
            }
            if (this.newPassword.length < 6 || this.newPassword.length > 20) {
                uni.showToast({ title: '密码长度为6-20位', icon: 'none' });
                return;
            }
            if (this.newPassword !== this.confirmPassword) {
                uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
                return;
            }
            
            uni.showLoading({ title: '提交中...' });
            try {
                const res = await updatePassword(this.oldPassword, this.newPassword);
                
                if (res.code === 200) {
                    uni.showToast({ 
                        title: '修改成功', 
                        icon: 'success',
                        duration: 2000
                    });
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 });
                    }, 2000);
                } else {
                    uni.showToast({ 
                        title: res.msg || '修改失败', 
                        icon: 'none' 
                    });
                }
            } catch (error) {
                console.error('修改密码失败:', error);
                uni.showToast({ title: error.message || error.msg || '请求失败', icon: 'none' });
            } finally {
                uni.hideLoading();
            }
        }
    }
}
</script>

<style>
page {
    background-color: #F8F8F8;
}
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: content-box;
    z-index: 100;
}
.header-placeholder {
    height: calc(88rpx + var(--status-bar-height));
}
.back-icon {
    width: 40rpx;
    height: 40rpx;
}
.header-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}
.header-right {
    width: 40rpx;
}

.container {
    padding: 20rpx 30rpx;
}
.form-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
}
.form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid #F5F5F5;
}
.form-item.no-border {
    border-bottom: none;
}
.form-label {
    width: 160rpx;
    font-size: 28rpx;
    color: #333;
}
.form-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}
.placeholder {
    color: #999;
}

.btn-area {
    padding: 40rpx 0;
}
.submit-btn {
    background-color: #FF5722;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    height: 88rpx;
    line-height: 88rpx;
    border: none;
}
</style>