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 @@ ...@@ -84,7 +84,7 @@
84 }, 84 },
85 mounted () { 85 mounted () {
86 if (this.userInfo) { 86 if (this.userInfo) {
87 this.getUserdata(this.userInfo) 87 this.getUserdata(this.userInfo.id)
88 } 88 }
89 this.sexList = [ 89 this.sexList = [
90 { 90 {
...@@ -105,8 +105,8 @@ ...@@ -105,8 +105,8 @@
105 ] 105 ]
106 }, 106 },
107 methods: { 107 methods: {
108 getUserdata (p) { 108 getUserdata (id) {
109 getAction(`${api.users}/${p.id}`).then((res) => { 109 getAction(`${api.users}/${id}`).then((res) => {
110 if (res.status === 1) { 110 if (res.status === 1) {
111 this.form = res.content 111 this.form = res.content
112 } else { 112 } else {
...@@ -135,7 +135,6 @@ ...@@ -135,7 +135,6 @@
135 <style scoped lang="scss"> 135 <style scoped lang="scss">
136 .user-info { 136 .user-info {
137 margin: 0.1875rem 1.0417rem; 137 margin: 0.1875rem 1.0417rem;
138 background: #ffffff;
139 overflow-y: auto; 138 overflow-y: auto;
140 .form-wrapper { 139 .form-wrapper {
141 padding: 0px 120px 0px; 140 padding: 0px 120px 0px;
...@@ -156,7 +155,7 @@ ...@@ -156,7 +155,7 @@
156 } 155 }
157 .bottom-wrapper { 156 .bottom-wrapper {
158 padding: 0px 120px 0px; 157 padding: 0px 120px 0px;
159 text-align: right; 158 text-align: center;
160 } 159 }
161 } 160 }
162 </style> 161 </style>
......
1 <!-- 1 <!--
2 * @Author: xiaomiao 1158771342@qq.com 2 * @Author: xiaomiao 1158771342@qq.com
3 * @Date: 2023-03-08 15:30:43 3 * @Date: 2023-03-08 15:30:43
4 * @LastEditors: xiaomiao 1158771342@qq.com 4 * @LastEditors: yangwei
5 * @LastEditTime: 2023-03-08 16:33:50 5 * @LastEditTime: 2023-03-13 17:19:46
6 * @FilePath: \监管系统\js-web-jianguan\src\views\system\information copy\index.vue 6 * @FilePath: \bdcjg-web\src\views\system\information\index.vue
7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
8 --> 8 -->
9 <template> 9 <template>
...@@ -15,8 +15,18 @@ ...@@ -15,8 +15,18 @@
15 </el-form-item> 15 </el-form-item>
16 <el-row class="mb-5"> 16 <el-row class="mb-5">
17 <el-col :span="3" class="btnColRight"> 17 <el-col :span="3" class="btnColRight">
18 <btn nativeType="cx" @click="information">基本信息</btn> 18 <!-- <btn nativeType="cx" @click="information"
19 <btn nativeType="cx" @click="password">修改密码</btn> 19 >基本信息</btn
20 >
21 <btn nativeType="cx" :class="isshow ? '' : ''" @click="password"
22 >修改密码</btn
23 > -->
24 <button @click="information" :class="isshow ? 'button choosed' : 'button'">
25 基本信息
26 </button>
27 <button @click="password" :class="isshow ? 'button' : 'button choosed'">
28 修改密码
29 </button>
20 </el-col> 30 </el-col>
21 </el-row> 31 </el-row>
22 </el-form> 32 </el-form>
...@@ -30,56 +40,69 @@ ...@@ -30,56 +40,69 @@
30 </div> 40 </div>
31 </template> 41 </template>
32 <script> 42 <script>
33 import "@/utils/flexible.js"; 43 import "@/utils/flexible.js";
34 import BaseSet from "./base-set.vue"; 44 import BaseSet from "./base-set.vue";
35 import PasswordEdit from "./password-edit.vue"; 45 import PasswordEdit from "./password-edit.vue";
36 export default { 46 export default {
37 components: { 47 components: {
38 BaseSet, 48 BaseSet,
39 PasswordEdit, 49 PasswordEdit,
50 },
51 data() {
52 return {
53 isshow: true,
54 };
55 },
56 computed: {
57 userData() {
58 return this.$store.state.user.userInfo;
40 }, 59 },
41 data () { 60 },
42 return { 61 watch: {},
43 isshow: true, 62 created() {},
44 }; 63 mounted() {},
64 methods: {
65 information() {
66 this.isshow = true;
45 }, 67 },
46 computed: { 68 password() {
47 userData () { 69 this.isshow = false;
48 return this.$store.state.user.userInfo;
49 },
50 }, 70 },
51 watch: {}, 71 },
52 created () { }, 72 };
53 mounted () {
54
55
56 },
57 methods: {
58 information () {
59 this.isshow = true;
60 },
61 password () {
62 this.isshow = false;
63 },
64 },
65 };
66 </script> 73 </script>
67 74
68 <style scoped lang="scss"> 75 <style scoped lang="scss">
69 @import "~@/styles/mixin.scss"; 76 @import "~@/styles/mixin.scss";
70 @import "~@/styles/public.scss"; 77 @import "~@/styles/public.scss";
71 .information { 78 .information {
72 /deep/.content { 79 display: flex;
73 .el-input__inner { 80 flex-direction: column;
74 background: none; 81 .btnColRight {
75 } 82 .button {
76 .user-info { 83 width: 76px;
77 background: none; 84 height: 32px;
78 } 85 color: #ffffff;
79 86 margin: 0 5px;
80 .boxin { 87 cursor: pointer;
81 height: 79%; 88 border: 0;
82 } 89 background: url('../../../image/btn.png') no-repeat 0 0;
90 background-size: cover;
83 } 91 }
92 .choosed{
93 background: url('../../../image/btn.png') no-repeat 0 -34px;
94 }
95 }
96 /deep/.content {
97 .el-input__inner {
98 background: none;
99 }
100 .user-info {
101 background: none;
102 }
103 }
104 .boxin {
105 flex: 1;
84 } 106 }
107 }
85 </style> 108 </style>
......
...@@ -6,27 +6,31 @@ ...@@ -6,27 +6,31 @@
6 label-width="100px" 6 label-width="100px"
7 :model="form" 7 :model="form"
8 class="form-wrapper" 8 class="form-wrapper"
9 :rules="rules"> 9 :rules="rules"
10 >
10 <el-form-item label="旧密码:" prop="oldPassword"> 11 <el-form-item label="旧密码:" prop="oldPassword">
11 <el-input 12 <el-input
12 v-model="form.oldPassword" 13 v-model="form.oldPassword"
13 clearable 14 clearable
14 type="password" 15 type="password"
15 show-password /> 16 show-password
17 />
16 </el-form-item> 18 </el-form-item>
17 <el-form-item label="新密码:" prop="newPassword"> 19 <el-form-item label="新密码:" prop="newPassword">
18 <el-input 20 <el-input
19 v-model="form.newPassword" 21 v-model="form.newPassword"
20 clearable 22 clearable
21 type="password" 23 type="password"
22 show-password /> 24 show-password
25 />
23 </el-form-item> 26 </el-form-item>
24 <el-form-item label="确认密码:" prop="confirmPassword"> 27 <el-form-item label="确认密码:" prop="confirmPassword">
25 <el-input 28 <el-input
26 v-model="form.confirmPassword" 29 v-model="form.confirmPassword"
27 clearable 30 clearable
28 type="password" 31 type="password"
29 show-password /> 32 show-password
33 />
30 </el-form-item> 34 </el-form-item>
31 </el-form> 35 </el-form>
32 <div class="bottom-wrapper"> 36 <div class="bottom-wrapper">
...@@ -37,102 +41,100 @@ ...@@ -37,102 +41,100 @@
37 </template> 41 </template>
38 42
39 <script> 43 <script>
40 import { updateUserPassword } from "@/api/personnelManage"; 44 import { updateUserPassword } from "@/api/personnelManage";
41 export default { 45 export default {
42 props: { 46 props: {
43 userInfo: { 47 userInfo: {
44 type: Object, 48 type: Object,
45 default: null 49 default: null,
46 }
47 }, 50 },
48 data () { 51 },
49 return { 52 data() {
50 form: {}, 53 return {
51 sexList: [], 54 form: {},
52 userId: '', 55 sexList: [],
53 rules: { 56 userId: "",
54 oldPassword: [ 57 rules: {
55 { required: true, message: '旧密码不能为空', trigger: 'blur' } 58 oldPassword: [
56 ], 59 { required: true, message: "旧密码不能为空", trigger: "blur" },
57 newPassword: [ 60 ],
58 { required: true, message: '新密码不能为空', trigger: 'blur' } 61 newPassword: [
59 ], 62 { required: true, message: "新密码不能为空", trigger: "blur" },
60 confirmPassword: [ 63 ],
61 { required: true, message: '确认密码不能为空', trigger: 'blur' }, 64 confirmPassword: [
62 { validator: this.validatorConfirmPassword, trigger: 'blur' } 65 { required: true, message: "确认密码不能为空", trigger: "blur" },
63 ] 66 { validator: this.validatorConfirmPassword, trigger: "blur" },
67 ],
68 },
69 };
70 },
71 computed: {},
72 watch: {
73 userInfo: {
74 handler: function (val) {
75 if (val) {
76 this.getid(val);
64 } 77 }
65 } 78 },
66 }, 79 },
67 computed: {}, 80 },
68 watch: { 81 mounted() {
69 userInfo: { 82 if (this.userInfo) {
70 handler: function (val) { 83 this.getid(this.userInfo);
71 if (val) { 84 }
72 this.getid(val) 85 },
73 } 86 methods: {
74 } 87 getid(val) {
75 } 88 this.userId = val.id;
76
77 }, 89 },
78 mounted () { 90 validatorConfirmPassword(rule, value, callback) {
79 if (this.userInfo) { 91 const { newPassword } = this.form;
80 this.getid(this.userInfo) 92 if (value !== newPassword) {
93 callback("两次输入密码不一致");
94 } else {
95 callback();
81 } 96 }
82 }, 97 },
83 methods: { 98 updatePassword() {
84 getid (val) { 99 this.$refs.form.validate((valid) => {
85 this.userId = val.id 100 if (valid) {
86 }, 101 const params = Object.assign({}, this.form, { id: this.userId });
87 validatorConfirmPassword (rule, value, callback) { 102 updateUserPassword(params).then((res) => {
88 const { newPassword } = this.form 103 if (res.status === 1) {
89 if (value !== newPassword) { 104 this.$message.success({ message: res.message, showClose: true });
90 callback('两次输入密码不一致') 105 } else {
91 } else { 106 this.$message.error({ message: res.message, showClose: true });
92 callback() 107 }
108 });
93 } 109 }
94 }, 110 });
95 updatePassword () { 111 },
96 this.$refs.form.validate((valid) => { 112 },
97 if (valid) { 113 };
98 const params = Object.assign({}, this.form, { id: this.userId })
99 updateUserPassword(params).then((res) => {
100 if (res.status === 1) {
101 this.$message.success({ message: res.message, showClose: true })
102 } else {
103 this.$message.error({ message: res.message, showClose: true })
104 }
105 })
106 }
107 })
108 }
109 }
110 }
111 </script> 114 </script>
112 115
113 <style scoped lang="scss"> 116 <style scoped lang="scss">
114 .user-info { 117 .user-info {
115 margin: 36px 200px; 118 margin: 36px 200px;
116 background: #ffffff; 119 overflow-y: auto;
117 overflow-y: auto; 120 .form-wrapper {
118 .form-wrapper { 121 padding: 24px 120px 0px;
119 padding: 24px 120px 0px; 122 /deep/.el-form-item {
120 /deep/.el-form-item { 123 margin-bottom: 24px;
121 margin-bottom: 24px; 124 .el-form-item__label {
122 .el-form-item__label { 125 color: #ffffff;
123 color: #ffffff; 126 }
124 } 127 .el-input .el-input__inner {
125 .el-input .el-input__inner { 128 padding: 0 8px;
126 padding: 0 8px; 129 height: 40px;
127 height: 40px; 130 line-height: 40px;
128 line-height: 40px; 131 border: 1px solid #6bc1fc;
129 border: 1px solid #6bc1fc;
130 }
131 } 132 }
132 } 133 }
133 .bottom-wrapper {
134 padding: 32px 120px 24px;
135 text-align: right;
136 }
137 } 134 }
135 .bottom-wrapper {
136 padding: 32px 120px 24px;
137 text-align: center;
138 }
139 }
138 </style> 140 </style>
......