|
|
|
|
@ -0,0 +1,196 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:title="title"
|
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
|
width="30%"
|
|
|
|
|
:before-close="handleClose">
|
|
|
|
|
<div class="radio">
|
|
|
|
|
<el-form ref="form" :model="form" label-width="55px" label-position='left'>
|
|
|
|
|
<el-form-item label="修改方式">
|
|
|
|
|
<el-radio v-model="radio" label="1">原密码</el-radio>
|
|
|
|
|
<el-radio v-model="radio" label="2">验证码</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="maxbox" v-if="radio==1">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="box1" >
|
|
|
|
|
<el-form ref="form" :model="form" label-width="55px" label-position='left'>
|
|
|
|
|
<el-form-item label="原密码">
|
|
|
|
|
<el-input v-model="oldPassword" placeholder="请重新输入原密码" style="width:150px"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
|
<el-input type="password" v-model="newPassword" placeholder="请重新输入新密码" style="width:150px"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
|
<el-input type="password" v-model="newPassword2" placeholder="请再次输入新密码" style="width:150px"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bot">
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="mini" type="primary" plain @click="handleCloseCancel" >取 消</el-button>
|
|
|
|
|
<el-button size="mini" type="primary" @click="passwordConfirms" :loading='passwordLoading'>确 认</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="maxbox" v-if="radio==2">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="center">
|
|
|
|
|
<el-form ref="form" :model="form" label-width="55px" label-position='left'>
|
|
|
|
|
<el-form-item label="验证码">
|
|
|
|
|
<el-input v-model="inpt" placeholder="请输入验证码" style="width:150px"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-button style="height:0.2rem;margin-left:10px" @click="getCode" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable" type="primary">{{codeBtnWord}}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="center">
|
|
|
|
|
<el-form ref="form" :model="form" label-width="55px" label-position='left'>
|
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
|
<el-input type="password" v-model="password" style="width:150px" placeholder="请输入新密码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
|
<el-input type="password" v-model="password2" style="width:150px" placeholder="请重新输入密码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bot">
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="mini" type="primary" plain @click="handleCloseCancel">取 消</el-button>
|
|
|
|
|
<el-button size="mini" type="primary" @click="confirms" :loading='codeLoading'>确 认</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
form:{},
|
|
|
|
|
passwordLoading:false,
|
|
|
|
|
codeLoading:false,
|
|
|
|
|
oldPassword:"",//原密码
|
|
|
|
|
newPassword2:"",
|
|
|
|
|
newPassword:"",//新密码
|
|
|
|
|
radio:'1',
|
|
|
|
|
inpt:"",
|
|
|
|
|
password:"",
|
|
|
|
|
password2:"",
|
|
|
|
|
titleName:2,
|
|
|
|
|
dialogVisible:false,
|
|
|
|
|
codeBtnWord:'获取验证码',
|
|
|
|
|
timer:null,
|
|
|
|
|
waitTime:61 //验证码失效时间
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed:{
|
|
|
|
|
title(){
|
|
|
|
|
return this.radio == '1'?'原密码修改':'验证码修改'
|
|
|
|
|
},
|
|
|
|
|
// 控制获取验证码按钮是否可点击
|
|
|
|
|
getCodeBtnDisable:{
|
|
|
|
|
get(){
|
|
|
|
|
if(this.waitTime == 61){
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
},
|
|
|
|
|
// 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
|
|
|
|
|
set(){}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
passwordConfirms(){
|
|
|
|
|
this.handleNewPassword()
|
|
|
|
|
},
|
|
|
|
|
handleNewPassword(){
|
|
|
|
|
this.passwordLoading=true
|
|
|
|
|
this.$emit('handleNewPassword',this.newPassword)
|
|
|
|
|
},
|
|
|
|
|
handleCloseCancel(){
|
|
|
|
|
this.dialogVisible = false
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
this.codeBtnWord = '获取验证码'
|
|
|
|
|
this.getCodeBtnDisable = false
|
|
|
|
|
this.waitTime = 61
|
|
|
|
|
Object.assign(this.$data, this.$options.data())
|
|
|
|
|
},
|
|
|
|
|
handleClose(done){
|
|
|
|
|
done()
|
|
|
|
|
// 清除定时器
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
this.codeBtnWord = '获取验证码'
|
|
|
|
|
this.getCodeBtnDisable = false
|
|
|
|
|
this.waitTime = 61
|
|
|
|
|
Object.assign(this.$data, this.$options.data())
|
|
|
|
|
},
|
|
|
|
|
confirms(){
|
|
|
|
|
this.submit()
|
|
|
|
|
},
|
|
|
|
|
getCode(){
|
|
|
|
|
// 调用获取短信验证码接口
|
|
|
|
|
this.$emit('getCodeOperate')
|
|
|
|
|
// 因为下面用到了定时器，需要保存this指向
|
|
|
|
|
let that = this
|
|
|
|
|
that.waitTime--
|
|
|
|
|
that.getCodeBtnDisable = true
|
|
|
|
|
this.codeBtnWord = `${this.waitTime}s 后重新获取`
|
|
|
|
|
this.timer = setInterval(function(){
|
|
|
|
|
if(that.waitTime>1){
|
|
|
|
|
that.waitTime--
|
|
|
|
|
that.codeBtnWord = `${that.waitTime}s 后重新获取`
|
|
|
|
|
}else{
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
that.codeBtnWord = '获取验证码'
|
|
|
|
|
that.getCodeBtnDisable = false
|
|
|
|
|
that.waitTime = 61
|
|
|
|
|
}
|
|
|
|
|
},1000)
|
|
|
|
|
},
|
|
|
|
|
submit(){
|
|
|
|
|
this.codeLoading = true
|
|
|
|
|
this.$emit('handleSubimt',this.password)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.bot{
|
|
|
|
|
widows: 100%;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
.radio{
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
.box{
|
|
|
|
|
height: 130px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.center1{
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.box1{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.center{
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.el-input{
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
.el-button.disabled-style {
|
|
|
|
|
background-color: #EEEEEE;
|
|
|
|
|
color: #CCCCCC;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
Wangxubin
3 years ago