huasheng-erp-order-system-applet/pages/mine/settings/resetPassword/index.vue

<template>
    <view class="reset-pwd-root">
        <erp-nav-bar title="修改密码" />

        <view class="pwd-form">
            <view class="form-item">
                <text class="form-label">旧密码</text>
                <input class="form-input" type="password" v-model="oldPassword" placeholder="请输入旧密码" password />
            </view>

            <view class="form-item">
                <text class="form-label">新密码</text>
                <input class="form-input" type="password" v-model="newPassword" placeholder="请输入新密码" password />
            </view>

            <view class="form-item">
                <text class="form-label">确认密码</text>
                <input class="form-input" type="password" v-model="confirmPassword" placeholder="请再次输入新密码" password />
            </view>
        </view>

        <view class="submit-area">
            <view class="submit-btn" :class="{ disabled: submitting }" @click="doSubmit">
                <text>{{ submitting ? '提交中...' : '确认修改' }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import ErpNavBar from '@/components/erp-nav-bar.vue';
import { resetPassword } from '@/api/system/employee.js';

export default {
    components: { ErpNavBar },
    data() {
        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
            submitting: false
        }
    },
    methods: {
        async doSubmit() {
            if (!this.oldPassword) {
                uni.showToast({ title: '请输入旧密码', icon: 'none' });
                return;
            }
            if (!this.newPassword) {
                uni.showToast({ title: '请输入新密码', icon: 'none' });
                return;
            }
            if (this.newPassword.length < 6) {
                uni.showToast({ title: '新密码长度不能少于6位', icon: 'none' });
                return;
            }
            if (this.newPassword !== this.confirmPassword) {
                uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' });
                return;
            }
            this.submitting = true;
            try {
                await resetPassword({
                    oldPassword: this.oldPassword,
                    newPassword: this.newPassword
                });
                uni.showToast({ title: '密码修改成功', icon: 'success' });
                setTimeout(() => {
                    uni.navigateBack();
                }, 1200);
            } catch (e) {
                uni.showToast({ title: e || '修改失败', icon: 'none' });
            } finally {
                this.submitting = false;
            }
        }
    }
}
</script>

<style scoped>
.reset-pwd-root {
    width: 100vw;
    height: 100vh;
    background: #F4F6F9;
    display: flex;
    flex-direction: column;
}

.pwd-form {
    background: #fff;
    margin: 20rpx 24rpx 0;
    border-radius: 20rpx;
    padding: 0 36rpx;
    box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.02);
}

.form-item {
    display: flex;
    align-items: center;
    min-height: 104rpx;
    border-bottom: 1rpx solid #F0F0F3;
}

.form-item:last-child {
    border-bottom: none;
}

.form-label {
    font-size: 30rpx;
    color: #1A1A2E;
    font-weight: 500;
    width: 160rpx;
    flex-shrink: 0;
}

.form-input {
    flex: 1;
    font-size: 28rpx;
    color: #1A1A2E;
}

.submit-area {
    padding: 60rpx 60rpx 0;
}

.submit-btn {
    height: 88rpx;
    border-radius: 20rpx;
    background: linear-gradient(135deg, #C1001C 0%, #E8553D 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
}

.submit-btn.disabled {
    opacity: 0.6;
}
</style>