organization-manage/src/views/password/password.vue

<template>
    <div class="login-case">
        <div class="form-case">
            <span class="Hello">Hello !</span>
            <span class="title">欢迎修改银收客开放平台代理</span>
            <el-form ref="ruleFormRef" :rules="rules" :model="form">
                <el-form-item prop="mobile">
                    <el-input class="inp" v-model="form.mobile" disabled clearable autocomplete="new-password" size="large"
                        :prefix-icon="User" placeholder="请输入手机号" style="width: 100%;" />
                </el-form-item>
                <el-form-item prop="newpassword">
                    <el-input class="inp" v-model="form.newpassword" newpassword autocomplete="new-password" size="large"
                        :prefix-icon="User" placeholder="请输入密码" style="width: 100%;" />
                </el-form-item>
                <el-form-item prop="captcha">
                    <div class="code-case">
                        <el-input class="inp" v-model="form.captcha" clearable autocomplete="new-password" size="large"
                            :prefix-icon="CircleCheck" width="100px" placeholder="验证码" />
                        <!-- <verificationCode @getCode="getCode" :key="verificationCodeKey"></verificationCode> -->
                        <el-button style="height:40px;" @click="getCaptcha"
                            :disabled="textword === '获取验证码' ? false : true">{{ textword
                            }}</el-button>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="large" :loading="loading" @click="passwords"
                        style="width: 100%;">修改密码</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script setup>
import verificationCode from "@/components/verificationCode.vue"
import { User, Lock, CircleCheck } from "@element-plus/icons-vue"
import { useUser } from "@/store/user.js"
import { register } from "@/api/user.js"
import { ElMessage } from "element-plus";
import { agentsendsms, agentresetpwd } from "@/api/password.js"
import _hook from "@/hooks/index.js";
const ruleFormRef = ref("");
const store = useUser();
const router = useRouter();
const loading = ref(false)
onMounted(() => {
    // ElMessage({
    //   message: "请使用用户名为 admin、yonghu1、yonghu2 进行登录测试，来获取不同的权限",
    //   type: "success",
    //   duration: 5000,
    // });
});
let verificationCodeKey = ref(0);
let trueCode = ref("");
const textword = ref("获取验证码");
const getCaptcha = async () => {
    if (textword.value == '获取验证码') {
        clickagentsendsms()
        console.log(textword.value, 111)
    }
    let n = 60;
    textword.value = n + "秒钟重新获取";
    const timer = setInterval(() => {
        if (n === 0) {
            clearInterval(timer);
            textword.value = "获取验证码";

        } else {
            n--;
            textword.value = n + "秒钟重新获取";
        }
    }, 1000);

}
/**
 * @description: 获取正确的验证码值
 * @param {*} captcha: 正确的验证码
 */
function getCode(captcha) {
    trueCode.value = captcha;
}

const form = reactive({
    mobile: _hook.useLocalStorage.get("userInfo").phone,
    newpassword: "",
    userType: 'MG',
    captcha: "",
});
/**
 * @description: 自定义验证 - 验证账号
 */
function checkName(rule, value, callback) {
    if (value === "") {
        callback(new Error("账号不可为空"));
    } else {
        callback();
    }
}

/**
 * @description: 自定义验证 - 验证验证码
 */
function checkCode(rule, value, callback) {
    if (value === "") {
        callback(new Error("验证码不可为空"));
    } else if (value !== trueCode.value) {
        verificationCodeKey.value++;
        callback(new Error("验证码不正确"));
    } else {
        callback();
    }
}

// form 验证
const rules = reactive({
    mobile: [{ validator: checkName, required: true, trigger: "blur" }],
    newpassword: [{ required: true, message: "密码不可为空", trigger: "blur" }],
    captcha: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
});
//验证码
async function clickagentsendsms() {
    const res = {
        mobile: form.mobile
    }
    agentsendsms(res).then((res) => {
        ElMessage.success('发送成功！')
        // router.replace("/home");
    }).catch(err => {
    });
}
// 密码
async function passwords() {
    //通过 ref 的值触发验证
    await ruleFormRef.value.validate((valid) => {
        if (valid) {
            loading.value = true
            const datares = {
                mobile: form.mobile,
                newpassword: form.newpassword,
                captcha: form.captcha
            };
            agentresetpwd(datares).then((res) => {
                ElMessage.success('修改成功')
                // 清除缓存 / token 等
                setTimeout(() => {
                    _hook.useLocalStorage.clear();
                    // 使用 reload 时，不需要调用 resetRoute() 重置路由
                    // 且刷新页面时 pinia 数据会重置
                    window.location.reload();
                }, 1500);

                // console.log(res, '返回')
                // store.setUserInfo()
                // _hook.useLocalStorage.set("token", res.userinfo.token);
                // _hook.useLocalStorage.set("userInfo", res.userinfo.userInfo);
                // ElMessage.success('修改成功')
                // loading.value = false
                // router.replace("/home");
            }).catch(err => {
                loading.value = false
            });
        }
    });
}
// 回车键触发更改操作
_hook.useKeyStroke("Enter", passwords);
</script>
  
<style lang="scss" scoped>
.login-case {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../../assets/logo_bg.png') no-repeat right bottom / contain;
}

.form-case {
    position: absolute;
    display: flex;
    flex-direction: column;
    // height: 450px;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
}

.Hello {
    font-weight: bold;
    font-size: 30px;
    color: #000;
    margin-bottom: 10px;
}

.title {
    font-weight: 600;
    font-size: 40px;
    color: #000;
    margin-bottom: 50px;
}

.code-case {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .inp {
        margin-right: 10px;
    }
}

.to_register {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    padding-bottom: 20px;
}
</style>