Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
89ea6006 by yangwei
Options

个人中心页面功能完善，样式调整

1 parent 82dc2fa9
Inline Side-by-side
Showing 3 changed files with 167 additions and 143 deletions
......@@ -84,7 +84,7 @@
},
mounted () {
if (this.userInfo) {
this.getUserdata(this.userInfo)
this.getUserdata(this.userInfo.id)
}
this.sexList = [
{
......@@ -105,8 +105,8 @@
]
},
methods: {
getUserdata (p) {
getAction(`${api.users}/${p.id}`).then((res) => {
getUserdata (id) {
getAction(`${api.users}/${id}`).then((res) => {
if (res.status === 1) {
this.form = res.content
} else {
......@@ -135,7 +135,6 @@
<style scoped lang="scss">
.user-info {
margin: 0.1875rem 1.0417rem;
background: #ffffff;
overflow-y: auto;
.form-wrapper {
padding: 0px 120px 0px;
......@@ -156,7 +155,7 @@
}
.bottom-wrapper {
padding: 0px 120px 0px;
text-align: right;
text-align: center;
}
}
</style>
......
<!--
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-03-08 15:30:43
* @LastEditors: xiaomiao 1158771342@qq.com
* @LastEditTime: 2023-03-08 16:33:50
* @FilePath: \监管系统\js-web-jianguan\src\views\system\information copy\index.vue
* @LastEditors: yangwei
* @LastEditTime: 2023-03-13 17:19:46
* @FilePath: \bdcjg-web\src\views\system\information\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
......@@ -15,8 +15,18 @@
</el-form-item>
<el-row class="mb-5">
<el-col :span="3" class="btnColRight">
<btn nativeType="cx" @click="information">基本信息</btn>
<btn nativeType="cx" @click="password">修改密码</btn>
<!-- <btn nativeType="cx" @click="information"
>基本信息</btn
>
<btn nativeType="cx" :class="isshow ? '' : ''" @click="password"
>修改密码</btn
> -->
<button @click="information" :class="isshow ? 'button choosed' : 'button'">
基本信息
</button>
<button @click="password" :class="isshow ? 'button' : 'button choosed'">
修改密码
</button>
</el-col>
</el-row>
</el-form>
......@@ -30,56 +40,69 @@
</div>
</template>
<script>
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
components: {
BaseSet,
PasswordEdit,
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
components: {
BaseSet,
PasswordEdit,
},
data() {
return {
isshow: true,
};
},
computed: {
userData() {
return this.$store.state.user.userInfo;
},
data () {
return {
isshow: true,
};
},
watch: {},
created() {},
mounted() {},
methods: {
information() {
this.isshow = true;
},
computed: {
userData () {
return this.$store.state.user.userInfo;
},
password() {
this.isshow = false;
},
watch: {},
created () { },
mounted () {
},
methods: {
information () {
this.isshow = true;
},
password () {
this.isshow = false;
},
},
};
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.information {
/deep/.content {
.el-input__inner {
background: none;
}
.user-info {
background: none;
}
.boxin {
height: 79%;
}
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.information {
display: flex;
flex-direction: column;
.btnColRight {
.button {
width: 76px;
height: 32px;
color: #ffffff;
margin: 0 5px;
cursor: pointer;
border: 0;
background: url('../../../image/btn.png') no-repeat 0 0;
background-size: cover;
}
.choosed{
background: url('../../../image/btn.png') no-repeat 0 -34px;
}
}
/deep/.content {
.el-input__inner {
background: none;
}
.user-info {
background: none;
}
}
.boxin {
flex: 1;
}
}
</style>
......
......@@ -6,27 +6,31 @@
label-width="100px"
:model="form"
class="form-wrapper"
:rules="rules">
:rules="rules"
>
<el-form-item label="旧密码:" prop="oldPassword">
<el-input
v-model="form.oldPassword"
clearable
type="password"
show-password />
show-password
/>
</el-form-item>
<el-form-item label="新密码:" prop="newPassword">
<el-input
v-model="form.newPassword"
clearable
type="password"
show-password />
show-password
/>
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPassword">
<el-input
v-model="form.confirmPassword"
clearable
type="password"
show-password />
show-password
/>
</el-form-item>
</el-form>
<div class="bottom-wrapper">
......@@ -37,102 +41,100 @@
</template>
<script>
import { updateUserPassword } from "@/api/personnelManage";
export default {
props: {
userInfo: {
type: Object,
default: null
}
import { updateUserPassword } from "@/api/personnelManage";
export default {
props: {
userInfo: {
type: Object,
default: null,
},
data () {
return {
form: {},
sexList: [],
userId: '',
rules: {
oldPassword: [
{ required: true, message: '旧密码不能为空', trigger: 'blur' }
],
newPassword: [
{ required: true, message: '新密码不能为空', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '确认密码不能为空', trigger: 'blur' },
{ validator: this.validatorConfirmPassword, trigger: 'blur' }
]
},
data() {
return {
form: {},
sexList: [],
userId: "",
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" },
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ validator: this.validatorConfirmPassword, trigger: "blur" },
],
},
};
},
computed: {},
watch: {
userInfo: {
handler: function (val) {
if (val) {
this.getid(val);
}
}
},
},
computed: {},
watch: {
userInfo: {
handler: function (val) {
if (val) {
this.getid(val)
}
}
}
},
mounted() {
if (this.userInfo) {
this.getid(this.userInfo);
}
},
methods: {
getid(val) {
this.userId = val.id;
},
mounted () {
if (this.userInfo) {
this.getid(this.userInfo)
validatorConfirmPassword(rule, value, callback) {
const { newPassword } = this.form;
if (value !== newPassword) {
callback("两次输入密码不一致");
} else {
callback();
}
},
methods: {
getid (val) {
this.userId = val.id
},
validatorConfirmPassword (rule, value, callback) {
const { newPassword } = this.form
if (value !== newPassword) {
callback('两次输入密码不一致')
} else {
callback()
updatePassword() {
this.$refs.form.validate((valid) => {
if (valid) {
const params = Object.assign({}, this.form, { id: this.userId });
updateUserPassword(params).then((res) => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true });
} else {
this.$message.error({ message: res.message, showClose: true });
}
});
}
},
updatePassword () {
this.$refs.form.validate((valid) => {
if (valid) {
const params = Object.assign({}, this.form, { id: this.userId })
updateUserPassword(params).then((res) => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true })
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
}
})
}
}
}
});
},
},
};
</script>
<style scoped lang="scss">
.user-info {
margin: 36px 200px;
background: #ffffff;
overflow-y: auto;
.form-wrapper {
padding: 24px 120px 0px;
/deep/.el-form-item {
margin-bottom: 24px;
.el-form-item__label {
color: #ffffff;
}
.el-input .el-input__inner {
padding: 0 8px;
height: 40px;
line-height: 40px;
border: 1px solid #6bc1fc;
}
.user-info {
margin: 36px 200px;
overflow-y: auto;
.form-wrapper {
padding: 24px 120px 0px;
/deep/.el-form-item {
margin-bottom: 24px;
.el-form-item__label {
color: #ffffff;
}
.el-input .el-input__inner {
padding: 0 8px;
height: 40px;
line-height: 40px;
border: 1px solid #6bc1fc;
}
}
.bottom-wrapper {
padding: 32px 120px 24px;
text-align: right;
}
}
.bottom-wrapper {
padding: 32px 120px 24px;
text-align: center;
}
}
</style>
......