1. 头像修改密码

src/option/user/info.js

@@ -1,82 +1,89 @@
-export default {
+// import website from "../../config/website";
-  tabs: true,
+import { Message } from 'element-ui';
-  tabsActive: 1,
+export const userInfoOption = {
-  column: [{ label: "头像", prop: "avatar",display:false}],
+  column: [{
-  group: [
+    label: '头像',
-    {
+    prop: 'avatar',
-      label: "个人信息",
+    type: 'upload',
-      prop: "info",
+    listType: 'picture-img',
-      column: [
+    propsHttp: {
-        {
+      res: 'data',
-          label: "头像",
+      url: 'link',
-          type: "upload",
-          listType: "picture-img",
-          propsHttp: {
-            res: "data",
-            url: "link",
-          },
-          canvasOption: {
-            text: " ",
-            ratio: 0.1,
-          },
-          action: "/api/blade-resource/oss/endpoint/put-file",
-          tip: "只能上传jpg/png用户头像，且不超过500kb",
-          span: 12,
-          row: true,
-          prop: "avatar",
-        },
-        {
-          label: "姓名",
-          span: 12,
-          row: true,
-          prop: "realName",
-        },
-        {
-          label: "用户名",
-          span: 12,
-          row: true,
-          prop: "name",
-        },
-        {
-          label: "手机号",
-          span: 12,
-          row: true,
-          prop: "phone",
-        },
-        {
-          label: "邮箱",
-          prop: "email",
-          span: 12,
-          row: true,
-        },
-      ],
     },
-    {
+    fileType: 'img',//img/video/audio,
-      label: "修改密码",
+    accept: 'image/png, image/jpeg',
-      prop: "password",
+    action: '/api/blade-resource/oss/endpoint/put-file',
-      column: [
+    tip: '只能上传jpg/png用户头像，且不超过500kb',
-        {
+    span: 12,
-          label: "原密码",
+    row: true,
-          span: 12,
+    uploadBefore: (file, done, loading) => {
-          row: true,
+      if (['image/png', 'image/jpeg'].indexOf(file.type) == -1) {
-          type: "password",
+        Message({
-          prop: "oldPassword",
+          message: '只能上传jpg/png用户头像',
-        },
+          type: 'error'
-        {
+        });
-          label: "新密码",
+        loading();
-          span: 12,
+      }
-          row: true,
+      else {
-          type: "password",
+        done();
-          prop: "newPassword",
+      }
-        },
+    }
-        {
+  }, {
-          label: "确认密码",
+    label: '用户名',
-          span: 12,
+    span: 12,
-          row: true,
+    row: true,
-          type: "password",
+    prop: 'realName'
-          prop: "newPassword1",
+  }, {
-        },
+    label: '手机号',
-      ],
+    span: 12,
-    },
+    row: true,
-  ],
+    prop: 'phone',
-};
+  }, {
+    label: '邮箱',
+    prop: 'email',
+    span: 12,
+    row: true,
+  }]
+}
+export const userPwdOption = {
+  column: [{
+    label: '原密码',
+    span: 12,
+    row: true,
+    type: 'password',
+    prop: 'oldPassword',
+    rules: [{
+      required: true,
+      message: "请输入原密码",
+      trigger: "blur"
+    }]
+  }, {
+    label: '新密码',
+    span: 12,
+    row: true,
+    type: 'password',
+    prop: 'newPassword',
+    rules: [{
+      required: true,
+      message: "请输入新密码",
+      trigger: "blur"
+    }]
+  }, {
+    label: '确认密码',
+    span: 12,
+    row: true,
+    type: 'password',
+    prop: 'newPassword1',
+    rules: [{ validator: validatePass2, trigger: 'blur' }]
+  }]
+}
+
+const validatePass2 = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'));
+  } else if (value !== this.obj.password) {
+    callback(new Error('两次输入密码不一致!'));
+  } else {
+    callback();
+  }
+};

src/page/index/top/index.vue

@@ -14,7 +14,7 @@
         </div>
       </el-tooltip> -->
       <div class="avatar">
-        <img :src="userInfo.avatar" alt="" width="56px" height="56px" />
+        <img :src="userInfo.avatar" alt="" width="56px" height="56px" style="border-radius:50%;"/>
       </div>
       <!-- <div style="margin-right:10px;">
         {{userInfo.real_name}}
@@ -56,9 +56,6 @@ export default {
     topNotice,
   },
   created() {},
-  mounted() {
-    console.log(this.userInfo);
-  },
   computed: {
     ...mapGetters(["userInfo", "tag"]),
   },

src/store/modules/user.js

