Skip to content

M
mcep-h5
提交 e044929d 编写于 作者: “grape”'s avatar “grape”
浏览文件
操作

优化 登录注册与密码修改

上级 68d1b995
显示空白字符变更
内嵌 并排
正在显示 包含 124 行增加 和 25 行删除
src/constants/api/login/forget-pass-mgt.ts
浏览文件 @ e044929d
......@@ -21,7 +21,7 @@ const prefix = process.env.VUE_APP_MS_GATEWAY_API + "/ms-system/api/v1/cust-logi
const forgetPassAPI = {
ForgetPass: {
url: prefix + "/changePassword",
url: prefix + "/forgetPassword",
method: MethodType.POST.code,
header: HeaderType.AUTH.code,
},
......
src/views/authentication/LoginView.vue
浏览文件 @ e044929d
......@@ -77,7 +77,7 @@
</van-field>
</van-col>
<van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a style=" color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
<van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a :class="smsCss" style=" color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
</van-row>
</div>
......@@ -120,6 +120,8 @@ import { log } from "mathjs";
[VanImage.name]: VanImage,
})
export default class LoginView extends Vue {
smsCss=""
getCmstotal = "获取验证码";
tatleName = "用户登录";
loginNo: string = "";//登录账号
......@@ -135,8 +137,20 @@ export default class LoginView extends Vue {
//方法
created(){
//获取保存的登录账号
if(localStorage.getItem("loginNo")!=null)
this.loginNo = String(localStorage.getItem("loginNo"));
//获取验证码剩余时间，并启动倒计时 ,禁用超链接
if(localStorage.getItem("smsTime")!=null){
this.time =Number(localStorage.getItem("smsTime"));
this.changeCmstotal();
this.smsCss="smsCss"
this.noChange(this.loginNo);
}
}
noChange(s:string){
......@@ -173,38 +187,57 @@ export default class LoginView extends Vue {
}
});
}
//计时器
//计时器TODO 多次点击
changeCmstotal() {
localStorage.setItem("smsTime",String(this.time))
this.getCmstotal = this.time + "s重发验证码";
this.timer = setInterval(() => {
this.time--;
//倒计时存入localStorage 防止刷新页面 丢失
localStorage.setItem("smsTime",String(this.time))
this.getCmstotal = this.time + "s重发验证码";
if (this.time < 0) {
clearInterval(this.time)
this.getCmstotal = "获取短信验证码";
localStorage.removeItem("smsTime");
this.smsCss=""
clearInterval(this.timer)
this.getCmstotal = "获取验证码";
}
}, 1000)
}
//获取短信验证码
getPhonePost() {
let param = {
phoneCode: this.loginNo
}
//禁用 超链接并设置倒计时时间
this.smsCss="smsCss"
this.time=60;
apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
if (response.code == Code.SUCCESS.code) {
Toast('短信发送成功，5分钟有效');
//开始倒计时
this.changeCmstotal()
} else {
Toast('短信发送失败,请重试');
//取消不可点击
this.smsCss=""
//删除缓存
localStorage.removeItem("smsTime")
//删除定时任务
clearInterval(this.timer)
}
})
}
loginSystem() {
//TODO
//登录失败刷新
//验证码失败刷新
//this._updatePicCode();
let param = {
loginNo: this.loginNo,
......@@ -231,10 +264,10 @@ export default class LoginView extends Vue {
}
})
//登录成功后保存账号
localStorage.setItem('loginNo', this.loginNo);
// localStorage.setItem('loginNo', this.loginNo);
} else {
// this._updatePicCode();
Toast(response.msg + "");
// Toast(response.msg + "");
}
});
}
......@@ -330,6 +363,10 @@ export default class LoginView extends Vue {
background-color: #fff;
}
::v-deep .smsCss{
cursor: pointer;
pointer-events: none;
}
// .login{
// margin-top: 20%;
// }
......
src/views/login/ForgetPassView.vue
浏览文件 @ e044929d
......@@ -130,6 +130,7 @@ import forgetPassAPI from "@/constants/api/login/forget-pass-mgt";
[VanImage.name]: VanImage,
})
export default class ForgetPassView extends Vue {
smsCss=""
password = "password";
passwordType="password"
passwordTypeNext="password"
......@@ -173,20 +174,33 @@ export default class ForgetPassView extends Vue {
}
//计时器
changeCmstotal() {
localStorage.setItem("smsTime",String(this.time))
this.getCmstotal = this.time + "s重发验证码";
this.timer = setInterval(() => {
this.time--;
//倒计时存入localStorage 防止刷新页面 丢失
localStorage.setItem("smsTime",String(this.time))
this.getCmstotal = this.time + "s重发验证码";
if (this.time < 0) {
clearInterval(this.time);
localStorage.removeItem("smsTime");
this.smsCss=""
clearInterval(this.timer)
this.getCmstotal = "获取验证码";
}
}, 1000);
}, 1000)
}
getPhonePost() {
let param = {
phoneCode: this.loginNo,
};
//禁用 超链接并设置倒计时时间
this.smsCss="smsCss"
this.time=60;
apiService
.general(commonApi.getPicCode, param, undefined, undefined)
.then((response: RestfulResponse) => {
......@@ -194,23 +208,30 @@ export default class ForgetPassView extends Vue {
Toast("短信发送成功，5分钟有效");
this.changeCmstotal();
} else {
Toast("短信发送失败,请重试");
Toast(String(response.msg));
this.getCmstotal = "获取验证码";
//取消不可点击
this.smsCss=""
//删除缓存
localStorage.removeItem("smsTime")
//删除定时任务
clearInterval(this.timer)
}
});
}
onSubmit(values: any) {
let param = {
loginNo:this.loginNo ,
phone:this.loginNo ,
newPassword: this.newpassword,
phoneVerifyCode:this.sms ,
requirePassword:this.restpassword
};
apiService
.general(forgetPassAPI.ForgetPass, param, undefined, undefined)
.general(forgetPassAPI.ForgetPass, undefined, param, undefined)
.then((response: RestfulResponse) => {
if (response.code == Code.SUCCESS.code) {
this.$router.push({
name: `Mianview`,
this.$router.replace({
path: `/login`,
params: {
data: response.data
}
......@@ -220,6 +241,14 @@ export default class ForgetPassView extends Vue {
}
created() {
this.$nextTick(() => this._updatePicCode());
//获取验证码剩余时间，并启动倒计时 ,禁用超链接
if(localStorage.getItem("smsTime")!=null){
this.time =Number(localStorage.getItem("smsTime"));
this.changeCmstotal();
this.smsCss="smsCss"
}
}
}
</script>
......
src/views/login/Register.vue
浏览文件 @ e044929d
......@@ -60,7 +60,7 @@
</van-field>
</van-col>
<van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a style=" color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
<van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a :class="smsCss" style=" color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
</van-row>
<!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
</div>
......@@ -122,6 +122,7 @@ import { Toast } from "vant";
name: "ForgetPassView",
})
export default class ForgetPassView extends Vue {
smsCss=""
tatleName = "用户注册"
idCard = ""
phone: string = "" //电话
......@@ -139,6 +140,8 @@ export default class ForgetPassView extends Vue {
showCode = false;
//方法
noChange(s:string){
if(this.verifyPhone(s)){
this.showCode=true;
......@@ -177,7 +180,7 @@ export default class ForgetPassView extends Vue {
console.log(response);
if (response.code == Code.SUCCESS.code) {
this.$router.push({
name: `Mianview`,
path: `/login`,
params: {
data: response.data
}
......@@ -187,31 +190,49 @@ export default class ForgetPassView extends Vue {
});
}
}
//计时器
changeCmstotal() {
localStorage.setItem("smsTime",String(this.time))
this.getCmstotal = this.time + "s重发验证码";
this.timer = setInterval(() => {
this.time--;
//倒计时存入localStorage 防止刷新页面 丢失
localStorage.setItem("smsTime",String(this.time))
this.getCmstotal = this.time + "s重发验证码";
if (this.time < 0) {
clearInterval(this.time)
localStorage.removeItem("smsTime");
this.smsCss=""
clearInterval(this.timer)
this.getCmstotal = "获取验证码";
}
}, 1000)
}
getPhonePost() {
let param = {
phoneCode: this.phone
}
//禁用 超链接并设置倒计时时间
this.smsCss="smsCss"
this.time=60;
apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
if (response.code == Code.SUCCESS.code) {
Toast('短信发送成功，5分钟有效');
//开始倒计时
this.changeCmstotal()
} else {
Toast('短信发送失败,请重试');
//取消不可点击
this.smsCss=""
//删除缓存
localStorage.removeItem("smsTime")
//删除定时任务
clearInterval(this.timer)
}
})
......@@ -220,6 +241,14 @@ export default class ForgetPassView extends Vue {
created() {
//获取验证码剩余时间，并启动倒计时 ,禁用超链接
if(localStorage.getItem("smsTime")!=null){
this.time =Number(localStorage.getItem("smsTime"));
this.changeCmstotal();
this.smsCss="smsCss"
}
}
returen() {
......@@ -289,6 +318,10 @@ export default class ForgetPassView extends Vue {
background-color: #fff;
}
::v-deep .smsCss{
cursor: pointer;
pointer-events: none;
}
// .login{
// margin-top: 20%;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或