epmet-work-uni/subpages/settings/pages/changePassword/changePassword.vue

<template>
    <view>
        <!-- subpages/settings/pages/changePassword/changePassword.wxml -->
        <view class="card">
            <view class="item">
                <view class="label">原密码</view>
                <view class="input">
                    <input @input="changeOldPassword" type="password" placeholder="请输入" />
                </view>
            </view>
            <view class="item">
                <view class="label">新密码</view>
                <view class="input">
                    <input @input="changeNewPassword" type="password" placeholder="请输入" />
                </view>
            </view>
            <view class="item no-pseudo">
                <view class="label">确认密码</view>
                <view class="input">
                    <input @input="changeConfirmPassword" type="password" placeholder="请输入" />
                </view>
            </view>
        </view>

        <button hover-class="btn-hover" @tap="handelSubmit">提交</button>
    </view>
</template>

<script>
// subpages/settings/pages/changePassword/changePassword.js
import { encryptedData } from '../../../../utils/index';
import api from '../../../../utils/api';
export default {
    data() {
        return {
            pubKey: '',
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getPubKey();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getPubKey() {
            api.getPubKey()
                .then((res) => {
                    this.setData({
                        pubKey: res.data
                    });
                })
                .catch((err) => {});
        },

        changeOldPassword(e) {
            this.setData({
                oldPassword: e.detail.value
            });
        },

        changeNewPassword(e) {
            this.setData({
                newPassword: e.detail.value
            });
        },

        changeConfirmPassword(e) {
            this.setData({
                confirmPassword: e.detail.value
            });
        },

        validateComplexity(pwd) {
            let regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}');
            if (!regex.test(pwd)) {
                return false;
            }
            return true;
        },

        handelSubmit(e) {
            if (!this.oldPassword) {
                uni.showToast({
                    title: '原密码不能为空',
                    icon: 'none'
                });
                return;
            }
            if (!this.newPassword) {
                uni.showToast({
                    title: '新密码不能为空',
                    icon: 'none'
                });
                return;
            }
            if (!this.confirmPassword) {
                uni.showToast({
                    title: '确认密码不能为空',
                    icon: 'none'
                });
                return;
            }
            if (!this.confirmPassword === this.newPassword) {
                uni.showToast({
                    title: '两次密码不一致',
                    icon: 'none'
                });
                return;
            }
            if (!this.validateComplexity(this.newPassword)) {
                uni.showToast({
                    title: '密码必须8-20个字符，而且同时包含大小写字母和数字',
                    icon: 'none',
                    duration: 5000
                });
                return;
            }
            let obj = {
                oldPassword: encryptedData(this.pubKey, this.oldPassword),
                newPassword: encryptedData(this.pubKey, this.newPassword),
                confirmNewPassword: encryptedData(this.pubKey, this.confirmPassword)
            };
            api.changePassword(obj)
                .then((res) => {
                    console.log(res);
                    if (res.code == 0) {
                        uni.showToast({
                            title: '修改成功',
                            duration: 3000,
                            success: function () {
                                setTimeout(() => {
                                    uni.reLaunch({
                                        url: '/pages/login/login'
                                    });
                                }, 3000);
                            }
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>
<style>
/* subpages/settings/pages/changePassword/changePassword.wxss */
page {
    padding: 20rpx;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f7f7f7;
}
.card {
    background-color: #fff;
    border-radius: 20rpx;
}
.card .item {
    display: flex;
    padding: 10rpx 30rpx;
    height: 100rpx;
    align-items: center;
    position: relative;
}
.card .item::before {
    content: '';
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 0;
    border-bottom: 2rpx solid #eaeaea;
}

.no-pseudo::before {
    display: none;
}
.card .item .label {
    width: 150rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
}
button {
    background: linear-gradient(to right, #82b4fd, #3e93fe);
    font-size: 33rpx;
    width: 600rpx !important;
    height: 84rpx;
    text-align: center;
    color: #fff;
    border-radius: 84rpx;
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-300rpx);
}
</style>