Skip to content

肖康 / cloudSystem

Go to a project
Commit 8bb243a9 by liangjianmin
Options

feat(menu): 添加修改密码功能及验证方式选择 

- 增加修改密码弹窗，支持原密码验证和手机验证码验证两种方式
- 实现手机验证码发送功能，并添加倒计时提示
- 优化表单验证逻辑，确保用户输入的密码一致性
- 更新相关样式和逻辑，提升用户体验
parent 2cb1ac83
Inline Side-by-side
Showing with 195 additions and 4 deletions
src/components/menu.vue
...@@ -89,8 +89,17 @@ ...@@ -89,8 +89,17 @@
</template> </template>
</div> </div>
<!--修改密码弹窗--> <!--修改密码弹窗-->
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" class="demo-ruleForm"> <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" class="demo-ruleForm" :close-on-click-modal="false">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <!-- 验证方式选择 -->
<div style="margin-bottom: 20px;">
<span style="color: #F56C6C; margin-right: 5px;margin-left: 20px;">*</span>
<span style="margin-right: 12px;">验证方式</span>
<el-radio v-model="verifyType" label="password">原密码验证</el-radio>
<el-radio v-model="verifyType" label="sms">手机验证码验证</el-radio>
</div>
<!-- 原密码验证表单 -->
<el-form v-if="verifyType === 'password'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="原始密码" prop="old_password"> <el-form-item label="原始密码" prop="old_password">
<el-input v-model="ruleForm.old_password" type='password' placeholder='请输入原始密码'></el-input> <el-input v-model="ruleForm.old_password" type='password' placeholder='请输入原始密码'></el-input>
</el-form-item> </el-form-item>
...@@ -105,6 +114,29 @@ ...@@ -105,6 +114,29 @@
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button> <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 手机验证码验证表单 -->
<el-form v-if="verifyType === 'sms'" :model="smsForm" :rules="smsRules" ref="smsForm" label-width="100px">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="smsForm.mobile" placeholder="请输入手机号" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="smsCode">
<div style="display: flex; gap: 10px;">
<el-input v-model="smsForm.smsCode" placeholder="请输入短信验证码" style="flex: 1;"></el-input>
<el-button :disabled="!canSendSms" @click="sendSmsCode()" style="width: 120px;">{{ smsText }}</el-button>
</div>
</el-form-item>
<el-form-item label="新密码" prop="password">
<el-input v-model="smsForm.password" type='password' placeholder='请输入新密码'></el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="repassword">
<el-input v-model="smsForm.repassword" type='password' placeholder='请输入新密码'></el-input>
</el-form-item>
<el-form-item>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitSmsForm('smsForm')">确 定</el-button>
</el-form-item>
</el-form>
</el-dialog> </el-dialog>
<!--消息通知--> <!--消息通知-->
<el-dialog title="消息通知" :visible.sync="dialogNewsVisible" width="900px" class="demo-ruleForm"> <el-dialog title="消息通知" :visible.sync="dialogNewsVisible" width="900px" class="demo-ruleForm">
...@@ -235,11 +267,11 @@ ...@@ -235,11 +267,11 @@
import Util from "../tool"; import Util from "../tool";
import axios from 'axios'; import axios from 'axios';
import { NODE_ENVS_MSG } from "../ajax"; import { NODE_ENVS_MSG } from "../ajax";
import { Badge, Button, Checkbox, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Notification, Pagination, Submenu, TabPane, Tabs, Tooltip } from 'element-ui' import { Badge, Button, Checkbox, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Notification, Pagination, Radio, Submenu, TabPane, Tabs, Tooltip } from 'element-ui'
Vue.prototype.$message = Message; Vue.prototype.$message = Message;
Vue.prototype.$notify = Notification; Vue.prototype.$notify = Notification;
Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input).use(Tabs).use(TabPane).use(Badge).use(Pagination).use(Checkbox); Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input).use(Tabs).use(TabPane).use(Badge).use(Pagination).use(Checkbox).use(Radio);
export default { export default {
name: 'menus', name: 'menus',
...@@ -254,6 +286,15 @@ ...@@ -254,6 +286,15 @@
callback() callback()
} }
} }
var validateSmsPass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.smsForm.password) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return { return {
supplier_id: Number(localStorage.getItem('supplier_id')) || 0, supplier_id: Number(localStorage.getItem('supplier_id')) || 0,
seconds: 60, seconds: 60,
...@@ -296,11 +337,22 @@ ...@@ -296,11 +337,22 @@
name: '上架有效期', name: '上架有效期',
value: '#FF0000' value: '#FF0000'
}], }],
verifyType: 'password', // 验证方式：password原密码验证，sms手机验证码验证
ruleForm: { ruleForm: {
old_password: '', old_password: '',
password: '', password: '',
repassword: '' repassword: ''
}, },
smsForm: {
mobile: '',
smsCode: '',
password: '',
repassword: ''
},
// 短信验证码相关
canSendSms: true,
smsText: '发送验证码',
countdown: 60,
rules: { rules: {
old_password: [{ old_password: [{
required: true, required: true,
...@@ -317,6 +369,28 @@ ...@@ -317,6 +369,28 @@
trigger: 'blur', trigger: 'blur',
validator: validatePass2 validator: validatePass2
}] }]
},
smsRules: {
mobile: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}],
smsCode: [{
required: true,
message: '请输入短信验证码',
trigger: 'blur'
}],
password: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
}],
repassword: [{
required: true,
trigger: 'blur',
validator: validateSmsPass2
}]
} }
} }
}, },
...@@ -744,6 +818,89 @@ ...@@ -744,6 +818,89 @@
}, },
changePwd() { changePwd() {
this.dialogVisible = true; this.dialogVisible = true;
this.verifyType = 'password'; // 默认原密码验证
// 初始化表单数据
this.ruleForm = {
old_password: '',
password: '',
repassword: ''
};
this.smsForm = {
mobile: this.userinfo.mobile || '',
smsCode: '',
password: '',
repassword: ''
};
// 重置验证码状态
this.canSendSms = true;
this.smsText = '发送验证码';
this.countdown = 60;
},
/**
* 发送短信验证码
*/
sendSmsCode() {
if (!this.smsForm.mobile) {
this.$message({
message: '请输入手机号',
type: 'warning'
});
return false;
}
var myreg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
if (!myreg.test(this.smsForm.mobile)) {
this.$message({
message: '请输入正确的手机号',
type: 'warning'
});
return false;
}
if (!this.canSendSms) {
return false;
}
this.$http('post', "/auth/sendSms", {
mobile: this.smsForm.mobile
}).then(res => {
if (res.code === 0) {
this.$message({
message: '验证码发送成功',
type: 'success'
});
this.startCountdown();
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
}).catch(err => {
this.$message({
message: '发送失败，请稍后重试',
type: 'error'
});
});
},
/**
* 开始倒计时
*/
startCountdown() {
this.canSendSms = false;
this.countdown = 60;
this.smsText = this.countdown + 's';
var timer = setInterval(() => {
this.countdown--;
this.smsText = this.countdown + 's';
if (this.countdown <= 0) {
clearInterval(timer);
this.canSendSms = true;
this.smsText = '发送验证码';
}
}, 1000);
}, },
tabss(lk) { tabss(lk) {
if (lk == "/") { if (lk == "/") {
...@@ -841,6 +998,40 @@ ...@@ -841,6 +998,40 @@
} }
}); });
}, },
/**
* 手机验证码修改密码
*/
submitSmsForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$http('post', "/api/user/setPasswdBySmsCode", {
password: this.smsForm.password,
sms_code: this.smsForm.smsCode
}).then(res => {
if (res.code === 0) {
this.$message({
message: '修改成功',
type: 'success'
});
this.dialogVisible = false;
setTimeout(() => {
Util.delCookie('token');
window.location.href = '/#/login';
window.userInfo = ""
history.go(0);
}, 2000)
} else {
this.$message(res.msg);
}
}).catch(err => {
console.log(err.message);
})
} else {
console.log('error submit!!');
return false;
}
});
},
logout() { logout() {
MessageBox.confirm('确定退出系统吗？', { MessageBox.confirm('确定退出系统吗？', {
type: 'error' type: 'error'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment