修改密码页面

shuishen

2023-11-01 ad10438f4b300f4168e067d2fcb9746967a60b7e

修改密码页面

 pages.json

@@ -44,6 +44,16 @@
                        "navigationBarBackgroundColor": "#4586fe",
                        "navigationBarTextStyle": "white"
                    }
                },
                //修改密码
                {
                    "path": "password/index",
                    "style": {
                        "navigationBarTitleText": "修改密码",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                }
            ]
        },

 subPackage/user/password/index.vue

New file
@@ -0,0 +1,183 @@
<template>
    <view class="password">
        <view class="form-card">
            <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
            <u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
                <u-form-item labelWidth='200rpx' label="原密码" prop="oldPassword" borderBottom ref="item1">
                    <u--input v-model="model.oldPassword" placeholder='请输入原密码' border="none"></u--input>
                </u-form-item>
                <u-form-item labelWidth='200rpx' label="新密码" prop="newPassword" borderBottom ref="item1">
                    <u--input v-model="model.newPassword" placeholder='请输入新密码' border="none"></u--input>
                </u-form-item>
                <u-form-item labelWidth='280rpx' label="请再次输入新密码" prop="newPassword1" ref="item1">
                    <u--input v-model="model.newPassword1" placeholder='请再次输入新密码' border="none"></u--input>
                </u-form-item>
            </u--form>
        </view>
        <button class="confirm_btn" @click="confirm">保存</button>
    </view>
</template>

<script>
    import {
        updatePassword
    } from "@/api/system/user"
    import md5 from "../../../utils/md5.js"
    var result = ""
    export default {
        data() {
            var newPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.model.newPassword !== '') {
                        this.$refs.uForm.validateField('newPassword1');
                    }
                    callback();
                }
            };
            var newPassword1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.model.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkPassWord = (rule, value, callback) => {
                let level = []
                if (!value) {
                    return callback('密码不能为空')
                }
                if (value.length < 8) {
                    return callback('密码不少于8位')
                }
                if (value.length > 16) {
                    return callback('密码不大于16位')
                }
                // 是数字
                let isDigit = /^.*[0-9]+.*/;
                // isLowerCase 小写字母
                let isLowerCase = /^.*[a-z]+.*/;
                // isUpperCase 大写字母
                let isUpperCase = /^.*[A-Z]+.*/;
                // 特殊字符
                let regEx = /^.*[^a-zA-Z0-9]+.*/;
                // 记录匹配的次数
                let num = 0;
                if (isDigit.test(value)) {
                    num = num + 1;
                }
                if (isLowerCase.test(value)) {
                    num = num + 1;
                }
                if (isUpperCase.test(value)) {
                    num = num + 1;
                }
                if (regEx.test(value)) {
                    num = num + 1;
                }
                if (num <= 2) {
                    return callback("密码强度不足,密码至少包含三种:(1)大写字母、(2)小写字母、(3)数字、(4)特殊符号");
                }
                return callback()
            }
            return {
                showSex: false,
                model: {
                    oldPassword: '',
                    newPassword: "",
                    newPassword1: '',
                },
                rules: {
                    'oldPassword': [{
                        type: 'string',
                        required: true,
                        message: '请输入原密码',
                        trigger: ['blur', 'change']
                    }],
                    "newPassword": [{
                            type: 'string',
                            required: true,
                            message: '请输入新密码',
                            trigger: ['blur', 'change']
                        }, {
                            validator: newPassword,
                            trigger: 'blur'
                        },
                        {
                            validator: checkPassWord,
                            trigger: 'blur'
                        },
                    ],
                    "newPassword1": [{
                            type: 'string',
                            required: true,
                            message: '请输入新密码',
                            trigger: ['blur']
                        },
                        {
                            validator: newPassword1,
                            trigger: 'blur'
                        }
                    ],
                },
                radio: '',
                switchVal: false
            };
        },
        methods: {

            confirm() {
                this.$refs.uForm.validate().then(async res => {
                    const obj = {
                        newPassword: md5(this.model.newPassword),
                        oldPassword: md5(this.model.oldPassword),
                        newPassword1: md5(this.model.newPassword1),
                    }
                    const data = await updatePassword(obj).catch(err => {
                        const {
                            data
                        } = err
                        return uni.$u.toast(data.msg || "验证失败")
                    })
                    if (data.code != 200) return uni.$u.toast(data.msg)
                    uni.$u.toast("修改成功")
                    setTimeout(() => {
                        this.$u.func.globalNavigator("", "navBack")
                    }, 1500)
                })
            }
        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.uForm.setRules(this.rules)
        },
    };
</script>

<style lang="scss" scoped>
    .password {
        background-color: #e6edfa;
        padding: 20rpx 0;
        height: 100vh;

        .form-card {
            background-color: #fff;
            border-radius: 16rpx;
            margin: 0 20rpx;
            padding: 0 20rpx;
        }

        .confirm_btn {
            background: #1180ff;
            color: #fff;
            height: 72rpx;
            line-height: 72rpx;
            width: 90%;
            margin-top: 200rpx;
            border-radius: 20rpx;
        }
    }
</style>

 vue.config.js

@@ -11,7 +11,6 @@

    devServer: {
        proxy: {

            // 业务平台接口
            "/api": {
                target: "http://172.16.13.129:9528",