water_affairs/pages/index/mine-modules/changePassword.vue

<template>
    <view>
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="content">
                修改密码
            </block>
        </cu-custom>
        <view class="box">
            <view class="label">原密码</view>
            <u-input placeholder="原密码" type="password" border="surround" v-model="password" />
            <view class="label">新密码</view>
            <u-input placeholder="新密码" type="password" border="surround" v-model="newPassword" />
            <view class="label">确认密码</view>
            <u-input placeholder="确认密码" type="password" border="surround" v-model="verifyNewPassword" />
        </view>
        <view class="but-box">
            <u-button hairline text="修 改" :disabled="!password || !newPassword || !verifyNewPassword" :loading="loading"
                loadingText="修改中 ..." color="rgb(10, 57, 113)" @click="onClick" />
        </view>
    </view>
</template>
<!--  -->
<script>
import { hexMD5 } from "../../login/modules/md5";
export default {
    name: "changePassword",
    data() {
        return {
            loading: false,
            password: "", //原密码
            newPassword: "", //新密码
            verifyNewPassword: "" //确认密码
        }
    },
    methods: {
        /* 修改密码 */
        onClick() {
            this.loading = true;
            let that = this;
            if (this.newPassword != this.verifyNewPassword) return uni.showToast({
                title: '两遍密码不一致!',
                duration: 2000,
                icon: "none"
            });
            uni.showModal({
                title: '提示',
                content: '是否确定修改登录密码',
                success: (success) => {
                    that.$Http.basic({
                        id: 20230608105202,
                        "content": {
                            "password": hexMD5(that.password),
                            "newpassword": hexMD5(that.newPassword)
                        }
                    }).then(res => {
                        console.log("修改登录密码", res)
                        that.loading = false;
                        uni.showToast({
                            title: res.data == '失败' ? res.msg : '修改成功,请重新登陆',
                            icon: "none",
                            mask: res.data == '成功'
                        });
                        if (res.data == '成功') setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/login/login'
                            });
                        }, 1000)
                    })
                },
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.box {
    width: 355px;
    margin: 0 auto;

    .label {
        color: #fff;
        font-size: 12px;
        margin: 10px 4px;
    }

    /deep/ .u-input {
        background: #fff;
    }

    /deep/ .uni-input-placeholder {
        font-size: 10px;
    }
}

.but-box {
    width: 355px;
    margin: 60px auto 0;
    opacity: .8;

    /deep/.u-button__text {
        font-size: 14px !important;
    }
}
</style>