手机验证码倒计时

手机验证码倒计时

前端代码

<template>
    <div>
        <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>修改密码</b></div>
        <el-card style="width: 500px;margin: 80px auto">
            <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass">

                <el-form-item label="手机号" prop="custPhone">
                    <el-input v-model="form.custPhone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="workerPwd">
                    <el-input v-model="codes" autocomplete="off"></el-input>
                    <el-button style="margin-top: 10px" type="primary" :disabled="disabled" @click="goCode">获取</el-button>
                    <span v-show="mcode" style="float: right;">{{ phoneCodeTime }}s后过期</span>
                </el-form-item>
                <el-form-item style="margin: 10px" label="新密码" prop="custPwd">
                    <el-input v-model="form.custPwd" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 30px">
                    <el-button type="primary" @click="save">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</template>

<script>
    export default {
        name: "phonePassword",
        data() {
            return {
                phoneCodeTime:0,//短信验证码剩余时间
                disabled:false,
                mcode: false,
                form: {},
                codes:'',
                cod:'',
                customer:localStorage.getItem("customer") ? JSON.parse(localStorage.getItem("customer")) : null,
                rules: {
                    custPhone: [
                        {required: true, message: '请输入正确的手机号码！', trigger: 'blur'},
                        {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的手机号码!'}
                    ],
                    custPwd: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        {pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/, message: '请输入正确的密码至少8-16个字符，至少1个大写字母，1个小写字母和1个数字!'}
                    ],
                }
            }
        },
        methods: {
            save() {
                this.$refs.pass.validate((valid) => {
                    if (valid) {
                        // if (this.codes !== this.cod) {
                        //     this.$message.error("验证码错误")
                        //     return false
                        // }
                        this.form.custId = this.customer.custId
                        this.form.custAccount = this.customer.custAccount
                        this.form.phoneCode = this.codes
                        this.request.post("/front/updatePassword", this.form).then(res => {
                            if (res.code === '200') {
                                this.$message.success("修改成功")
                                this.$router.push("/loginW")
                            } else {
                                this.$message.error(res.data)
                            }
                        })
                    }
                })
            },
            goCode(){ //获取验证码
                if (this.form.custPhone !== this.customer.custPhone) {
                    this.$message.error("手机号错误")
                    return false
                }
                this.request.get("/front/goPwdphone",{
                    params: {
                        phone: this.form.custPhone
                    }
                }).then(res => {
                    if (res.code === '200') {
                        this.cod = res.data
                        console.log(this.cod+"验证码")
                        this.$message.success("已发送")
                        this.disabled=true
                        this.phoneCodeTime=0
                        this.ComputetTime(new Date())
                        this.mcode = true
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            },
            //支付倒计时
            ComputetTime(data) {
                const ts = data.getTime(),
                    tc = data.getTime();
                const cm = 1 * 60 * 1000 - (ts - tc);
                this.runBack(cm);
            },
            runBack(cm) {
                if (cm > 0) {
                    cm > 60000
                        ? (this.phoneCodeTime =
                            (new Date(cm).getMinutes() < 10
                                ? "0" + new Date(cm).getMinutes()
                                : new Date(cm).getMinutes()) +
                            ":" +
                            (new Date(cm).getSeconds() < 10
                                ? "0" + new Date(cm).getSeconds()
                                : new Date(cm).getSeconds()))
                        : (this.phoneCodeTime =
                            (new Date(cm).getSeconds() < 10
                                ? new Date(cm).getSeconds()
                                : new Date(cm).getSeconds()));
                    let _msThis = this;
                    setTimeout(function() {
                        cm -= 1000;
                        _msThis.runBack(cm);
                    }, 1000);
                } else {
                    this.disabled = false;
                    this.$message.error("验证码已失效");//调用改变订单状态接口
                }
            }
        }
    }
</script>