|
|
@@ -12,40 +12,162 @@
|
|
|
<div class="top-icon">
|
|
|
重置密码
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div v-loading="isLoading">
|
|
|
<!-- 密码登录 -->
|
|
|
<div class="login-password">
|
|
|
<div class="pass-item">
|
|
|
<img src="../../static/image/phone-icon.png" class="phone-icon" />
|
|
|
- <el-input placeholder="请输入手机号" class="input-phone" :maxlength="11" />
|
|
|
+ <el-input placeholder="请输入手机号" v-model="mobile" class="input-phone" :maxlength="11" />
|
|
|
</div>
|
|
|
<div class="pass-item">
|
|
|
<img src="../../static/image/code-icon.png" class="phone-icon" />
|
|
|
- <el-input placeholder="验证码" class="input-phone" type="password" />
|
|
|
- <div class="get-code">获取短信验证码</div>
|
|
|
+ <el-input placeholder="验证码" v-model="code" class="input-phone" :maxlength="4" />
|
|
|
+ <div class="get-code" v-if="!showCode" @click.stop="getCode">获取短信验证码</div>
|
|
|
+ <div class="get-code" v-else>{{ count }}秒</div>
|
|
|
</div>
|
|
|
<div class="pass-item">
|
|
|
<img src="../../static/image/lock-icon.png" class="lock-icon" />
|
|
|
- <el-input placeholder="新密码" class="input-phone" type="password" />
|
|
|
+ <el-input placeholder="新密码" v-model="password" class="input-phone" type="password" />
|
|
|
</div>
|
|
|
<div class="pass-item">
|
|
|
<img src="../../static/image/lock-icon.png" class="lock-icon" />
|
|
|
- <el-input placeholder="确认新密码" class="input-phone" type="password" />
|
|
|
+ <el-input placeholder="确认新密码" v-model="passwordAgian" class="input-phone" type="password" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="login-btn">确认</div>
|
|
|
+ <div class="login-btn" @click.stop="commit">确认</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ getPhoneCode,
|
|
|
+ forgotPassword
|
|
|
+ } from '../api/user.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- activeIndex: 1
|
|
|
+ isLoading: false, // 请求解决展示loading
|
|
|
+ activeIndex: 1,
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ password: '',
|
|
|
+ passwordAgian: '',
|
|
|
+ showCode: false,
|
|
|
+ count: 60,
|
|
|
+ timer: null
|
|
|
}
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ clearInterval( this.timer );
|
|
|
+ this.timer = null;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ commit() {
|
|
|
+ if (!this.mobile.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: '手机号码不能为空',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (!this.checkPhone(this.mobile)) {
|
|
|
+ return this.$message({
|
|
|
+ message: '请输入正确的手机号',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (!this.code.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: '验证码不能为空',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (!this.password.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: '密码不能为空',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (!this.passwordAgian.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: '确认密码不能为空',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (this.password.trim() !== this.passwordAgian.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: '两次密码不一致',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ code: this.code,
|
|
|
+ mobile: this.mobile,
|
|
|
+ newPassword: this.password
|
|
|
+ }
|
|
|
+ forgotPassword( params ).then( res => {
|
|
|
+ if ( res.code == 200 ) {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }else {
|
|
|
+ return this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ },
|
|
|
+ checkPhone(phone) {
|
|
|
+ if (!(/^1\d{10}$/.test(phone))) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCode() {
|
|
|
+ if (!this.mobile.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: '手机号码不能为空',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (!this.checkPhone(this.mobile)) {
|
|
|
+ return this.$message({
|
|
|
+ message: '请输入正确的手机号',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ mobile: this.mobile,
|
|
|
+ type: 1
|
|
|
+ };
|
|
|
+ this.isLoading = true;
|
|
|
+ getPhoneCode(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.showCode = true;
|
|
|
+ this.$message({
|
|
|
+ message: '验证码发送成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.count--;
|
|
|
+ if (this.count <= 1) {
|
|
|
+ this.showCode = false;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ this.isLoading = false;
|
|
|
+ return this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
zhaolianxi
