<template>
|
<div class="sign-forgot-wrap sign-form-wrap">
|
<header>
|
找回密码
|
</header>
|
<div class="center" v-if="view === 'account'">
|
<div class="tip">
|
输入明科账号<br />
|
<span>您注册时使用的手机号或邮箱</span>
|
</div>
|
<div>
|
<el-input size="small" placeholder="手机号/邮箱地址" @input="valueChange()" v-model="account"></el-input>
|
</div>
|
<div class="slider-block">
|
<SliderVerificationCode v-model="pass" @change="handleChange" />
|
</div>
|
<div>
|
<el-button class="sub-button" type="primary" @click="nextStep()" :disabled="nextdisabled">下一步</el-button>
|
</div>
|
</div>
|
<div class="center" v-else-if="view === 'vercode'">
|
<div class="tip" v-if="signtype === 'phone'">
|
<p>手机号找回密码</p>
|
<span>若您的手机号<span v-text="account.substr(0, 3) + '****' + account.substr(7)"></span>现在可接收短信，请点击获取验证码。</span>
|
</div>
|
<div class="tip" v-if="signtype === 'email'">
|
<p>邮箱找回密码</p>
|
<span>若您的邮箱<span v-text="account"></span>现在可接收邮件，请点击获取验证码。</span>
|
</div>
|
<div>
|
<el-input size="small" class="ver-code" @input="codeValueChange()" placeholder="请输入验证码" v-model="verCode">
|
<el-button slot="append" size="small" @click="getVerCode()" :disabled="verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
|
</el-input>
|
</div>
|
<div>
|
<el-button class="sub-button" type="primary" @click="nextStepPwd()" :disabled="nextdisabled">下一步</el-button>
|
</div>
|
</div>
|
<div class="center" v-else-if="view === 'password'">
|
<div class="tip">
|
<p>明科账号:</p>
|
<span v-if="signtype === 'phone'" v-text="account.substr(0, 3) + '****' + account.substr(7)"></span>
|
<span v-if="signtype === 'email'" v-text="account"></span>
|
</div>
|
<div class="password-wrap">
|
<el-input placeholder="密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="password"></el-input>
|
<el-tooltip class="item" effect="dark" content="密码最大为12位，可以使用数字、字母及!@#$%&*()_" placement="top">
|
<i class="el-icon-info"></i>
|
</el-tooltip>
|
</div>
|
<div>
|
<el-input placeholder="确认密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
|
</div>
|
<div>
|
<el-button class="sub-button" type="primary" @click="submitLogin()" :disabled="nextdisabled" :loading="subloading">提交</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Utils from '@/utils'
|
import md5 from 'md5'
|
|
let timer = null
|
|
export default {
|
data() {
|
return {
|
view: 'account',
|
signtype: '',
|
phoneNo: '',
|
account: '',
|
verCode: '',
|
verCodeTip: '获取验证码',
|
verCodeDisabled: false,
|
delay: 60,
|
password: '',
|
birthday: '',
|
confirmPassword: '',
|
nextdisabled: true,
|
subloading: false,
|
pass: false
|
}
|
},
|
methods: {
|
handleChange () {
|
let valid = true
|
if (!this.account) {
|
valid = false
|
} else if (!this.pass) {
|
valid = false
|
}
|
|
if (valid) {
|
this.nextdisabled = false
|
} else {
|
this.nextdisabled = true
|
}
|
},
|
valueChange () {
|
let valid = true
|
if (!this.account) {
|
valid = false
|
} else if (!this.pass) {
|
valid = false
|
}
|
|
if (valid) {
|
this.nextdisabled = false
|
} else {
|
this.nextdisabled = true
|
}
|
},
|
nextStep () {
|
if (!this.account) return
|
|
if (/^1[3456789]\d{9}$/.test(this.account)) {
|
this.signtype = 'phone'
|
} else if (/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.account)) {
|
this.signtype = 'email'
|
} else {
|
this.$message({
|
message: '手机号或邮箱地址格式错误，请重填！',
|
type: 'warning'
|
})
|
return
|
}
|
this.pass = false
|
this.view = 'vercode'
|
this.nextdisabled = true
|
},
|
getVerCode () {
|
let error = false
|
let param = null
|
|
if (this.signtype !== 'email') {
|
param = {
|
func: 'MSN_sms_send_code',
|
send_type: 'reset_pwd',
|
mob: this.account,
|
timestamp: Utils.getCurrentTime(),
|
ID: '20200522115033857N9C7S41G77G31OT52QN'
|
}
|
|
param.LText = md5(`${this.account}mingke${window.GLOB.appkey}${param.timestamp}`)
|
} else {
|
param = {
|
func: 'MSN_email_send_code',
|
send_type: 'reset_pwd',
|
email: this.account,
|
timestamp: Utils.getCurrentTime(),
|
ID: '20200518162835149CE25P520L0UODMVQ5FM'
|
}
|
|
param.LText = md5(`${window.GLOB.appkey}mingke${this.account}${param.timestamp}`)
|
}
|
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
this.verCodeDisabled = true
|
this.Service.setSSORequest(param).then(res => {
|
if (res.status) {
|
this.verCodeTip = '获取验证码(60s)'
|
timer = setTimeout(this.resetVerCodeTip, 1000)
|
} else {
|
this.verCodeDisabled = false
|
this.$message({
|
message: res.message,
|
type: 'error'
|
})
|
}
|
})
|
},
|
codeValueChange () {
|
if (!this.verCode) {
|
this.nextdisabled = true
|
} else {
|
this.nextdisabled = false
|
}
|
},
|
nextStepPwd () {
|
this.view = 'password'
|
this.nextdisabled = true
|
},
|
valChange () {
|
let valid = true
|
|
if (!this.password) {
|
valid = false
|
} else if (!this.confirmPassword) {
|
valid = false
|
}
|
|
if (valid) {
|
this.nextdisabled = false
|
} else {
|
this.nextdisabled = true
|
}
|
},
|
resetVerCodeTip () {
|
if (this.delay > 1) {
|
this.delay--
|
this.verCodeTip = `获取验证码(${this.delay}s)`
|
timer = setTimeout(this.resetVerCodeTip, 1000)
|
} else {
|
this.verCodeDisabled = false
|
this.delay = 60
|
this.verCodeTip = '获取验证码'
|
}
|
},
|
submitLogin () {
|
if (!this.password) {
|
this.$message({
|
message: '请输入密码！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^[0-9a-zA-Z!@#$%^&*()_]*$/.test(this.password)) {
|
this.$message({
|
message: '密码只可以使用数字、字母及!@#$%&*()_。',
|
type: 'warning'
|
})
|
return
|
} else if (this.password !== this.confirmPassword) {
|
this.$message({
|
message: '两次输入密码不一致！',
|
type: 'warning'
|
})
|
return
|
}
|
|
let param = {
|
func: 'msn_user_reset_pwd',
|
mob: this.signtype === 'phone' ? this.account : '',
|
email: this.signtype === 'email' ? this.account : '',
|
check_code: this.verCode,
|
pwd: this.password,
|
Type_reg: this.signtype !== 'email' ? 'mob' : 'email',
|
timestamp: Utils.getCurrentTime()
|
}
|
|
param.LText = md5(`${window.GLOB.appkey}mingke${this.account}`)
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
this.nextdisabled = true
|
this.subloading = true
|
this.Service.setSSORequest(param).then(res => {
|
if (res.status) {
|
this.nextdisabled = false
|
this.subloading = false
|
this.$router.push({name: 'signSuccess', params: {type: 'forgetpwd'}})
|
} else {
|
this.nextdisabled = false
|
this.subloading = false
|
this.$message({
|
message: res.message,
|
type: 'error'
|
})
|
}
|
})
|
},
|
changeTab () {
|
if (this.signtype === 'phone') {
|
this.signtype = 'email'
|
} else {
|
this.signtype = 'phone'
|
}
|
|
this.phoneNo = ''
|
this.email = ''
|
this.verCode = ''
|
this.verCodeTip = '获取验证码'
|
this.verCodeDisabled = false
|
this.delay = 60
|
this.password = ''
|
this.birthday = ''
|
this.confirmPassword = ''
|
this.subdisabled = true
|
this.subloading = false
|
|
if (timer) {
|
clearTimeout(timer)
|
}
|
}
|
},
|
watch:{ //监听路由
|
$route(to, from) {
|
// if (to.path === '/postDetails') {
|
// this.isShow = false
|
// }
|
}
|
},
|
destroyed () {
|
if (timer) {
|
clearTimeout(timer)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.sign-forgot-wrap {
|
position: relative;
|
width: 1200px;
|
margin: 0 auto;
|
padding-top: 30px;
|
|
.find-password {
|
position: absolute;
|
top: 15px;
|
right: 0px;
|
font-size: 13px;
|
color: #40a9ff;
|
cursor: pointer;
|
}
|
|
header {
|
margin: 0 auto;
|
text-align: center;
|
padding-top: 30px;
|
font-size: 20px;
|
padding-bottom: 10px;
|
font-weight: bold;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
.center {
|
text-align: center;
|
margin-top: 35px;
|
.ver-code {
|
.el-input-group__append {
|
.el-button {
|
color: #40a9ff;
|
border: none;
|
}
|
}
|
}
|
.tip {
|
display: inline-block;
|
width: 350px;
|
text-align: left;
|
font-weight: bold;
|
|
span {
|
display: inline-block;
|
margin-top: 5px;
|
margin-bottom: 15px;
|
font-weight: normal;
|
font-size: 13px;
|
color: rgba(0, 0, 0, 0.85);
|
|
span {
|
margin-top: 5px;
|
margin-bottom: 0px;
|
}
|
}
|
}
|
.slider-block {
|
display: inline-block;
|
width: 350px;
|
}
|
.sub-button {
|
width: 350px;
|
border-radius: 4px;
|
margin-top: 30px;
|
background-color: #1890ff;
|
border-color: #1890ff;
|
}
|
.sub-button.is-disabled {
|
opacity: 0.5;
|
}
|
}
|
.password-wrap {
|
position: relative;
|
.el-icon-info {
|
position: absolute;
|
top: 9px;
|
margin-left: 5px;
|
color: #fa8c16;
|
}
|
}
|
}
|
|
@media (max-width: 750px) and (min-width: 0) {
|
.sign-forgot-wrap {
|
width: 100vw;
|
.center {
|
.tip {
|
width: 300px;
|
}
|
.el-input {
|
width: 300px;
|
}
|
.slider-block {
|
width: 300px;
|
}
|
.sub-button {
|
width: 300px;
|
}
|
}
|
}
|
}
|
</style>
|
