ch-tgr/src/views/Account/ResetPwd.vue

<template>
    <BasePage />

    <div class="ResetPwd login">
        <div class="logo">
            <div class="fonts">
                <b>找回密码</b>
            </div>
        </div>
        <div class="contaiar">
            <div class="lg_box">
                <form action="">
                    <div class="line">
                        <div class="title">
                            <img src="/img/login-i1.png" alt="">
                            <input type="phone" maxlength="11" placeholder="请输入账号(手机号)" v-model="data.cellphone"
                                onblur="window.scrollTo(0, 0);" />
                            <van-icon @click="data.cellphone = ''" name="cross" size="5vw"></van-icon>
                        </div>
                    </div>

                    <div class="line">
                        <div class="title">
                            <img src="/img/login-i2.png" alt="">
                            <input type="text" placeholder="请输入验证码" v-model="data.code" maxlength="6"
                                onblur="window.scrollTo(0, 0);" />
                            <van-button class="hqyzm" @click="sendCode" :disabled="isSend">
                                {{ isSend ? `已发送(${remainTime}s)` : "获取验证码" }}
                            </van-button>
                        </div>
                    </div>

                    <div class="line">
                        <div class="title">
                            <img src="/img/login-i3.png" alt="">
                            <input :type="show1 ? 'text' : 'password'" placeholder="请输入新的登录密码" v-model="data.password"
                                @keydown.enter="login" onblur="window.scrollTo(0, 0);" />
                            <van-icon @click="show1 = true" name="eye-o" size="5vw" v-if="!show1"></van-icon>
                            <van-icon @click="show1 = false" name="closed-eye" size="5vw" v-else></van-icon>
                        </div>
                    </div>

                    <div class="line">
                        <div class="title">
                            <img src="/img/login-i4.png" alt="">
                            <input :type="show2 ? 'text' : 'password'" placeholder="请再次输入登录密码" v-model="data.RePassword"
                                @keydown.enter="login" onblur="window.scrollTo(0, 0);" />
                            <van-icon @click="show2 = true" name="eye-o" size="5vw" v-if="!show2"></van-icon>
                            <van-icon @click="show2 = false" name="closed-eye" size="5vw" v-else></van-icon>
                        </div>
                    </div>

                    <van-button class="submit" type="commit" @click="reset" :loading="loading"
                        loading-text="提交中..">确认修改</van-button>

                </form>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    name: 'ResetPwd',
    mounted() {
        this.init();
    },
    data() {
        return {
            data: {},
            isSend: false,
            remainTime: 0,
            inputError: {},
            show1: false,
            show2: false,
        }
    },
    methods: {
        init() {
        },
        valid(field, msg) {
            if (!field) {
                this.$showFailToast(msg);
                return false;
            }
            return true;
        },
        reset() {
            if (!this.valid(this.data.cellphone, "请输入账号"))
                return;
            // if (!this.valid(this.data.Phone, "请输入绑定手机号"))
            //     return;
            if (!this.valid(this.data.code, '请输入验证码'))
                return;
            if (!this.valid(this.data.password, '请输入密码'))
                return;
            if (!this.valid(this.data.RePassword, '再输入确认密码'))
                return;

            if (this.data.password != this.data.RePassword) {
                this.$showFailToast("两次密码输入不一致");
                this.inputError.password = true;
                return;
            }
            else {
                this.inputError.password = false;
            }

            this.$post('/v1/client/AuthClient/findpwd', this.data).then(res => {
                this.$showDialog({
                    title: '密码重置成功！',
                    message: '点击确认登录中心重新登录',
                    theme: 'round-button',
                    confirmButtonText: '确定',
                }).then(() => {
                    location.replace('#/Login');
                });

            }).catch(err => {
                this.$showFailToast(err.message);
            });
        },
        sendCode() {
            if (this.isSend) return;

            // if (
            //     !this.data.Phone ||
            //     !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.data.Phone)
            // ) {
            //     this.$showToast({
            //         type: "fail",
            //         message: "手机格式不正确，请检查手机号",
            //     });
            //     return;
            // }
            this.$post('/v1/client/AuthClient/sendcode', {
                "purpose": "findpwd",
                "cellphone": this.data.cellphone
            })
                .then((data) => {
                    this.$showSuccessToast('发送成功');
                    this.isSend = true;
                    this.remainTime = 60;
                    let id = setInterval(() => {
                        if (this.remainTime > 0) this.remainTime--;
                        else {
                            clearInterval(id);
                            this.isSend = false;
                        }
                    }, 1000);
                })
                .catch((err) => {
                    this.$showFailToast(err.message);
                });
        },
    }
}
</script>