longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接后端个人信息部分接口

Browse Source
This commit is contained in:
龙运模
2024-07-03 20:05:29 +08:00
parent 43f9a8d49c
commit 0bb1d10f4b
26 changed files with 695 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/userCenter/index.vue
+20 -15
View File
@@ -4,10 +4,10 @@
<el-container>
<el-header style="height: auto;display: block;">
<div class="user-info-top">
<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
<ossImgUpload @parentParams="parentParams" :url="this.$store.state.global.login_avatar" type="2" />
<div class="userView">
<h2 class="name">{{ user.userName }}</h2>
<p><el-tag round effect="plain" size="small" disable-transitions>{{ user.role }}</el-tag></p>
<h2 class="name">{{ this.$store.state.global.login_name }}</h2>
<p v-if="user.role!=''"><el-tag round effect="plain" size="small" disable-transitions>{{ user.role }}</el-tag></p>
</div>
</div>
</el-header>
@@ -91,21 +91,13 @@
}
]
},
// {
// groupName: "账号升级",
// list: [
// {
// icon: "el-icon-office-building",
// title: "升级为企业账号",
// component: "upToEnterprise"
// }
// ]
// }
],
user: {
userName: "龙隆",
role: "管理员",
avatar:this.$store.state.global.login_avatar,
name: this.$store.state.global.login_name,
role: "",
},
userNameF:'',
page: "account"
}
},
@@ -123,9 +115,22 @@
}
})
},
created() {
const userInfo = this.$TOOL.data.get('USER_INFO');
this.user.role = userInfo.user_roles && userInfo.user_roles.role_names.length>0?userInfo.user_roles.role_names[0]:'';
},
methods: {
openPage(item){
this.page = item.index
},
async parentParams(files) {
let params = {
avatar: files
}
const res = await this.$API.user.uploadAvatar.post(params);
if (res.code == 200) {
this.$store.commit("SET_LOGIN_AVATAR", files);
}
}
}
}
src/views/userCenter/user/account.vue
+119 -19
View File
@@ -1,20 +1,29 @@
<template>
<el-card shadow="never" header="账户信息">
<el-form ref="form" :model="form" label-width="90px" style="margin-top:10px;width: 518px;">
<el-form-item label="账号">
<el-form ref="form" :model="form" :rules="rules" label-width="90px" style="margin-top:10px;width: 480px;">
<el-form-item label="" prop="avatar">
<ossImgUpload @parentParams="parentParams" :url="this.$store.state.global.login_avatar" />
</el-form-item>
<el-form-item label="账号" prop="user">
<el-input v-model="form.user" disabled></el-input>
<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
</el-form-item>
<el-form-item label="手机号码">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="真实姓名">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="邮箱地址">
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="verify_code">
<div class="login-msg-yzm">
<el-input v-model="form.verify_code" clearable placeholder="请输入验证码"></el-input>
<el-button style="margin-left:10px;" @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{ time }})</span></el-button>
</div>
</el-form-item>
<el-form-item label="邮箱地址" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="个性签名">
<el-form-item label="个性签名" prop="about">
<el-input v-model="form.about" type="textarea"></el-input>
</el-form-item>
<el-form-item>
@@ -25,20 +34,111 @@
</template>
<script>
export default {
data() {
return {
form: {
user: "administrator@scuiadmin.com",
name: "Sakuya",
mobile:'18828382888',
email:'',
about: "正所谓富贵险中求"
}
const {verifyPhone} = require("@/utils/verificate");
export default {
data() {
return {
disabled:false,
time:0,
userRole:[],
form: {
id: "",
avatar:this.$store.state.global.login_avatar,
name: this.$store.state.global.login_name,
login_name: '',
user: "",
mobile: "",
email: "",
about: "正所谓富贵险中求",
},
rules: {
name: [
{required: true, message: '请输入姓名'}
],
mobile: [
{required: true, message: '请输入手机号'},
{validator: verifyPhone, trigger: 'blur'}
],
verify_code:[
{required: true, message: '请输入验证码'}
]
}
}
},
mounted() {
this.getInfo();
},
methods:{
// 图片上传成功回调
async parentParams(files) {
let params = {
avatar:files
}
const res = await this.$API.user.uploadAvatar.post(params);
if (res.code == 200) {
this.$store.commit("SET_LOGIN_AVATAR", files);
}
},
async getInfo() {
const res = await this.$API.user.getInformation.post();
if(res.code == 200){
const userInfo = JSON.parse(JSON.stringify(this.$TOOL.data.get('USER_INFO')));
this.form.user = userInfo.login_name;
this.userRole = userInfo.user_roles && userInfo.user_roles.role_names.length>0?userInfo.user_roles.role_names:[];
this.$store.commit("SET_LOGIN_AVATAR", res.data.avatar);
this.$store.commit("SET_LOGIN_NAME", res.data.name);
Object.assign(this.form,res.data);
Object.assign(userInfo,res.data);
this.$TOOL.data.set('USER_INFO',userInfo);
}
},
async getYzm() {
const validate = await this.$refs.form.validateField("mobile").catch(() => {});
if (!validate) {
return false
}
const res = await this.$API.system.user.verifyCode.post({mobile: this.form.mobile});
if (res.code === 200) {
this.$message.success('短信已发送至手机号码');
this.disabled = true
this.time = 60
const t = setInterval(() => {
this.time -= 1
if (this.time < 1) {
clearInterval(t)
this.disabled = false
this.time = 0
}
}, 1000);
}
},
save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
const res = await this.$API.system.user.updateProfile.post(this.form)
if (res.code === 200) {
// this.$TOOL.data.set("USER_INFO", res.data)
this.$message.success("操作成功");
await this.getInfo();
}
} else {
return false
}
})
},
}
}
</script>
<style>
<style lang="scss" scoped>
.login-msg-yzm{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>