@@ -262,6 +262,8 @@ const user = {
       setStore({name: 'tenantId', content: state.tenantId})
     },
     SET_USER_INFO: (state, userInfo) => {
+      console.log(state)
+      console.log(userInfo)
       if (validatenull(userInfo.avatar)) {
         userInfo.avatar = "/img/bg/img-logo.png";
       }

src/views/system/userinfo.vue

@@ -1,94 +1,208 @@
 <template>
   <div>
     <basic-container>
-      <avue-form :option="option"
+      <avue-tabs :option="tabOption" @change="handleTabClick"></avue-tabs>
-                 v-model="form"
+      <div v-if="index === 0">
-                 @tab-click="handleTabClick"
+        <avue-form
-                 @submit="handleSubmit"></avue-form>
+          :option="userInfoOption"
+          v-model="form"
+          @submit="handleSubmit"
+        ></avue-form>
+      </div>
+      <div v-else-if="index === 1">
+        <avue-form
+          ref="pwdForm"
+          :option="userPwdOption"
+          v-model="pwdform"
+          @submit="handleSubmit2"
+        >
+        </avue-form>
+      </div>
     </basic-container>
   </div>
 </template>
 
 <script>
-  import option from "@/option/user/info";
+import { userInfoOption } from "@/option/user/info";
-  import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";
+import { getUserInfo, updateInfo, updatePassword } from "@/api/system/user";
-  import md5 from 'js-md5';
+import md5 from "js-md5";
-  import func from "@/util/func";
+import func from "@/util/func";
+import {mapGetters} from "vuex";
 
-
+export default {
-  export default {
+  data() {
-    data() {
+    var validatePass = (rule, value, callback) => {
-      return {
+      let reg =
-        index: 0,
+        /^(?=.*\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{6,18}$/;
-        option: option,
+      if (value === "") {
-        form: {}
+        callback(new Error("请输入新密码"));
-      };
+      } else if (!reg.test(value)) {
-    },
+        callback(
-    created() {
+          new Error("必须包含6-18位数字、大小写字母、特殊字符，不包含下划线")
-      this.handleWitch();
+        );
+      } else {
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.pwdform.newPassword) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      index: 0,
+      tabOption: {
+        column: [
+          {
+            label: "个人信息",
+            prop: "0",
+          },
+          {
+            label: "修改密码",
+            prop: "1",
+          },
+        ],
+      },
+      userInfoOption: userInfoOption,
+      userPwdOption: {
+        column: [
+          {
+            label: "原密码",
+            span: 12,
+            row: true,
+            prop: "oldPassword",
+            name: "oldPassWord",
+            rules: [
+              {
+                required: true,
+                message: "请输入原密码",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "新密码",
+            span: 12,
+            row: true,
+            type: "password",
+            prop: "newPassword",
+            rules: [
+              {
+                required: true,
+                message: "请输入新密码",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "确认密码",
+            span: 12,
+            row: true,
+            type: "password",
+            prop: "newPassword1",
+            rules: [
+              {
+                required: true,
+                message: "请输入确认密码",
+                trigger: "blur",
+              },
+              { validator: validatePass2, trigger: "blur" },
+            ],
+          },
+        ],
+      },
+      form: {},
+      pwdform: {},
+    };
+  },
+  created() {
+    this.handleWitch();
+  },
+    computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  methods: {
+    handleSubmit(form, done) {
+      updateInfo(form).then(
+        (res) => {
+          if (res.data.success) {
+            this.$message({
+              type: "success",
+              message: "修改信息成功!",
+            });
+            this.handleWitch()
+          } else {
+            this.$message({
+              type: "error",
+              message: res.data.msg,
+            });
+          }
+          done();
+        },
+        (error) => {
+          window.console.log(error);
+          done();
+        }
+      );
     },
-    methods: {
+    handleSubmit2(form, done) {
-      handleSubmit(form, done) {
+      updatePassword(
-        if (this.index === 0) {
+        md5(form.oldPassword),
-          updateInfo(form).then(res => {
+        md5(form.newPassword),
-            if (res.data.success) {
+        md5(form.newPassword1)
-              this.$message({
+      ).then(
-                type: "success",
+        (res) => {
-                message: "修改信息成功!"
+          if (res.data.success) {
-              });
+            this.$message({
-            } else {
+              type: "success",
-              this.$message({
+              message: "修改密码成功!",
-                type: "error",
+            });
-                message: res.data.msg
+          } else {
-              });
+            this.$message({
-            }
+              type: "error",
-            done();
+              message: res.data.msg,
-          }, error => {
+            });
-            window.console.log(error);
+          }
-            done();
+          done();
-          })
+        },
-        } else {
+        (error) => {
-          updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
+          window.console.log(error);
-            if (res.data.success) {
+          done();
-              this.$message({
-                type: "success",
-                message: "修改密码成功!"
-              });
-            } else {
-              this.$message({
-                type: "error",
-                message: res.data.msg
-              });
-            }
-            done();
-          }, error => {
-            window.console.log(error);
-            done();
-          })
         }
-      },
+      );
-      handleWitch() {
+    },
-        if (this.index === 0) {
+    handleWitch() {
-          getUserInfo().then(res => {
+      if (this.index === 0) {
-            const user = res.data.data;
+        getUserInfo().then((res) => {
-            this.form = {
+          const user = res.data.data;
-              id: user.id,
+          this.form = {
-              avatar: user.avatar,
+            id: user.id,
-              name: user.name,
+            avatar: user.avatar,
-              realName: user.realName,
+            name: user.name,
-              phone: user.phone,
+            realName: user.realName,
-              email: user.email,
+            phone: user.phone,
-            }
+            email: user.email,
+          };
+          this.$store.commit("SET_USER_INFO", {
+           avatar: user.avatar,
+           real_name: user.realName,
           });
-        }
+        });
-      },
-      handleTabClick(tabs) {
-        this.index = func.toInt(tabs.index);
-        this.handleWitch();
       }
-    }
+    },
-  };
+    handleTabClick(tabs) {
+      if (tabs.prop != "1") {
+        this.$refs.pwdForm.resetForm();
+      }
+      this.index = func.toInt(tabs.prop);
+      this.handleWitch();
+    },
+  },
+};
 </script>
 
-<style>
+<style></style>
-</style>