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