Skip to content

phsl / client

Go to a project
Commit a657c6d8 by 孙美琪
Options

手机号换绑

parent 9638801d
Showing with 120 additions and 69 deletions
src/api/system/user.js
......@@ -83,7 +83,7 @@ export function changeUserStatus(userId, status) {
// 查询用户个人信息
export function getUserProfile() {
return request({
url: '/system/user/profile',
url: '/member/user/getUserAndEnterpriseInfo',
method: 'get'
})
}
......@@ -110,6 +110,15 @@ export function updateUserPwd(oldPassword, newPassword) {
})
}
// 用户手机换绑
export function updateMobile(data) {
return request({
url: '/member/user/update-mobile',
method: 'put',
data: data
})
}
// 用户头像上传
export function uploadAvatar(data) {
return request({
......
src/views/system/user/profile/changeBind.vue
<template>
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="100px" style="width: 400px;height: 260px;">
<el-form-item label="原手机号码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入原手机号码" type="password" show-password/>
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="140px" style="width: 500px;height: 260px;">
<el-form-item label="原手机号码">
<el-input v-model="state.mobile" placeholder="请输入原手机号码" type="text" disabled/>
</el-form-item>
<el-form-item label="验证码" prop="newPassword">
<el-form-item label="原手机号码验证码" prop="oldCode">
<el-input
v-model="user.code"
v-model="user.oldCode"
type="text"
size="large"
auto-complete="off"
placeholder="验证码">
placeholder="请输入原手机号码验证码">
<template #append>
<el-button @click="startCountdown" :disabled="isCounting">
{{ isCounting ? `重新发送(${countdown})` : '发送验证码' }}
<el-button @click="startCountdown(0)" :disabled="isOldCounting">
{{ isOldCounting ? `重新发送(${countDownOld})` : '发送验证码' }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="新手机号码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
<el-form-item label="新手机号码" prop="mobile">
<el-input v-model="user.mobile" :placeholder="user.oldCode !== ''?'请输入新手机号码':'请先输入原手机号码验证码'"
type="text"/>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input
......@@ -26,9 +27,10 @@
type="text"
size="large"
auto-complete="off"
placeholder="验证码">
:placeholder="user.oldCode !== ''?'请输入新手机号码验证码':'请先输入原手机号码验证码'"
>
<template #append>
<el-button @click="startCountdown" :disabled="isCounting">
<el-button @click="startCountdown(1)" :disabled="isCounting">
{{ isCounting ? `重新发送(${countdown})` : '发送验证码' }}
</el-button>
</template>
......@@ -42,45 +44,56 @@
</template>
<script setup>
import {updateUserPwd} from "@/api/system/user";
import {updateMobile} from "@/api/system/user";
import {sendCode} from "@/api/login.js";
import {ElMessage} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user.js";
import {createPay} from "@/api/computingResource.js";
const userStore = useUserStore()
const {proxy} = getCurrentInstance();
const props = defineProps({
state: {
type: Object
}
})
const user = reactive({
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
oldMobile: undefined,
oldCode: '',
mobile: undefined,
code: undefined
});
const countdown = ref(60); // 倒计时时间，初始为60秒
const countDownOld = ref(60); // 倒计时时间，初始为60秒
const isCounting = ref(false); // 是否正在倒计时的标志
const isOldCounting = ref(false); // 是否正在倒计时的标志
const pwdRef = ref(null); // 是否正在倒计时的标志
const equalToPassword = (rule, value, callback) => {
if (user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
const rules = ref({
oldPassword: [{required: true, message: "旧密码不能为空", trigger: "blur"}],
newPassword: [{required: true, message: "新密码不能为空", trigger: "blur"}, {
min: 6,
max: 20,
message: "长度在 6 到 20 个字符",
trigger: "blur"
}, {pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur"}],
confirmPassword: [{required: true, message: "确认密码不能为空", trigger: "blur"}, {
required: true,
validator: equalToPassword,
trigger: "blur"
}]
oldCode: [{required: true, message: "原手机号码验证码不能为空", trigger: "blur"}],
code: [{required: true, message: "原手机号码验证码不能为空", trigger: "blur"}],
mobile: [
{required: true, message: '请输入新手机号码', trigger: 'blur'},
{validator: validatePhone, trigger: 'blur'}
]
});
function getCode() {
sendCode({mobile: user.phoneNumber, scene: 2}).then(res => {
function validatePhone(rule, value, callback) {
const reg = /^1[3456789]\d{9}$/
if (!reg.test(value)) {
callback(new Error('请输入正确的手机号'))
return
}
callback()
}
function getCode(val) {
const num = val === 0 ? props.state.mobile : user.mobile
sendCode({mobile: num, scene: 2}).then(res => {
if (res.data === true) {
ElMessage({message: '短信已发送请注意查收', type: 'success'})
}
......@@ -88,31 +101,65 @@ function getCode() {
}
// 开始倒计时的方法
const startCountdown = () => {
getCode()
pwdRef.value.validateField('phoneNumber', valid => {
if (valid) {
if (isCounting.value) return; // 如果已经在倒计时，则不重复开始
isCounting.value = true; // 设置正在倒计时的标志为true
const timer = setInterval(() => {
if (countdown.value > 0) {
countdown.value--; // 倒计时减1
} else {
clearInterval(timer); // 倒计时结束，清除定时器
isCounting.value = false; // 设置正在倒计时的标志为false
countdown.value = 60; // 重置倒计时时间
}
}, 1000); // 每1000毫秒（1秒）执行一次
}
})
const startCountdown = (val) => {
if (val === 0) {
getCode(val)
if (isOldCounting.value) return; // 如果已经在倒计时，则不重复开始
isOldCounting.value = true; // 设置正在倒计时的标志为true
const timer = setInterval(() => {
if (countDownOld.value > 0) {
countDownOld.value--; // 倒计时减1
} else {
clearInterval(timer); // 倒计时结束，清除定时器
isOldCounting.value = false; // 设置正在倒计时的标志为false
countDownOld.value = 60; // 重置倒计时时间
}
}, 1000); // 每1000毫秒（1秒）执行一次
}
if (val === 1) {
pwdRef.value.validateField('mobile', valid => {
getCode(val)
if (valid) {
if (isCounting.value) return; // 如果已经在倒计时，则不重复开始
isCounting.value = true; // 设置正在倒计时的标志为true
const timer = setInterval(() => {
if (countdown.value > 0) {
countdown.value--; // 倒计时减1
} else {
clearInterval(timer); // 倒计时结束，清除定时器
isCounting.value = false; // 设置正在倒计时的标志为false
countdown.value = 60; // 重置倒计时时间
}
}, 1000); // 每1000毫秒（1秒）执行一次
}
})
}
};
/** 提交按钮 */
function submit() {
proxy.$refs.pwdRef.validate(valid => {
if (valid) {
updateUserPwd(user.oldPassword, user.newPassword).then(response => {
proxy.$modal.msgSuccess("修改成功");
updateMobile(user).then(res => {
if (res.code === 0 && res.data) {
// proxy.$modal.msgSuccess("修改成功,请重新登录");
ElMessageBox.confirm(
'修改成功,请重新登录',
'提示',
{
confirmButtonText: '确认', // 确认按钮文字
// cancelButtonText: '取消', // 取消按钮文字
showCancelButton: false,
showClose: false,
type: 'warning' // 对话框类型（警告样式）
}
)
.then(() => {
userStore.logOut().then(() => {
location.href = '/index'
})
})
}
});
}
});
......@@ -122,6 +169,4 @@ function submit() {
function close() {
proxy.$tab.closePage();
};
console.log(user, 'user')
</script>
src/views/system/user/profile/index.vue
......@@ -16,12 +16,12 @@
<li class="list-group-item">
<svg-icon icon-class="user"/>
用户名称
<div class="pull-right">{{ state.user.userName }}</div>
<div class="pull-right">{{ state.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone"/>
手机号码
<div class="pull-right">{{ state.user.phonenumber }}</div>
<div class="pull-right">{{ state.mobile}}</div>
</li>
</ul>
</div>
......@@ -39,7 +39,7 @@
<userInfo :user="state.user"/>
</el-tab-pane>
<el-tab-pane label="换绑" name="1">
<changeBind :user="state.user"/>
<changeBind :state="state.user"/>
</el-tab-pane>
<el-tab-pane label="修改密码" name="2">
<resetPwd :user="state.user"/>
......@@ -64,20 +64,17 @@ const route = useRoute()
const activeTab = ref('0');
const state = reactive({
user: {},
roleGroup: {},
postGroup: {}
user: {}
});
function getUser() {
getUserProfile().then(response => {
console.log(response.data, 'response.data')
state.user = response.data;
state.roleGroup = response.roleGroup;
state.postGroup = response.postGroup;
});
};
// getUser();
getUser();
onMounted(() => {
const tabNum = route.query.tab
......
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