2024.2.21
This commit is contained in:
魏啾
221
src/views/password/password.vue
Normal file
221
src/views/password/password.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user